Posts
The Posts module allows you to display posts, pages, or custom post types in a variety of layouts, such as columns, gallery, list, or masonry.
Last updated
Was this helpful?
The Posts module allows you to display posts, pages, or custom post types in a variety of layouts, such as columns, gallery, list, or masonry.
Last updated
Was this helpful?
You can display posts by taxonomy or author using the filter options.
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.
Posts are displayed in top-aligned rows. Title, metadata, and content appear under featured image. Columns layout lets you choose number of columns.
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.
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.
TIP
It is recommended that all featured images have similar dimensions in order to achieve the best results and to maintain consistency
The posts are listed vertically in a single column.
Equalizes the height of all posts to fit the post with the greatest height.
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.
Width of each post display in pixels. The default value is 300px.
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.
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.
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.
Allows you assign a custom class to the <div class="fl-post-grid-post">.
Example
Choose an appropriate heading tag for the post title. You can choose between <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>.
Default is <h2>.
Show or hide the post's featured image.
Choose a fallback image to appear for posts without featured images.
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.
Choose which image size from the WordPress Media Library to use.
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.
When Image position is Left, Left Content, Right or Right Content the Image width setting determines the column width for the image.
Show or hide the post author.
Enable or disable the author link.
Show or hide the post date.
Select Default to use the WordPress date format specified in WordPress Admin Dashboard Settings > General or override the default with a specific date format.
Show or hide the number of comments.
Choose the character that separates the display of author, date, and comments on the same line.
The default is the Pipe | symbol.
Show or hide the post terms.
Choose the text that prefixes the post terms. The default is Posted in. For example, Posted in Uncategorized.
Choose the character that separates the display of terms on the same line.
The default is a comma ,.
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.
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.
TIP
Set a custom number of words in the post excerpt to display.
The default is 55.
Show or hide the Read more link after the post content. If set to Show, you can also customize the default Read more text.
Customize the default Read more... text.
The WooCommerce options appear in the Layout tab.
Product Ordering Show or hide product ordering and product results information (Showing 1–16 of 22 results).
Sale Show or hide the On Sale label.
Rating Show or hide the product rating.
Price Show or hide the product price.
Cart Show or hide the add to cart button.
Show Hidden Products Show or hide hidden products.
The Events Calendar options appear in the Layout tab when the Events Calendar is installed.
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.
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.
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.
Set a background color for each post using the color picker.
The Border section has settings for border, radius, and shadow.
Set the color of the post title.
You can style the title of the post using the Typography options, including font size, family, line height, and more.
Color of the post info (author, date, comments, separator).
You can style the post info using the Typography options, including font size, family, line height, and more.
Color of post content.
You can style the content of the post using the Typography options, including font size, family, line height, and more.
Sets the color of links in full-text post content or custom excerpts.
Sets the hover color of links in full-text post content or custom excerpts.
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.
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.
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.
The Content tab allows you to control the source of your posts and what content is displayed using the filter options.
Choose between Main Query or Custom Query. The default query is Custom 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.
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.
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.
Descending or ascending, and whether it is by date, numerical, or alphabetical depends on the Order by setting.
The choices are: Author, Comment count, Date, Date last modified, ID, Menu order, Meta value (alphabetic or numeric), Random, Title, Selection order.
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.
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.
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.
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.
Tags - Include or exclude posts assigned to a specific tag.
Authors - Include or exclude posts or pages by specific authors.
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.
The Relation option allows you to apply logic to filter by custom fields. The rules operate with AND or OR logic.
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
The Pagination tab has settings that let you divide a large collection of posts into multiple pages.
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.
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.
Determines how many posts constitute each set. The default is 10 posts.
The message displayed when there are no posts to display.
Show or hide a search form when no posts are found. See the screenshot below the table.
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.
There are all the usual Advanced tab settings for margins, visibility, animations, and advanced HTML settings.
See the Advanced tab for more information.
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.
WordPress removes all formatting from excerpts by default. If the post contains HTML formatting, the excerpt may appear incorrectly. To solve this problem, add a that includes the HTML formatting.
WooCommerce Cart Button
Main Query
Custom Query
Menu order can be used with a plugin such as to order the posts or custom posts in the same way you arrange them in the back end.
Relation
Edit/Add Custom Field
The feature in WordPress allows you to place a post at the top of the , regardless of when it was published, and it will remain there until a new sticky post is published.
