Get Started with Divi Presets - What I Wish I had Known

hello and welcome to divi coaching today we're going to be looking at the use of presets in divi now there's a concept in coding called dry or don't repeat yourself which is pretty self-explanatory and that applies to divi as well quite often you find yourself putting modules in on pages and then having to go in and change all the settings in that module to get the look that you want of course you can always use the library to install pre-configured sections but the use of presets is another powerful way to reduce the amount of repetitive work that you do as you build your site there are a few things that are possibly not quite as intuitive as they could be when using presets and i'm going to cover those today so let's jump in and start learning to use presets in divi we're going to start with a brand new installation of wordpress all i've done is delete all of the default content and install and enable the divi theme so first thing i'm going to do is jump into the pages section i'm going to add a new page and i'm going to call it presets i'm then going to click to use the divi builder once we're in the visual builder i'm going to choose build from scratch and click on start building i'm not going to add a row we're going to go in and start having a look at how presets work now presets can be applied to any element within divi and by element i mean they can be applied to a section to a row to a column or to any of the modules effectively what they allow you to do is save settings for each of the possible variables in the module so that when you later come back and install a new module you can simply choose the preset from a down list and all of your settings will be applied to that module which greatly speeds up what's going on so there's one quite difficult concept though um which we need to have a look at because it's not particularly intuitive and that's the concept of default so we're going to go in and have a look at how that works now so i'm going to click on the settings for this section and within the section settings we'll see at the top here it says preset default now what's really important to to note is that there is no such thing as a preset called default there is a setting which tells divi which preset to use as the default and by default i mean every new element that you add to the page will be based on whichever preset is set as default now on a new installation there is actually a preset which isn't visible in this section yet which is called section preset one and which has been has been set as the default now for some reason as i say that doesn't show at this stage in order to make everything clear you actually have to add another preset so let's do that now so we're going to say create a new preset from the current styles and as we haven't actually changed anything it's basically just going to create a copy of this default preset so i'm going to click on that and i'm going to call it section preset 2 and i'm going to click save now when you start editing a preset the modal will flip over and this gray color at the top will tell you that you're editing the preset rather than the individual module now i'm not going to make any changes to this for now i'm simply going to click on the tick to save it and we can then have a look at what's going on so now when we come back up to the top and click on presets we'll see two things we'll see at the top here it says section default preset is based on section preset one now that was the case a little while ago but it didn't actually tell us that until we added the second preset so now we have added a second preset we can see that there's a tick a green tick against it and that tells us that that is currently the preset being used for the section that we're working on we can also see from the grey star next to section preset one that this is now set as the default preset and this also shows us this at the top which says the section default preset is based on section preset one now i hope that's clear to make it clearer still what we're going to do is we're going to go into section preset 2 and in order to edit that preset we click on this little pencil and i'm actually going to change the color of the background to red it will immediately change the color of the background in the section that we're working on because we have assigned that section preset 2 to that section notice we're on the gray side of the modal so that means when we click on this it's going to ask us whether absolutely sure because we've made a change to a section preset rather than an individual section if we click on yes we then come back to the modal setting so we now have a section that we're working on currently it has section preset two we can go in here and we can choose section preset one and it will go back to our initial state now because the section default is based on section preset 1 it means that if we come in and add a new section it will automatically take the characteristics that were set up in the default preset and we know from clicking on here that the default preset is based on section preset one and we know that because there's this star which is telling us that that's the preset that's to be used as the default few right however if we change that so if we now say that we want the default preset to be preset 2 we can now see that we're still choosing the default at the top here but that now it says default preset is based on section preset two and if we save all of that and we now come in and add another section it will take our settings from section preset two so if we go into this we'll see that yes it says default at the top but that that default is based on section preset two which is the preset that we've defined i hope that's all clear um we'll go through a few more examples but this is what we've now done now my suggestion is that you don't edit this section preset one to make things more entertaining when we click on the preset default at the top there is actually an option to edit the default preset and because this default preset is based on preset 2 when we actually click on this we will be editing section preset 2. now it's a bit of an odd way to go about it and personally i would rather go straight in here and edit preset 2 because we know that the default is based on that anyway but whichever preset is set to default will be edited when you click on the pencil up here so i suppose it's easier than necessarily looking for which one is there so if we click on this now we will actually be going in and editing the default preset but we know that that default preset is section preset two so if we change the background color from the red to something different say the green we can see that automatically it has changed the background color of the default section preset but it's actually done that by changing the background color of the section to preset now i'm afraid all of that was quite a difficult concept to explain but i hope that that now makes some kind of sense and we can now go on and look at a few more examples of how we can use presets to speed up our workflow okay i've now deleted the various presets that we used in the initial section of this video and we're now going to look at how to use presets to design your site so the first thing we'll do is we'll go into the section settings as i'm sure you know divi gives you 50 pixels of padding at the top and bottom of every section now i don't like those i like to have a margin at the bottom of the section rather than padding at top and bottom and i like to set this up on a preset so i'm going to go into here i'm going to say add a new preset and i'm going to call this preset section no space and i'm going to click on ok i'm going to go into the design tab i'm going to go into spacing and i'm going to go with a zero padding top and bottom and i'm going to add a bottom margin of 50 pixels and i'm going to click on save i'm going to get the confirmation dialog i'm then going to go up and i'm going to say that i want this no space section to be my default section by clicking on the little star again i'm going to click on the confirmation and click on save now next time i add a section it's going to add a no space section by default and i can go in here and see that the preset is default and that that preset is based on no space section which is the section we've just defined so that now means i can add a section anywhere in my site and it will have the spacing that i want if i still want to go back to the original divi spacing i can just click on section preset one and it will reset it to the original settings okay but i don't want that so i'm going back to my no space section next thing i'm going to do is add a row and obviously the same thing applies to a row i could go in here and i could adjust all of the spacing options for that row i'm not going to do that in this case because this video has gone on for a while already but i'm going to go in and show you how to customize a module so in this case we'll go in and with a button module now up here i'm going to click on create new preset from custom styles and i'm going to call it red button and i'm going to click on save i'm going to go into the design tab button tab use custom styles i'm going to choose a background color of red i'm then going to go up set the text color to white i'm going to set the border radius to 10 pixels i'm going to set the font weight to bold and i'm going to set the text to uppercase and that's everything i want in my button i'm now going to save that it's going to ask me for confirmation because as you can see i'm on the gray side so i'm now editing a preset i'm going to say yes now i want all my buttons on the site to default to that type of button so i'm going to come up here to the preset i'm going to come down to where my red button is and i'm going to click on the gray star to make that the default button for every button that i now add to the site i'm then going to click on save so if i now come back in again and i add another button that button is going to default to the red button that we've just defined i will be making a video with a more detailed demonstration of how to use these presets to set up a full style sheet for your entire website i hope you've got value from this video and if so then obviously i'd appreciate a like or a comment below and if you're not already subscribed to the channel then perhaps you'd like to do that thank you very much and i'll see you next time

Channel: Divi Coaching - Build Great Websites with Divi

Views: 802

Keywords: divi presets, divi theme tutorial, divi builder, divi builder tutorial, divi global presets, divi preset tutorial, getting started with divi, getting started with divi builder, getting started with divi presets, divi tutorial for beginners, divi 4.0 tutorial, divi tutorial, divi theme, divi presets tutorial, divi presets explained, divi theme builder, divi theme builder tutorial, divi theme tutorial 2021, divi visual builder tutorial, divi tutorials 2021

Id: aGYJ8eRF1fk

Length: 11min 9sec (669 seconds)

Published: Tue Apr 27 2021