This SOP provides detailed instructions on how to create, manage, and edit Divi presets to ensure cohesive design across your website. Utilizing presets can significantly streamline the process of applying consistent styling, saving time and improving efficiency in web design tasks.
Hey everybody, I am going to do a video overview of Divi presets. Uhm, those are very helpful to keep the design across your site cohesive. Uhm, so that, uhm, if I make one kind of styling change on one part of my site, then I don't have to go and make that change across my entire site. Uhm, so, we try to enable these presets at the beginning of creating your site, so that, let's say, your brand color changed from blue to purple, or your brand font changed. Uhm, we can help you make these changes faster. And the faster we can make them, the cheaper it is for you. But I want to show you how to manage, uh, create, and adjust these presets on your end. Uhm, so first things first, is I have these two sets of sections with four presets, or four modules that have their each individual preset. Uhm, I just realized I want to add in a button module. So I'm going to add that really quickly. check mark And then I'm going to add another one down here. And you'll see me apply a preset to this one. There you go. That's a quick little preview. Now, if you've ever gone in to edit your site, uhm, and you haven't used a preset, and you want a change, like, let's say you want all of the buttons on the kids' page to be, to have, like, a bigger font, and for them to be orange instead of green. Then, if you haven't used a preset, you've probably already written down all of the little settings changes that you have made on that very first button, and then gone through the page and made each and every single change, and it takes a lot of time. Sometimes you don't get it quite right, and there's a lot of back and forth. So presets can save you from that. Now, uhm, on any of these, it can be in a section, a row, or a module, which is the text, image, button, etc. Uhm, you can have a preset. Ninety-nine percent. percent of my presets will be within a module, though. So just keep that in mind. Uhm, you'll very rarely use them unless you have a very specialty kind of section and row. Like, I have one applied to this section, just to because it has the two different colors, I had to change a bunch of spacing, etc. But I'm going to focus on modules for this video. Uhm, so this text right here, if I hit the settings, and then if I go, you can see at the very top, right under the name of the module, it has preset and then what the preset is. If I hit the drop down, the default preset is the one that has the star next to it. So you can tell it to make a different preset, your default one, just know that, if you have this kind of default preset applied, uhm, then it is going to change all of them. So we tend to make the default preset based on the black text just because it's a good go-to to have across your whole site. Uhm, so that, here is just my list of presets that I have applied, uhm, so if I hit the check mark, I'll show you on the button, this one is the default, but if I click on it, you can see that the preset 1, You can see it has a little star next to it, uhm, if I wanted to change it to the secondary color, which is kind of a gray, I can change that, uhm, there's a secondary outline, there is a primary outline, which those colors are so similar. It's very hard to tell. Let's change it to white. There you go. Those are pretty obvious changes. Uhm, but I'm gonna go back to preset one and hit the checkmark. And then we have our images. Uhm, so you can like, if you want all of your images to have, have a rounded border of 15 pixels. You want those corners nice and rounded. Then you would add the image preset. If you, there's, I mean, that's probably the main change that would make to my images. Uhm, I think another change that I would probably make would be, like, the box shadow. See if you can add up the shadow like that, but I don't want that. Um, if I go to content, hit the dropdown, preset one, this is my default. But then I have in a few, like this one kind of tilts. The image, this one tilts it the other way, I mean, I want balance, um, the staff images that I have have specific settings to them, so I wanted to save that, because if I have 20 staff members, I don't want to have to go in and change all those settings. Um, and then, like, my title section image is, has some specific styling to it, which, there's a border on this one, you just can't see it, because the background's white. Um, but I'm gonna go back to the preset one. So, there's a little preview of the presets, and then I have, like, the white one right here. I have the white button that I already showed you, and then I have the white border for this. So, I'm gonna show you how to edit a preset, and then how to create your own from scratch. One thing you want to keep in mind when you're editing a preset, anything without a same preset, if you make a change to one, you're gonna make a change to the other. So, that being said, what I'm gonna do is I'm gonna hit the settings button on the row, and then I'm just going to duplicate this column. Hit the check mark. Now you have these modules with the exact same preset applied, uhm, but with, right next to each other. So, we can see the changes happen. Now, if I hit the settings button, I'm gonna drag this over just so we can see, and you'll notice that that little H3 is like a slightly different color, and if I scroll up, you can see these are my H3s. It's just kind of like a little call-out text that I have across the site, on this particular site. So, that's where I'm gonna make the change, because I'm not gonna mess anything up. So, I hit the drop-down, and then I can see the one that's applied. It's called the default black. This is the one that's applied. I'm going to hit this little pencil. If I hit the settings, I can change the name of it. I don't really want To do that, But if I hit the little pencil, it's going to flip my box, and then it's going to make it grey. When it is grey, that means I am editing the preset style. So, I am editing everything with this preset. So, if it's grey, just stay alert to what you're doing. Now, we can go to design, and I have each of these labeled just so it's easy to tell. And maybe I want, I want it to pop a little bit more that that H3 is a different color. So, I'm going to go to the H3. And then, I want to go to my global colors, and maybe I want those H3s to be my accent color instead of my primary color so that they pop a little bit more. So, I'm going to hit this coral, and you can see it changed on both. Let's see if I have one applied. Yep, that's another spot that has that same preset, so it changed there. Here's another one that has that preset, it changed there. If I scroll up, let's see if there's another one. Yep, there's one. There you go, you can see I made that one change, and it changed across the board. And so, if I like the change that I made, I can hit this checkmark, and it's going to save it. We're good to go from now on. On that H3 is my accent color, it is no longer my primary color. Uhm, you can do all of the same things that you would do to edit a, uhm, module within the preset. It's just, it's a bigger change. Making it, making it across the board. I can change the font size. Uhm, this is helpful because I can make sure that it's going to look good across all of the devices with all of the modules. So, I'm not going to have a 90 pixel font on a film. That's a big, that's a big font. It's going to take up your entire screen. Uhm, so I'm going to hit that check mark and then hit yes. And now that change is final. I can go back in and change it again if I want to, but that change is final. Alright, so now, I am back in the purple, uh, top box. So that means any changes that I make now are only going to be applied to this. So, you see. You saw that when I made one change to the H3, it made it across this entire page and across the site. So, if I go back to the H3, you can see that's applied. But, if I go to Global and I hit Green, I change it back to Green, but I only changed it on this one right here, where I'm actively editing. I did not change it here. And, if I scroll down, it's not changed here either. So, I don't like that change. I'm going to undo it. And then, I'll hit the check mark, and there we go. Uhm, one of the spots where I really, really, really like presets is within the button module. So, I'm going to go to the settings, button preset 1, I can hit the pencil, design, button, and then we can go in and change the colors. Oh, that's the same color. So, we can make it like that, we can make, The border blue, we can do all of that. Now, I don't want to save any of those changes, so I'm going to hit the X. And now it reverted it. Now, let's say I like this button, but I need a coral one now. I, I have that. Accent color text, I need an accent color button. And you can see that the styles of, like, the white button is a similar style to the green button, the colors are just different. I don't want to have to copy and paste all of those settings all over again. It's annoying. It takes forever. There is a way around that. So I hit the settings, hit this drop down. If I hit this clone button, it is going to clone that preset. It's going to clone it with all of the settings that I, that are currently there. So it's going to duplicate this preset, but that way I can go in and I can make the edits, make the necessary edits, but keep the necessary things the same. So I'm going to duplicate it. And it's going to ask me what name I want it to be. So it's going to be Accent. Color button. And you can make the titles whatever you want. You just want it to be descriptive for you because you just see a list of it. You don't see what each one looks like. So I'll add the title. Okay, now, we're in the preset for the accent color button. And you can see it, like, flipped it over and then it flipped it back. So I want to edit that preset. And I'm going to go to the little pencil. Now it's flipped it back over. It's gray. Again, I'm making the edits within the preset. So if I go to button, I'm going to leave everything the same except for the color. Go to global. I want it to be this nice coral color. And you can see that border didn't change colors either. So I'm going to go to global. Hit that. Now, if I hover over it, it changes that gray color. I'm okay with that. I'm okay with that matching across the board. But now we have an accent color button. I changed the border color. I changed the background color. That's the only change I wanted to make. So I'm going to leave it like that. I hit the green check mark. And it's asking me, are you sure you want to make these changes? It will affect the entire site. It gives me a warning. So I, I am sure. So I click yes. And there we go. Now we hit the check mark and we can hit save. So that's how you duplicate a preset and then make modifications to it. Uhm, so like, as you saw before, this is the white text, all of that. Uhm, now let's say I wanted to make a preset from scratch. Uhm, one thing that I like to do is, let me add, let me in another image. Okay, so, I'm just going to be editing this image just like normal. I'm going go to design. I want a box shadow on here, which is kind of hard to tell on this background. So, let me move this so that it's easier to tell. Okay, there we go. So, you can see the box shadow. I can go to settings. Maybe I want the border to be a darker color. Let's go to global. There you go. So, it's a darker gray. I don't want the pointy corners, which, I don't know, if you're going to have pointy corners on one of your images, I recommend you have them on all. I don't recommend you alternate between pointy and rounded, but that's up to you. But, let's pretend I want this one to be rounded. So, rounded it by 8 pixels. There we go. And, I don't think there's any other changes that I want to make. But, okay, let's say I was editing an image. I'm like, wow, I really like that. I would love to be able to use it across my entire site. And I don't want to have to make those changes. So, this is what we do. We hit this dropdown right here. And you can see these two grey buttons. You can click add new preset. You're going to be starting from scratch. Or, you can create a new preset from current styles. So that means, all of the styling that is currently applied in that module where you're working, you can create a new preset that automatically has those apply. So, if I hit this button, I'm just going to title this example. So, I don't want to keep this. I'm actually going to delete it after this. I'll hit the check mark, and then we have that preset created. Hit the check mark again. So, I have that. This one does not look the same. One of these things is not like the other. So, I hit the settings, go to the dropdown, go to the example. And it automatically applies my settings. So, that is one great cohesive thing. You might notice that maybe everything didn't apply. Like, this doesn't have a shadow. If you go to filter and go to modified styles, you can see some of the things aren't quite right. So, if I hit these three dots and click reset module styles, it's gonna reset everything that doesn't, that isn't included in the preset. So, if I reset, that was applied. Another, I'll show you another good example of that. So, if I go to settings, I'm within the example preset. If I go to design, and let's change the border to turquoise, Thanks. And then, let's change the width to 200 percent. That's a little big. Uhm, I hit the check mark, there we go. But, I don't want it to look like this, I want it to revert back to the presets, but I don't remember all the changes I made. Hit the three dots. Reset module styles. It's going to undo it, and it's going to go right back to what the preset that is currently applied. Same thing for the text, maybe if I go to design, heading text. And I change the H1 to blue, hit the check mark. Okay, I don't want it to be like that. Three dots, reset module styles. So it's set to the default, all of that. Uhm, so those, that's a breakdown of presets. How to create them and edit them. Uhm, just make sure that you're confident with the presets that are applied across the board. Now, if you create a new preset, it can make it so that it's a little bit easier to make changes. So, maybe I want this text to be white instead of dark. If I hit the drop-down and go to white, it automatically makes those changes for me and that makes my life so much easier. I don't want to have to remember each and every single setting that I have done on each and every single module. So, there's your preset breakdown. I know it can be overwhelming. So, if you want us to create them for you, we are happy to. If you have any questions or if you want to set up a training session with us, just reach out to us at support and we will be happy to help.