10Web Help Center

Hi, how can we help?

Posts Widget

Copy article URL

in this article

The Posts widget allows you to display a list of blog posts or any custom post types on your website. It automatically pulls posts from the WordPress database and presents them in a specified layout and format. You can customize the appearance of each post, including the title, featured image, excerpt, and metadata.

Additional use cases

  • Displaying recent news articles on a news website homepage
  • Highlighting upcoming events on an event management website
  • Featuring portfolio projects on a freelancer’s website
  • Displaying real estate listings on a property management website

Adding Posts widget 

Add the Posts widget to the canvas. For details, see Add elements to a page.

Content tab

Layout

    • Skin: Choose from four skin options: Image top, On image, Image left, and Cards. The content tab options vary based on the selected skin.
    • Slides view: Enable or disable this option. A disabled view allows setting Columns for post layout.
    • Columns: Choose between 1 to 6 columns for post display.
    • Posts per page: Set how many posts should be displayed per page.
    • Show image: Enable or disable images (for Cards skin type only).
    • Image resolution: Select the image size from small thumbnails to full-size.
    • Image ratio: Set the exact aspect ratio of images.
    • Image width: Define the width of the images (available with Image Top and Image Left skins).
    • Title: Show or hide post titles.
    • Title HTML tag: Choose an HTML tag (H1 to H6, div, span, p).
    • Excerpt: Show or hide the excerpt.
    • Apply to custom excerpt: Overrides the excerpts length set in the WordPress editor.
    • Excerpt length: Define the number of words in the excerpt.
    • Meta data: Select metadata to display (author, date, time, comments, modified date). (Available for Cards skin type only).
    • Read More: Show or hide the Read More button.
    • Read More text: Customize the button text using Dynamic Tags if needed.
    • Read More icon: Select an icon from the Icon Library or upload a custom one.
    • Read More icon size: Adjust the icon size.
    • Open in new window: Enable or disable opening posts in a new window when clicking Read More.
    • Badge: Show or hide a badge on posts.
    • Badge on image: Choose whether the badge appears on the image (available with Image Top and Image Left skins).
    • Badge taxonomy: Select the classification for badges.
    • Avatar: Show or hide the author's avatar.

Note:

Avatar position is not available for the Cards skin type.

Meta data

  • Meta data: Select which metadata fields to display (author, date, time, comments, modified date).
  • Meta data order: Arrange the order of metadata display.

Note:

For Cards skin type, metadata is included in the Layout section.

Select posts

  • Source: Choose where the posts come from (Posts, Pages, Landing pages, Products, Galleries, Albums, Gallery tags, Manual Selection, Current Query, Related).

Include

  • Include by: Select posts by Term or Author.
    Term: Select from Categories, Tags, Formats, or custom taxonomies.
    Author: Select posts by a specific author.
    Date: Filter posts by date (All, Past day, Week, Month, Year, Custom).

Note:

If Custom is selected, you can define a before and after date range.

  • Order by: Sort posts by Date, Title, Menu Order, Last Modified, Comment Count, Random.
  • Order: Display posts in ascending (ASC) or descending (DESC) order.
  • Ignore sticky posts: Exclude sticky posts from results.
  • Query ID: Assign a unique ID to a query for server-side filtering.

Exclude

  • Exclude by: Remove posts by Author, Term, Manual Selection, Current Post.
    Term: Exclude specific categories, tags, or formats.
    Author: Exclude posts by a particular author.
  • Avoid duplicates: Enable this option to prevent duplicate posts on the frontend.
  • Offset: Skip a specified number of posts (e.g., setting 2 skips the first two posts).
  • Search and Select: (Available for Related Posts → Manual Selection) Manually exclude specific posts.
  • Fallback: (Available for Related Posts → Manual Selection) Display fallback content when no relevant posts are found.

Pagination

Choose a pagination type:

  • None
  • Numbers
  • Previous/Next
  • Numbers + Previous/Next
  • Load on Click
  • Infinite Scroll

Numbers

  • Page limit: Set the number of posts per page.
  • Shorten: Enable ellipsis for pagination shortening.
  • Alignment: Align pagination controls left, center, or right.
  • Individual pagination: Control pagination separately for multiple Posts widgets on the same page.

Previous/Next

  • Page limit: Define posts per page.
  • Previous label: Customize the previous button text.
  • Next label: Customize the next button text.
  • Alignment: Adjust button alignment.
  • Individual pagination: Enable unique pagination settings per widget.

Numbers + Previous/Next

  • Includes Page Limit, Shorten, Previous/Next Labels, and Alignment options.

Load on Click

  • Spinner: Show a loading spinner.
  • Button text: Customize the Load More button text.
  • Icon: Choose an icon for the button.
  • Icon spacing: Adjust icon spacing.
  • Button ID: Assign a unique ID for analytics tracking.

Infinite Scroll

  • Spinner: Show a loading spinner.
  • No more posts message: Display a custom message when no more posts are available.

No More Post Message (Available for Load on Click and Infinite Scroll paginations)

Alignment: Adjust the message alignment.

Custom Message: Enable to define your custom message.

Style tab

Layout

  • Column gap: Adjust the space between columns.
  • Rows gap: Set space between rows.

Card (for Cards skin type only)

  • Background Color: Sets the background color. 
  • Border Color: Determines the color of the border..
  • Border Width: Adjusts the thickness of the border surrounding each card.
  • Border Radius: Sets the roundness of the corners of each card.
  • Horizontal Padding: This controls the spacing between the content and the left and right edges of the card.
  • Vertical Padding: Similar to horizontal padding, this controls the spacing between the content and the top and bottom edges of the card.
  • Box Shadow: Adds a shadow effect. Learn more about shadows.
  • Hover Effect: Enable the effect that occurs when a user hovers their cursor over the card.
  • Meta Border Color: Specifies the color of the border around metadata (such as author name, date, etc.)

Box

  • Border Width: Adjust the thickness of the border around the box.
  • Border Radius: Set how round the corners of the border should be. For more details, see Border radius tools.
  • Padding: Set the spacing inside the entire box.
  • Content Padding: Adjust the spacing inside just the box’s content.
  • Box shadow: Apply a shadow effect. Learn more about shadows.
  • Background Color: Choose colors for the box in its normal and hover states.
  • Border Color: Select colors for the box’s border in its normal and hover states.

Image

  • Border radius: Set how round the corners of the border should be. For more details, see Border radius tools
  • Spacing: Set space between image and content.
  • CSS filters: Apply filters (Blur, Brightness, Contrast, Saturation, Hue).
  • Vertical alignment: Set image position (Top, Center, Bottom).
  • Image Hover animation: Choose an animation effect (Zoom In, Zoom Out, None).
  • Animation Duration: Choose the speed of the animation you have set.
  • Full height: Enable full-height images.
  • Background Type: Click the Gradient icon to access Gradient Settings.
  • Color: Click the color tile to set the first gradient color under Color.

    Note:

    Location determines where each of the colors will start to fade

  • Second color: Set the second gradient color under the Second color.
  • Location: Adjust the location of the second color to control its spread.
  • Type: Choose the type of gradient: Linear or Radial.
    If you choose Linear: Set the gradient angle to determine the orientation of the color blend.
    If you choose Radial: Select the position from which the color blend should radiate.
  • Position: You can also change the position of the background to Center Center, Center left, Center right, Top Center etc. Choose from the list.

Content

Title

  • Color & typography: Set font styles and colors. For more details see Typography.
  • Text Stroke: Click the ✏️ icon to apply a stroke effect to the page title.
  • Spacing & padding: Adjust title spacing.
  • Alignment: Set text alignment. Choose left, center, or right.

Excerpt

  • Color & typography: Customize excerpt appearance.  For more details see Typography.
  • Spacing & padding: Adjust excerpt spacing.
  • Alignment: Set text alignment. Choose left, center or right.

Avatar

  • Padding: Adjust the spacing of Avatar if you have added one.

Meta

  • Color & typography: Adjust metadata appearance. For more details see Typography.
  • Separator Color: Choose the color of the separator between metadata items.
  • Spacing & padding: Modify metadata spacing.
  • Alignment: Choose metadata alignment.

Read More

  • Color & typography: Customize button style. For more details see Typography.
  • Hover Color and animation: Choose Hover color and animation type for Read more button.
  • Spacing & padding: Adjust button spacing.
  • Alignment: Choose button alignment.

Badge

  • Position: Set badge alignment (left, center, right).
  • Background & text color: Customize badge color.
  • Border Radius: Set how round the corners of the border should be. For more details, see Border radius tools
  • Border width & color: Set the border width and your preferred color.
  • Spacing: Define the spacing around the badge.
  • Padding: Define the distance between the badge border and it’s content.
  • Typography: Customize the font style for the Badge.  For more details see Typography.

Pagination

  • Typography: Customize the font style for the Pagination.  For more details see Typography.
  • Colors: Set colors for Normal, Hover, and Active states.
  • Space between: Adjust spacing between pagination elements.
  • Spacing: Modify the overall spacing around pagination controls.

Advanced tab

You can customize the widget further using the settings available in the Advanced tab. These options provide additional styling and functionality adjustments, allowing you to tailor the widget to better fit your design needs.

in this article