Posts Slider Module

In the Posts Slider module, a set of posts or pages is displayed with either a sliding or a fade-in animation. The featured image of each post becomes the background image in the slide (unless you select the option to hide it), with post info and content overlaid on the slide.

Click and drag the Posts Slider Module onto the page...

The SLIDER tab

Section	Field	Description
	Height	Minimum height of the posts slider. The height will expand to fit the photo being displayed. Tip: If you don't like the expanding and shrinking to accommodate various photo heights, preprocess your photos so they are all the same height.
	Auto play	If Yes, the display moves through the posts automatically, unless the user intervenes by clicking on the dots or arrows or moving the cursor over one of the posts. If No, there is no animation and user must use the navigational aids.
	Delay	Number of seconds each post is displayed. This setting is used only if Auto play is enabled.
	Loop	If Yes, the list of posts is displayed in a repeating continuous carousel. If No, the list of posts ends when the last post is reached. This behavior occurs whether autoplay is enabled or not.
	Transition	Choose the type of animation for the transition to the next post: Fade or Slide.
	Transition speed	When autoplay is enabled, the speed in seconds at which one slide moves to the next when the Delay time has finished.
	Number of posts	Maximum number of posts to display. Which posts are selected depends on the filters set on the Content tab.
Slider controls	Show dots	If Yes, a set of horizontal dots is displayed at the bottom of the carousel. The number of dots equals the Number of posts value, and one dot is highlighted to indicate which post in the sequence is being displayed. Visitors can manually change the display by clicking one of the dots.
	Show arrows	If Yes, a left and right arrow is displayed on either side of the post list so user can move ahead or back manually. You can style the arrow color, background color, and background shape on the Style tab.

The LAYOUT tab

Section	Field	Description
	Height	Minimum height of the posts slider. The height will expand to fit the photo being displayed. Tip: If you don't like the expanding and shrinking to accommodate various photo heights, preprocess your photos so they are all the same height.
	Auto play	If Yes, the display moves through the posts automatically, unless the user intervenes by clicking on the dots or arrows or moving the cursor over one of the posts. If No, there is no animation and user must use the navigational aids.
	Delay	Number of seconds each post is displayed. This setting is used only if Auto play is enabled.
	Loop	If Yes, the list of posts is displayed in a repeating continuous carousel. If No, the list of posts ends when the last post is reached. This behavior occurs whether autoplay is enabled or not.
	Transition	Choose the type of animation for the transition to the next post: Fade or Slide.
	Transition speed	When autoplay is enabled, the speed in seconds at which one slide moves to the next when the Delay time has finished.
	Number of posts	Maximum number of posts to display. Which posts are selected depends on the filters set on the Content tab.
Slider controls	Show dots	If Yes, a set of horizontal dots is displayed at the bottom of the carousel. The number of dots equals the Number of posts value, and one dot is highlighted to indicate which post in the sequence is being displayed. Visitors can manually change the display by clicking one of the dots.
	Show arrows	If Yes, a left and right arrow is displayed on either side of the post list so user can move ahead or back manually. You can style the arrow color, background color, and background shape on the Style tab.

The STYLE tab

Section	Field	Description
Heading	Heading tag	Choose the level of heading that will be assigned to the post title when it is rendered.
	Heading size	Choose Default or Custom. If you choose Custom, you can specify the custom font size.
Text	Position	If Image on the Layout tab is set to Background, this setting determines which part of the slide the post text appears in: Left, Right, or Bottom. If Image is set to Thumbnail, this setting determines the orientation of post text in relation to the thumbnail: post text on the left or post text on the right.
	Text width	(Applies only when Position is set to Left or Right) You can choose the percent of the width of the slide that the post content covers.
	Text padding	Sets the amount of space on all four sides of the post text.
Colors	Text color	Color of any unlinked text in the post title, post info, and post content.
	Link color	Color of any linked text, including the post title, author, number of comments, and the Read More link.
	Link hover color	Color of the link when the cursor hovers over it.
	Text background color	Color of the text background.
	Text background opacity	(Applies only when the featured image is set to Background) Opacity of the text background color.
	Text background gradient	(Applies only when the featured image is set to Background) If set to Yes , automatically adds an opacity gradient to the specified text background color. The gradient uses the text background color and the text background opacity at the left edge (for text on the left) or right edge (for text on the right) and decreases in opacity towards the center of the slide. There's an example of a text background gradient in the Posts Slider section of this article.
	Text background height	(Applies only when the featured image is set to Background) If set to Auto , the text background color adjusts to fit the area of text shown on the slide plus the Text padding specified in the Text section. If set to 100% , the text background color covers the entire height of the slide. (The text background width is the width of the text plus padding.) See examples in the Posts Slider section of this article. Note: When Position in the Text section on the Style tab is set to Bottom , the text background effect will always be the equivalent of the Auto setting, even when set to 100%.
Nav arrows(Only when Show arrows is set to Yes on the Slider tab)	Arrows background color	Sets the color of a circle or square background behind the navigation arrows. When no color is set, there is no background circle or square.
	Arrows background style	When Arrows background color is set, this option sets the arrow background to a circle or a square.
	Arrows color	Sets the color of the arrows themselves.

The CONTENT tab

Section	Field	Description
	Source	Main query or custom query. The default for a standard Beaver Builder layout is Custom query, which enables all the other fields on this tab. In Beaver Themer, the default is Main query, because normally for a Themer layout you want the query for posts to be based on whatever archive page the query is created for.
Custom query	Post type	Choose pages, posts, or a custom post type, such as WooCommerce Products or a custom post type that you create yourself.
	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. 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`).
	Offset	Enter an integer if you want to skip a certain number of posts in the order specified in the Order setting.
	Exclude current post	Excludes the current post from the query. This is useful when you are using the module to create a list of related posts on a single post page.
Filter	Posts, Pages, Products, etc.	(The label matches the single post name for the Post type you set) Include or exclude a set of posts, page, products, etc., by title. Start typing a word, and the titles containing that word will be displayed for you to choose. Keep selecting titles until you have the set you want to include or exclude.
	Categories	(Hidden when the Post type setting is Pages) You can include or exclude categories to display. The third setting, 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	(Hidden when the Post type setting is Pages ) You can include or exclude tags to display. The choices are the same as for including or excluding categories.
	Authors	You can include or exclude posts or pages by specific authors.

The ADVANCED tab

The Advanced tab offers nearly identical settings on all Drag & Drop Editor rows, columns, and modules.

Spacing section

For rows and columns, you can change the default margin and padding values. For modules, you can change the default margin values only.

Visibility section

In the Breakpoint field, you can set the row, column, or module to display or hide based on device size. In the Display field, you can choose to display the row, column, or module always, never, or only to logged-in or logged-out users.

Animation section

You can assign an entrance animation, which activates the first time the page is loaded and the row, column, or module comes into view. The default is None. If you choose an entrance animation, set the delay (how long before the animation starts, in seconds) and a duration (how long the animation lasts, in seconds.).

HTML Element section

You can choose a different HTML container element for the row, column, or module (advanced users only).
For example, for reasons of accessibility you might want to use an HTML container tag that has more semantic value than a <div tag, such as <section>.
Add a CSS ID or class value to the row, column, or module.
ID names must be unique on a page, so assign an ID only when you need to reference that unique ID. For example, a link to an anchor on the page requires a unique anchor so it know exactly where to go. Class names are usually intended for reuse and are often used in CSS rules. For example, you might want to assign a different text size to all HTML headings with an fl-heading class.

More Information:

ROW SETTINGS:

Tool Descriptions and links to more information

Click and Drag to move the Row

Edit Row Settings such as...

In the STYLE tab:
Width
Text and link colours
Background options such as video, colour or images
Border and drop shadow settings

In the ADVANCED tab:
Margins
Padding
Visibility
Animation
HTML

Duplicate the Row

Reset the Row width

Delete the Row

COLUMN SETTINGS:

Tool Descriptions and links to more information

Click and Drag to move the Column

Edit Module Settings, if a module is present within the column

Duplicate the Row

Column Settings such as...

STYLE tab:
Width
Minimum Height
Equalize Heights
Text and link colours
Background options such as video, colour or images
Border and drop shadow settings

ADVANCED tab:
Margins
Padding
Visibility
Animation
HTML

Delete the Row

SAVE AS USAGE

TEMPLATE USAGE

To Save a Template

Click the arrow in the upper left corner from within the Drag & Drop Editor to access the Tools Menu

Click Save Template

To use a Saved Template

The Templates tab (if available) contains saved layouts that can be used as templates.

Click on a Template to choose it and then choose to Append (add the Template to the page) or Replace the current page with the Template.

PAGE TOOLS & GLOBAL SETTINGS

Publish layout

Publishes the layout without closing the Drag & Drop Editor.

Save Template

This allows you to save the current layout as a template that can be used on other pages or posts.

Duplicate layout

Copies the entire page and all metadata from the back end, including Yoast SEO data. Creates and opens a new page or post with "copy" in the title.

Preview layout

Opens a preview screen, where you can preview as a small, medium, or large device. Click Continue editing to return to the Drag & Drop editing screen.

Responsive editing

Edit your layout directly in a medium or small device view. Click Exit to return to large screen editing.

Revisions

Display the previously published revisions available to revert to. The number of revisions available is displayed in brackets. This menu item uses the core WordPress revision feature but makes it more convenient to view and access revisions. See this article for more information.

Global settings

Drag & Drop Editor settings that apply as defaults. Most of these settings can be overridden on individual pages. There's also a CSS and JavaScript tab to enter CSS and JavaScript that will apply to content layout throughout your site.

Change UI brightness

This option is a toggle that changes the UI skin from light (default) to dark and back.

WordPress admin

Choosing this option opens a submenu with shortcuts to get to popular spots in the WordPress admin by opening a new browser tab.

Posted in Drag & Drop Editor, Instructions

FAQ

Drag & Drop Editor

Posts Slider Module

Spacing section

Visibility section

Animation section

HTML Element section

More Information:

Tool Descriptions and links to more information

Tool Descriptions and links to more information

Save, Save as... and cancel

Save

Save as...

Cancel

To Save a Template

To use a Saved Template

Page Tools

Publish layout

Save Template

Duplicate layout

Preview layout

Responsive editing

Revisions

Global settings

Change UI brightness

WordPress admin