New Divi Feature | Divi Presets

in today's video I'm going to be talking about TV's latest feature called TV presets this feature is going to change the way we design websites and this is a new design system for Divi I love it and I'm sure you'll love it too so let's check it out hello everyone and welcome my name is Mac and today's video we're going to be talking about the Divi precess now this is a the latest feature from Divi all right though before we get started I'd like to remind you that if you buy Divi using my affiliate link you will get access to my web design formula course the course that teaches you how to design professional looking websites from scratch even if you've never designed websites before now there's also a 10% discount in the video description below so be sure to use that link and once you've done that head over to funnels to income comm on the bottom right you're gonna see a chat bubble just drop me the receipt number or it can even attach the receipt on there now once you've done that I will give you access to the course which is worth 497 all right so enough done let's talk about the brand new feature so this feature is going to allow you to design websites fast and it's also going to allow you to make your websites look very very consistent all right so let's dive in and let's talk about how to get started with this feature so first of all you want to make sure you're running the latest updates from elegant themes so to double-check if you're running the latest update you want to come over here to updates you click on that and this sort of like refreshes the whole system and if you do have an update it will show up up here so once that's done now let's head over and create a brand new page and start creating our presets okay so over here I'm just gonna create a brand new page so I'm just gonna call this page presets okay but of course you can name this page whatever you want right so I'm gonna use Divi builder so the reason why I'm excited about Divi presets is because when you start using presets it just makes your design process much much easier now let me dive in and let me show you what I mean by that so if I click here on start building usually we can come over here and right let's add some blurbs right so maybe this is part of your services page so I'm just gonna search for blurbs here okay so this is standard this is how it comes in he's could default Divi you know kind of preset so where do we find these Divi presets so they up here so if you blink you won't see it it's right here right at the top here so if you click on this drop down this is where you're going to see the preset so you can see here I've created the dark blurb I've created this one here so what I'm gonna do is I'm so delete all that because I want to start with you guys from scratch so I'm gonna come back over here and delete that I mean I will go over what all these mean as well so so this is pretty much the basic this is the standard this is what it looks like so let's say we want to create a new preset so what we do is we come over here click on add new preset and this is the most important part we need to give it a name something that we can remember okay so I'll call this new blurb design okay that's all I need to do here and then I'm gonna save now notice what happens this thing has flipped over so whatever I'm going to design here is going to be applied to this blurb here and that's gonna be used as a preset okay so let's go and do quick designs here so I'm gonna come over here I'm going to go to my text and let's say let's Center all the text and we're also going to go to the title text and let's change the font here to Poppins you know I love Poppins right so here we're gonna change this to regular to bold and we're also going to go into the body text so here again we're gonna change this to Poppins and the size seems okay but let's bump it up to about 15 and increase the line height a little bit so as you can see here I'm making changes to this particular blurb okay next what we may want to do here as well is to maybe add a border and let's add two pixels border width okay and then what I may also want to do is to change the border color and also give this some breathing space around this content so to do that I'm gonna come over here to spacing and then we're gonna give this let's say 4 the pixels all around so let's give this 30 like that okay so that's looking great and finally what I'm gonna do in fact I'm just gonna add some rounded corners here so we're gonna go with 14 and then we're gonna go back and give this in fact we don't need to give this a background color for the image pretty much leave it as it is okay so we're gonna save this save it one more time and that's it so what we've just done here is we have designed this blurb here the reason why we've designed it this way and made it as a preset is because next time I want to add more blurbs I don't need to go through this whole design process all I have to do is to go in and use the preset and let me show you how that works so by the way the preset is over here it's called new blurb design okay make note of that so I'm gonna save this and then over here let's say I need to add a new blurb right so I can just do that at my blurb notice it's the default as before so this shouldn't be confusing because we haven't applied the preset yet so now with this selected I can just come over here to the top choose that and this is it my preset has worked and I've added my preset onto this blurb now that is fantastic so let's say I need to add another one actually to do this one more time add a blurb and notice it doesn't have my presets so I would have to come over here to the top and say new blurb and then it takes on the preset all right but let's say you don't really want to do this you want to make sure that as you're designing your website all your blurbs on your website need to look the same so how do you do that well here's the thing if I come over here to this design that I was that I was working on I can go back into the module settings click over here on this little drop-down go into this blurb and then click on this pencil icon right so let's say I want to make further changes I can go in here make further changes blah blah blah blah blah change how it looks save okay but here's the thing I can actually come over here to this preset hover over it and then click on this little star now this stop will will assign the preset as default so let's go ahead and do that and see what happens now so I'm gonna select that say yes save this now notice what happens now that this preset is the default on my website if I come over here now and add a blurb look at that I did not need to assign a preset because this is the default across the whole website now think about it for a moment this is really really powerful so let's say you have buttons across your whole website that you need to change you can just create the button that you like and add it as a preset for the global preset which means all your buttons will have that same design across the whole website now this applies also to text headings pretty much everything ok now let me give you another example so we've done we're done with the blurbs now I'm gonna save this so let's say every time you design your websites you want to have some padding here because maybe the padding that we normally have is not the right padding so we can come over here to our section settings again notice we have the preset over here as well and click on that and then say ok in fact we had the preset over here so let's delete that and create a new one from scratch so you can see here the padding is not that much now let's create a new preset so I'm gonna say add new let's call this padding now I want to assign this preset to default so every single time I add a new section it's gonna have this padding so I'm gonna say yes to that save this say yes one more time and then now it's gonna give us our interface to design our global preset so all I have to do now is come over here to design and then you want to come over here to spacing and give this the size that we want so let's say is 8 a VW for example now that's gonna be applied both to the top and the bottom we saved that save one more time save it again and now it's done now notice what happens now I've just passed over this area here and you can see it says h VW right so notice what happens now when I create a brand new section ok so I'm gonna come all the way down here to the bottom click this plus button click on regular you may have not known this but this now has that hvw so to see that he's gonna give this section a background let me just close this okay so let's give this section a background color just to differentiate it from the top one so I'm gonna come over here and just give it a light color like that safe okay now when I mouse over this area notice that we have our hvw over here so now I can start adding all my content so let's say I'm gonna add a single column here and in that column we are going to add say a text module select that and now you can see clearly that we have this hvw over here awesome isn't it so these global presets I mean these DV presets are so amazing because they can be applied to pretty much anything on your website including animations scroll effects colors everything now what I'm going to do next is almost very important for any type of website out there so what I'm going to do here is I am going to create a preset or a DV preset that applies the paragraph text across the whole website okay so that's what I'm gonna do next so what I'm gonna do is I'm gonna add a new text module so I'm gonna click here on this plus button and I'm gonna say text just to search for it and select it okay so next you can see here the text that I have here is pretty much your standard from the Divi Builder so I want to change this I'm gonna come over here to design text and I'm going to choose default you know what I'm gonna choose it's popping so here we go Poppins and we're going to increase the size here to about let's say 17 so that's gonna be my paragraph text across the whole website so now that I've added 17 here to my text next I'm going to add some line height and there we go I've added my line height here and then I'm gonna save all right so now that I have this all set this is pretty much the preset that I have on my site but it's not assigned yet so if I come over here to the top you can see here I have an assignee this was just me designing this right so I'm pretending here that this is the paragraph style that we are going to need but to apply to all the other pages on my side so how do we do this because it's already on my website so if that's the case you want to come over here and say create new preset from current styles okay so you click on that and then here we're going to say paragraph text okay so now that I've set it to a paragraph text I want all my paragraph text to have this size this font and this styling so I'm gonna assign this to the whole website save that save save again okay cool so all I have to do now is when I create a new module here it's gonna have that styling for all my paragraphs so let's say I'm gonna add a text module here add my text and boom you see it has my style and it's all intact with my line height it also has my font itself the size and everything so this is really really powerful now you may be thinking well Mac this is only happening on your existing page what happens when we have other pages on the website so the best way for me to demonstrate this is by using a pre-made layout so these settings that we've done here the global ones are going to be applied across even pre-made layouts now just think about it one of the most annoying things or frustrating things that I had before with the pre-made layouts is sometimes the global presets would not work on the pre-made layout so that was like I really have to go and expand settings and to all the craziness so what I'm gonna do now is I want to go in load up a premade layout and you're going to see that these global settings apply across all the pre-made layout it's amazing so I'm gonna save this okay and then I'm going to exit the visual builder right so now I am going to open this in a new tab and pretty much create a brand new page so I'm gonna come over here to pay just click on add new and let's give this page a name and say pre-made I'm gonna use Divi builder but this time instead of building this from scratch I am going to use a premade layout and the pre-made layout I'm going to use is going to be pretty random okay so it doesn't matter which one I use I'm just gonna scroll through here and see which one I am going to go with and I think I'm just gonna go with have a look okay let's go with this one here Jenny's travels you just layout so now it's going to import all the layout elements row without any changes but for every part that I've done a global preset which means it's a preset that's going to be applied across the whole website those areas are going to change and this is amazing yesterday it was so mind-blowing I almost did the happy dance okay so now that my layout has been important I'm just gonna scroll down here and see where I have the paragraph text okay so here's the paragraph text here right so I haven't made it global yet so let me come over here now and make it global so I'm gonna enable the visual builder here and then I'm just gonna go into this one here it doesn't matter which one you go into click here settings we go notice to drop down and then I am going to assign preset as default yes save this okay I'm gonna save this one more time and then I'm gonna come over here and refresh okay so when I come over here to my preset and take a look at the preset you're going to notice that whenever we have a paragraph text this is the style so you can see here that this is pretty much the same as what we have over here because it's a global TV preset so you may be thinking well Mac what is happening over here isn't this a text module and why hasn't the text changed well you know what I was puzzled as well when I saw this but now when you take a look at this and drill in you're going to realize that oh okay why hasn't this text changed but if you go in here now and click on the settings you're going to notice that this is a call to action so this is not your your normal text module so this will make updates to the text modules but not the the call to action modules or the other type of modules now this to me is a good thing because this text here may be something you want to customize separately but if you go in and make changes to this and make it a global preset whatever text call to action module you're going to add is going to have this preset so you would need to come over here and create all your presets and make sure they apply to your new pages or even your TV premade layouts so let's add let's say a blurb here and see what happens so I'm gonna come over here and click on this plus button and blurb there we go so it has all our styles that we have which we added as a global preset from here okay so what about say images right so what I'm gonna do now is delete this one here so what I'm gonna do next is we're going to add an image add some styles to it and see how it reacts on our pre-made layout so over here I know we have a few images so let's just save this and let's take a look at where the images are so you see we have an image here we also have an image here so let's see what happens when we make global changes so I'm just gonna exit the visual builder here because we don't have to be in the actual builder to see all the changes okay so let's just take quick look one more time so you can see here we don't have any styles to this image here and we need to override it and if I scroll all the way down here you can see we have a few images now let's go in and add our global styles so over here we're gonna click here on this plus button at our image selected and let's choose the image that we're going to use and I'm gonna go with okay let's go with this one here upload an image and there we go so we have our image here but you know what I wanted something that has a dark background so we can really see the effect that I need to add to it okay so let's use this one instead okay great so with this one now I can come over here and say add new preset and for this preset I want to name it rounded corners like that and then I need to make sure that this is global because I want all my images to have rounded corners across my whole website so I'm gonna say assign preset to default I'm gonna save that save it one more time and then now I can go in and add all my Styles so let's say I want to add some rounded corners I'm gonna come over here to border and I'm just gonna increase a little bit to about let's go with 12 save that save one more time there we go great so now that I have saved this let me save the pages well alright so now that I've saved this if we go now to our premade layout right this should also update across the site so I'm going to refresh this page you can see here travel gallery our images now have this rounded corners and if I go back over here let's say I want to change this back to no more I can just come back over here I can go into my preset and then I can just go in and start customizing it here add more items or do any changes that I need to do that this so let's say for example I need to adds a bit of animation to this I can always come over here animation and let's say we need to bounce it and then with that bounce if I save it this is going to be applied pretty much to all my images across the whole website so you may be thinking well what about things like borders and all these changes can I still go in and make these changes and add these as presets and the answer to that is yes now I want to show you something quickly here so these verbs are global presets right so if I were to come over here and customize this so I'm going to come over here and this is the new blurb design if I click here on this pencil icon I can go in and make changes to it so I want you to pay attention to what's happening here so let's say I go to border and I decided to increase the border notice that the border is being increased on both of them that's because all the blurbs on the websites that are affected by the global preset are going to have the updates automatically every time I make you change to it so this is going to save you a lot of time as you can see so I think this is fantastic and also if I were to go in here and change the text color and let's say I choose this is my color you can see it's instantly updating which means I don't need to find where all the blurbs are on my website to make changes to them so they're all updated at once so I bear in mind it needs to be applied as a global ok if it's not applied as a global it'll just apply to that single one and then you can just choose one by one to applied the preset to whatever it is that you need to add it to so let's talk about cases where you would want to use this so let's say for example you're designing your website and you want to create let's say buttons right which are pretty much a preset for your website ideally you want to have two buttons you want to have a button that works great on a dark background and also a button that works great on a light background on your website because sometimes you may have different sections that have different button styles so that's where you would use that and that is really really powerful so whenever you're designing your site and you get to a dark background you can just switch over and say and then choose the button which is for a darker background which means you have great contrast now other ways to use this as well is let's say you want to have specific headings and specific paragraph text you can go in and assign the paragraph text across the whole website assign the heading text across the whole website and then also have the headings for different situations like a dark background or a lighter background but as you can see if you take this new design system and really think about it you are pretty much creating a style guide okay and this style guide is going to determine what happens across your whole website and this is really powerful so you can either do it as a global or you can do it individually and this is amazing and the fact that you can apply this across pre-made layouts that's even a bonus and Divi has done a fantastic job here and I'm really excited about this in my opinion Divi now is a complete web design application after this all right guys let me know what you guys think in the comments box below that's all I have for you in today's video don't forget to hit the subscribe and Bill notification by doing so you'll be notified whenever I release my tutorials until next time thanks for watching and I'll see you in the next video take

Channel: MAK

Views: 12,333

Keywords: Augustine mak, Divi 4.0, divi 4.0 tutorial, divi 4.0 templates, Divi 4.0 template, Carflows divi, wordpress funnels, Cartflows tutorial, online courses, Divi feature update 2020, Divi Presets

Id: e1D64_HB4nw

Length: 21min 53sec (1313 seconds)

Published: Mon Jul 13 2020