Image Card Carousel

With Divi Plus Image Card Carousel you can quickly add beautiful images on the slider with a button, content, and an icon & also can styling every element which makes it more attractive.

How to add module on page

Once Divi Plus is activated, it adds several modules to the Divi builder. To add a module on the page, use the following steps:

1. Create/Edit a Page/Post that uses Divi builder.
2. Create/Edit a row.
3. Click on Add New Module option; choose the DP Image Card Carousel module.

Global Content Tab

1. Insert Image Card Carousel Items: In the Content tab >> click Add New Image Card. And you can also add the image using the dynamic content feature. 

Slider

1. How to change Image Card Carousel Effects: Go to the Slider >> Carousel Effect >> Slide / Cube / Coverflow / Flip.
2. Select Number of Image Cards Per Slide: Go to the Slider >> Number of Cards Per View >> select any number from 1 to 15.
3. How to apply a loop on the Image Card Carousel: Go to the Slider >> Enable Loop >> Yes.
4. Disable Carousel Autoplay: In the Slider settings >> check >> Autoplay >> NO.
5. Set Carousel Autoplay Delay: Input the value in the Autoplay Delay field of the Slider settings.
6. How to disable carousel pause on hover: Go to the Slider >> Pause On Hover >> NO.
7. Set carousel transition-duration: Go to the Slider >>  Transition Duration >> input the value.
8. How to display arrows on Image Card Carousel: Go to the Slider settings >> Show Arrows >> YES.
9. Select the arrow style for the previous and next slide navigation: Go to the Slider settings >> for Previous Arrow & Next Arrow >> choose the icon.
10. Control the equalize slides height control: Go to the Slider settings >> Equalize Slides Height >> YES
11. Disable Carousel Arrows on Hover: Go to the Slider settings >> Show Arrows On Hover >> NO.
12. Arrows Position: Using this setting you can choose arrows position from given 8 options.
13. How to display pagination: Go to the Slider >> Show Dots Pagination >> YES.
14. Change the pagination style: Go to the Slider >> Dots Pagination Style >> select Solid Dot / Transparent Dot / Stretched Dot / Line / Rounded Line / Squared Dot.
15. Enable Dynamic Dots: Using this setting you can turn on and off the dynamic pagination of the slider.

Content customization for individual Image Card Carousel Item

The following steps need to be performed in the Content tab of an individual Image Card Carousel Item’s settings. 

1. Input Image Card Title: Go to the Content >> Title >> input the title’s text.
2. How to Add Image for the Image Card Carousel: Go to the Image >> Image >> Add Image.
3. Select Icon for the Image Card: Go to the Icon >> Icon >> select any according to the requirements.
4. How to display Button on the Carousel: Go to the Button >> Show Button >> YES.
5. URL: Here you can input the URL that you want to open when the user clicks on the Read More Button. You can also fetch dynamically URL for the button.
6. How to add a link to the Image Card: Go to the Link settings >> Module Link URL >> input the linking URL >> Module Link Target >> select either In The Same Window / In The New Tab. 
7. Adjust Image Card’s Content background: Go to the Background settings >> Content Background >> adjust background with Color, Gradient, or Image. 

Design settings of an individual Image Card Carousel Item

he following steps need to be performed in the Design tab of an individual Image Card Carousel Item’s settings. 

1. Change text alignment: Go to the Design tab >> Text >> Text Alignment >> select alignment option as required.
2. Change text theme: Go to the Text >> Text Color >> select either Dark or Light.
3. Style title text and content: Go to the Title & Content settings >> select TItle / Content >> apply text customizations as needed.
4. How to change icon alignment, size, and color: Go to the Icon settings >> use Icon Alignment / Icon Font Size / Icon Color >> to change alignment / size / color.
5. How to apply shape and shape background color to the icon: Go to the Icon >> Style Icon >> YES. Use Shape >> to choose shape as Circle / Square / Hexagon.  Use Shape Background >> to change the shape background with color.
6. How to change Button alignment: Go to the Button settings >> Button Alignment >> choose alignment as required.
7. How to apply custom styling to the button: Go to Button >> Use Custom Styles For Button >> YES. Here, you can change button text size, color; button background, icon position, and more.

Global Design Customization for the Image Card Carousel

1. Change Text Alignment Globally: Go to the Design tab >> Text >> Text Alignment >> choose required alignment option. (Applicable only if text alignment isn’t chosen in the individual settings.)
2. Apply Text Shadow: Go to the Design tab >> Text >> Text Shadow >> choose required shadow option.
3. Style title text and content globally: Go to the Title & Content settings >> select Title / Content >> apply text customizations as needed. (Applicable only if title text & content aren’t customized in the individual settings.)
4. Change slider arrow size: Go to the Slider >> Arrow Font Size >> move the slider or input the value.
5. How to change the slider arrow’s color: Go to the Slider >> Arrow Color >> choose any color.
6. Apply different colors to slider dots: Go to the Slider >> Active Dot Pagination Color / Inactive Dot Pagination Color >> choose any appropriate color.
7. Adds extra space to the inside of the element: Go to the Spacing >> Slider Container Padding This setting increases the distance between the edge of the element and its inner contents.