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.
Now you have to adjust the settings of the module. Let’s start with the 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.
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.
Enable to show the blog entry featured image in the slider and select where you want to place it in the slide.
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.
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.
You can modify the module’s label for easier identification.
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.
Define the arrows and dot navigation colors.
Customize the hue, saturation, brightness, and other tones of the image.
Control your text alignment, choose if it is light or dark depending on your background, and define the text shadow.
Define the font, color, alignment, line height, and other settings for the title of the post.
You can also adjust the font settings for the body text.
Customize the meta text, adjusting options like the font, weight, style, alignment, and color.
Customize the style of your button.
Adjust the width of the module.
Customize margins and padding sizes.
Define the border’s corner, style, color, and width.
Here you can enable box shadow.
Adjust the hue of the module as a whole.
Give an animation style to the module, like fading or sliding when it appears.
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.
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.