How to Create an Animated Promo Bar for Your Page Templates in Divi

hello divination and welcome in today's tutorial I'm going to show you how to create an animated promo bar for your page templates in Divi this is the final results for aiming to achieve so without wasting a lot of time let's dive in and let's get started alright so right now I'm in my admin dashboard so the first thing we need to do is to head over here to Divi just mouse over it and then click on theme builder next you want to come over here where it says add new template click on this plus button now you can actually specify where you want to have this promo bar so you can have it on a home page landing page on a specific page now to do that you just have to mouse over here and then it gives you all the pages that you have here on your website so I'm just gonna have mine on the home page so I'm gonna go ahead and put a checkmark in home page click on create template now I'm gonna click on add custom body because this is where it's gonna be so I'm gonna click here and then build custom body so with this design I'm going to build this from scratch so I'm gonna go ahead and click on build from scratch so I'm gonna have a single column here and before I can add any elements in here I'm just going to close this and then go into my row settings now what I need to do here is to add my background color so I'm gonna click on background click on the second tab and then this is where we need to add a gradient color click on the plus button and I'm gonna add my first color here so I'm just gonna replace this color here with mine and by the way if you want to use the exact same colors as I'm using throughout this tutorial I will leave a link to the post in the show notes below so moving on I'm gonna add my second color here so again click on the color place the color now over here make sure it's set to linear gradient and then for the direction we're gonna set this to 90 degrees and then over here on design we need to come over here to sizing and here we have used custom cutter with activated in your case if it's not activated please make sure you click yes and then we want to reduce the column I mean the gutter with here to 1 and then we want to set the width here to a hundred percent and also on the maximum width we need to make sure this is set to 100% as well now the reason why we're doing this is because we want this to be edge-to-edge we don't want this showing like halfway halfway on the page we want this to be across the whole page all right so the next thing we need to do is to add our padding so I'm gonna come over here click on spacing and then I'm gonna add zero to my padding to the top and the bottom right so the next stage is to add a bit of CSS code so I'm gonna come back over here to the content tab and we need to add the code here in the column so I'm gonna click here on the square icon and go to the Advanced tab custom CSS and the CSS code is going to be in the main element I'm gonna go ahead now and save and save one more time next I'm gonna come over here and add our blurb module so I'm screwed click on it right so this is where now we can start adding all our content so here on the title is where you need to add your promo text so I'm just gonna use some dummy text here but in your case this is where you want to add your promo text which of course is promoting whatever products people need to buy or if they need to sign up that's where the information goes all right so the next thing we need to do here is do get rid of all this text and then we wants to come over here to image an icon and click on use icon so I'm gonna choose an icon to go with here but in your case you can choose whatever icon that works with your promo so I'm just gonna look for okay here we go here's my icon now it's time to customize our icon and our text so I'm gonna click here on the design tab and then image an icon so the first thing we need to do here is to add icon color so I'm just gonna paste my color in here and as I mentioned before if you want to use the exact same colors that I'm using throughout this tutorial I will leave a link to the post in the show notes below all right so the next thing we need to do here is to adjust our icon placement right now its place at the top we want to place to the left like that alright moving on we need to add icon signs so right now it's said 254 it needs to be way smaller than that so we're gonna add 16 pixels here and for the title text we're going to set this to 16 pixels as well and then moving on to the line height we're gonna set this to 1.3 so the next thing we need to adjust is adding to the top so I'm gonna scroll all the way down here to spacing so for our padding we're gonna add 10 pixels so now you can see it's nice and centered now moving on we need to add a bit of animation onto this so we're gonna come over here to animation our animation style is going to be slide and it needs to slide right so she's right here and for the animation delay I'm gonna set it to 250 maybe seconds now as you can see my texture is quite difficult to read so I need to go and adjust that so I'm gonna click here on this brush tool so this is gonna take me to my title text color changes to white and then I'm gonna save next I'm gonna add another module so I'm gonna click here on this plus button and this time the module is going to be a button so this is going to act as a call to action button so there we go we've got a call to action button so you can also add some text that you want you may want to add in here for your call to action but for this example and some leave this as it is all right so moving on we need to adjust this or customize this button makes it make it look nice but before we do that we need to come over here to the link and add our button link so right now I'm just gonna add a blank link but in your case you want to make sure you add a link to the page that you're promoting all right so now we can go to design button and then to in order for us to customize this button we need to activate use custom styles for button right so now we can go in and start editing this so first of all we're gonna start here with our size we're gonna set this to 15 pixels for a button text color and set this to white moving on so here on the border radius we're gonna set this to 20 and for our border width I'm gonna set this to zero and then for the button font weights we need to set this to semi bold now for the button to show it needs to have a background color so I'm just gonna go ahead and use this color here in fact it needs to be here so I'm gonna click here on this plus button and set my background color right so as you can see this button is way too close to my text here so we need to make a few adjustments to that so we're gonna scroll all the way down here to spacing and the first thing we need to do is to add margin of 20 pixels to the left so this is just going to create a space between my button and my text and then over here for the padding padding top and bottom we're gonna set this to zero pixels so both through the top and the bottom now let's head over here to the animations so the animation star we're going to use here is bounce on go ahead and select that and the delay is going to be a thousand milliseconds so pretty much this is all we need to do here with our modules I'm gonna go ahead and save and then we also need to work on our section settings on click here on the square icon to go into my section settings so we're gonna start off with a padding so over here click on spacing so the padding here is going to be zero both to the top and the bottom so I'm gonna activate this chain so the same value can be applied to both to the top and the bottom we're also going to add an animation style so I'm gonna come over here and the star we're gonna go with is bounce so I'm gonna go ahead and select it and the direction needs to be set to down so I'm gonna select down the animation duration is gonna be 500 milliseconds the delay is gonna be 250 and let's also set for starting opacity so here we're gonna bring it all the way up to a hundred percent and then because we want this to be above everything on the page we are going to need to come over here to advanced visibility and set our Z index all the way up to August period is 999 so that means that this bar is going to be above everything on our page if we save this template all its gonna do is it's gonna show this promo bar and that's it on the page so what we need to do next is to add our post content so this post content area here is going to display whatever it is is on our home page so let's go ahead and do that so I'm gonna come over here click on so I'm gonna come over here and add a new section and this is going to be a full width section and this full width full width section is going to be a full post content go ahead and select that so pretty much this is where our content is going to be and all the settings that we have here is what's gonna display the content on the page all right so now that I have all this information saved I'm just going to save this one more time and then I'm gonna exit and Save Changes so now let's take a look at the page so there we go so this is our promo bar and all the content on our page is actually showing now as you can see when I scroll this promo bar disappears with the content under the header so what we can actually do is we can add a bit of CSS code to make this sticky there we go let's go ahead and do that so I'm back over here I'm gonna click on this pencil icon to go into my settings and all I have to do here is to head over here to the top on my section settings click on the gear icon click on advanced custom CSS and this is the CSS code we're going to add on our main element so once you've done that click on save save this one more time and then we're just gonna close this and now we're gonna save this and review the page owner refresh the page now there we go so you can see now it is fixed now all the CSS code can be found in the post which I'll link to in the show notes below so there you have it thank you all for watching if you like this video please give me a thumbs up and to follow us on our social media platforms by doing so you'll be notified every time we release new tutorials until next time thanks for watching and I'll see you in the next video

Channel: Elegant Themes

Views: 8,407

Keywords: Divi Theme Tutorial, Divi Builder Tutorial, Divi 3.0 Tutorial, Divi Tutorial, Divi Quick Tip, Extra Theme, promo bar

Id: ft-ge-uYGtE

Length: 10min 12sec (612 seconds)

Published: Thu Jan 16 2020