Creating a slider with your posts is a fun way of keeping your visitors engaged. The page designer has a module that makes it easy to add this feature to your pages, letting you customize the design to fit the website’s style.

Adding it to the page is really simple. Using the gray plus button, add a Post slide module to your page.

Content settings

Now you have to adjust the settings of the module. Let’s start with the content.

Content

There are a few options you can adjust here:

• Posts number: pick how many posts will be displayed in your slider.
• Include categories: if you want to include just some category, this is where you select which.
• Order by: date, a-z, z-a or randomly.
• Button text: leave the “Read more” default text or change to something else.
• Content display: choose to show the full content or an excerpt of the post.
• Use post excerpt if defined: if disabled, this option will make the page designer ignore manual excerpts and always display automatically generated ones.
• Automatic excerpt length: choose the length of automatic excerpts.

Elements

Enable or disable the display of Arrows, Controls (the circle buttons on the bottom of the slider), Read More button, and the Post Meta section.

Features image

Enable to show the blog entry featured image in the slider and select where you want to place it in the slide.

Link

If you want that the post slider module opens a new URL when someone clicks on it, paste that link here and decide if the link will open in the same window or tab.

Background

Select a color, gradient, image or video for the background.

If you pick a background image, you can define if you want to enable parallax effect, and its size, position, repeat effect and image blend.

Admin label

You can modify the module’s label for easier identification.

Design settings

Overlay

Select a background overlay color, that will be added above the background image but behind the content. You can also pick a text overlay color that will make the text more readable when it is laid over an image.

Navigation

Define the arrows and dot navigation colors.

Image

Customize the hue, saturation, brightness, and other tones of the image.

Text

Control your text alignment, choose if it is light or dark depending on your background, and define the text shadow.

Title Text

Define the font, color, alignment, line height, and other settings for the title of the post.

Body Text

You can also adjust the font settings for the body text.

Meta Text

Customize the meta text, adjusting options like the font, weight, style, alignment, and color.

Button

Customize the style of your button.

Sizing

Adjust the width of the module.

Spacing

Customize margins and padding sizes.

Border

Define the border’s corner, style, color, and width.

Box Shadow

Here you can enable box shadow.

Filters

Adjust the hue of the module as a whole.

Animation

Give an animation style to the module, like fading or sliding when it appears.

Advanced settings

Using this tab you can add CSS code and select device visibility and the transitions of the hover animation. Check this guide to know more about how to use these settings.

Use Case

Let’s adjust some of the settings to create a post slider with 3 random posts.

• Posts number: 3
• Order by: random
• Use post excerpt if defined: yes
• Background color: #87b8d3
• Show arrows: yes
• Show controls: yes
• Show Read More button: yes
• Show post meta: no
• Show featured image: no
• Use background overlay: no
• Dot nav custom color: #000000
• Title text color: #000000

And there you have it! If you hover over it you will also get the navigation arrows.