Post Slider Module

The Post Slider module automatically generates slides from WordPress posts, displaying featured images, titles, excerpts, and meta information in a full-width sliding format.

Quick Reference

What it does: Generates slides dynamically from WordPress posts with featured images, titles, excerpts, and read-more buttons. When to use it: Blog hero sliders, homepage content spotlights, category-filtered feature carousels Key settings: Number of Posts, Post Categories, Featured Image Placement, Navigation Arrows, Overlay Block identifier: divi/post-slider ET Docs: Official documentation

When to Use This Module

• Creating a dynamic hero slider that automatically updates with new posts
• Featuring recent articles with images and excerpts in a rotating carousel
• Building category-specific content carousels on landing pages

When NOT to Use This Module

• Creating slides with custom static content (not from posts) → use Slider
• Displaying posts in a static grid or list format → use Blog
• Needing a full-browser-width manual slider → use Fullwidth Slider

Overview

The Post Slider module transforms your WordPress posts into an interactive slideshow. Rather than manually creating individual slides, this module queries your post library and generates slides dynamically from published content. Each slide can display the post's featured image as a background, along with the title, excerpt, author, date, and a configurable read-more button that links to the full post.

Navigation is handled through arrow controls and optional bullet-style dot indicators, and the slider can be set to auto-advance through slides at a defined interval or to wait for manual interaction. Featured images can be placed as full slide backgrounds or positioned alongside the text content, giving you flexibility in how visual and textual elements relate to each other.

This module is particularly effective for hero sections on blog landing pages, homepage spotlights for recent articles, and featured content carousels within editorial layouts. It combines the visual impact of a slider with the automation of a dynamic post query, so new content appears in the slider as soon as it is published. For additional reference, see the official Elegant Themes documentation.

View A Live Demo Of This Module

The Post Slider module displaying a blog post with featured image background, title, excerpt, and navigation controls.

Use Cases

1. Blog Hero Slider — Feature your most recent or most important posts in a large, eye-catching slider at the top of your blog page. Enable auto-advance and bullet navigation so visitors can scan through featured content before scrolling down to the full post grid.
2. Homepage Content Spotlight — Place the Post Slider in a fullwidth section on your homepage to highlight recent articles, announcements, or news items. Limit the post count to 3-5 and configure the read-more button to drive traffic to individual posts.
3. Category Feature Section — Filter the slider to a specific category to create a focused content carousel within a topic-specific landing page, showcasing the latest articles from that category with their featured images.

How to Add the Post Slider Module

1. Open the Visual Builder on the page where you want the slider to appear.
2. Click the gray + icon to add a new module to a row.
3. Search for "Post Slider" in the module picker or find it in the Content Elements category, then click to insert it.

Settings & Options

The Post Slider module settings are organized across three tabs: Content, Design, and Advanced.

Content Tab

The Content tab controls which posts appear in the slider, what elements are shown on each slide, and how the featured image is handled.

Setting	Type	Description
Number of Posts	number	The maximum number of posts to include in the slider rotation. Each post becomes one slide.
Post Categories	multi-select	Filter the slider to display posts from specific categories. When no categories are selected, all published posts are included.
Read More Button Text	text	Customize the label on the call-to-action button that links to the full post. Defaults to "Read More." Set to empty to remove the button text.
Sorting Method	select	Control the order in which posts appear in the slider. Options typically include date descending, date ascending, and other WordPress query ordering methods.
Navigation Arrows	toggle	Show or hide the left and right arrow controls that allow visitors to manually advance between slides.
Bullet Navigation	toggle	Show or hide the dot indicators below the slider that represent each slide and allow direct navigation to a specific slide.
Read More Button	toggle	Enable or disable the read-more button on each slide. When disabled, the button is removed from the slide layout entirely.
Post Meta	toggle	Show or hide the metadata line (author, date, categories) on each slide. Disabling this creates a cleaner slide with just the title and excerpt.
Featured Image	toggle	Control whether the post's featured image is used as the slide background or displayed alongside the content.
Featured Image Placement	select	Determine how the featured image is positioned within each slide: as a full background behind the text overlay, or placed to the side of the slide content.
Link	url	Make the entire Post Slider module wrapper clickable, directing users to a specified page, section, or external URL.
Background	background controls	Set a fallback background color, gradient, image, or video behind the slider container. This is visible when individual slides lack featured images.
Order	order controls	Define the display order of the Post Slider module within Flexbox and CSS Grid parent layouts.
Meta	admin label	Assign a custom admin label to the module for easier identification in the Visual Builder layer panel.

Design Tab

The Design tab provides full visual control over the slider's overlay, navigation elements, typography, button styling, and standard module properties.

Module-specific settings:

Setting	Type	Description
Overlay	overlay controls	Configure the background overlay that appears on top of featured images. Set the overlay color and opacity to ensure text remains readable against varied image backgrounds.
Navigation	navigation styling	Customize the appearance of slider arrow controls and dot indicators, including color, size, and hover states.

Shared design options — see Options Groups for detailed documentation:

Options Group	Description
Text	Font, weight, alignment, color, line height, text shadow
Title Text	Font, weight, size, color, letter spacing, line height, text shadow for post titles
Body Text	Font, size, color, spacing for post excerpt text
Meta Text	Font, size, color, spacing for metadata (author, date, categories)
Button	Background color, text color, border, border radius, font, padding, hover styles
Image	Border radius, sizing, alignment for featured images
Sizing	Width, max-width, min-height, height, alignment
Spacing	Margin and padding with responsive breakpoint controls
Border	Width, color, style, border radius
Box Shadow	Horizontal/vertical offset, blur, spread, color, position
Filters	Brightness, contrast, saturation, hue rotation, blur, invert, sepia, opacity, blend mode
Transform	Scale, translate, rotate, skew, transform origin
Animation	Entrance animation style, direction, duration, delay, intensity

Advanced Tab

The Advanced tab provides developer-oriented controls for custom attributes, conditional display logic, and scroll-driven effects.

Shared advanced options — see Options Groups for detailed documentation:

Options Group	Description
Attributes	CSS ID, classes, custom HTML attributes
CSS	Custom CSS per element target (slider container, slide, title, meta, content, button, arrows, dots, image)
HTML	Custom HTML attributes for module wrapper
Conditions	Display rules (user role, page type, date, logic)
Interactions	Hover, click, or scroll-triggered interactions
Visibility	Device visibility toggles
Transitions	Hover transition timing
Position	CSS position and offsets
Scroll Effects	Scroll-driven animation effects

Code Examples

Custom CSS

/* Dark overlay for better text readability */
.et_pb_post_slider .et_pb_slide_overlay {
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.2) 0%,
        rgba(0, 0, 0, 0.7) 100%
    );
}

/* Style the slide title */
.et_pb_post_slider .et_pb_slide_description .et_pb_slide_title {
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Customize the read more button */
.et_pb_post_slider .et_pb_slide_description .et_pb_more_button {
    background: #ffffff !important;
    color: #333333 !important;
    border-radius: 50px;
    padding: 12px 28px;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.et_pb_post_slider .et_pb_slide_description .et_pb_more_button:hover {
    background: var(--et-global-color-primary) !important;
    color: #ffffff !important;
}

/* Reduce meta font size */
.et_pb_post_slider .et_pb_slide_description .post-meta {
    font-size: 0.85rem;
    opacity: 0.8;
}

/* Responsive: reduce padding on mobile */
@media (max-width: 980px) {
    .et_pb_post_slider .et_pb_slide_description {
        padding: 30px 20px;
    }
}

PHP Hooks

/**
 * Filter the Post Slider module output to add a custom class.
 */
add_filter( 'et_module_shortcode_output', function( $output, $render_slug ) {
    if ( 'et_pb_post_slider' !== $render_slug ) {
        return $output;
    }
    $output = str_replace(
        'class="et_pb_post_slider',
        'class="et_pb_post_slider my-custom-slider',
        $output
    );
    return $output;
}, 10, 2 );

/**
 * Exclude sticky posts from the Post Slider query.
 */
function my_post_slider_exclude_sticky( $args ) {
    $args['ignore_sticky_posts'] = true;
    return $args;
}
add_filter( 'et_pb_post_slider_query_args', 'my_post_slider_exclude_sticky', 10, 1 );

Common Patterns

1. Full-Screen Hero Slider — Place the Post Slider in a fullwidth section at the top of your homepage. Set the min-height to 80vh or higher in the Sizing settings, enable the featured image as a background, and apply a dark overlay to ensure white text remains readable. Enable both arrow and bullet navigation for maximum user control.

2. Compact Featured Posts Bar — Use the Post Slider with a reduced min-height (250-300px) and limited post count (3-4) to create a compact content carousel above the main blog grid. Disable the post meta and body text to show only titles and read-more buttons, creating a teaser that encourages visitors to click through.

3. Category News Ticker — Filter the slider to a single news or announcements category, enable auto-advance with a short interval, and position it within a standard-width row. Style the slides with a solid background color instead of featured images for a clean, editorial appearance that fits alongside other content modules.

AI Interaction Notes

Create vs. Modify

Modifying existing module content via REST API (wp.apiFetch PATCH) updates title, body text, and settings attributes. Creating new modules via REST API produces content that renders on the front end but may not appear in the Visual Builder layer view. Use browser automation for reliable module creation. See REST API Content Playbook.

Block identifier: divi/post-slider — Needs verification on current build

Operation	Method	Status	Notes
Read content	Parse post_content block JSON	Observed	Use brace-depth parser — see Content Encoding
Modify existing	wp.apiFetch PATCH on post endpoint	Observed	Update block attributes in post_content
Create new	Browser automation (Playwright)	Observed	REST creation may break VB visibility
Batch modify	Sequential REST requests	Needs Testing	See REST API Content Playbook

Key content attributes — JSON paths need verification:

Attribute	JSON Path	Notes
Posts Number	attrs.posts_number	Maximum posts in slider rotation
Include Categories	attrs.include_categories	Filter by post category
Show Meta	attrs.show_meta	Toggle metadata visibility on slides

Module Selection Guidance

For dynamic post-based slideshows use Post Slider; for static slide content use Slider; for post grids use Blog.

Saving Your Work

After configuring the Post Slider module:

• Save changes — Click the purple Save button at the bottom of the Visual Builder, or press Ctrl+S (Windows) / Cmd+S (Mac).
• Exit the builder — Click the X button or use Ctrl+Shift+E to return to the WordPress dashboard.

Version Notes

Divi 5 Only

This page documents Divi 5 behavior exclusively. The Post Slider module in Divi 5 features updated transition handling and improved responsive behavior compared to earlier versions. Slide markup and class names may differ from Divi 4.

Troubleshooting

Slider Shows No Slides

If the Post Slider appears blank, verify that: (1) you have published posts with featured images assigned, (2) the category filter is not excluding all available posts, and (3) the Number of Posts setting is greater than zero. Posts without featured images may appear as blank slides unless a fallback background is configured.

Text Not Readable Over Images

When featured images are used as slide backgrounds, light-colored images can make white text difficult to read. Use the Overlay settings in the Design tab to add a semi-transparent dark overlay. Alternatively, add a text shadow to the title and body text for improved contrast.

Slider Height Inconsistent Across Slides

If slides have varying heights, set a fixed min-height in the Sizing settings to enforce a consistent slider size. This prevents layout shifts as the slider transitions between slides with different content lengths.

Related

• Slider Module — Create manual slides with custom content rather than pulling from posts
• Blog Module — Display posts in static grid or list layouts without the slider format
• Fullwidth Slider Module — Full-width manual slider for hero sections and banners