A while ago, we posted an article on how to create carousels in Divi with our very own Divi Carousel module and many of you are asking how to do that inside a popup.

So we improve both the popup and the carousel modules, a week ago. Now with our Most Advanced Popup extension for Divi, you can easily show a carousel in a Popup. You can show a Card Carousel or an Image Carousel in the Popup.

Let’s get started – Creating Card Carousel

So let’s start with this tutorial. First, you’ve to design a Carousel Layout in your Divi Library. You can check this tutorial to learn How to create beautiful Carousels in Divi. After you’re done with creating a Carousel it can be Card or Image whatever you like you’ll simply add it to Library. You can go to Divi -> Divi Library and click on Add New Button then Insert the Layout name and choose Layout type as Layout.

Now you’ll see Divi Builder enabled and you can now insert the Card Carousel Module to get started. I’ve also added a Text Module Before saying “New Movies Below”. You can have your own one if you want.

Now you’ll need to create carousel items you can click on +Add New Item to add your first Carousel Item and then you set up your First Carousel Item.

You can follow this article to get started with creating Carousel: https://divisupreme.com/blog/how-to-create-beautiful-carousels-in-divi/

So clicking on +Add New Item button will open more new settings, while in the Content Tab you can set up your Content that you want to show to people. In the Text Panel, you can set up your Title, Subtitle, and Content. We’ve left the Subtitle field for our example you can have it if you want.

Now open up the Image & Badge Panel and add an image you want to show and choose select the height of the image to whatever you want.

Now scroll down a bit and you’ll see Image Hover Animation and Badge Text field. Choose any animation you want for the Image and Enter a Custom Text for the Badge.

So we’re done with Creating our First Carousel Item you can come back to Main Settings and duplicate the First Item to how many numbers you want and don’t forget to change the content of each Carousel Item like we just did.

Now you’re doing creating Carousel Items you can now scroll down and open up Carousel Settings and do these changes:

  • Carousel Effect – Coverflow (You can choose others if you like)
  • Coverflow Rotate – 40
  • Coverflow Depth – 350

You can also play around with other settings in the Carousel Settings.

Now open up the Design Tab and go to Border Panel and scroll down a bit you’ll find Card Rounded Corners simple add some Corner Radius to the Card from there.

You can now open up Box Shadow panel and add a Box shadow to the Card. We just changed the shadow color to rgba(0,0,0,0.08) other settings were set to default you can even change those settings if you want.

Now it’s time for you to design the Button you can open up Button Module Settings and enable the switch “Use Custom Styles for Button” and then you can easily design the Button the same way you style Button in Divi.

Alright we’re done with Creating a Carousel now it’s to add to it Popup, let’s say you want to show a carousel of newly released movies they’ll click on the Button and will see the Popup with Having a carousel in it. Let’ add it. Open up Divi Builder and open up any Button Module Settings -> Advanced -> Visibility Use Popup. Enable this switch to open a Popup on Button Click.

So as you’ve enabled the use of Popup you can now set it up, Here are some changes you can make for the Carousel we created recently for it to show on the screen correctly:

  • Popup (Divi Library) – Select the Layout for the Carousel you’ve just created.
  • Trigger On – Select a trigger method here, we’ve selected the Trigger method as a Button click.
  • Entrance Animation In – Select the Popup entrance animation here we’ve selected Zoom In.
  • Exit Animation Out– Select the Popup Exi animation here we’ve selected Zoom Out.
  • Popup Max width – 1200px
  • And you can play around with other settings in the Popup extension too.

Great, you’re done with creating a Popup carousel. Here’s a quick look

Creating an Image Carousel

So now let’s see how to create an Image Carousel Popup, first of all, go to Divi -> Library -> Add New then you’ll see a Popup enter name for the Layout and select layout type as Layout like we previously did. Now you’ll be able to see the Divi Builder and then you can simply insert the Image Carousel Module.

Add some images for the image carousel.

If you want you can open up Carousel Settings panel and play around with setting up the Carousel Appearance, so now we can go to Design Tab -> Element and make these changes:

  • Arrow Color – #fff
  • Arrow Background Color – #8300e9
  • Pagination Active Color – #8300e9
  • Pagination In-Active Color – rgba(131,0,233,0.25)

Now open up Image Panel and add Corner Radius of 10px to the Image

You’re pretty much down with Image Carousel module you can now add it to the Popup the same way we did before nothing extra to do just select Layout as the one you created for Image Carousel.

Alright everything is done for Image Carousel Popup and here’s a quick look

So there you go, you’re done with creating a Carousel Popup for Content or Image, those are just simple examples you can get more creative and create a very Cool Carousel Popup, let us know what you think about this tutorial in the comment section below and if you face any issue let us know that too. Have a great day!

How to access the Divi Popup extension and Divi Carousel Module

To use the Divi Popup extension and the Divi Carousel Module, you need to purchase the Pro version of our plugin at the cost of $40 for one website and $79 for unlimited sites. Both plans come with a 30% discount on renewals while we also offer you premium support and free updates during the licensing period. Want a more lasting plan? We also offer a Lifetime plan which goes for only $199. With it, you can install Divi Supreme Pro on unlimited websites while you also enjoy premium support and free updates forever.

Our goal is to assist you to create beautiful and effective business websites without impacting negatively on user experience.

So, give Divi Supreme Pro a try today and don’t forget to share your experience with the Divi Popup extension in the comments section below.

Or try out the Divi Supreme Lite

Divi Supreme Lite Offers 20 Modules and 3 Beautiful Extensions and using them you can easily extend your site’s functionality.