Overview of the Blog Slider module

This page shows you how to add the Blog Slider module to your page and explains every setting in its Content, Design and Advanced tabs, with screenshots. The Blog Slider module shows your latest or selected posts in a slider with arrows, dots and several layouts. For more details, view the demo.

How to add the Blog Slider module to your page

1. Open your page in the Divi Visual Builder.
2. Click the gray (+) icon inside a row to add a new module.
3. Search for DP Blog Slider in the module search box.
4. Click the module to insert it. Its settings open on the right.

Content tab settings

The Content tab holds the module’s own settings, grouped in the toggles below. Link, Background and Element Label are the standard Divi options.

Content

• Layout: Select the slider layout.
• Number Of Posts: Define the value of number of posts you would like to display.
• Post Offset Number: Choose how many posts you would like to skip. These posts will not be shown in the feed.
• Order: Choose the order of your posts.
• Order By: Choose the order type of your posts.
• Post Date Format: If you would like to adjust the date format, input the appropriate PHP date format here.
• Content: Showing the full content will not truncate your posts on the index page. Showing the excerpt will only display your excerpt text.
• No Result Text: Choose how many blogs you would like to skip. These blogs will not be shown.

Elements

• Ignore Sticky Posts: This will decide whether to ingnore sticky posts or not.
• Show Title: This will turn title on or off.
• Show Featured Image: This will turn thumbnails on or off.
• Featured Image Size: Select the size of the featured image.
• Show Author: Turn on or off the Author link.
• Show Date: Turn the Date on or off.
• Show Categories/Terms: Turn the category/terms links on or off.
• Show Comment Count: Turn Comment Count on and off.

Slider

• Slide Effect: Choose the slide animation effect.
• Number Of Posts Per View: Choose the number of blogs to display per slide.
• Number Of Slides Per Group: Choose the number of slides per group to slide by.
• Space Between Slides: Move the slider or input the value to increse or decrease the space between slides.
• Equalize Posts Height: Choose whether or not equalize blog post height.
• Auto Height Slider: Choose whether or not slider height should adjust according to each slide.
• Enable Loop: Enable loop for the slides.
• Autoplay: This controls the auto play the blog slider.
• Enable Linear Transition: Choose whether or not to enable linear transition between slides.
• Autoplay Delay: This controls the time of the slide before the transition.
• Transition Duration: Specify the duration of transition for each slide in milliseconds.
• Pause On Hover: Control for pausing slides on mouse hover.
• Show Arrows: Choose whether or not the previous & next arrows should be visible.
• Previous Arrow: Select the icon to be used for the previous slide navigation.
• Next Arrow: Select the icon to be used for the next slide navigation.
• Show Arrows On Hover: Choose whether or not the previous and next arrows should be visible.
• Select Arrow Position: Choose the arrow position.
• Show Control Dots: This setting will turn on and off the pagination of the slider.
• Dots Pagination Style: Control dot style.
• Enable Dynamic Dots: This setting will turn on and off the dynamic pagination of the slider.

Design tab settings

The Design tab lets you style each part of the module:

• Image: styling options for the image.
• Post Content: styling options for the post content.
• Category: styling options for the category.
• Slider: styling options for the slider.
• Title Text: styling options for the title text.
• Body Text: styling options for the body text.
• Meta Text: styling options for the meta text.
• Read More Button: styling options for the read more button.
• Sizing, Spacing, Border, Filters, Transform, Animation: the standard Divi design options for the whole module.

Advanced tab settings

The Advanced tab has the standard Divi options: Attributes (add a CSS class or ID), CSS, HTML, Conditions, Interactions, Visibility, Transitions, Position and Scroll Effects.