Posts, Posts Carousel and Posts Slider modules overview

There are three modules that insert a display of Posts or Pages into a Beaver Builder layout: Posts, Posts Carousel, and Posts Slider. The difference in the modules is the way the posts or pages are displayed and the settings that are available to configure layout, content, and style. In addition, the modules can have more than one layout. We’ll cover the layouts first, and other settings next:

Modules and layouts

Posts module – Columns layout

The Columns layout in the Posts module displays a set of posts or pages in layers of columns. You can set the border box for the posts to equal height or not, but in both cases, the columns are top-aligned within each layer. The following screenshot shows an example of the Columns layout when the columns are not equal height.

Posts module – Masonry layout or Grid layout

The Masonry layout has blocks of alternating heights laid out like vertical layers of bricks, as shown in this screenshot:

Gallery layout displays thumbnails of featured images in blocks of equal height and width. Mousing over an image shows post information, as shown in the following screenshot. You cannot display post content with Gallery layout.

By default, there is no padding between the items in the grid, though you can see the Related Article about how to add more space.

When the post has no featured image, only the post information is displayed. See the Related Articles for information about how to increase the space between images.

Posts module – List layout

In List layout, each post takes up the full column width. The featured image can be set to appear in any of the following locations:

  • Above title
  • Above content
  • Left
    The image is top-aligned with the title.
  • Left content 
    The image is top-aligned with the post content.
  • Right
    The image is top-aligned with the title.
  • Right content 
    The image is top-aligned with the post content.

Note: If you want to display the full post content, not just the excerpt, the List layout is the only layout type that has that option.

The animated Gallery layout of the Posts Carousel module displays a thumbnail of the featured image in a single row of blocks of uniform height and width, and when you mouse over the image it fades out and the title and post info are displayed, as shown in the screenshot below. You can’t display post content with the Gallery layout.

The Grid layout of the Posts Carousel module is an animated display of the thumbnails of featured images with the Post Info and optional post excerpt underneath.  The column height can be equalized, which means the content borders are the same size and the columns are top-aligned.

Posts Slider module

The Posts Slider module only has one layout style: an animated display of one post or page at a time. The post info and optional post excerpt can be displayed in two ways.

  • The featured image can be set to display as the background with the post info and post excerpt appearing on top, as in the following screenshot:

  • Or the image can be set to a thumbnail, with the post info and excerpt appearing beside it, as in this screenshot:

Note:  Note that not every setting is available for every module and layout type. For example, only the Posts module – Lists layout permits the display of full post content. The Gallery layout in the Posts and Posts Carousel modules doesn’t permit the display of the post content excerpt, just the post title and post info, and it has more limited settings in general.

Settings tabs

Slider tab (Posts Carousel and Posts Slider modules only)

  • Gallery or Grid layout for the Posts Carousel
  • Animation settings (autoplay, delay, loop, transition speed, number of posts)
  • Slider controls (display or hide dots, arrows, or both)
    If you choose to show the nav arrows, you can style the arrow color, and arrow background color and shape on the Style tab.

Layout tab

  • Posts
    Number of columns, spacing, padding, text alignment.
  • Featured image
    Whether to display the featured image, position size, and spacing.
  • Post Info
    Show or hide author, date, or comments; format the date; define a separator.
  • Content
    Show or hide the excerpt, define how many words the excerpt contains, show or hide the Read More link, customize the Read More text.

Style tab

  • All modules: text color, link color, background color
  • Posts module only: Background color, opacity, and border; individual text styles for post title, post info, post content, and link to post.

Content tab

You can choose between the main query and a custom query. The main query was added especially for use with Beaver Themer. Choose Custom query to fine-tune your query in any of the following ways.

  • Post type (posts, pages, custom post type).
  • Order (ascending, descending) and where to start in the sequence.
  • Order by criteria: author, comment count, date, date last modified, ID, menu order, meta value (alphabetic or numeric), random, title.
    If you display pages in menu order, you are effectively displaying a menu, with the added ability to display a content summary of the page.
    The 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).
  • Filter: Include or exclude specific posts, categories, tags, or authors.
    If you have created custom taxonomies and applied them to a particular post type that you’ve selected, you can filter on those too. If you select Pages as the post type, you can filter on specific pages and authors.

Pagination tab (Posts module only)

The Pagination tab has settings that let you divide your collection of posts into “pages,” which you can think of as chunks of posts. You can determine how many posts appear in each chunk, how the chunks appear, and what happens if there’s aren’t any posts to display.

Posts per page

This setting determines how many posts constitute each “page,” or chunk. The default is 10 posts.

Note: Posts per page does not set the number of columns across the page. That is controlled automatically according to screen width and, for some layout types, how wide you have set each post and with how much padding. For example, if the screen size allows 3 posts per row and your Posts per page is set to 5, you will see three posts in the first row and two posts in the second row.

Pagination Style

There are several ways to display each chunk of posts that you specify in Posts per page.

  • Numbers (default)
    The page numbers appear under the posts, and when a different number is clicked, the new chunk of posts replaces the previous chunk of posts. 
  • Scroll
    Chunks of posts are loaded into subsequent rows on the same page as the user scrolls down. 
  • Load more button
    A Load More button appears under the initial chunk of posts, and when clicked it generates the next chunk of posts. The user must keep clicking to get each next chunk. 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 chunks of posts unless the user really wants to see them.
  • None
    Display only the current chunk and don’t give the user an option to see more.

No Results Message

This is the message displayed when there are no posts to display. There is a default message, and you can modify or replace it.

You can show or hide a search form when no posts are found.

Related Articles