Home » Instructions » Posts Slider Module
FAQ
Drag & Drop Editor
- Modules Overview
- Accordion Module
- Audio Module
- Button Module
- Callout Module
- Call to Action Module
- Contact Form Module
- Content Slider Module
- Countdown Module
- Gallery Module
- Heading Module
- HTML Module
- Icon Module
- Icon Group Module
- Link to a PDF
- Map Module
- Menu Module
- Number Counter Module
- Photo Module
- Posts Carousel Module
- Posts Module
- Posts Slider
- Pricing Table Module
- Text Editor Module
- Separator Module
- Sidebar Module
- Slideshow Module
- Subscribe Form Module
- Tabs Module
- Testimonials Module
- Video Module
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...
| 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. |
| 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. |
| 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. |
| 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 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:
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
Delete the Row
Save, Save as... and cancel
These options are available on most Modules and Rows.
Save
Choosing Save will simply save the active row, column or module.
Save as...
Choosing Save as... will allow you to Save the Module, Row or Column for use on other pages.
Cancel
Cancels any changes made to the active Module, Row or Column.
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
Click the arrow in the upper left corner from within the Drag & Drop Editor to access the Tools Menu
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.