This SOP details the process for setting up and customizing a Divi Supreme Card Carousel for your website. It guides users through adding sections, editing card content, and applying styling settings appropriately.
Hey guys, I am going to do a video on using the Divi Supreme Card Carousel. Um, so I'm logged into the back of my site already. I've enabled the visual builder. If you don't know how to do that, we have another video that will walk you through basic edits to your site. Um, but first thing I want to do is I'm just going to add a section, and this, these card carousels are good for maybe you want to display, um, features of your church, or maybe you want to display your ministries, or for this instance we're going to do kind of a timeline, um, now we can do just one row for this, and then I'm going to search for carousel. Now, if you don't have Divi Supreme installed, you're not going to be able to see these little purple modules, you're only going to see the grey ones, like these. If you want Divi Supreme installed into your site and it isn't, just reach out to us at support, it doesn't cost anything, it's just a matter of installing it. So let me pull that back up. Okay, so we have a blog carousel, we have, we can do a singular card, but I want to do a card carousel. And first thing I want to do is I'm going to add an item and you can see that it automatically pulled all of these up. Some of these I'm going to want an image, some of them I won't, uhm, but we'll get to that in a moment. So let's maybe make this January , whoops, 2001. And so that came to be our title and then you can see right here this is the content. And since I only have one card, you can see that it duplicated, uhm, so you're going to have, need to actually go in and update all of these so you don't accidentally have duplicates. Uhm, you can also, you can have duplicates. You have a button. Maybe, uhm, the timeline is in January 2001 our kids ministry started, blah, blah, blah, blah, and you can have a button that links to the kids ministry page. That's where that would be helpful. But for this instance, I don't anticipate needing a button, so I'm just going to turn that off. Uhm, but actually, I'm going to need this for styling, so we can show you how to do that. But, as you can see, when I just delete it, it disappears. And I'm going to do the same thing for the image. Maybe I don't want an image on the first one. So I'm going to go up here, and I'm just going to click delete. And then I'm going to turn this off as well. So you can see that it disappeared, uhm. I might want an image on a different card, but I don't want it on this one. So I'm going to hit this little back button. And you can see I have one card right here. I'm going to duplicate it. And then I'm going to hit the settings button, and this is how I'll update the content. So maybe this is March. And we want it to be 2008. And I don't want the button on this one, so we're just going to delete it. And I'm going to create a few more cards, and then I'll turn this back on for styling. Okay, I added four cards total, and you can see some of them are just text, some of them are text and a button, and some of them have images. So, what I want to do is, first thing is, you can see the badge text right here. Let me show you how to edit that first. So, we have the March 2008, I can hit the settings, and then I'm going to hit the image and badge tab. So, this is where you can edit that. Like, maybe you have a picture of your church under construction. That's where that would be helpful. So, you can kind of say, like, what this picture is of. Now, if you don't want that badge text, same as the button, just delete it. Delete it, and it'll disappear. Uhm, and then, once we make changes that we like, we want to just hit this green check button. Now, with styling, I want the styling to go across every single card. So, I want to make sure that I have, I am on the Supreme Card Carousel settings. Now, if I hit the settings on this one, you can see it says Card Item Settings. If I change this, uh, styling for this, it is only going to change for the January 2001 card. And then, I'm going to have to manually go into every single card and update the styling, and I do not want to do that. That's going to take forever, and there's more probability for a mistake and for something not to match. So, make sure you are not here when you're messing with the styling. You want to hit that one. Hit back button, and we want to go to design right here. So, first thing, actually I lied. First thing we're going to do is go to content, and then we can go to the carousel settings. So, we, right now it's set to go left to right. We can make it go right to left. You'll see it change. You can make it slide, you can make it like a cube, or it'll flip. I don't recommend that. I recommend doing a slide. Uhm, and you can make it vertical if you want. And it'll just kind of flip through, as you can see. Now, you can see right here the height is being cut off, so let's maybe try making this 100%. And because these cards are different sizes, you can see that it's, it's kind of weird. Uhm, so, I don't like that. You can also change the amount of slides that are being shown. So, maybe I want to just show three at a time. It's going to show big giant gaps. So, I don't recommend doing that. I'm going to go back to horizontal. And then, the default is for it to show three slides. Maybe I want it to show two. Or, maybe I want it to show four. I have four slides total. And, that'll kind of shrink them a little bit. Uhm, you can change the slider speed. I feel like this right now is a little fast, so I'm gonna move it up a little bit. You can also make it so it auto-plays. Like, if you turn this off, then your users will have to use the arrows, or they'll have to kind of drag it in order for it to move. Or, if you turn it on, it's automatically Please. going to go through the slides, like, as you can see. Now, I'm gonna do left to right, just because that makes more sense in my head. It's up to you. Uhm, and then, this is auto-play only viewport. That's telling it only auto-play when it's, like, 80% in the screen. So, that's what that is. You can say, use on mouse wheel, and that's, like, if I hover over it and I use my little mouse wheel, if I have a mouse. It'll scroll like that. You can also set it to pause on hover. So, if my cursor is over it, it stops moving. Uhm, spacing. This is the spacing in between the cards. You can see that kind of shrinks. Uhm, and, but I think 15, maybe 20 is a good, comfortable, infinite looping. That means it'll keep on cycling all the way through. Uhm, we can show arrows, we can not show arrows. We can show the little dots at the bottom, we can not show arrows. And we can use a grab cursor, that's what I was showing you. Let me show you turned on. That's the grab cursor. If I turn it off, they can't do that. Uhm, I don't see a point in turning it off. But, there you go. That's all of that. Now, we're going to go to design. Keep in mind, we're still on the settings for the entire carousel. Uhm, maybe I want the image width to be %. Let's make them a little bit smaller. You can see that. Right now, they're not aligned. I want them to be centered. There we go. It's centered in the card. And maybe I want the cards to have kind of a border. So that's all the settings that I want to do for the image. So, let's start with the badge. Thank much. You guys can see it kind of got cut off right here just because I shrank the image. Uhm, so maybe I want the background to be black and I can go down here and I can change the text to be white. I saw that change right there. But you can play around with these settings. Uhm, the arrow element, that's the style of these guys right here. You can change where they are. You can change all fun different settings, which that was a mobile setting, so, yeah. Inside and Move to them in a little bit. I like them outside. Uhm, for mobile, it's better to do it inside just because it'll probably get cut off on the screen just because you have such a small screen. And you can change what style of arrows that you want. I like these guys, so I'm gonna leave it alone. Uhm, we can make it a little bit bigger. Maybe I want them to be this fun blue. There we go. And you can also make it have a background. There you go. And that box is a little weird, so let's change that. Change the radius. Now it's kind of a nice rounded box. I'm going to change that back to white so it looks a little bit better. Uhm, we can add all of those fun settings. All of that. This will change the styling for these buttons down here. Title text. We can make this bigger. We can change the color. You can see that grow right there. And so that's how we make all of those changes. I want kind of a shadow around these guys. So first thing I'm going to do is I'm going to change this to, whoops, not 78. Let's change it to 8. Only, now that I think about it, that's probably going to change the border for the entire carousel. So that might be ha- be- that might be a setting that we have to go in. Oh, actually, I lied. Card-rounded corners. That's what we want to do. Now you'll see right here, I'm changing the card. So the height is a little funky. I want to update this because you can see the cards are getting kind of cut off. Maybe we want to go to spacing. I'm going to link this and I'm going to change it to 30. Let's see. There we go. So that added a little bit of padding around. I want a little bit of padding on the left and right as well. There we go. Actually, I'm going to move this down a little bit. I want it to be about 15. So, you can see what that looks like. And you can play around with it. You can make the backgrounds whatever color you want. Now, that is one thing that I think we have to go to the individual cards to change. Yes. So, if I go to background right here, this is going to change the background color. It's going for the entire box, as you can see. So, I want to delete that. And because I've changed so many settings, good practice is to hit that green check button. We do not want to lose all of the work that we just had. So, we can go back to the settings. And I'm going to go to each individual card, and this is how I'll change the background color. Uhm, we're going to go to, let's go to global. And let's make it this nice, fun blue. You can see that changed right there. And I'm going to hit the check button. It's going to take me back to all of my cards. And maybe I just want to alternate. I don't recommend this because this will be a giant pain every single time you add a new card. Uhm, let's say you wanted to add a card in between these two. Then you're going to have to go to every single card and update the alternating colors. But for this instance, we're going to do it just because we can. So, that's all of that. Uhm, I can see I kind of want some padding above the image. I want to change that button styling a little bit. So let's go back. Go to design. And let's go to spacing. So, that's another thing that we're going to have to change on the individual cards. So, for each individual card, we have to go to design. Spacing, and maybe we want it to be 30. Nope. Let's link it. And that still didn't change the image. So, we're probably going to have to keep to the image styling. Let's go back. See, you can see me experiment. Okay. So, before when I was changing the padding on the individual card, I was just, changing the spacing for this guy right here. But I want to go right here. I'm going to link these just because I can. And I'm going to change this to 20. If it'll let me. There we go. So, there you go. You can see that spacing added at the top and bottom of the entire car. Now, I'm going to hit these three dots and I'm going to copy padding. I'm going to go over here. And that was a June 2010. I'm going to hit these three dots and I'm going to copy padding. Paste item style. So that added it right there. So there's a quick and easy way to make that change. And there we go. Now, I like all of that. I'm going to, go to design, update the button styles, turn this on. I want the text to be white. I want the background to be black. I want the border to match the background. And I want this to be round. There we go. And I don't want that hover feature. So I'm going to turn this off. Maybe when I hover it, I want the background color to change. So we're going to click that. And let's make the background color that fun blue. So you can see that border kind of showed up. So I want that to disappear as well. So we're going to make a hover feature for this. And it's going to be that fun blue as well. So when we hover over it, it changes to that color. When it's just a static color, hit check button, it's black. There we go. Hit the check button. Now you have a carousel. If you have any questions at all, please feel free to reach out to us and we'll be happy to help.