How to Change Your Sticky Logo on Scroll with Divi

this [Music] so [Music] [Music] foreign [Music] hey dv nation thank you for joining us in this live stream today we'll show you how to change your sticky logo on scroll with these sticky options so if you're a non-elegant themes member yet make sure that you check out divi i've mentioned the links in the description below where you can go ahead and discover everything for yourself so without any further ado let's get to it alright so i want to say hi to everyone on youtube and facebook thank you guys for joining um and yeah let's get started we'll take a quick look at the preview first on smaller and on desktop screen sizes um so let's start off with the desktop screen size so over here we have a custom built header at the top which we've built using the divi theme builder now if i scroll you can see my logo change when my header is in a sticky state along with some other styles in my header now the same occurs on smaller screen sizes if i scroll my logo will change and the way we're gonna do this tutorial is in three parts so the first part is going to be dedicated to building the element structure meaning adding the menu the button and just the overall header to our design and the second part will be dedicated to turning the entire header sticky and changing the sticky styles um that change this kind of look and feel of the header once the sticky option is enabled and then the third part of this tutorial will be dedicated to changing the logo once it's in a sticky state so if you're just joining this video for that part um you can skip to the third part or if you're in the live stream you can just wait until we get to that part or visit that because this video will be uploaded afterwards as well so let's get started um if you guys have any questions make sure that you leave a comment on youtube or on facebook i see a lot of you guys are already joining in so definitely make sure to leave a comment there and i'll be checking on those i see yon asks me how did you make that contact us so it's we're gonna go through that entirely so we're gonna recreate it from scratch by going to the wordpress backend of our website and going to the divi theme builder so we'll recreate it from scratch um and over here you can notice that i already have a header which is the one that i'm showing you guys but then i've created a separate template for recreating this entire header from scratch which is the following page and over here i'm going to start building my custom header by selecting build custom header over here all right so over here i'm gonna start building from scratch right away and i have a section here already we're gonna work with this section so we'll only need one section to make this header come to life um and before we add elements we're gonna open these section settings so again we're first starting off by building the element structure um so adding our section row in modules uh in the second part i will turn the section or the entire header sticky and add some custom sticky styles to the look and feel over here and then the third part will change the logo and scroll all right so let's start off by adding a background color over here to my section and to reduce the space that's being taken up by my section i'm going to go to the spacing settings and add zero pixels to both the top and bottom padding over here i'm also going to add a box shadow and increase the blur strength this will just help us separate the header from the body of our page alright now that the section settings are in place i can add a new row and i'm going to use the following column structure over here that i'm hovering i'm going to open the row settings i'll go to the sizing settings over here and i'm going to use custom gutter width but this the one so this will just remove the place between our columns and i'm also going to equalize the column heights to make sure that the height of our columns is the same and then i'm going to use a custom width of 80 pixels on desktop and turn this into 100 on smaller screen sizes so it takes up the entire width of our mobile screen which will definitely help you know take advantage of the full screen experience that you have and over here the max width that we're going with is 2580 pixels which is basically full width on desktop i mean most desktop screen sizes at a certain point it stops going full width if you have like a very very large screen and in the spacing settings i'm going to remove the top and bottom padding by adding 0 pixels to both options now i'm gonna go to the column settings over here and in the spacing settings of my first column i'm gonna add 15 pixels to both the top and bottom and then i'll open the column two settings over here and i'll add eight background colors so this will just help us keep you know it's kind of representing a button but the reason we're adding this to our column is to make sure that whatever the height is of our row or of our menu because we enabled equalized column heights this will keep being green if that makes sense all right and then we can start adding modules so first we'll add a menu module in column one so select a menu of your choice obviously we're going to skip the logo part over here because that will be handled in the third part of the tutorial where uh we'll there's only a few steps to changing the logo on scroll um but it's best if you just focus on that at the end so you can you know you'll need to image files and you'll need to assign some sizing settings so we're gonna leave that for the third part of the tutorial but uh you know we can get back to this i'm just gonna remove the background color so we're just prepping the menu module to make that effect happen in the third part and then i'll move on to the design tab and over here in the menu text settings i'm going to use monster over here a bold font weight a white text color we'll increase the menu text size slightly and we'll use right text alignment and then we'll go to the drop down menu settings i'm going to add a custom background color so this will just match the design and the background color of our section um a completely transparent menu line color that will just you know get rid of the menu like color all together but you can decide for yourself how you want to style this obviously um a mobile menu background color and a white text color on mobile as well and in the icon settings i'm going to use a white color for each one of these since we're working with a you know darker background color and then the spacing settings over here i'm going to apply some responsive settings to our margin over here i'm going to enable the responsive option in general we'll use five percent at the right side so this will be across all screen sizes but then on tablet and phone we'll need some extra values as well so 10 pixels for the top and the bottom margin over here and another 5 for the left margin so this will just help us create this outlook on smaller screen sizes and then column two the only module we need is a button so you can change the copy however you want and in the design tab we'll change the module alignment to center to place this in the middle of our column and we're also going to style our button by enabling a use custom styles for button and you can you'll notice that we're removing the button's actual background color because we're using the column container as its background so we can you know keep that equalized column heights experience across all screen sizes so over here i'm going to remove the border with zero pixels we don't have a background color here i'm also going to add some letter spacing one pixel again going for monstera enabling uppercase and then the spacing settings i'm just going to center this inside my column this will still change once we add the logo because basically the logo determines what the height is of the menu module so let me just add 30 pixels over here and then on tablet and phone that will be 20 pixels and same goes for the bottom as well so we'll just link this it's going to be 20 pixels on tablet and phone for the button margin as well all right so now that we have the overall um you know element structure of our header it's time to apply the sticky effect so i'm just gonna give you guys a real quick preview of what we've created up until now and then we'll you know show the different previews as we're moving further along the tutorial so over here now we have a menu a button inside a column that's that contains a colored background color and we're first going to turn this sticky so we're turning the entire section sticky by opening the section settings and going to the scroll effects within the advanced tab and over here we're going to select stick to top we don't have a bottom sticky limit this could also be the body area depending on what you're looking for but usually it's not even gonna go outside of the body area anyway because footers tend to be pretty small in height and we're gonna leave this how it is now once you enable a sticky effect to one of your elements all of the child elements within that parent element so for instance in this case our section is our parent element as soon as i add the sticky option to my section i can apply sticky styles to that section but not only that section also the row columns and all of the modules inside the columns so all of the child elements will be able to have a sticky style that will be applied once the parent element is turned sticky so that gives you a ton of possibilities in design as you can notice over here all of these things are changing all of the background colors all of the text colors and they're giving this effortless results so we'll start off by making a first change to the background color of our section so if i hover this over here a sticky option appears and you know it's that sticky as well if you hover the option it should say sticky so it helps you distinguish it from hover and stuff like that and i'm gonna use a white background color in a sticky state the next thing i'm gonna do is open the row settings go to the sizing settings and over here in a sticky state i'm going to increase the width to 100 which gives it a full width experience i'm going to go to 100 over here and then i'm going to open the spacing settings you can definitely notice that this shrinks a little bit and to do that we're just going gonna remove the top and bottom padding over here in a sticky state so the column one top and bottom padding will be set to zero once sticky and we're also changing the background color of our second column in a sticky state let's grab that color code and we'll also need to make some few changes to the menu module itself so of course the text needs to be readable so we're gonna change the text color in a sticky state into that same bluish color and then we'll go to the drop down menu settings and we're basically gonna reverse all of these colors so if i if i have a blue color here i'm gonna reverse it into a white color in a sticky state and if i have a white color i'm gonna go to that blue one in a sticky state so basically just inversing the effects all right same goes for the icons over here so these are all white i'm going to turn them all into that blue color in a sticky state obviously all right and we're also going to add some left margin so if i scroll you can notice even though our widths um our rows width is 100 we still have some space at left side and that's the space we're gonna add over here in the sticky options of our spacing settings by adding five percent um to the left margin option over here we're also gonna slightly shrink the button spacing settings by enabling sticky options over here and we're gonna use 15 pixels for the top and the bottom so that shrinks our header size as well so this was part two we've turned our header sticky uh and changed these styles so let me just refresh this and then we can go to the last part of the tutorial that focuses on changing the logo on scrolls so this is what we have up until now now if you're looking to just change your logo and scroll you know assuming that you've applied a sticky effect to your section rollover menu you can start following right here so the first thing you will need to do is make sure that both of your logos if i i'm gonna just preview it once more so over here we have the sticky logo and then another logo sticky another one so the first thing you will need to make sure is that you have both of your images um your logo images within your media library so you can upload them all both at once and start by selecting the one that you want to appear within ace you know in a regular state if it's not sticky so i'm going to just pick this one over here so this will need to be added to the logo settings of your menu module then next we're going to go to the sizing settings of our menu module and over here we're going to assign a logo max width and max height now the reason why we're adding these two values is because we want that transition to be seamless meaning that the sizes of our logo need to be kind of equal so it doesn't you know shrink a lot or increase a lot in size and by setting a max height and a max width to our logo we'll make sure that whatever kind of logo we're using whatever kind of set of dimensions are um whatever kind of set of dimensions our images contain it will still have a max width and max height of the number of pixels that we're going to assign to it so it'll always be fit in that particular pixel container which gives an effortless outcome so we're gonna use a max width for a logo of 100 pixels and by the way you'll need to use pixels for this not percentages you could perhaps use viewport width or viewport height as well but you know since it's just you know it's not going to be huge or anything you can just go with pixels and i'm using 100 pixels for the max width and 60 pixels for the max height all right and now how do we change this on scrolls so you would have expected um probably like a sticky option over here but we don't have that but luckily we can still benefit from the sticky options that divi provides you and just you know add one small line of css code in a sticky state and how are you you know where do you add that i'm going to show you right away so first of all you'll need to go to that image that you've uploaded so the sticky logo that you want to use and you have to copy you have to copy the entire file url or just go from let me just go to i'll just start from wp content and then you know the details of your logo so just go ahead and copy the entire url or just starting from the wp content and then you can close the media library so you can access that over here or just go to your media library in the back end of your wordpress website and then go to the advanced tab and within the custom css settings over here and i think this is something that not a lot of people know but each one of these has you know a responsive option hover option and sticky option which means that you can really you know customize everything with just a few lines of css code while still keeping that on tv experience so you know this will take into account when the section is turned sticky so we don't have to write the code or anything for ourselves we can just use the css property itself within a sticky state and add the changes that we want to make in that sticky state so i'm just going to enable the sticky option on the menu logo and then i'm going to switch over to sticky and then i can just change the content by typing content url make sure that you close this as well and within the brackets you'll need to change the logo obviously so you're just gonna have to paste the url of your choice which you've just copied and you can immediately see it show up once the sticky options are enabled so it's um i wouldn't want to say it's a hack because it's literally here this option is here but just a lot not a lot of people know about it and it just takes one line and should to change the logo so if i refresh this i'm gonna show you guys the outcome and here we go our logo has changed in a sticky state same goes for smaller screen sizes there we have it all right so i'm just going to take one quick look to see if you guys have any questions um how do you control the text alignment so the menu text can align to the contact us text so i'm just using right text alignment for my for my menu so these are two columns and i've placed my menu text on the right side over here by selecting right decks alignment hope that helps and gsun or json is asking can we download this one later yes you can also view the video later on so you can go through all of the steps on your own and just pause and stuff but you can also download the json file by going to the blog post in the description below and there you can view all of the steps as well written down so you can follow the tutorial there as well so all right i don't see any more questions all right so that was it for this tutorial if you like to please give it a thumbs up um we hope to see you in the next one bye

Channel: Elegant Themes

Views: 3,824

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

Id: YtVQhMa9Bq0

Length: 24min 55sec (1495 seconds)

Published: Tue Oct 06 2020