Home » WordPress Plugins » Ultimate Divi Carousel » Create Image Carousel In Divi

Create Image Carousel In Divi

Create an image carousel with custom data. Set image, title, description and button for a carousel item.

You can

Use a Slide or Coverflow effect.
Enable dot & arrow navigation.
Add text overlay to carousel item.
Style all elements of the carousel with styling controls.

Ideal for creating logo, portfolio, case studies etc carousels.

The “Image Carousel” divi module is available for regular and full-width sections.

Pre-requisites

Tools

Computer

Total Duration : 9 minutes

Start your FREE trial. No credit cards required.

Step 1 - Insert "Image Card Carousel" Divi Module

Steps to insert the "Image Carousel" divi module on a regular or full-width section
- Edit a page in divi's visual builder.
- Within a divi row click on the plus icon for Add New Module
- Search for Image Card Carousel, click and add the divi module.

Start your FREE trial. No credit cards required.

Step 2 - Add Carousel Card Items

Add the carousel items. In each card add an image, title, description and button.
You can add unlimited carousel card items.
- Click on the plus icon for Add New Icon.
- In the Content Tab
  - Title section - add the title
  - Description section - add the description
  - Image Section - Upload/select an image
  - Button Section
    - Show Button - Toggle to show/hide the button
    - Button Text - Add button text.
    - URL - Add link to the button.
    - Link Target - Select the target where the link will open
  - Background Section - Set background for carousel item.
- In the Design Tab
  - Title Section - Set the styles for the title text.
  - Description Section - Set the styles for the description text.
  - Button Section
    - Enable Use Custom Styles For Button if you want to setup custom button styles.
      
      Set button text styles
      
      Button background
      
      Button border
      
      Button icon
      
      Margin and padding
    - Button Alignment - Set the alignment of the button.
    - Content Wrapper - It wraps all the text content of the carousel item.
      
      Margin and padding
      
      Set Content Background
  - Spacing - Set margin and padding
  - Border - Set border and border radius
  - Box Shadow - Set box shadow for item.

Start your FREE trial. No credit cards required.

Step 3 - Carousel Settings

Setup the carousel the way you want. This divi module offers a versatile options of carousel settings.
- Effect - The transition effect between slides. Options are
  - Slide - A linear slide.
  - Coverflow - An effect to show the arrange of slides in 3-D space. When selected extra fields are available.
    - Enable Coverflow Slide Shadow - Toggle switch to enable shadow for the coverflow item.
      
      Set Shadow Color when enabled.
    - Coverflow Rotate - Set the rotation angle of the non-active slides
    - Coverflow Depth - Set depth of the slides in coverflow effect.
  - Slides Per View - Set the number of slides visible on the carousel.
    - Click on the mobile icon to set the values for desktop, tablet and mobile
  - Space Between Slides - Set the distance between slides (in pixels)
    - Click on the mobile icon to set the values for desktop, tablet and mobile
  - Initial Slide - Set the index number of the initial slide. First slide's index at 0
  - Centered Slides - Toggle switch. Set YES to center the active slide.
  - Enable Loop - Toggle switch. Set YES to enable continuous loop mode.
  - Autoplay - Toggle switch. Set YES to set autoplay for the carousel.
    - Autoplay Delay - Autoplay delay between transitions (in milliseconds)
    - Pause On Hover - Toggle switch. Set YES to pause the carousel transitions on hover.
  - Transition Duration - Set the transition duration between slides (in milliseconds).
  - Show Arrows - Toggle switch. Set YES to enable next and previous arrow navigation.
    - Show Arrows On Hover - Toggle switch. Set YES to show arrows on carousel mouse hover.
  - Show Dots Pagination Toggle switch. Set YES to enable dot pagination.

Start your FREE trial. No credit cards required.

Step 4 - Style Carousel Elements

This divi module offers a ton of styling options for carousel elements.
- Content Tab
  - Background Section - Set the background of entire carousel.
- Design Tab
  - Carousel Wrapper - This wrapper, wraps the entire carousel
    - Set margin and padding.
  - Slide - Styles for each slide.
    - Equal Height - Toggle switch. Set YES to make the height of all carousel items equal
    - Background - Set background color/gradient/image
    - Border and border radius
    - Box shadow
  - Content Wrapper - It wraps the text content of a carousel item
    - Content Vertical Alignment - Vertically align title, description and button to the top, center or bottom
    - Overlay Content Over Image - Select YES to overlay the text content on top of the image.
      
      Content Visibility - Visibility of the content when set as an overlay. Options are
      
      Show Always - Show the text content always.
      
      Show Only On Hover - Show text content on hover.
    - Content Padding - Set padding for the wrapper
    - Content Background - Set color, gradient or image background for the wrapper
  - Arrow Navigation - Make sure to set Show Arrows to YES in carousel settings.
    - Arrow Size - Size of the arrow icon
    - Arrow Color - Set color for the arrow icon
    - Arrow Background - Set the background for arrow icon
    - Arrow Position - Pre-defined options for arrow positioning. Options are
      
      Middle & Enclosed
      
      Middle & Outside
      
      Middle & Overlapping
      
      Top & Right
      
      Top & Center
      
      Top & Left
      
      Bottom & Right
      
      Bottom & Center
      
      Bottom & Left
    - Border radius
    - Border
  - Dot Navigation - Make sure to set Show Dots to YES in carousel settings.
    - Dot Position Set the layout for the dot pagination. Options are
      
      Center
      
      Left
      
      Right
    - Active Dot Color - Set color of the dot representing the active slide.
    - Inactivate Dot Color - Set color of the dots representing the inactive slides.
    - Inactive Dot Opacity - Set the opacity of the dots representing inactive slide.
    - Dot Width - Width of the dot element
    - Dot Height - Height of the dot element
    - Dot Border Radius - Set the border radius (in percentage)
    - Individual Dot Margin - Set margin for the individual dots
    - Container Margin - Set margin for dot pagination container
    - Container Padding - Set padding for dot pagination container
Pro Tip : Combine Dot Width, Dot Height and Dot Border Radius to create circle, square, rectangular or line shapes.

Pro Tip - Use the border radius for the arrow navigation to make a square or a circle

Start your FREE trial. No credit cards required.

Step 5 - Demo Page Layouts

Below are demo page layouts for the "Image Card Carousel" divi module. Import them to your WordPress page to see them in action.
To Import A Demo Page Layout
- Create/edit a page in the divi visual builder.
- To show the page settings toolbar at the bottom, click on the ellipsis icon.
- Click on the portability icon.
- A modal window to export/import the page shows up
- Click on Import tab.
- Click on NO FILE SELECTED
- Check Replace existing content if you wipe off existing content after import.
- Select the divi builder layout json file from your file manager.
- Click on Import Divi Builder Layout button to start the import.
- Once imported, page reloads with the imported layout.
- Save the page.
Please find the demo divi builder layouts below.

Download - Mountains 01
An image card carousel layout that slides single images with text overlay.

Download - Logo Carousel
An image logo carousel using divi 'Image Card Carousel' module. Arrow navs on hover.

Download - Coverflow Carousel
Carousel Carousel For 'Image Card Carousel'

Download - Burger Carousel
A single slide carousel with title and button overlay

Download - Recipe Carousel
Recipe Carousel With Title, Description and Button

Start your FREE trial. No credit cards required.