Today, everything is getting more visual in WordPress. With Gutenberg, you can add more visual content types than the classic editor. Still, Gutenberg is not enough if you truly put design on the emphasis when creating a page on your WordPress site. You need a dedicated page builder like Divi Builder and Elementor which have a more decent visual editor. They also allow you to add more design elements to your page, as well as more styling options. One of the design elements you can add is carousel.
In the context of web design, carousel refers to a behavior whereby the content is displayed slide-like style, but other parts of the content are still visible. Here is the example.
Some page builder plugins like Elementor (read: Elementor vs Divi) and Brizy come with a default design element to add a content carousel. Unfortunately, Divi doesn’t one. In Divi, you need to install an extra plugin to add content carousel. In this post, we will show you how to add content carousel in Divi using Divi Supreme.
Divi Supreme is one of the most popular Divi plugins. It comes with 40 modules to allow you to add more creative elements to your Divi page, including carousel. In addition, the plugin also allows you to create a popup in Divi. Here are the key features offered by Divi Supreme:
- 40 Divi modules
- Popup builder
- Element scheduler
How to Add Content Carousel in Divi Using Divi Supreme
Divi Supreme is a freemium plugin. However, you need to use the pro version to add content carousel as the modules to add content carousel are available on the pro version. You can get the pro version of Divi Supreme on Divi Market place.
There are 4 modules offered by Divi Supreme to add content carousel:
- Blog Carousel: To create carousel from blog posts.
- Card Carousel: To create carousel whereby the content is added manually. Useful to create testimonial carousel.
- Image Carousel: To create image carousel.
- Post Carousel: To create carousel from pages and WooCommerce products.
In this post, we will show you how to create image carousel using the Image Carousel module. You can use this module to show off your clients, partners, or other elements of your business.
Before getting started, make sure you have installed the pro version of Divi Supreme on your Divi-powered WordPress site. Once you are ready, create a new page (Pages -> Add New) and edit it with Divi. You can also edit an existing page, of course. On the Divi Builder editor, add a new module by clicking the grey button and select Supreme Image Carousel.
On the appearing settings panel, click the plus button on the Image Carousel block under the Content tab to add your images. A little note. Make sure to use images with the same size (dimension) for your carousel to make it looks neat. You can use tools like Photoshop and GIMP to edit your images.
Once the images are added, you can open the Carousel Settings block to make the basic settings to your carousel. You can set things like carousel effect, carousel direction, number of slides to show, slider speed, auto play, and so on.
If you want to enable the lightbox, you can open the Lightbox Settings block. While to set the background of the carousel, you can open the Background block.
Styling Up the Carousel
Once you are done making the basic settings on the Content tab on the settings panel, you can switch to the Design tab to style up the carousel. There are 10 blocks you can open on this this tab.
You can open this block to set the horizontal alignment of the carousel content.
You can open this block to set the position of the arrow, color of the arrow, size of the arrow, and color of the pagination (the dots).
You can open this block to style up the image of the content. You can set things like the image border radius, image box shadow, and CSS filters.
You can open this block to set the size of the Image Carousel module as well as the alignment.
You can open this block to set the spacing of the Image Carousel module. There are two settings you set here: margin and padding.
You can open this block to set the border of the Image Carousel module. You can set things like the border width, border radius, border color, and border style.
- Box Shadow
You can open this block to add box shadow to the Image Carousel module.
You can open this block to add CSS filters to the Image Carousel module.
Divi Builder comes with a built-in feature to apply CSS transform to a module. You can open this block to apply CSS transform to the Image Carousel module. You can read this article to learn more.
From this block, you can set the entrance animation of the Image Carousel module. There are 7 entrance animation styles you can choose from.
Once you are done customizing the carousel, make sure to click the green checklist icon on the bottom-right corner of the settings panel to apply the changes. Then, click the Publish button on the bottom-right corner of the Divi Builder editor to publish the page.
The Bottom Line
When it comes to design elements, Divi Builder tends to be left behind other competitors like Elementor and Brizy. Fortunately, it supports extensions so that third-party developers can develop a plugin to enrich the module collections. If you need to add content carousel on your Divi page, Divi Supreme is one of the plugins you can install. It allows you to add content carousel from a wide range of content types. From blog posts, WooCommerce products, pages, to images.