Divi header design for Black Friday

in today's video i'm going to show you step by step how to create a header where you can promote your black friday offers as you know black friday is approaching very very soon so i want to show you how to add this header that promotes your black friday offer on your website in fact let me show you what it looks like so over here you can see by default this is how our main header would look like if you haven't added your header to your website it's pretty basic but we're going to transform this into this so now this area here has our black friday offer and when i scroll here you can see our header now is stuck there at the top as your user is scrolling on your website and that message is out of the way but as soon as this scroll back to the top uh offer here is going to be visible so that's what we're going to be doing in today's video coming up hello everyone and welcome my name is mack and in today's video it's all about how to create a message for black friday on your divi website now before we get started i'd like to remind you that if you buy divi using my affiliate link you will get automatic access to my divi blueprint course which cost 497. now this course teaches you from scratch how to design professional looking websites with divi so when you buy divi you don't have to stress with trying to work out how to use it this course will teach you everything that you need to know and it's also project based which means by the end of the course you're going to have a fully functioning website all right so without wasting a lot of time let's dive in and let me show you how to create this header for your black friday promotion so let's dive in all right so the first thing you need to do is to make sure you've set up your menu so to do that you want to come over here to appearance and then go to menus so if you haven't created your menu yet this is where you want to create it so you can just click here where it says create menu you give the menu a name and then once you've given it a name the next step now is to assign it to the primary menu now of course i've already gone ahead and done this so i won't be going to do that because i've already set mine to main menu okay so once you've assigned your menu to the primary menu the next step now is to come over here and choose the pages that you want to add to the menu so once you've done that you click on create menu and then save that menu so let's say now your menu has been saved and everything is looking good the next step now is to go into the divi builder and design this header so let's go ahead and do that so to design the divi header you want to come all the way down here to divi and then click on theme builder so here we need to build the header so we want to click here on add global header so i'm going to go ahead and choose that and then click on build global header so here we're going to be seeing the actual builder the divi builder so it's going to be very easy for us to build our header using the divi builder because we are familiar with this so i'm going to click now on start building and i'm going to go with a single column so i'm going to go ahead and select that because right now we're just going we're just going to design a basic header okay right so now that i've selected my single column the next step now is to look for my menus so i'm going to search for my menu module and select it all right so remember in the first stage i mentioned that if you don't have a menu it won't be showing here and all you're going to have is select menu so ideally you want to create your menu first so that you can select it over here and now you can see my pages are now showing which is fantastic so the next step now is to come over here to logo and i need to add my logo so you need to have your own company logo it might be on your computer or on your wordpress website so in this case i think i have a logo here on this side so here we go i can use this one here upload an image so now i have my logo now what you're going to find is when you first upload your logo like this it might be distorted so a quick way to fix that is by coming over here to design sizing and then you can reduce the size of the logo just by dragging this all the way down until you're happy with the size of the logo alright great so now that we have this all set uh you also have module alignments you can align your modules here but we're not going to play with that yet so the next step now is just save okay next i need to uh create some space around my header so right now i can see there's a lot of space around my header so i'm going to go in here and click on design spacing so my top and bottom padding i'm going to make sure it's set to zero and you can see now my size is decreasing the next step is to come over here to content go to background so here is where we want to add our background color for our header so i'm going to click here on this plus button and i'm just going to choose a color that would work with my header so let's have a look i think this is a bit too bright so we're going to play around with this a little bit okay so we're going to go with that for our main header background color and as you can see we also have a white background here on our menu so we want to get rid of that so let's go ahead quickly and fix that so i'm going to click on save changes and then i'm going to come back over here now to my menu and go to background and remove the background so now all we have is a transparent background because i've just disabled it here okay so this is looking great now while we're here we might as well go into design and let's start working on our design here on the menu text so here on the menu text uh i would like a color that can stand out on my site so first of all i'm going to come over here to my active color and this way this is where you can choose a color of the link when that page is active so for now i'm just going to go with white and then i'm going to play around with my colors here so menu text color let's change this to white and you can see now it's much easier to read which i think is cool next i'm going to come over here to my menu font and you know i'm going to choose pop-ins i'm going to go ahead and select that the size here is not big enough but before i do that i just want to change this from regular to bold because i want my menu to really stand out i'm going to increase the size a little bit to about 16. so the next step now is to add some letter spacing so i'm just going to drag this slider here until i am happy with my letter spacing so i think one is fine and i'm just going to reduce this a little bit to about 15 pixels all right so this is looking great i can see my logo here is not really standing out so what i may want to do is to go and change the color of this header so i'm going to save and let's go back over here and change this background make it darker so that my logo actually stands out okay so let's go with okay so we are going to go with um let's go with this color here all right so i'm going to save so so far you can see everything is really starting to take shape we've got our main header here and we also need to reduce some space around this because we can see our header is way too thick so i'm going to go now into my row settings click on design spacing and again i'm just going to add 0 here activate my chain so now you can see it's a bit too thin now so we can just play around here with the sizes and perhaps we could go with six all right so that's looking great now i'm gonna save and i'm pretty much happy with this now if you wanted to add some call-to-action buttons here or social media links you can go ahead and do that but for now i'm just gonna leave this leave this as it is so there's also one thing i need to do and that is to uh center my menu so i'm going to come over here to layout so right now it is left aligned now there's a few ways that you can uh style your header and that is to come over here you can have it as a centered one or you can also have it as an inline centered logo like that so these are the options you can play around with uh depending on how you want your website to look like okay so we are going to keep things very simple here i'm going to leave it as left aligned and then over here on the text alignment i'm going to align my text all the way to the right okay so i can have a separation between my menu text and my logo all right so now that i have this i'm going to save so i'm pretty much happy with my header now so the final final stage is to go into our section settings click on advanced and then you want to come over here to scroll effects and just make sure this is sticking to the top so i'm going to say stick to the top and save okay great the next step now is to add our main message for the black friday so this is what of course this tutorial is about so let me show you how to do that all right so what we're going to do is to add a new regular section so i'm going to go ahead and do that so this time i'm going to add two equal columns and i'm going to add some text to this one here so let's go to our lorem ipsum so i'm going to use some dummy text here because i don't i don't like typing but to be honest i could have finished typing by now by opening a new tab but you know what i've gotten so used to doing it this way all right so there's my text that's my dummy text so that's going to be my call to action great so i'm not going to style it yet so i'm going to go ahead and come over here to design and we want to go to our text and then over here we need to align it to the right so let's go ahead and do that okay so it's a line to the right let's save that over here we need to add a button so i'm going to search for my button module and select it so let's say get the offer okay there we go so that's my message get the offer and then over here on design alignment we're gonna align this to the left so that everything is close together all right so now that we have this all set i'm going to save this and then we're going to do what we did before and that is to make sure we have very little space on the top here and the bottom because right now by default the padding is way too much so let's go quickly and do that so i'm going to come over here to spacing add zero to our padding go to the top and the bottom great so now let's go into our rows design spacing same thing let's add zero to the top and the bottom now right now i can see that it's not looking great so let me just add a little bit like that and save right so now it's time to go into uh the main section settings here and add our black background so let's go ahead and add black now this is black friday so we really want this message to stand out okay so now that i've added this i'm going to now save and drag this to the top okay now it's time to stylize this and make this look really really nice so we're going to start here with our text so we're going to go in click on design text change this to pop-ins and we're gonna give this a color should we go with white yeah we could go with the white it's fine let's increase the size a little bit let's make this bold there we go all right so i'm pretty happy with my text here let's save that now for call to action sometimes you may want to go in and underline some text and all that you can do this by coming over here but you know what in this case i'm going to leave this as it is next i'm going to come over here to my button and let's stylize the button by coming over here to our button and activating use custom styles for button all right so now that we are here let's add our button background color so let's go with that orange it really stands out and then next i'm going to add my text color right so now you can see it's really bright and it's very easy to click next i'm going to come all the way down here make this all caps and not forgetting our font here we need to set this to pop-ins uh let's set this to uh bold yes i really like the bold and then back over here i think there's something i forgot to do and that is to remove my border with there we go right so we're getting there slowly that's looking much better that's our offer right so what we're going to do now is to make sure everything is aligned properly and also we want that when people are viewing this page they are going to be able to see everything in the straight line so let me show you the css code that you need to add in to make this work so i'm going to come all the way down here to advanced custom css and then on the main element i'm just going to add my code okay so this is the css code that we need to enter in here so it's the display flex and also align items center so now you can see everything is now align center and it looks beautiful now as i'm looking at this i think to myself this button here may be too big so let's go ahead and fix that quickly so we're going to go back over here to design button and we're going to reduce the text size so let's go ahead and do that so let's go with um 15 maybe even 14. okay we're gonna go with 14 and save right now this little bar here is a bit too small now so let's go in here and add a bit of padding so i'm going to come to spacing and we're just gonna add a little bit of padding here so let's go with maybe about six so now our message is really standing out okay so that's looking great okay so now that we have our message and everything is looking great the next important thing is to make sure everything is looking great on mobile devices so let's take a look at that by coming over here to the button so we're going to go to design go into the button so i want to make sure my size here is fine and we can see here that um i mean it looks great i mean the size is not too bad so it looks like we need to uh make some changes here to the text so we're going to go into the text settings click on design text so here we're going to go into the size so we'll come over here to text going to switch over so this is where i want to change my size make it a bit smaller to about say 12 or maybe even 13 okay now over here on the phone the phone size looks okay but you know what i've noticed and that is things are not aligned here so what i may want to do while i'm here in this view is to add some padding so i'm going to come all the way down here to spacing and i'm going to add top padding and just making sure that here we're on the tablet i'm just going to do that and make sure everything is aligned and i also need to add some right padding because everything is way too close together here okay i may just want to just do that a little bit okay so now you can see that uh everything is all lined up and let's take a look here on the phone as well and that is looking perfect so you can tweak this you know as many times as you want but right now we can see that this part here is a bit too big but to be honest this is the main offer and this should look great so now i am going to uh go back to my desktop and save okay so now that i've said my message we're gonna save this one more time so i'm just going to save this make sure everything is all saved and as you can see here this is a global header so now we're going to go to our site and we can see now our offer is there and our button here is looking great now check this out when i scroll because we set this to sticky my top part here my top main header here is stuck at the top but when i scroll down my black friday offer is showing so this is how you add this little feature that makes it easier for you to add all your messages and also i'm going to leave a download to this so you can use this on your own website now as you can see this is very easy to go in and update you can change your background color here and also change your message and of course make sure that the button links to whatever page you wanted to link to so now if we click on another page here you're going to notice that our header is pretty much across the whole website so here is our fitness page and everything is working fine all right guys that's all i have for you today's video thank you very much for watching don't forget to hit the subscribe and bell 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 take care

Channel: MAK

Views: 1,230

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: 1Z7y-R0PmAo

Length: 17min 25sec (1045 seconds)

Published: Tue Nov 03 2020