Logo
Logo

Post List

The Post List element allows you to display a list of posts from your WordPress site with customizable settings for content, layout, and design. You can control the appearance of post images, titles, metadata, and buttons, as well as configure query and pagination options.

Content Controls

Post

These controls let you configure how each post in the list appears, including settings for images, titles, metadata, and more. Customize what elements to display and how they should look to create an engaging post list. You can also choose fallback options and formatting preferences.

  • Image – Configure the post image settings.
    • Disable – Turn off the post image.
    • Fallback Image – Set a fallback image if no post image is available.
    • Size – Choose the size of the fallback image. (This control is only available when a fallback image is set.)
  • Title – Configure the post title settings.
    • Disable – Turn off the post title.
    • Tag – Select the HTML tag for the post title.
  • Meta – Configure the post metadata settings.
    • Disable – Turn off the post metadata.
    • Meta – Choose which metadata to display.
    • Separator – Set a separator for metadata items.
    • Link – Enable or disable links in the metadata.
  • Taxonomy – Configure the taxonomy settings for the post.
    • Disable – Turn off the post taxonomy.
    • Type – Select the type of taxonomy to display.
    • Count – Set the number of taxonomy terms to show.
    • Separator – Set a separator for taxonomy terms.
    • Link – Enable or disable links for taxonomy terms.
  • Content – Configure the post content settings.
    • Disable – Turn off the post content.
    • Type – Choose whether to display full content or an excerpt.
    • Excerpt Length – Set the length of the excerpt. (This control is only available when ‘excerpt’ is selected.)
  • Button – Configure the settings for the post button.
    • Disable – Turn off the post button.
    • Button Text – Set the text for the button.
  • Open In New Tab – Enable this option to open the button link in a new tab.
  • Tag – Select the HTML tag for the button.

Query

These controls let you define which posts to display in the list by setting up a query. You can filter posts based on various criteria, such as categories, tags, and custom fields. This ensures the displayed posts match your desired content strategy.

  • Query – Set up the parameters for retrieving posts.

Pagination

These controls manage how posts are paginated within the list. You can choose the pagination style and customize the appearance and behavior of pagination elements.

  • Pagination – Select the pagination type.
  • Previous Text – Set the text for the previous page button. (This control is only available for certain pagination types.)
  • Next Text – Set the text for the next page button. (This control is only available for certain pagination types.)
  • Show All Page Numbers – Enable this option to display all page numbers. (This control is only available for certain pagination types.)
  • Load More Text – Set the text for the ‘Load More’ button. (This control is only available when ‘Load More’ pagination is selected.)

Filter Bar

These controls allow you to add a filter bar to the post list, enabling users to filter posts based on the criteria you set. Customize the appearance and behavior of the filter bar to match your site’s design and functionality needs.

  • Enable – Turn on the filter bar.
  • Type – Choose the filter bar type. (This control is only available when the filter bar is enabled.)
  • All Filter – Enable an “All Filter” option. (This control is only available when the filter bar is enabled.)
  • All Label – Set the label for the “All Filter” option. (This control is only available when the ‘All’ filter is enabled and the filter bar is enabled.)
  • Sort By – Choose how the Filter Bar is sorted.
  • Hide Uncategorized – Hide posts that don’t have a category.

Design Controls

Post

These controls let you style the individual posts within the list, including settings for containers, images, titles, and more. Customize the visual appearance to create a cohesive and attractive layout. Adjustments can include background colors, borders, padding, and alignment.

  • Container – Customize the post container settings.
    • Background – Set the background color for the post container.
    • Borders – Configure the border settings for the post container.
      • Radius – Set the border radius for the post container.
      • Styling – Choose the border style for the post container.
      • Shadow – Add a shadow effect to the post container.
    • Padding – Configure the padding inside the post container.
    • Alignment – Align the content within the post container.
  • Image – Customize the post image settings.
    • Position – Set the position of the post image.
    • Stack Vertically At – Choose when to stack the image vertically. (This control is only available when the image position is set to left or right.)
    • Space – Define the space around the post image.
    • Borders – Configure the border settings for the post image.
      • Radius – Set the border radius for the post image.
      • Styling – Choose the border style for the post image.
      • Shadow – Add a shadow effect to the post image.
    • Width – Set the width of the post image.
    • Aspect Ratio – Define the aspect ratio for the post image.
  • Title – Customize the post title settings.
    • Typography – Set the typography for the post title.
    • Space Below – Set the space below the post title.
    • Order – Define the order of the post title.
  • Meta – Customize the post metadata settings.
    • Text – Set the text styling for metadata.
    • Separator – Choose the color for the metadata separator.
    • Space Between – Set the space between metadata items.
    • Space Below – Define the space below the metadata.
    • Order – Set the order of the metadata.
  • Taxonomy – Customize the taxonomy settings for the post.
    • Text – Set the text styling for taxonomy items.
    • Separator – Choose the color for the taxonomy separator.
    • Space Between – Set the space between taxonomy items.
    • Space Below – Define the space below the taxonomy section.
    • Order – Set the order of the taxonomy items.
  • Content – Customize the content settings for the post.
    • Typography – Set the typography for the post content.
    • Space Below – Define the space below the post content.
    • Order – Set the order of the post content.
  • Button – Customize the post button settings.
    • Style – Choose the button style.

List

These controls manage the overall layout and behavior of the post list. You can set the width, layout style, and configure settings for sliders if used. These settings help in organizing the list and ensuring a consistent design.

  • Width – Set the width of the post list.
  • Layout – Choose the layout style for the post list.
  • Slider – Configure the slider settings for the post list. (This control is only available when the layout is set to slider.)
    • Settings – Access slider settings.
      • Effect – Choose the transition effect for the slider.
      • Coverflow – Adjust the coverflow settings for the slider. (This control is only available when the effect is set to coverflow.)
        • Shadow – Add a shadow effect to the coverflow slider.
        • Depth – Set the depth of the coverflow effect.
        • Rotate – Adjust the rotation for the coverflow effect.
        • Stretch – Modify the stretch for the coverflow effect.
      • Speed – Set the speed of slider transitions.
      • Infinite – Enable infinite looping of the slider.
      • Center Slides – Center the slides in the slider. (This control is only available when infinite looping is enabled.)
      • Autoplay – Enable autoplay for the slider.
      • Autoplay Settings – Configure autoplay settings for the slider. (This control is only available when autoplay is enabled.)
        • Speed – Set the speed for autoplay transitions.
        • Stop On Interaction – Pause autoplay on user interaction.
        • Pause On Hover – Pause autoplay when hovering over the slider.
      • Advanced – Access advanced slider settings.
        • Swipe On Scroll – Enable swipe interaction with scroll.
        • Auto Height – Automatically adjust slider height based on content.
        • Between Slides – Set spacing between slides.
        • Slides Per View – Define the number of slides visible at once. (This control is only available when the effect is not ‘Flip’ or ‘Fade’.)
        • Initial Slide – Set the initial slide to be viewed.
        • One Per View At – Set a breakpoint where only one slide is visible.
        • Slides Per Group – Set how many slides are grouped together.
        • Disable Keyboard Controls – Disables the ability to control the Slider with a keyboard.
        • Play Animation On – Choose if animations within a slide start when the transition starts or when the transition ends.
    • Arrows – Customize the navigation arrows for the slider.
      • Disable – Toggle the visibility of navigation arrows.
      • Color – Choose a color for the arrows. (This control is only available when arrows are enabled.)
      • Size – Set the size of the arrows. (This control is only available when arrows are enabled.)
      • Overlay – Enable arrow overlay on slides. (This control is only available when arrows are enabled.)
      • Space To Slides – Adjust space between arrows and slides. (This control is only available when arrows are enabled.)
      • Space To Edge – Set space between arrows and the edge of the slider. (This control is only available when arrows are enabled.)
      • Custom Icons – Use custom icons for arrows. (This control is only available when arrows are enabled.)
        • Next – Set the icon for the ‘Next’ arrow.
        • Previous – Set the icon for the ‘Previous’ arrow.
    • Pagination – Customize the pagination settings for the slider.
    • Type – Select the pagination type.
    • Bullets – Configure bullet pagination settings. (This control is only available when the type is not ‘Progress Bar’, ‘Fraction’, or ‘None’.)
      • Color – Choose a color for pagination bullets.
      • Size – Set the size of pagination bullets.
      • Space Between – Adjust space between pagination bullets.
      • Radius – Set the border radius for pagination bullets.
    • Fraction – Configure fraction pagination settings.
    • Progress Bar – Configure progress bar pagination settings. (This control is only available when the type is ‘Progress Bar’.)
      • Background – Set the background color for the progress bar.
      • Progress – Set the progress color for the progress bar.
      • Height – Adjust the height of the progress bar.
      • Position – Set the position of the progress bar.
    • Overlay – Enable pagination overlay on slides. (This control is only available when the type is not ‘None’.)
    • Margin – Set margin around the pagination. (This control is only available when the type is not ‘None’.)

Pagination

These controls help you design the pagination for your post list, including alignment, spacing, and typography. Customize these settings to ensure the pagination matches your site’s design and improves navigation.

  • Alignment – Set the alignment for the pagination.
  • Space Above – Define the space above the pagination.
  • Space Between – Set the space between pagination items. (This control is only available for certain pagination types.)
  • Typography – Customize the typography for pagination items. (This control is only available for certain pagination types.)
  • Active Color – Set the color for active pagination items. (This control is only available for certain pagination types.)
  • Display As Buttons – Enable pagination items to be displayed as buttons. (This control is only available for certain pagination types.)
  • Buttons – Configure the button settings for pagination. (This control is only available when pagination is displayed as buttons.)
    • Size – Set the size of the pagination buttons.
    • Border – Choose the border color for pagination buttons.
    • Background – Set the background color for pagination buttons.
    • Radius – Define the border radius for pagination buttons.
    • Active – Customize the active state of pagination buttons.
      • Border – Set the border color for active pagination buttons.
      • Background – Set the background color for active pagination buttons.
      • Text – Set the text color for active pagination buttons.
  • Load More Button – Configure the ‘Load More’ button settings. (This control is only available when ‘Load More’ pagination is selected.)
    • Style – Choose the style for the ‘Load More’ button.
  • Show Loading Icon In Builder – Display a loading icon in the builder. (This control is only available when infinite pagination is selected.)
  • Loading Icon – Configure the loading icon settings. (This control is only available when infinite pagination is selected.)
    • Size – Set the size of the loading icon.
    • Color – Choose the color for the loading icon.
  • Dots – Customize the pagination dots settings. (This control is only available for certain pagination types.)
    • Color – Set the color for pagination dots.
    • Nudge Y – Adjust the vertical position of pagination dots. (This control is only available when pagination is displayed as buttons.)
  • Stack Horizontally – Arrange pagination items horizontally.
  • Vertical At – Set a breakpoint for switching to vertical pagination. (This control is only available when horizontal stacking is enabled.)

Filter Bar

These controls allow you to style and position the filter bar, making it easy for users to filter the post list based on set criteria. Customize the layout, appearance, and behavior to enhance the user experience and match your site’s design.

  • Vertical – Enable a vertical layout for the filter bar.
  • Horizontal At – Set a breakpoint to switch the filter bar to horizontal layout. (This control is only available when vertical layout is enabled.)
  • Style – Choose the style for the filter bar.
  • Position – Set the position of the filter bar. (This control is only available when vertical layout is enabled.)
  • Position – Set the position of the filter bar when vertical layout is not enabled.
  • Space Between – Set the space between filter bar items. (This control is not available for certain styles.)
  • Space After – Define the space after the filter bar. (This control is not available for certain positions.)
  • Bar – Customize the bar style for the filter bar. (This control is only available when the bar style is selected.)
    • Separator – Set the separator color for the filter bar.
    • Radius – Define the border radius for the filter bar.
    • Shadow – Add a shadow effect to the filter bar.
  • Pill Radius – Set the border radius for the filter bar pills. (This control is only available when the pill style is selected.)
  • Separator – Customize the separator for the filter bar tabs. (This control is only available when the tab style is selected.)
    • Color – Choose the color for the separator.
    • Width – Set the width of the separator.
  • Text – Customize the text settings for the filter bar.
    • Typography – Set the typography for the filter bar text.
    • Hover – Set the hover color for filter bar text.
    • Active – Set the active color for filter bar text.
  • Background – Customize the background settings for the filter bar.
    • Inactive – Set the background color for inactive filter bar items.
    • Hover – Set the background color for filter bar items on hover.
    • Active – Set the background color for active filter bar items.
  • Underline – Customize the underline settings for the filter bar. (This control is not available when the pill style is selected.)
    • Hover – Set the underline color for filter bar items on hover.
    • Active – Set the underline color for active filter bar items.
    • Width – Set the width of the underline.
    • Radius – Define the radius for the underline.
  • Padding – Customize the padding for the filter bar.
    • Vertical – Set vertical padding for the filter bar.
    • Horizontal – Set horizontal padding for the filter bar.
  • Icon – Configure the icon settings for the filter bar.
    • Size – Set the size of the filter bar icons. (This control is not available for certain alignments.)
    • Nudge – Adjust the position of the filter bar icons.
      • Nudge X – Set the horizontal nudge for filter bar icons.
      • Nudge Y – Set the vertical nudge for filter bar icons.
    • After Icon – Define the space after the filter bar icons.
  • Responsive – Configure responsive settings for the filter bar.
    • Show as Dropdown – Enable the filter bar to display as a dropdown on smaller screens.
    • Visible At – Set the breakpoint for showing the filter bar as a dropdown. (This control is only available when the dropdown option is enabled.)
    • Dropdown Styles – Customize the styles for the dropdown filter bar. (This control is only available when the dropdown option is enabled.)
    • Background – Set the background color for the dropdown filter bar.
    • Borders – Configure the border settings for the dropdown filter bar.
    • Radius – Set the border radius for the dropdown filter bar.
    • Styling – Choose the border style for the dropdown filter bar.
    • Shadow – Add a shadow effect to the dropdown filter bar.
    • Padding – Configure the padding for the dropdown filter bar.
    • Padding – Set the padding values for the dropdown filter bar.
    • Typography – Set the typography for the dropdown filter bar.
    • Show Affordance – Display an affordance for the filter bar. (This control is only available when the dropdown option is not enabled.)
    • Color – Set the color for the affordance. (This control is only available when the affordance option is enabled.)
  • Transition Effect – Configure the transition effect for the filter bar.

Spacing

These controls manage the spacing around the Post List element, helping you to maintain a well-balanced and visually appealing layout. Adjust margins to ensure proper alignment with other page elements.

  • Margin Top – Set the top margin of the Post List element.
  • Margin Bottom – Set the bottom margin of the Post List element.