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.