Divi Global Presets

global presets is an evolution of global defaults taking global settings and styles to a whole new level instead of allowing just one global default for an element global presets allows multiple defaults called presets for any element in Divi furthermore when you update the design of one preset it updates every instance of that preset site-wide global presets speeds up the design process both on a local and global scale global presets exist within the settings modal of any Divi element this includes a section a row a column or a module to access the global presets for a specific Divi element in this case a button module for example simply open the settings and click the preset drop-down menu at the top of the modal this is where you will manage all of the different presets that you have for a specific element as well as use the links to create a new one each of the presets that you add will have its own collection of styles and options that you've created for that specific element and by selecting each one you can go back and forth between each preset to change the design for example this is my button preset number one that I'm using here for this button over here on the left by select button preset two you can see it changes to my orange button if I select button preset three you can see it changes to royal blue and then my button preset four is my yellow button and as you can see this is a great way to speed up the design process not only locally for your page in this one instance but also site-wide or globally these are why they're called global presets by updating the preset for this one for example if I updated button preset number one I update all instances of that button preset being used site-wide so if i have another button on another page using button one preset or button preset number one then that button design will also be updated when updating the global presets for an element in Divi you have the option of deploying the global preset settings modal for that element you can do that by clicking this edit preset styles for that preset you can see this is my global preset settings modal here and this modal will have a grey header as opposed to the purple to make it easier to determine that you are editing global preset options rather than options that only apply to the element locally so once you're here whatever design you add to this preset will be saved globally and to make sure that you understand the global effects it will prompt you with an are you sure notification to let you know that this will affect all button modules using this preset click yes and the change will take effect globally now before we get into a more detailed explanation of all of the global preset options let's do a quick overview of how global presets works and how you might use them on your own website for example we've been using this button example of all of the different button presets currently now my buttons all have a default preset and I don't have any other presets for my button module I've deleted those and so this right here if I click on my preset drop-down menu you'll see that only one preset is available and that is my default preset I can click on the Edit preset styles icon and this will open up the global preset settings modal and this is where I would change the design for my default preset for my buttons and in this case you know I have this you know light background the royal blue button text color there and if I update the settings for this default preset you can see that the for example I change the button text size you can see it's being updated on all of those buttons because they're all sharing the same preset they all have the same default preset being used and so this is to help demonstrate the power of the global presets because it has an effect on these instances site-wide so once I finish updating my button preset I can save it and it will again prompt me to make sure that I'm I know that it's going to have a global effect on all those buttons using that instance and then I will click yes but maybe you want more than one preset maybe you want something other than your default preset to do that you would create a new one to do that open up the global preset drop-down menu again and then you can either create a new preset from current styles that would mean for example I can go in and start changing the design of this specific button and once I'm finished you know tweaking the design however I like I can always go back here and create a new preset from the current styles being used like click on this button it will prompt me to enter a preset name you can give whatever name you want like orange button preset or something like that and I have the option to assign it to my default if I want which I don't want to and then I'll click the check to save the changes and now I have a new preset already created and it kicks me over to the the global preset settings modal for this button preset number two that I just created and I can go ahead and make some further you know design changes to this preset if I like and click Save and now if I go back to my global preset drop-down menu you'll see that now I have in addition to my default button preset one I have another preset button preset too so that's one way to create a new preset another way to create a new preset is to do it from scratch by clicking this button labeled add new preset to do that click on the button and you'll be prompted to give your preset a name and then you can click to assign a preset to default if you want click Save now a button preset 3 has been created and then I would go in and start designing notice is not based on any other preset so you can see it's got the real basic you know default Divi button Styles there because I'm building it from scratch and you can go in and start designing the button however you like and then you know once you're done you'll have a different preset for this button click Save so that's another way to create a preset from scratch I'm going to go ahead and delete this third one that I just created and let's go ahead and go on and assign this button preset to to this second button so I'm going to save my settings I'm going to open up the button settings here for this button and let's go ahead and select button preset 2 alright so let's create a third preset for this button here to do that I'm going to save that go to this button open up settings and let's open up our preset drop-down menu and we're going to select button preset 2 but we're also going to create a new one based on the current styles so I'm going to click create new preset from current styles I'm gonna give it button preset 3 as the name just leave it as the default click Save and now what I'm going to do is add a custom style to create a third button preset in this case I'm simply adding a new background color from my button to add a blue button save it and then now I have a third preset to use for my button let's go ahead and save this one out and let's create one more for this button here open up my settings and open up my preset drop-down let's select the button preset 3 and let's go ahead and create a new preset from these current styles let's add one more different background color here let's give it a yellow background color click Save now I have 4 different presets and button 1 preset is my default preset and the example I'm using here with the button module is simply one element and one collection of presets for that specific element but you can actually add presets to any element within Divi for example you can add a preset to a section you can add a number of presets to a row a number of presets to a text module which would come in handy and any module throughout Divi can have its own collection of presets so you can see how this would greatly speed up the design process and make it much more convenient to update changes globally throughout your site let's just take another example for example if I wanted a you know a dark text preset for my text module I can open up the settings for the text module and open the preset drop-down of course it's using a default preset here but let's go ahead and create a new one and we're going to create it based off of the current styles and let's go ahead and do that call it text preset too and you can see that this preset has you know a helpful h2 that it's been designed already here and so I can have that as my preset and it's an has this dark blue color as well and so this would be a helpful preset when using a light background or a white background click Save and also let's say you wanted a preset for a dark section background you can do that as well so you can create a new section here and I'm going to create a new regular section I'm not gonna add any rows yep and let's open up the section settings and right here let's just add a new background color and let's go ahead and create a new preset from the current styles call it section preset - and now you can see I have a section preset 1 which is my default with the light background and then section preset 2 which has the dark background go ahead and save that out and let's go ahead and create a I'm gonna go ahead and copy this row I'm gonna duplicate this row here and I'm gonna drag it into my dark section you can see that I can't really see my text so I'm going to create a text preset with lighter text so I can see it on a dark background so I'm gonna open up my text settings here go to my preset drop-down and I have text preset 2 and let's go ahead and actually real able that to dark because I really want to know that it's dark text that is being represented there so let's go ahead and create a new preset from the current styles and let's call it light text all right and then let's click to edit that light text preset go to my text option group let's make sure and select light and make sure my heading text under the h2 is also light there you go save it so now if I were to now that I have my presets in place building my website becomes much easier and much more convenient are these presets in place so now let's go ahead and delete this section so now in my design process if I wanted to create a dark background section here just create a new section give it a one column row add a text module and now we can add our presets let's go to our section settings go to my preset drop-down select the second preset gives me my dark background and let's go to my text module settings open up the preset drop-down and let's go with light text there you go and because I have my h2 designs in my preset already I can add a h2 header there and that speeds up the design process you can use these presets as you're designing entire layouts or pages this particular layout is using a lot of buttons with the default style in place you can easily open up one of the buttons settings and open the preset drop-down and make adjustments to that default button preset design for example if you wanted to increase the size or change the color to something button text color to something else you can see how it makes site-wide changes on those buttons you can also of course add presets to certain elements on the page for example let's go ahead and add a preset that matches this design you can also convert a section that is a light section into a dark section go to my section settings let's go ahead and pick our section two and let's update these text modules with the light text preset and just like that you have a new design and because we're using these presets throughout the website if we make an adjustment to one of the presets let's say we make an adjustment to our light text preset here with a larger text size perhaps and maybe some spacing you will see that change take place site wide so if I scroll down you'll see in my dark section you'll see a larger text now to give you a more detailed overview of the options available within global presets let's go ahead and take a look closer at the drop-down menu here this is the preset drop-down menu which this of course has all of your presets listed starting with the default listed at the top and the default will always be labeled with this star icon and you can see that the button 1 preset down here is actually labeled with that grey star icon right there that's letting you know that's the preset that is being used as the default or to say it another way the default is based on the button preset 1 there's also a green checkmark that shows you the preset that is active on the element right now the active preset is the default if I selected button preset 2 I would simply need to click on the preset in the list and that will assign the button preset 2 to the element and the green checkmark will show that it is active and of course the two main buttons here allow you to create a new preset either from the current styles being used on the element or by adding a new preset from scratch when hovering over a preset in the list you'll notice that there is an menu that pops up and the this menu has options that allow you to manage and customize the preset the first one here is the Edit preset styles this one will deploy the global presets settings modal identified easily by the grey header here letting you know you're editing a global preset of course you can go in and change the styles and update the presets design or options however you see fit and then click Save and then that preset will have been updated it's also worth mentioning that whenever you are editing a preset inside the global presets settings modal the the preset drop-down menu and all of the items listed this all is identical to the preset drop-down options that are on the local side so feel free to make the changes on either side whether designing locally or on the global preset side and the next option you have are the preset settings which is the gear icon click on that one you'll have two settings that you can update which is the preset name and whether or not you want to assign that preset to the default the next option is the update preset with current styles option and that's the update icon there if you click on that you can update this particular preset with the current styles of the element that is being currently used the next option in the menu is the duplicate option which allows you to duplicate a preset this is very similar to create new preset from current styles you're simply creating a new preset from a current preset so I could click duplicate and that will kick off the preset settings where I would go through and add a new preset based on those preset styles and the next menu item is the delete preset which would of course delete the preset it will notify you with an ru Shore message to make sure that you understand you're deleting a preset that will affect your site globally and the last menu item is the star icon which allows you to assign that particular preset as the default in addition to the options available under the preset drop-down you also have options within the other settings menu also the are also known as the right-click menu and you can see that you have really two main options here you can choose to apply the styles to the active preset and also the option of editing the preset style the apply styles to active preset would do just that whatever preset is active at the time right now this particular preset is or has the button preset one so if I have new styles on this button currently I can apply those styles to that active preset with a click of a button here if I wanted to go directly to edit the this particular preset style I can click this and it will deploy the global preset settings modal with the button preset one which is active ready to edit and these other settings menu items are also available on the option group level as well as a particular option level for example the if I go to my design for this button and I wanted to let's say I wanted to apply the styles for this button I can do that by clicking the other settings menu for that button option group and apply styles to active preset this is a way to you know make updates as you go along and apply these update updates and our smaller scale as needed to update the preset not only can you do that on the option level you can also update a particular setting or a particular option as well if I click on the other settings menu for a particular option I can choose to apply that style to the active preset or I can actually open up this preset style on the global preset settings modal and update it there and if you make a mistake with presets you don't have to worry you can control history States for site-wide changes with global history States to access the editing history modal simply click the icon in the settings menu then select the global history States tab within the history modal there you'll be able to select different site-wide States to undo mistakes or go back and forth to different states a new state will be added to the list each time you do save and confirm a global preset change to a module a row or a section and all you need to do is select the state from the list to revert back to previous States global presets will be included in import files when you're working with the portability options within Divi for example you could go into your Divi library and import and if those include a global preset it will what you will have the option to carryover those presets for example I'll go ahead and import one here and you'll see the option here to import presets so I'll make sure and select that and any imported presets with the same name as existing presets will have an imported label at the end of the name so that you can recognize it and that takes care of our overview of debbie's global presets

Channel: Elegant Themes

Views: 22,184

Keywords: divi tutorial, divi builder, divi 4.0, divi 4.0 tutorial, divi builder tutorial, divi theme tutorial, elegant themes

Id: 3VqtCV5Obx4

Length: 25min 18sec (1518 seconds)

Published: Thu Jul 09 2020