Skip to main content

The Divi Post Carousel Module (Divi 5)

Learn how to use the Divi Fullwidth Portfolio Module to display your projects in a sleek, full-width layout with customizable options.

Updated this week

The Divi Post Carousel Module displays your portfolio in a visually appealing grid or carousel layout. It integrates with Divi’s Projects post type and is ideal for showcasing your work on the portfolio or home pages.

Divi 5 - Fullwidth Portfolio module

Add The Divi Post Carousel Module

When you load the Visual Builder, Divi automatically adds a Section.

  1. Click on the Green Plus icon to insert a Row.

  2. Find the Post Carousel module and click on it to load it. Alternatively, you can use the Search option to find it.

Divi 5 - Add the Post Carousel Module

The Divi Post Carousel Module Use Cases

  1. Presenting a Design Portfolio: Highlight creative work like graphic design, web design, or illustrations in a full-width, visually immersive display that grabs attention.

  2. Showcasing Photography Collections: Utilize the module to feature high-quality photography, categorize images for easy navigation, and present a professional appearance.

  3. Creating a Case Study Gallery: Display completed projects with detailed descriptions, allowing visitors to explore your work in a clean, organized format.

Post Carousel Module Settings Breakdown

Once you've added the Post Carousel module, its settings will automatically appear. This is where this module's content and design styles are configured. These settings are organized into three groups via the tabs at the top of the module:

The Content tab

The Content tab allows you to choose the number of projects displayed per page, select the project category from which to display them, and more.

Divi 5 - Post Carousel module's Content tab

  1. Content - Choose the post type that is going to be used, the Carousel title, the Included Categories (optional), and how many post types the module will display.

  2. Elements - Enable or disable the visibility of the post type's title and publish date.

  3. Link - Make the entire Post Carousel module clickable, creating a seamless way to direct users to another page, section, or external site.

  4. Background - Choose the Post Carousel module's background styles.

  5. Admin Label - Choose the Post Carousel module's label text to assist you in keeping things organized and easy to understand in the Visual Builder.

The Design tab

All the design styles and options for the Fullwidth Portfolio module are in this tab.

Divi 5 - Post Carousel module's Design tab

  1. Layout - Choose the Post Carousel module's layout:

    1. Carousel (Default)

    2. Grid layout

  2. Overlay - Choose the overlay's icon color, overlay's background color, and overlay's icon.

  3. Image - Choose the styles applied to each project's Featured Image.

  4. Text - Choose the overall Post Carousel module's text styles for this module.

  5. Title Text - Choose the Post Carousel module's title styles.

  6. Carousel Item Title Text - Choose the Heading's level used in the carousel item's title, font family, weight, font styles, text alignment, text color, text size, letter spacing, line height, and the item title's text shadow styles.

  7. Meta Text - Choose the module's body text styles.

  8. Sizing - Choose the Post Carousel module's sizing.

  9. Spacing - Choose the spacing for the Post Carousel module.

  10. Border - Choose the border styles for the Post Carousel module.

  11. Box Shadow - Choose the Box Shadow styles for the Post Carousel module.

  12. Filters - Choose the Post Carousel module's filters, including hue shifts, saturation adjustments, and blending modes.

  13. Transform - Choose the Post Carousel module's advanced design effects, including scaling, rotating, skewing, and translating.

  14. Animation - Choose the Post Carousel module's animation styles.

The Advanced tab

The Advanced tab provides tools for experienced designers, including options for adding CSS IDs and Classes, controlling visibility, managing transitions, adjusting element positions, and creating scroll effects.

Divi 5 - Post Carousel module's Advanced tab

  1. CSS ID & Classes - Allows you to assign unique CSS ID or reusable CSS classes, enabling advanced custom styling through your child theme’s stylesheet or Divi’s custom CSS settings.

  2. Custom CSS - Allows you to add custom CSS code to fine-tune your Post Carousel module, enabling advanced styling that perfectly aligns with your vision.

  3. Conditions - Allows you to create dynamic, personalized content, ensuring the right message reaches the right audience at the right time.

  4. Visibility - Choose the Post Carousel's module visibility based on different devices.

  5. Interactions - Create custom interactions.

  6. Transitions  - Choose how long the Post Carousel module animation takes, adding subtle, impactful animations that enhance user experience and make your modules stand out.

  7. Position - Choose precise control of the Post Carousel's module placement and create dynamic, visually engaging designs.

  8. Scroll Effects - Control how the Post Carousel module behaves and transforms during scrolling.

What's the next step?

Save your changes and exit the Visual Builder

To save the page design, you can type CMD + S on a Mac or CTRL + S on a PC.

You can also:

  1. Click on the Save button.

  2. Click on the Exit button.

Divi 5 - Save and Exit Visual Builder
Related Articles
The Divi Blog Module (Divi 5)
The Divi Gallery Module (Divi 5)
The Divi Portfolio Module (Divi 5)
The Divi Post Title Module (Divi 5)
The Divi Hero Module (Divi 5)
Did this answer your question?