---
title: "Divi Post Carousel Pro"
url: "https://divipeople.com/docs/post-carousel.md"
canonical: "https://divipeople.com/docs/post-carousel/"
published: "2026-07-09"
modified: "2026-07-09"
author: "Fahim Reza"
tags:
  - "Divi Blog Pro"
---

# Divi Post Carousel Pro

**Divi Post Carousel Pro** presents your posts as a smooth, responsive slider. Visitors swipe or click through post cards with autoplay, arrows, and dots — a great fit for "latest articles" sections, related-post rows, and homepages where horizontal space matters more than a full grid.

## Key Features

- **5 template layouts** — Classic, Stacked Meta, Overlay, Avatar Above, and Spotlight.
- **Per-device slide counts** — show, for example, 3 slides on desktop, 2 on tablet, 1 on phone.
- **Autoplay, infinite loop, and pause-on-hover** with adjustable speeds.
- **Center mode** that highlights the middle slide, plus LTR/RTL sliding direction.
- **Arrows and dots navigation**, both fully styleable.
- **Equal-height slides** and a no-featured-image fallback for a consistent look.

## Adding the Module

1. Edit a page with the **Divi Visual Builder**.
2. Add a new module and search for **Post Carousel Pro**.
3. The carousel starts sliding your latest posts — open the module settings to configure the query, layout, carousel behavior, and design.

## Content Settings

### Query

The Query toggle controls which posts appear in the carousel.

1. **Post Type** – Choose the content type to display: Posts, Pages, or a public custom post type (default: Post).
2. **Included Categories** – Show only posts from the selected categories.
3. **Custom Taxonomy** – Filter by a custom taxonomy instead of categories.
4. **Taxonomy Terms** – The terms (IDs or slugs) to match within the chosen taxonomy.
5. **Order By** – Sort posts by Date, Title, ID, Author, or Random (default: Date).
6. **Sort Order** – Ascending or Descending direction (default: Ascending).
7. **Post Limit** – How many posts the carousel holds (default: 6).
8. **Date Format** – Customize the displayed post date using standard WordPress date formats.
9. **Post Offset Number** – Skip a number of posts before the carousel starts (default: 0).
10. **Include Posts by IDs** – Display only the posts whose IDs you list.
11. **Exclude Posts by IDs** – Hide specific posts even when they match the query.

### Layout Settings

The Layout Settings toggle controls the card design and which elements each slide shows.

1. **Template Layout** – Five card designs: Layout 1 (Classic), Layout 2 (Stacked Meta), Layout 3 (Overlay), Layout 4 (Avatar Above), Layout 5 (Spotlight). Default: Layout 1.
2. **Show Image** – Toggle the featured image (default: On).
3. **Image Size** – Thumbnail, Medium, Large, or Full.
4. **Show Title** – Toggle the post title (default: On).
5. **Title Heading Level** – Render titles as H1–H6.
6. **Show Excerpt** – Toggle the post summary (default: On).
7. **Excerpt Length** – Number of characters shown in the excerpt (default: 150).
8. **Show Categories** / **Show Single Category** – Display all category labels or only the first one.
9. **Show Author**, **Show Date**, **Show Avatar** – Toggle the meta elements on each card.
10. **Show Read More** – Display a Read More button (default label: "Read More", editable via **Button Text**).

### Carousel Settings

The Carousel Settings toggle controls the slider behavior.

1. **Slides To Show** – Visible slides at once (default: 3). Responsive — set separate values for desktop, tablet, and phone.
2. **Slides To Scroll** – How many slides advance per swipe or click (default: 1).
3. **Autoplay** – Slide automatically (default: On).
4. **Autoplay Speed** – Time between slides in milliseconds (default: 3000).
5. **Transition Speed** – Duration of the slide animation in milliseconds (default: 500).
6. **Slide Spacing** – Gap between slides (default: 20).
7. **Pause On Hover** – Pause autoplay while hovering (default: On).
8. **Infinite Loop** – Restart from the first slide seamlessly (default: On).
9. **Show Arrows** – Display previous/next arrows (default: On).
10. **Show Dots** – Display dot navigation below the carousel (default: Off).
11. **Center Mode** – Highlight the middle slide with partial side slides (default: Off), with **Center Padding** (default: 50px).
12. **Sliding Direction** – Left-to-right or right-to-left (RTL) movement.
13. **Equal Height** – Force all visible slides to the same height (default: On).

## Design Settings

The Design tab styles every part of the carousel with Divi's full typography, color, spacing, border, and shadow controls.

- **Thumbnail Style** – Image fit, height/width, hover effect, and the *When No Featured Image* fallback (placeholder icon, custom image, or hide).
- **Content Box** – Background, padding, border, and shadow of the card body.
- **Post Title** and **Post Excerpt** – Full typography controls.
- **Category**, **Author**, and **Date** – Style each meta element separately.
- **Readmore** – Full button styling for the Read More link.
- **Navigation** – Arrow size, color, and background.
- **Dots** – Dot size, color, and active-dot color.

## Tips & Notes

> **Responsive slides**
> Slides To Show is responsive. A common setup is 3 slides on desktop, 2 on tablet, and 1 on phone — set each with the device icons in the Visual Builder.

> **Author avatar**
> Avatars come from Gravatar. The author's WordPress email must exactly match their account at **gravatar.com**, otherwise the photo will not appear.

> **Center mode spotlight**
> Center Mode pairs beautifully with Layout 5 (Spotlight) — the highlighted middle card draws the eye while neighboring slides peek in from the sides.

## FAQ

### How do I control how many posts show at once?

Use **Carousel Settings → Slides To Show** and set it per device. **Query → Post Limit** controls the total number of posts in the carousel.

### Can the carousel slide right-to-left?

Yes — switch **Carousel Settings → Sliding Direction** to RTL. This also suits right-to-left languages.

### How do I stop the carousel from auto-sliding?

Turn off **Carousel Settings → Autoplay**. Visitors can still navigate with the arrows, dots, or swipe gestures.

### Why do my slides have different heights?

Enable **Carousel Settings → Equal Height** (on by default). If heights still differ, check that all cards show the same elements — for example, an excerpt on some posts but not others.