7 Best Divi Features

if you're a designer there are certain key elements that you need to have at your fingertips in order for you to design professional-looking websites so some of these are colored fog rafi layout and so on in this video I'm gonna be talking about the most important features in Divi in fact these are my seven favorite features and these are the best features that Divi has so you could actually do with only these features when you're actually designing your website because they are that important now before I begin I'd like to remind you that if you buy Divi using my affiliate link I will give you access to my web design a formula course a course that teaches you how to design professional looking websites from scratch all you have to do is to buy DV using the link below and once you've done that send me your receipt number on funnels to income comm on the bottom right there's a chat bubble click on that and then you can just afford me the proof that you've purchased using my affiliate link and once I confirm that I will give you access to the course so without wasting a lot of time let's start talking about all the best DV features and there are seven of them so we're gonna start off with number one now the very first feature is the color manager all right so let's say you've gone through the process of choosing your color palette and so in this case I'm using this website called Kulas dot co so here are the colors that I'm going to be using for my website and by the way this is the right workflow you want to first look for your colors once you find the colors that you need to use then you bring them into into DV so the color manager works by first inputting your initial colors first and then the color manager is going to follow you wherever you go let me show you what I mean by that so over here you want to come to Divi theme options okay so you want to add your colors so these are the colors that come in by default with elegant themes so you want to come over here copy your color from here come back and then replace these colors so all I'm doing here is copying and pasting all my colors so once you add all your colors you're going to notice you know some amazing things here because this is one of the things that I used to stress about before before this color manager was introduced every single time you were designing you had to go in and add your colors manually and to be honest that was really a pain but this workflow now really makes designing websites with Divi really really exciting all right so I've only got one color left now to add so I'm gonna come over here and paste my color like that okay so that's one two three four I think I've got one color missing here probably this one here that I haven't added but you see the beauty of this is if you've forgotten any colors you can just go back in and add the colors that you haven't added in so in fact I've done that one all right just anyway so let's say these are my colors so normally at the end here because sometimes you don't have the full colors I can just add in white like that and then for the last one here just add a bit of gray right so let's say this is my color palette and I'm really happy with this color palette all I have to do now is to save changes so as you start designing your website you're going to see these colors now appear when you want to add a background when you want to add text and so on let me show you how that works so if I come over here to pages click on add new so let's just call this page features because we are going to showcase most of our items on this page so now I'm going to click on use Divi builder so this is going to take us into the actual builder and then I'm going to start building okay excellent so let's say you want to start off by adding a background color so notice what happens if I come over here now click on background these are the colors that I added initially so I can add my background color like that save that now next let's say I need to add let's say a text module I can go in here and let's add a paragraph of text by just copying from Laura to here so there's my text now notice what happens if I come over here to design and click on text you see my colors now are following me so this is really really cool so let's say that is my color right there I can save that and let's say I need to also add another color here on my Rose I can click here on row settings background and then choose my color like that or I can use something like that and once I'm happy with my colors in fact you know what lets my we might as well just go in and finalize this design let's give this some some space I'm padding so let's go with 30 all around okay so there we go and let's get let's just give this some rounded corners as well so let's go with six alright so as you can see here it is very easy to use my colors so let's say I need to change my colors at some point I can always come over here go into my design text and I can change this color to whatever I want so I can make it dark I can choose a darker version here now you see well as I'm clicking on these colors here I'm limited to these now here's where the color manager comes in so if I click on these three little dots here you see you notice that we have more colors now these colors here are chosen by an algorithm and these colors are proven to work well with your color palette so I can go in and use this dark version here and you see it's not too far off it actually works let's go back in so over here I can go with let's say this really dark let's go with these colors which are close to that color we used so that one they could work so you can see these colors here are automatically chosen by the system here the Divi system to give you colors that work well together now this is a designer's dream because colors you know can be very confusing when you're working with them especially if you're not very good at choosing colors at random as you're designing your website so this is the color manager let's move on to the next one so the next one here is also very very important because this has to do with email integration so if you want to build a mailing list it's very important to have all the integrations at your fingertips so let me show you how this works so if I come over here and add another section here so let's say I need to add an email opt-in I can just search for opt-in like that so I'm going to go ahead and design this the most important part here is to show you the integrations so let's say you use mailpoet or MailChimp or even convertkit to connect all this all you have to do is to come over here to email account right you click on this drop-down and look at how many integrations we have here this is amazing so almost guaranteed to find the one that you need here so let's say you use convert kit you can use select convert kit here you click here on this drop down to select your list but what I've noticed is sometimes when it doesn't come here you just click on add and then you want to add your account name API key and API secret now once you've done that it's gonna now show you your lists over here that you want to link this form with and every time someone subscribes they are going to be connected to that particular list so this is very good for email marketing it's also very good for small businesses that want to generate leads and having this integration is really really huge and now with this now you can design this however you want because now you have access to color you can have access to images you can add pretty much anything that you want here to really make this look very very attractive so this is why this is one of the best Divi pictures all right so let's move on to the next one now the next one here is to do with typography so let me show you what I mean by that so I'm going to add a new text module here when I select that right so when it comes to typography of course you want to use different type of fonts as you're designing so number one the good thing here is you can use google fonts so if I come over here click on this drop-down we see all these fonts that we have here and the really cool thing here is when we mouse over it you can see here that it gives you a brief look into what this wants to look like you can see here as I'm going through this it's giving me an idea of what the fonts would look like so let's say I select that one I can also go into my font ways here and choose my font weight so you can see here on the bottom that it is changing as I am adding all this so I can increase my size here and so on now here's the thing now what makes this feature really powerful is if you come over here now on the font you can see here we have this option to upload so let's say you had your own specific fonts you can come over here give your font a name and then you won't you drag it over here or you can choose it from your computer where you've downloaded into so this means you can have pretty much you can have custom fonts that work with your design so maybe you could be working with the clients or that has the own specific one that you need to use on your website this is how you would add onto the site all right so this next feature here is also very very powerful this is to do with productivity so this allows you to extend styles now what I mean by that is let's say you have a paragraph of text and you just want to change the font throughout that whole page or throughout that section to have that same font you can use extend styles to achieve that let me show you how that works so let's say over here I have these three paragraphs I put one here on the top one here and one here so let's say I want all my paragraphs to have this style that we have here all I have to do is to right click click on extend styles now this is going to ask me if I want to extend my Styles on this page which means it will affect everything or I can choose this section or this row of this column so we have different ways of choosing how we want to apply this so in this case let's say I want this to be PW to be applied here to the second paragraph so I would use this section so come over here we're gonna extend and notice that now this style here has been applied over here as well now let's let's do this one more time but this time I'm gonna choose page so if I come over here to extend styles at this time I'm going to go for the whole page click extend notice what happens now one the one at the top here has also changed so the reason why this feature is really powerful is you can use headings you can use different instances of your designs and extend it pretty much throughout the whole page so this doesn't only work with text by the way it works with colors it works with so many so many things so if I come over here as well and I right-click I can also say extend section Styles now notice that so I can say this page and what you'll find is the whole page now has the same background as this this top one here so this is how he is extend styles it make your design process really really easy really really fast all right let's move on to the next one now this one here again is more for designer's dream and this is fantastic especially for those of you that use Photoshop let's go in and add a few images on our design here so I'm gonna come over here and let's just add an image module I'm gonna select that so here's our image right here I'm gonna go in to my library and choose an image to work with so let's say okay so let's say I go with this one upload an image right so the next feature here it can be found on the design tab all the way down here to filters now here on the filters this is where you can play around with all these instances you can play around with the hue now notice what happens when I play around with the hue and we also have saturation so if I remove the saturation now we are left with a black and white image so we can adjust the brightness and the contrast as well so notice that I'm adding my brightness and I can also play around with my contrast here I can make it really contrasty like that by just adding a bit more this a bit more brightness like that so as you can see just by playing around with my saturation brightness and contrast I've gone in and I've changed this to a black and white image now usually you would have to go into Photoshop make your adjustments in Photoshop and then bring the image over to 2dv of course that takes a long time because the design process now has just been extended so by having this feature over here it is really really awesome so let's say you want to is pretty much bring everything back to where they were you just click over here and now pretty much we are back to how things were now there's also other features here so you can play around with the inverts no I can see here I don't know why you'd want to use that but of course it is there we also have the sepia tone so you can go in and add this to your images as well so this could be maybe a style that you're going with on your website so you can go in and add that now we also have opacity here so if you want to you know play the opacity you can bring it all the way down here and just show just the hint of the image here and then maybe let's say on hover you want to really show this image you can then come over here click on hover and then increase the opacity so now when I hover over this it's going to start off like that and then when I hover over it it's going to show this image right here so this feature here which is the effects feature is also very very important so these image settings here are really cool we also have blend modes so you can also play around with the blend modes here the screen I mean if you've used Photoshop I mean you will you'll appreciate these we also have blur so we can make this image blurry if you wanted to and then on hover we can have it you know look different on hover as well if you want to have it on two different states and if you want to bring things back to how they were just click on this little item here and that brings things back so pretty much this is the effects feature which is really really cool all right now let's move on to the next one now the next one here is also very very fun to use you can find this on the advanced tab and this is called scroll effects so let's say you want to build a website which has dynamic elements on it this is where you can play around with the score effects so here that we have these different types we have vertical motion we have horizontal we have fading in fading out and so on so let's try this fading in fading out so I'm gonna use it here so to play around with this you just need to enable it first and then you want to make your adjustments so it just you just take a bit of time to play around with it so let's say here on the ending part we don't want to see anything you can see there as I'm scrolling the image goes because the ending opacity is zero okay so the starting opacity as well if this page was long enough the studying opacity will be zero as you can see here but in this case I want to bring it up to say let's say thirty four and then as you scroll the image comes to life and then as I go towards the bottom and then it goes away ok so these are your squirrel effects you can adjust how much time you want the image to show in the middle of your scroll by playing around with this I mean if you bring it all the way down here know just what happens so if I come over here you see the image going away faster there we go okay so that's because we don't have a long waiting period here on the mid on the middle now we can also use scale up and down so if I click on this one here I have to activate it first and then I can say meet in the middle here it's at 100% but the ending scale needs to be let's say let's bring it down to about 60 and starting here let's start at 60 as well now the really cool thing here is notice what happens so we have the starting the starting here at 60 and as I'm scrolling it's getting bigger and bigger and bigger and then it gets smaller as I'm moving away from it and again you can X also extend this if you want to have it in the middle of the screen for a much longer time so there we go if I scroll it's getting bigger and then it starts getting smaller as I'm scrolling through the page so these effects are really really cool you can use these pretty much on on different sections of your website but make sure your page has enough content for these features to show but of course you want to use this with caution because you don't want to add all these scroll effects all over your page because it makes it difficult for the visitor to go through your content so use these in a subtle way but professional way alright so the next feature I want to talk about and this is the final one this is the theme building alright so I'm just gonna save this and show you the theme builder in fact I've spoken about this so many times but this is really really powerful so I'm gonna come over here to my dashboard and I'm just going to discard an exit because I don't really need this anymore so over here now if I hover over TV and go into the theme builder this is where we get to design elements of our website to make it global and we can also pinpoint and specify what we'd really want to make templates off so here we can add a header we can add a global body we can add some footers but the critical thing is to add your food is you can just come over here build or we can add from library by the way so this will save you a lot of time to design this so let's say I come over here and I and I like this footer in fact this one doesn't look nice to be honest let's see what footage we have right so this is where now you want to go in and pretty much look at different designs or footers and see which one you want to go with so let's say I like this footer here I can click on use this layout and then all I have to do is to delete the elements that I don't need from this layout so once I delete those I'm left now with my footer and that footer is going to be applied pretty much across my whole website I'm gonna show you in a moment how this works it's really really cool and it's a time-saver alright so here now everything has been loaded all I have to do now is to click on this pencil icon I can go now into my Builder so in this builder now it's pretty much your Divi builder so you can delete items you can add items you can do pretty much everything you want so let's start off by deleting stuff that we don't need so I'm gonna start off here section that that that needs to go that needs to go that needs to go right so pretty much I'm getting rid of all the items that I don't need and then and then just remain with my footer so that needs to go as well and this is going to work as my footer so again let's get rid of this bad right so let's say this is going to be my main a footer for my website all I have to do now is to save this I'm going to close this and because this is a global footer this now has been applied across my whole website let me show you that so I'm going to come over here and then I'm gonna say visit site and I can go to any page on my site now and you're going to see that massive footer there we go right and let's say I change it and I go to my courses again you can see now that we have this massive footer but the really cool thing about this feature is if I delete this here and Save Changes and I come back over here and I refresh you can see now my footer is gone just like that so what makes the Divi theme builder really powerful is the fact that you can go in here change items globally and it will just go in across your whole website and make those adjustments so let's say that yellow footer wasn't really appealing for you and maybe you're deciding a website for a client and your client says nope I don't like yellow change that color we've changed our branding it's now blue you just go in change it on that one instance which is right here and the footer gets applied across your whole website now you may be thinking well it does this apply to the header or footer and global body no it doesn't because we can pretty much create templates here for or your blog posts the blog itself specific posts you can also do this for archive pages you can all do this for projects 404 pages and so on and if you have WooCommerce installed or you have learned - or member press what happens is this theme builder is intelligent enough to see all these plugins that you've added and you can create specific templates for those particular plugins which makes this really really really powerful so these are my seven best features that Divi has to offer all right so tell me what your features are what are your favorite features share them in the comments box below I'll be happy to see those and in fact I may even do more videos about those features all right guys that's what I have for you in today's video thank you very much for watching don't forget to subscribe and tell notification by doing so you'll be notified when I release new tutorials until next time thanks for watching and I'll see you in the next video

Channel: MAK

Views: 3,051

Keywords: Augustine mak, Divi 4.0, divi 4.0 tutorial, divi 4.0 templates, Divi 4.0 template, Carflows divi, wordpress funnels, Cartflows tutorial, make online courses, online courses, online course tips

Id: fmK8QLF8TZw

Length: 21min 28sec (1288 seconds)

Published: Tue Jun 02 2020