Divi Theme Sticky Options! How To Make Any Part of Your Site Sticky!

um um um um what's up youtube today we're playing around with divi and the new sticky options that were released in the last few weeks so we're playing around with the new live setup and hopefully this goes well um we're gonna play around and see what happens so let's jump right into the uh into the back end we're here we're looking at divi and the way i start every one of these um these videos i'm gonna do the same thing here in the lives is that we're gonna go in and show you the versions of what we're using because this stuff's going to stay on there on the channel so we're in divi 4.6.1 and you can see down here in the bottom right we're using wordpress 5.5.1 so this is the newest the latest and greatest as of 9 6 2020. so what we're going to do here like we've got literally nothing just set the stage very blank divi site and we're going to build out a sticky menu so we're going to have to create a page something that's long enough to where we can see some of these sticky options so let's let's just go ahead and take the sample page that elegant themes gives us and we're gonna just go ahead and drop one of the one of the pre-built layouts into this thing and uh yeah there's no there's there's no real rhyme or reason here there's no there we don't have a plan like i don't i have no plan to what's gonna happen today so we're just gonna roll with the punches we're gonna play with this and kind of see what happens because i've done it on a few projects um i just went in like i was at the tail end of some projects and i've added the sticky options into it but i haven't really gone deep so let's choose a layout going to one of the pre-made layouts shout out kenny and the elegant themes team they do some some really incredible packs but let's it doesn't really matter we'll just pick really anyone beer sounds awesome let's do the brewery pack and we'll just drop the landing page in here that way we've got some content to work with so yeah this is this is exciting i've been waiting for the sticky options on these menus for quite a while from elegant themes so it's uh it's really exciting to see them here we're finally getting some stuff going with this and i think it's going to be really really cool so you know right now like we're in the back end and the visual builder of this page and as you scroll by default divi kind of does this when you use the normal not visual builder nothing from the theme theme builder that's kind of the old school natural actions that divvy does right everybody's seeing it we're gonna go ahead and save we'll go ahead and save this uh this layout so you can hit control s or command s i think on mac i just recently switched from mac over to um to a pc setup running obs here i think we're going to do a lot more of these lives so at least every few weekends or something we'll try and play around with this so we're going to exit here all right so this is the front end of the page you can kind of see what's happening here and what we want to do is change this whole menu into something way more custom and play around with the sticky option so it's still sticky right now it's technically what they call fixed so we'll go back into the back end divi theme options here and this being enabled the fixed navigation bar if i turn that off hit save and go back into the front end you're gonna see when we go to the sample page it doesn't stick anymore because we don't have fixed navigation on this is actually a good one let's eliminate the step of having to go over to this sample page we're going to go back into the wordpress settings we'll go to reading and we're going to change our home page to display a static page so let's just pick that sample page and we'll hit save changes now when we open up the site in the front end it's going to go straight to that page we don't have to click in the menu and you know do all those things so again this is a super great really nice layout what's cool is like all of these images you can actually get from elegant themes as well so you could take these psds and go in and change the colors change the text on here and kind of build out your own site if you're starting up a brewery or anything like that and and that works for any of those layouts all the stuff is available for you so we're going to jump back into the back end let's go into the theme builder itself we're going to add a global header here and we're going to build the global header from scratch and elegant themes hasn't yet added in some of the theme builder things like the headers the footers and global presets into um into the library they still just have the page layouts and i know it's going to change it's going to evolve and i'm sure and probably divi 5.0 they're they're working to retool that whole thing i'm pretty excited for that so let's just pull up a menu we're going to add a normal menu here and we haven't created a menu again this is as scratch as it can get so it's just pulling in the pages that we have on our site and the categories so we're going to close down the content we'll open up this logo section and i want to add the site logo that was set in the backend so we'll hit the dynamic content and pull site logo and this is just going to put the divi logo in here because we haven't set one and elements you can go in here you can add the search icon if you want you can leave it off if you don't why not i mean we can put it there never uh never a bad thing so layout we've got a few different things i'm going to stick with left aligned menu text here we can actually push the text over to the right so it'll shove the it'll give some space in between the logo and the text and you can center it you can go right but the center is going to be centered in the other side of the space doesn't include the the actual logo so push it over there and then font color you know we can make it black we can really do whatever we want to do go a little bit larger and then the active you know let's say we're going to use that purple the divi purple it's not be it for the regular menu right now and if we wanted to play with the other options drop down menus and all that we could we could update the menus but we're just trying to go pretty simple for this one uh really so we can get into the sticky options now the icons you know let's let's make all of the icons black that way the search bar and all that stuff search icon is you can make it bigger there's even some custom custom stuff in here that you can come in and do you know if you wanted to space these things out a little bit more you could do that but we're just gonna again leave it leave it pretty stock for now but the one thing we do want to do here they always put a white background i'm going to make this transparent on the background and then we'll start looking at sizing so under the section we're going to drop the padding on the top and the bottom to where the menu pushes up a lot where the row goes all the way to it and then we could play around with the row spacing if we wanted to as well and we could put it as 10 that way it'll shrink things up a little bit more so now we've got this little menu that's here and you can do all kinds of different things with it if you wanted to change sizing we can change the logo height which will shrink everything in this is actually where some of the sticky options are going to come in so let's go and take this we're just going to save it now so let's open the menu hit save we're going to close out of this and go and show you what it looks like here so key really important point right here is that whenever you're doing um anything for the first time in the theme builder you want to make sure that when you exit the layout you hit save changes here or else it won't take effect on the front end so we'll open up the site again and now our menu should be up here looks like we have the menu but the site logo is not there which is fine we can go back in here theme options and let's just upload a random logo so branding go to logo blue text we'll just drop the king of linear media logo in here and that that kind of works we'll save it we'll refresh the front end and we should have the site logo populate here and we do now it's way too big and not very pretty but that's okay we can fix that so now you scroll you see nothing happens it just kind of sticks to the top of the page it's not staying in place which is which is cool that's exactly what it should be doing right now so we'll jump back into the visual builder into the theme builder right open up the header and this is where some of the sticky stuff's gonna start working so let's adjust this obnoxiously large logo right now so uh we'll push this down that looks much much better um and then we want to go under the settings for the section under advanced and down into scroll effects and they've added this sticky section right so we're going to stick it to the top and you can do sticky offset which if you did that you scrolled it would scroll up and then stick to the top but we're going to keep it at the top the whole time and we're going to keep just the standard options so offset from surrounding sticky so it'll apply the offset to anything that's around you if there's another sticky element and then transition default and sticky styles yes we want to transition from the default to the sticky styles and there's a there's a reason for this all right so let's go ahead and save this and you see like the rest of the layout is is kind of dark like you the top is dark so i'd like for the menu to stand out and let's go ahead and refresh since we saved it and we tweaked the the logo down a little bit just make sure we double double check that we saved it all right so close this one shouldn't have to save it here again once this is already saved the layout should update but sometimes i'll do it just to make sure well for some reason this logo just does not want to adjust which is fine we'll keep on going right because we've got the sticky options to set so as we scroll everything stays in place now the spacing is all jacked up but that's cool too so let's let's take this and make it so that the styles actually change whenever they become sticky so that's what's really cool about this is that you can you can style anything differently when it becomes sticky so you can make something pop create a call to action do any of those things once you've created something that is in a sticky state so let me let me go back into this logo uh sizing actually and rather than change this let's change the width of the logo shrink that down and we can make it be a little bigger here and then yeah and then you click this pin right here this is the sticky option so when you click it it gives you the desktop and it gives you the sticky option so if we want it under normal circumstances like whenever you just you see it for the first time it's not in its sticky state it could be this size and then when it goes to sticky we can shrink this down a little bit right so we can go to let's say 25 and 40 so that's normal like it's gonna go from here to here whenever it hits the sticky state then we can go out of the menu back into the section and actually change the background so let's hover over here now we've got this sticky option here so we've got the transparent background for well let's make the the background actually white for the entire section and then when it goes sticky you know let's change that to black and then we can go back into our menu go under design and we've got the menu text so we've got hover we've got all the different sizes for responsiveness and we've got sticky so purple's not going to stand out very well on the on the black background but that's all right because we've got black text here for the regular menu that's definitely not going to stand out very well on that black menu so change the sticky to be white that way the text is going to stand out and then for for the sticky this one is something that we may have to play around with maybe we just make it blue to match kind of close to this one and i can make it the exact same color and that would kind of work right let's save what we've got and then we're going to double check this again and we're going to open the front end and we're going to see some of the stuff that we've that we've worked on right so our logo's here we scroll down it's still in the sticky state which is weird that things are not updating the way they're supposed to this has zero caching on it should be working you can see it's sticking but the changes that we're making just aren't working so that's what's the beauty of of working with things like this is that you just never know what's gonna happen all right so let's change back into our sticky state so we've got our stuff it's absolutely working it's the global header the default template and we've got settings as our page let's go back into sample pay i mean sample page is our page we're just going to call this the home page update this and let's go and actually build a menu set it as a primary menu we've got our home page and then we're just going to create some placeholder links a little contact page and about about page and a beer page that way it kind of fits into what we're doing here and let's go back into the front see if any of that took place like if it actually took hold so the menus are changing this is interesting the sticky options are not and this is this has worked for me dozens of times so let's see if maybe it's the logo that's that's kind of the issue so we'll reset this we'll hit save and go back to the front end i can't imagine that the logo is the issue no it's definitely not all right so we're going to go back into permalinks for those of you who aren't very familiar with divi sometimes like there's there's issues that happen and i think it's a wordpress thing i don't think it's divvy but the permalinks for whatever reason if you come in and resave them like if the divi visual builder won't load this is a hot tip like definite pro tip come in here hit save on your permalinks don't change them if you change them and you forget to put it back to what you had it before it will thrash your seo because all of your everything that google's has gone through and parsed or read through on your site map will absolutely be destroyed so don't do that that's a key don't do that so let's go back into uh into the visual builder and we're going to try and see if we can we can make this work so we've got the sticky options um yeah even the the you can see the logo there it's changing size everything's doing what it's supposed to do here the um i'm not really 100 sure what the issue is it could potentially be a um a divi bug which i doubt but this is running the brand new i mean it's even 4.6.1 like we showed you at the beginning there should be no issues we should have no problems but for some reason we are and that's okay sometimes these things they do happen that's fine we'll put our logo back we'll save this what the hell this is super weird it's very strange and uh i'm not used to seeing it so what we might do let's go in here and actually delete this and try it again we're going to build a brand new one so let's save it go back to the front and we're going to be back to our standard menu which doesn't look that much different than what we just built but build the global header the reason we're building individual builders for the sticky options and it's also so that you can take it and use the visual builder for whatever you want so let's maybe let's maybe get a little fancier in this menu do something like this we're going to go an image here uh we're going to delete this and we're going to use a site logo over here and we're going to hit the sizing we're going to shrink this down and then we're going to kind of do what we did before and we're going to change the the padding top and bottom shrink this thing up we're going to go into the row and we're going to also shrink the padding on the row i think we did 10 last time yes so now we've got these three columns right we're going to do the menu here we're not going to use dynamic on the on the menu we're just going to put content here we're going to align these to the center and let's change the font up so we'll do like a condensed open sans just playing around here so bear with me we're going to go uh font weight bold maybe a little smaller than that all right and then over here we could just add you could add a button and we could go with whatever design we want button custom style here um let's go white background color we make it this blue and yeah it's gonna i don't want to show the button border no border so that way it's just kind of like this and we can change the hover effects obviously when we hover over it let's make it red it's not the prettiest thing but you get the point we'll go back up to the menu itself we'll change this text so menu text regular text right we want to go let's make it not all the way black but kind of like we have right here and then when you hover over it let's maybe definitely make it darker so this right here we can make it a little lighter all right so it goes from that to that you can see it's pretty obvious when we hover over it perfect and then i'm a symmetry freak so i'm going to go ahead and throw in a little custom stuff here so display flex i don't know if i spelled that right i did not justify content in the center items okay so we're gonna do that go back under sizing gutter with equalize columns now everything should be as it was meant to be and we'll since i want the maybe want the button to center as well i will copy this same code over into into here except i'm going to push it all the way to the end flex end right perfect and then we'll align this image on the left make sure that's on the left perfect all right so we've kind of got our menu in place everything's centered up and this is here so what we need to do now is go back into sticky scroll effects stick to the top and we're going to hit ok so let's just save this i need to actually remove the background color on this menu again it kind of always has its thing i want to make it transparent hit save save one more time and i will exit and we'll resave the theme builder and go to the front end and check it out so let's see what we got here if everything transferred back to the front end so it is we've got our little hover effects here um it's sticky the way it's supposed to be the menu is i mean the logo is actually the right size here so let's go back into this header we're going to try and change the background color on this one so we have everything sticky we'll go under background we've got regular background color we're going to change sticky go into the sticky options here for the background color and we're going to change it to black all right so let's just save this go back to the front end and see if it works and then we can tweak the colors and all those things so we're going to hit reload let's refresh the page and try scrolling down and for whatever reason this sticky is still not working now i wonder enable animated yep so all of this should be just normal stick to the top this is quite weird if anybody knows what in the world i'm doing incorrectly here with these sticky options let me know in the comments below whether it's on the live stream or whether it's later just let me know what the hell i'm doing because obviously i'm playing around with the sticky options and i'm not able to figure this out so it should be in a sticky state these things should be changing like i'll show you all this is actually a client site that i'm working on right now that i implemented the sticky state so everything shrinks down actually did this one in the visual builder so very strange that i'm not able to make it happen on this one i believe on the other side i'm using 4.6 but i can't belie i can't imagine that elegant themes would have broken their brand new feature with a point release so it's got to be something i'm doing let me know let me know what the world i'm doing wrong okay so let's see if maybe we can play around in the rows itself let's go into the sticky menu here and see if we can change this guy to black as well save we try exiting here saving it here as well save it twice and refresh the page i will see if just the menu background changes but it doesn't this is the wildest thing that i've seen y'all all right well we've got the sticky menu that part works i feel pretty good about life at least there so let's go into the pages and i want to try to make one of the one of the sections on this page actually sticky as it scrolls up and and really have it stick to the bottom so let's find something that would be great to stick to the bottom well look what's working now it's not working on the front end but the sticky header seems to be working inside of the visual builder now that's very funny i'm not doing anything wrong gotcha okay so let's see about maybe making now that's a little too big not sure if the backgrounds look like they may be transparent i wonder if this might be the first column that's actually moved up so let's look at transform yep so this is column one and this is column two so let's actually look at making this row sticky i'll go to scroll effects stick to the bottom no offset um i wanted to offset from surrounding sticky elements and transition sticky styles not really necessary but we'll leave it there anyway so see here so that's not exactly what i was envisioning not exactly what i was expecting but i was thinking that it would scroll from view and then become sticky once it came into view but stick to the bottom so not not 100 what i was thinking offset from surrounding sticky elements so let's see what this is all about that you actually do want so all right bottom offset well i don't want it to be moved around like that new hmm all right so let's see what this is all about aha now that's what i was hoping for perfect so i wanted to be completely out of sight and i wanted to be able to scroll into view and then it stick there until where it was naturally placed in the layout came to be so i think maybe obviously it's a transparent background if we added a white background to it or you know maybe even a little grayer to match all right something along those lines right kind of get the idea so it's staying out of view until we get into the section and then that section it's coming up here and it's staying in view so what i would do here is maybe even go to column two transform and actually reset all of this right here right to where this is in line it looks like it's kind of floating and what would happen here is that exactly like this right so we get into the section which is this section as soon as you come into that section this content the new era of brewing scrolls up from behind and we get this join our newsletter that sticks to the bottom it's pretty cool if this whole section was longer it'd be even cooler because it would stick there for a little while longer but this is this is pretty cool it looks like it's trying to stick to the top as well which is probably something that i did on the sticky option so let's go back into here stick to the top maybe there we go now instead of the section it's the whole that's not exactly what i wanted so maybe this one section and this one body area so and oh it sticks after too so that's not exactly what i want but i do want it to be in the section so yeah that kind of works actually okay so let's actually try this where you know we did this whole background thing um i want to copy this and actually make it transparent again but change the sticky color to this right so we've got the normal and we've got the sticky so let's see what happens whenever i take it and we scroll got its normal and then it i believe it faded yeah you can see it as it scrolls over that last one it goes from being transparent to fading into that color so if i were to take column 2 and go back to the transform and actually move this thing up just a little bit i guess that's the wrong one i meant to do column column one i guess all right so negative 75. whoop not both of them but just this one where it sort of overlays the other one what you can do is take this transform ah you can um okay got sticky options here so for the first row what i really want to do is transform this so when it's normal i want it to be negative uh whatever it was before like say negative 150 where it overlays the way it was now when it's sticky i would like it to be zero so we go from here to here with a little transition the background color is going to change as well so you get the idea right so as we come in here we come into view this thing looks like this it's got the solid background and as this scrolls out the whole newsletter jumps up so it's a great little visual it pops it makes you have to look at it or you want to look at it because it's doing some sort of movement i like it i think it looks pretty freaking good it takes the basic layout of what kenny and his team did and takes it to another level that's a really cool use for the sticky options i'm a fan so what i'm what i'm curious about right now curious curious yeah no curious what i'm very curious about right now is why this stuff is not working on the front end so let's see if when we come into this section see this one it pops up so the sticky is working some of the options but the sticky styles are not working for some reason so it's not shifting the way it was in the back end the top menu is still not switching i'm not sure why but it's okay because you saw in the back end what we did works um that is actually good to go so um yeah this is this is a fun use i think that's a pretty cool cool way to use it you can absolutely do some different things with the sticky options but i think this might give you an idea of of what ways you can use it how powerful it can be you could have email signups you could have pop-ups come up from the bottom you know for lead generation or lead magnets um you can do a ton of things with this i think this takes divi to a whole nother level i'm pretty excited like the maniacal laughs ready for this one so

Channel: Keegan Lanier

Views: 137

Keywords: divi theme sticky, divi theme sticky header, divi theme sticky menu, sticky header divi theme builder, make divi header sticky, create a sticky section in wordpress, keegan lanier

Id: jKdc0t33CKY

Length: 36min 40sec (2200 seconds)

Published: Sun Aug 01 2021