The Posts module allows you to display posts (aka News Articles), pages, or custom post types in a variety of layouts, such as columns, gallery, list, or masonry. You can display posts by taxonomy or author using the filter options.

Layout tab​ #

Using the Layout tab, you can customize the layout and control which elements are displayed in your posts, such as the featured image, date, and comments.

Layout​ #

Columns​ #

Posts are displayed in top-aligned rows. Title, metadata, and content appear under featured image. Columns layout lets you choose number of columns.

Masonry​ #

Posts are displayed in columns but vertical spacing is fit to the height of the post (unless the equal heights setting is selected). Masonry layout lets you choose the width of each post in pixels.

Gallery​ #

Post title and metadata are overlaid on the featured image and displayed on mouseover. There is no option to display content. if there is no featured image, an image icon is displayed. Gallery layout offers no options to set number of columns or post width.

List​ #

The posts are listed vertically in a single column.

Default​ #

Use the layout selected from the Layout option.

Custom​ #

Enables the Custom Post Layout Editor, allowing you to customize the post layout using HTML, shortcodes, and Beaver Themer field connections. A CSS tab is also available in the Custom Post Layout Editor for entering CSS that applies only to that Post module.

Equal Heights​ #

Equalizes the height of all posts to fit the post with the greatest height.

Columns​ #

Control the maximum number of columns for the Post module. Automatically adjusts as screen size reduces. The Column option supports the Responsive Toggle allowing you to choose a different number of columns per-device.

Post width​ #

Width of each post display in pixels. The default value is 300px.

Post Spacing​ #

Allows you to control the distance between the individual posts horizontally and vertically, in pixels. The Post spacing value does not affect the spacing above the top layer of posts, but it does affect the spacing below the bottom layer of posts.

Post Padding​ #

Allows you to control the padding inside the individual posts. The featured image is not affected by this setting, so if there is a featured image the upper post padding occurs between the featured image and the post text.

Posts Element​ #

Allows you to choose an appropriate HTML5 sectioning content element replacing the default <div>. Choose between <div> (default), <article>, and <li>. Using these elements on your pages gives your content more semantic meaning, improving accessibility and machine-readability.

Posts Element Class​ #

Allows you assign a custom class to the <div class="fl-post-grid-post">.

<div class="fl-post-grid-post my-custom-class"> <!-- Post Element Class -->
  <div class="fl-post-text">
    <h2 class="fl-post-title">Hello World</h2>
    <div class="fl-post-excerpt">
      <p>Welcome to WordPress. This is your first post. Edit or delete it, then start writing!</p>
    </div>
    <div class="fl-post-more-link">
      <a href="https://my-website.com/hello-world" title="Read More...">Read More...</a>
    </div>
  </div>
</div>

Post Title Tag​ #

Choose an appropriate heading tag for the post title. You can choose between <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>.

Default is <h2>.

Featured Image​ #

Show or hide the post’s featured image.

Fallback image​ #

Choose a fallback image to appear for posts without featured images.

Image position​ #

Set the position of the featured image relative to post title or post content.

• Columns & Masonry – Above Post Title or Above Post Content.
• List – Above Title, Above Content, Left, Left Content, Right, and Right Content.

Image Size​ #

Choose which image size from the WordPress Media Library to use.

Image Spacing​ #

Adds padding to the around the image. Where the spacing occurs depends on the Image position setting.

• Above Title – The number of pixels above, left, and right of the image.
• Above Content – The number of pixels left and right of the image.
• Left or Left Content (List only) – Spacing between the image and the text to the right.
• Right or Right Content (List only) – Spacing between the image and the text to the left.

Image width​ #

When Image position is Left, Left Content, Right or Right Content the Image width setting determines the column width for the image.

Author​ #

Show or hide the post author.

Enable Author Link​ #

Enable or disable the author link.

Date​ #

Show or hide the post date.

Date format​ #

Select Default to use the date format specified for your site.

Comments​ #

Show or hide the number of comments.

Separator​ #

Choose the character that separates the display of author, date, and comments on the same line.

The default is the Pipe | symbol.

Terms​ #

Show or hide the post terms.

Terms Label​ #

Choose the text that prefixes the post terms. The default is Posted in. For example, Posted in Uncategorized.

Terms Separator​ #

Choose the character that separates the display of terms on the same line.

The default is a comma ,.

Content​ #

Show or hide post content. If set to Yes, the post excerpt is displayed, with an ellipsis of three dots at the end to show there is more content.

Content Type​ #

• Excerpt – Show the post excerpt.
• Full Text – Show the full content of each post.
  If Full Text is selected, the Content Length option is no longer available.

Content length​ #

Set a custom number of words in the post excerpt to display.

The default is 55.

More link​ #

Show or hide the Read more link after the post content. If set to Show, you can also customize the default Read more text.

More Link Text​ #

Customize the default Read more… text.

Events Calendar​ #

The Events Calendar options appear in the Layout tab.

• Event Date
  Show or hide the event date.
• Event Venue
  Show or hide the event venue.
• Event Address
  Show or hide the event address.
• Event Cost
  Show or hide the event cost.
• Events Order By
  The choices are: Default, Start Date, and End Date. Selecting Default uses the sorting option via the Content tab.
• Events Order
  Choose between descending or ascending.
• Show Events
  The choices are: Future Events, Past Events, Todays Events, All Events, and Featured Events.

Style tab​ #

The Style tab allows you to style the individual elements of the post, including the post title, contents, and the read more link, by adjusting the colors and typography.

Post alignment​ #

Sets the overall alignment of the post title, post info, and post content. This setting can be overridden for each component in the Typography subsection for each component (title, info, content) in the Text section of the Style tab.

Post Background Color​ #

Set a background color for each post using the color picker.

Border​ #

The Border section has settings for border, radius, and shadow.

Title Color​ #

Set the color of the post title.

Title Typography​ #

You can style the title of the post using the Typography options, including font size, family, line height, and more.

Post Info Color​ #

Color of the post info (author, date, comments, separator).

Post Info Typography​ #

You can style the post info using the Typography options, including font size, family, line height, and more.

Content Color​ #

Color of post content.

Content Typography​ #

You can style the content of the post using the Typography options, including font size, family, line height, and more.

Link Color​ #

Sets the color of links in full-text post content or custom excerpts.

Link Hover Color​ #

Sets the hover color of links in full-text post content or custom excerpts.

Gallery Layout​ #

The following styling options are available for the Gallery layout only.

• Hover transition The type of transition when a user mouses over a post in the display: fade, slide up or down, scale up or down.
• Overlay Text Color
  The color of text overlaid on the featured image.
• Overlay Background Color
  The color of the overlay placed on the featured image. This setting is generally used to make the overlay text color more legible. Opacity is set in the color picker.
• Use Icon for Posts
  Choose Yes to display an icon on the line above or below the text.
• Post Icon Select the icon you want to display.
• Post Icon Position
  Above or below the text.
• Post Icon Color
  Set the Icon color.
• Post Icon Size
  Icon size in pixels.

WooCommerce​ #

The WooCommerce options appear in the Style tab when WooCommerce is installed.

• Product Sale Background
  Set the Sale background color.
• Product Sale Text Color
  Set the Sale text color.
• Product Rating Foreground
  Set the product rating foreground color.
• Product Rating Background
  Set the product rating background color.
• Product Rating Font Size
  Set the product rating font size.
• Product Price Text Color
  Set the product price color.
• Product Price Font Size
  Set the product price font size.

WooCommerce Cart Button​ #

• Background Color
  Set the background color for the add to cart button.
• Text Color
  Set the text color for the add to cart button.
• Hover Background Color
  Set the background hover color for the add to cart button.
• Hover Text Color
  Set the text hover color for the add to cart button.

Content tab​ #

The Content tab allows you to control the source of your posts and what content is displayed using the filter options.

Source​ #

Choose between Main Query or Custom Query. The default query is Custom Query.

Main Query​ #

The main query is used to display the primary content on that page or post. Most of the time, the main query will not be appropriate for Beaver Builder layouts and a custom query should be used instead.

Custom Query​ #

The custom query is the most appropriate option for Beaver Builder layouts, as it reflects the configuration of the custom query options and filters.

You can use the custom query option if you wish to display specific pages, posts, or custom post types on any of your pages or posts. For example, your homepage could be used as a showcase for WooCommerce products.

Post Type​ #

Select the post type(s) you wish to populate the Post module with. You can choose pages, posts, or a custom post type, such as WooCommerce Products or a custom post type that you created yourself.

You can also select more than one post type with the Post Type option. For example, you can display both posts and pages, or both posts and WooCommerce products.

Order​ #

Descending or ascending, and whether it is by date, numerical, or alphabetical depends on the Order by setting.

Order By​ #

The choices are: Author, Comment count, Date, Date last modified, ID, Menu order, Meta value (alphabetic or numeric), Random, Title, Selection order.

• Menu order can be used with a plugin such as Post Types Order to order the posts or custom posts in the same way you arrange them in the back end.
• Meta value option enables ordering by a custom field. If you select either the alphabetic or numeric Meta value option, a Meta key field appears so you can enter the key (meta_key).
• Selection Order allows you to use drag and drop to reorder posts, pages, or custom post types added to the Filter settings. The order in which your posts, pages, or custom post types appear is reflected in the order of the items that appear on the page.
  INFO

  Selection order works only for selected posts, pages, and custom posts. It doesn’t work for selected categories, tags, or authors.

  The Ascending and Descending settings don’t affect the order of posts when Selection order is used.

Offset​ #

The Offset option allows you to exclude a certain number of pages or posts from the Post module.

For example, using the Offset option, you can skip the most recent post on your website on pages that use more than one Post module.

Exclude Current Post​ #

Excludes the current post from the query. This is useful when you are using the Post module to create a list of related posts on a single post page.

Filter​ #

The Filter section allows you to include or exclude a set of posts, pages or custom post types by title, taxonomy, and author.

Filter options vary depending on the post type selected. The post category and tag filters will not be available if you select Products (WooCommerce).

• Post – Include or exclude a post or multiple posts, by typing the post title(s).
• Page – Include or exclude a page or multiple pages, by typing the page title(s)
• Custom Post Type – Include or exclude a set of posts from the custom post type, by the custom post type title(s).
• Categories – Include or exclude posts assigned to a specific category.
• Custom Taxonomies – Include or exclude custom post types assigned to custom taxonomies. For example, if WooCommerce is installed, the Product Categories and Product Tag taxonomies are available.
  INFO

  Match related categories except, is useful in Singular-type Themer layouts when you want to use the Posts module to display a list of related posts, and you want to display the related posts in a family of categories except for the specific categories that you name.

• Tags – Include or exclude posts assigned to a specific tag.
• Authors – Include or exclude posts or pages by specific authors.

Custom Field Filter​ #

The Custom Field Filter section allows you to include or exclude a set of posts, pages or custom post types by custom field. You can add as many custom fields as you want.

Relation​ #

The Relation option allows you to apply logic to filter by custom fields. The rules operate with AND or OR logic.

Edit/Add Custom Field​ #

• Label
  Labels are used to identify custom fields. They appear in the Custom Field Filter section.
• Meta Key
  Custom field key or field name.
• Meta Value
  Custom field value.
• Type
  A list of all available field types supported. Choose between:
  • Numeric
  • Binary
  • Text
  • Date
  • Date Time
  • Decimal
  • Signed
  • Time
  • Unsigned
• Compare
  You can use the Compare option to check whether or not the field value matches, or if it is greater than, less than, or the same as, depending on the comparison operator. Choose from the following operators:
  • Equals
  • Does not equal
  • Greater than
  • Less than
  • Greater than or equal to
  • Less than or equal to
  • Exists
  • Not Exists

Pagination tab​ #

The Pagination tab has settings that let you divide a large collection of posts into multiple pages.

Pagination style​ #

• Numbers
  The pagination appears as numbers under the posts, and when a different number is clicked, a new page loads with the new set of posts.
• Scroll
  A new set of posts are loaded into subsequent rows on the same page as the user scrolls down.
• Load More Button
  The Load More Button appears under the initial set of posts, and when clicked it generates the next set of posts. The user must keep clicking to get each next set of posts. This setting works better than Scroll when you want your users to have more control over the display, or when network bandwidth is low and you don’t want to use resources loading more sets of posts unless the user really wants to see them.
  TIP

  You can use the Load More Button style options to control the button’s background, text, and icon colors.

• None
  No Pagination. Use this setting when you want to display only a subset of posts. For example, you might want to display only the three most recent posts.

Posts Per Page​ #

Determines how many posts constitute each set. The default is 10 posts.

No Results Message​ #

The message displayed when there are no posts to display.

Show Search​ #

Show or hide a search form when no posts are found. See the screenshot below the table.

Load More Button Styling​ #

This section appears when Pagination Style is set to Load More Button.

• Button Text
  The text that appears on the Load More Button.
• Button Icon
  Optional icon to appear on the button. If you select an icon, there are two additional fields:
  • Icon position: Before or after the button text.
  • Icon visibility: The icon can be always visible or appear on hover only.
• Button Width
  • Auto Width: Width adjusts to fit the text and icon.
  • Full Width: The width expands to the content area minus the module’s margin settings.
• Button Padding
  Set a specific padding value in pixels. Click the Link Value icon to automatically make all four padding values the same.
• Button Text Color
  Set the button text color in the resting state.
• Button Text Hover Color
  Set the button color on hover. If this setting is left blank, the Text color setting applies for hover also.
• Button Typography
  See the Typography article for more information.
• Button Background Color
  Set the fill color for the button in the resting state.
• Button Background Hover Color
  Set the button’s fill color on hover. If this setting is left blank, the Background Color setting applies to hover also.
• Button Background Style
  • Flat: consistent fill color
  • Gradient: gradient of the background color, lighter on top and darker on the bottom.
• Button Background Animation
  Disabled by default. If set to Enabled, there’s a 0.2-second linear transition from resting state to hover state.
• Button Border
  See the Border article for more information.
• Button Border Hover Color
  Set the border hover color for the button.

Advanced tab​ #

There are all the usual Advanced tab settings for margins, visibility, animations, and advanced HTML settings.

See the Advanced tab for more information.

Sticky Posts​ #

The Sticky Post feature in WordPress allows you to place a post at the top of the Posts page (blog), regardless of when it was published, and it will remain there until a new sticky post is published.

By default, the Post module ignores the sticky posts feature and displays them in the order specified in the Order By option.

You can override this behavior by using the fl_builder_loop_query_args_filter filter.

function fl_builder_loop_query_args_filter( $query_args ) {
    $query_args['ignore_sticky_posts'] = false;
    return $query_args;
}
add_filter( 'fl_builder_loop_query_args', 'fl_builder_loop_query_args_filter' );