New Divi Feature | Divi Sticky Options

all right guys there's a brand new feature called dv sticky options this feature has just recently been released so that's what we're going to be talking about in today's video coming up hello everyone and welcome my name is mack and in today's video we're going to be talking about the latest feature called tv sticky options now when i first heard of this feature i was like does it really do much but to be honest when i started using it i was blown away so i'm going to be going through how you can use this feature and also other scenarios where you can apply this feature too but before we get started i'd like to remind you that if you want to learn how to design professional looking websites with divi all you have to do is to buy divi using my affiliate link and once you let me know that you've bought it using my affiliate link i will give you access to my course called the web design formula and this course will teach you everything that you need to know about designing professional looking websites and also teach you how to use divi so like i said all you have to do is to buy it using my affiliate link and then just send me the receipt number on funnels to income dot com on the bottom right you'll see a pop-up you click on that and then you send me that receipt number all right so without wasting a lot of time and let's dive in and let me show you how to use this feature all right so right i'm in my wordpress admin dashboard so the first thing you want to do is to make sure you're running the latest version of divi now sometimes it doesn't show up here so what you need to do is to click where it says update and this will just refresh and see if there is the latest update so as you can see here everything is up to date all right so now let's open up a new page or in fact in this case i'm going to use a pre-made layout otherwise this tutorial is going to be way too long so i'm going to come over here and click on add new so i'm just going to close this and then i'm going to call this new feature and then click on use dv builder now as i mentioned we are going to use a pre-made layout so i'm going to go ahead and click on choose a pre-made layout and then i'm just going to go through and see which one i can use so you know what i'm going to keep things very simple here i'm going to go with this one here and then click on use this layout all right so now that our page has been loaded we need to now look for an element on our page which we can make sticky so i'm gonna scroll down here and see what we can use and i think this pretty much works well because we want people to see how many projects we've done how many satisfied customers they are and so on so now i'm going to click here on row settings click on advanced now it's not very obvious where this sticky feature is but you know what it's over here on scroll effects and now you can see here we have this option called a sticky position now by default it's going to say do not stick okay which is pretty much obvious because you don't want anything sticking as you're designing from scratch so this is where now you can assign to either stick to the top stick to the bottom or stick both the top and the bottom so i'm going to keep it simple here i'm going to stick to the top go ahead and select that and then save okay so this part here now with me scroll should be able to just stick to the header as we're scrolling through now let's see if that works okay so let's assume you know the visitor comes to our website and now they're scrolling scrolling scrolling and when we get here it should stick to the top and there we go it's stuck and as i'm going through this information stays there on the top and i think this is really really cool i really like this because there are several ways that you can use this feature you can use it in situations where maybe it's a sales page and you want to make sure the price is there you could also use it on a page where you are collecting leads and you want that form to stay up there on the top but of course this is not the only application of this feature there are also other ways that you can use this feature for example let's say you want to make this part here sticky so this this main main part because this sticky options works on modules it works on rows and it also works on sections so you can make a whole section sticky okay so let's say i want to make this part here sticky i'll just click here go into my text settings click on advanced and then i'll come over here to scroll effects click on this drop down and then i'll say stick to the top and save so now we have two elements on our page that we've assigned to stick to the top now notice what happens so if i start scrolling now boom now it's stuck there and as i'm scrolling the other sticky items should come below it and stop as well boom now it stopped so can you see the stacking effect that we have now so this is how the sticky feature works you can have it in such a way that things are stacking so when you assign the first item to stick it sticks on the top and then the next item you're assigned to stick sticks right below it and so on and so on and so on of course you can get messy but you can also get creative with this so it's really really cool but what really got me excited about the sticky options is the fact that we can also choose a style when the item gets stuck below the header and let me show you what i mean so what i'm going to do is i'm going to come over here and just unstick this thing here is that a word unstick i don't know but you know what i mean so now come over here and uh go into um stick to the top and let's say do not stick okay great now i'm gonna scroll down here and go to this part here i'm gonna click back here now notice what happens if i go here into the background there is an option now where i can go into and change the state it's called the sticky state okay so if i click on this little icon here now this icon here we didn't have it before this has come with this latest feature so if i click on the sticky item i can now click here and choose different states different colors and so on when the item gets stuck on there which is really really cool now check this out i'm going to add this red to the background and this only applies when it's sticky now notice that this tab here is activated all right so now that i've added a background color on the sticky option let's see what happens so i'm going to start scrolling scrolling scrolling and notice that now when it as it's stuck the color has changed and this is really really cool and then when i scroll down and it gets unstuck the color changes back so let's do it one more time there we go right so when i use this feature i was thinking to myself i wonder if we can do this for the headers too and you know what yes we can let me show you how so now let's switch over let's go to the dashboard we're going to save and exit now as you can see here we just have this normal header you know i haven't done anything to this it's a basic header so we are going to go now into our theme builder and create a header so i'm going to come over here to add global header build global header now i'm going to do this really quickly this is not a design that i am going to really spend a lot of time on the idea here is to show you how the sticky feature works all right so i'm going to go with this layout here so on the first one here i'm going to add my logo so i'm going to search for my image and i'm going to go in here and look for a logo to use so i'm gonna go with let's go with this one here upload an image okay so now we have our logo i'm gonna save that and then over here we're going to need our menu so i'm gonna search for a menu okay great so we have our menu now i'm going to save this now all i have to do is to adjust my padding so i'm going to start off by reducing or removing the padding on my section here so i'm going to set this to zero save that i'm also going to come over here to my rows remove the padding 2 so i'm going to go to spacing maybe here we can leave it at 2 or maybe a bit more maybe 10. okay so while i'm here the next step is to go to advanced custom css because i want everything to all be in one line so i'm going to add the css code and now everything is all in one line so as i'm looking at this i'm like okay everything looks cool so uh how about we add some styling to this so i'm gonna come over here to my section settings go to my background and let's add a background color to this okay so that's gonna be our background color for our main header so i'm going to save and then i'm also going to go into my menu settings here and remove the background so that my text can easily be seen so next i'm going to come over here to design and go to my menu text and i'm going to change my color here to white and i'm also going to choose a font here i'm going to go with poppins and i'm going to make it all caps and let's make it bold as well there we go so now i'm pretty much happy with this basic header okay so we're going to save this so i'm going to save this one more time so what we're going to do now is we're going to go back in here and let's add that sticky state so i'm going to come over here to advanced scroll effects and i am going to click here where it says do not stick but before i do that i just want to show you that if i were to take a look at my site my main header will not be sticky so let's save this and let's do a quick preview of our website and see if our header is going to be sticky okay so that's our page so what we need to do now is to save here close out of here and then save as well and now if i refresh this page we're going to see our header but when we choose our page let's go to a page which has uh something on it so when i scroll you can see here that my header is not sticky so if you want to make it sticky it's quick all you have to do is to go back in here and you by the way you can do this to an existing header that you have on your site so what you can do is go here to your section settings advanced scroll effects and then when it says do not stick all you have to do is to stick to the top save we're going to close out of here save and exit great so all changes are saved now if i scroll and test this one more time you are going to notice that my header now is going to be stuck to the top so let's try it there we go so now you can see our header is stuck to the top so now uh how about let's say we want to change the color when we start scrolling and this is what we're going to do next so i'm going to go back over here go into my section settings click on background okay so to change the color of our header on uh scroll this is what we need to do you want to click over here on this little icon and then choose our color here now it's turned into black so i'm going to save this we are going to save this one more time and close out of this all right so now that everything is all saved if i come back over here now all right so let's start scrolling and see what happens so i'm going to start scrolling here and as soon as i scroll you notice that my header now turns to black and when i scroll back up it changes color so this is a quick thing that you can do to existing headers make them look much better more dynamic and this is by using this brand new feature called sticky options all right so uh go ahead try it out be creative with it i am going to be making more tutorials on how to apply this feature on to uh other types of uh applications like for example a sales page we can do a an opt-in page and so on so there are a lot of ways you can use this dv sticky feature it's amazing and as i mentioned i'm going to be creating a lot more tutorials so just keep an eye if you haven't subscribed go ahead and hit the subscribe button and also hit the bell notification to be notified when i release new tutorials all right guys that's all i have for you in today's video thank you very much for watching and i'll see you in the next video take care

Channel: MAK

Views: 7,897

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: fPJZeYoO_cw

Length: 12min 28sec (748 seconds)

Published: Thu Sep 03 2020