Divi Theme How To Create A Global Footer With Dynamic Content 👈

hi guys and welcome to another divi video this is jamie from system 22 and web designer tech tips dot com well we've been creating this one page scrolling site here and we're getting to the end of it now we got a hero section with dual buttons a little scroll down there we created this menu in our last video that scrolls down to the various sections we're at about us let's go down to services we've got a sticky call to action bar project section with a video background testimonial section with testimonial carousel going on there a little team section some hosting pricing and a contact us section with a live google map below here and today what we're going to do is create this custom footer just to round off this site here very simple footer with a logo some social media icons here a cut down version of our menu a dynamic copyright statement that will update every year in real time and a little copyright statement there and this menu also will scroll up to our various sections so let's get started first thing i want to do is go to our dashboard we'll go down to divi and we'll go to theme builder now here's my global footer i'm going to go ahead and delete that and we'll start from scratch so i'm going to add a new global footer build global footer i'm going to build from scratch and let's have a look i'm going to use this one right here for the columns we've got two on either side there are about a quarter and a half in the middle now we're keeping this very simple today you can go to town on your footer if you want to put all kind of things there but like i said i'm going to keep it fairly simple i'm going to put my logo in so i'm simply going to use an image model module for that and there's my light colored logo because i'm going to have it on a dark background i'll leave that we'll position all this in a little while now before i do anything else i'm going to make this row full width so to do that i'm going to go in to the row the green tab i'm going to go over to design sizing i'm going to pull the width up to 100 i'm going to copy that ctrl c and paste it in max width below we've now got a full width section as you can see my logo is over there see we used to have a button that you could just click to make a row full width i'm not sure why they dropped that but this is just as easy let's save our changes there i'm going to put a dark background in our section here so we can see what's going on so i've gone into the blue tab for the section going to go to the background there's a black i don't want it quite black black but we'll have a fairly dark one perhaps something like that great well let's make that logo a little smaller here so i'm going to go back into the logo i'm going to go to design i want it to be in the middle of our little section that's right there so i'm going to pop that to middle sizing wise i'm going to pull it down and as i pull it down in width you'll see it shrink there we go that's fine something like that okay when we're happy we're going to move on to this next one here i'm going to add a new module i'm going to use a menu for this and we've already got our logo so i don't need to add it to the menu here's a menu module now our main menu that it's selecting at the moment is way too big too much information there so i'm going to create a smaller version of the menu just to have on our footer so we'll put this one in for now then we'll create the new menu in a little while now i don't want any background i want it to just have the background that we put in there so i can take the background away still on the content tab i want to be able to see it so let's go to our text and make it light and lay out i want it to be in the middle centered i know you can't see it let's make it white so we can see it menu text active link there's going to be white and our menu text color also going to be right there it is great so i'm happy with that like i say we'll change that to a smaller version in a minute let's add another module underneath and do a dynamic copyright statement so for this i'm going to use a text module and the purple modules here are for divi supreme pro that i've got installed on this site we're not using any of these today but divi supreme pro is an awesome addition to the divi theme so i want to use a regular divi text module for this and for the content i'm going to delete what's there and we're going to use some dynamic content for this today little disk type icon here if we click on this what dynamic content is it'll pull it from the database and i want the current date but i only want the year and before it i want to put a copyright statement in and to do that i'm going to use an alt code for the copyright symbol so if you hold down your alt key type in 0 169 there's the copyright symbol and i'm going to put my name in or the company name add a little space and then after the date which is what we're pulling in here i'm going to put a pipe which is just above the enter key with a shift a little straight vertical line and whatever you want to say all rights reserved i might want to put a space in there okay and the date format i just want the year so i'm going to go down a custom you can have you know month day year and if you look here that's the abbreviations m j and y i want custom so i just want the y which will be a capital y great now design wise i want to make our text white so we can see it see it's up here system 22 20 21 all rights reserved so let's go into our text i want to center align it and make it light in color there it is and i'll center align it great but it's a little too far below our actual menu right here i want it a lot closer because i don't want my footer too deep there so while we're in design let's go to spacing make sure there's no padding top or bottom by simply putting a zero in there's no padding there that's fine so what i'm going to do i'm going to give it some negative margin so it pulls it up closer to here so here's our margin on the top little arrows i'm going to roll it down to it's negative and as you can see as i'm clicking on it it's getting closer and you can just type in a value here let's try 30 even a bit more let's try 40. yeah i think that'll work great and that will increment every year it'll go 21 22 and if you've got the month and day in there it'll increment every day live that's a great thing about dynamic content so let's go over to our little third column here and i'm going to put in some social media icons again we're using the inbuilt divi ones here's our social media follow there's facebook twitter like to add another one just go in there select what you want to put in there pinterest save that one more and let's select linkedin now it puts in the default colors which is great if you want that i want mine a little more custom and obviously for the link you put in the link to your social media page here put in the facebook link for facebook twitter for twitter etc etc okay well i don't want mine the regular colors i want mine to use the colors we've been using for this site so i think actually i'll put i'll make the background black and i'll make the icon itself go to design icon i'm going to make the icon blue because that stands out quite well against the black here might make it a little bit bigger there we go something like that let's round it up to 20. spacing wise i'll leave as it is but i am going to give it a border and you can do all at once all sides at once with this which is what i want top right bottom or left individually if you want to do that let's make it say two picks let's see it first i'll make it that blue color yeah that's fine two picks that blue color but i want it to be round so i'm going to put 50 up here 500 and percent and because i've got that chain linked it's doing them all at once now when i hover over it i think i want to change that icon to being white and we can do that with the border too so let's do that [Music] so common to most divi modules if you hover over the dark legending hit the little arrow you've got a regular state when your mouse is not on it and a hover state when your mouse is on it when the mouse is on it i'm going to change that border to white i'm going to do exactly the same thing for the icon itself hover over the dark legendary get the little arrow up regular state's going to be blue when we hover over it's going to be white there we go just change it back and change the border back to the regular state down here i need to make sure that that's blue on regular state white actually change i've changed the border width that's not what i want i want the border color which is there we go so regular i want it to be blue and hover i want it to be white there we go got it okay well rather than have to go through all of these and do them all individually what we can do is save this and we were in the linkedin right there all i can do is right click on that one and extend item styles and we are in a column here so we can extend it to all the ones in the column hit the extend there we go okay well it's still a little deeper than i wanted so let's go to save changes i'm going to take some padding away on our section right here so let's go in there i'll set it to zero so we'll go over to design tab spacing padding i'm gonna put zero hit the chain so it does the bottom as well i think that's going to do it actually you need to push these social icons down slightly let's go in here you can actually drag it and drag it down if you want to or go in and add padding on the top so i've gone in there i'm going to go to design spacing padding top let's give it a try 20 that's too much that's about right 10 seems right great well let's save our changes and let's create a little cut down version of our menu here perhaps with four little items on it so i'm going to save the page changes i'm going to exit out up here make sure everything's saved here hit the save changes there we go great now i'm going to go down to appearance and menus and i'm going to create a new menu here's the one i actually created earlier but we'll duplicate this so i'm going to create a new menu i'm going to call it footer create menu and we gave all our sections css ids in our last video so we could scroll to them so we need to use custom links again put in a hashtag followed by the css id name of the section you want to go to so first one is about for the about us section i'm going to have that down there and in the link just call it about us add to menu and we can have one for the services section so it's hashtag and we call that gave that the idea of services our services and we'll put one to the hosting options or hosting costs the pricing tables so it's hashtag and we called that price now let's call that hosting options and the last one will take him to the contact section and every time i'm heading out to menu as you can see it's adding to the menu over here and the contact section will just contact and we want it to say contact us or whatever you want to say obviously okay that'll do for our four there let's save the menu i've got to give it a location so we'll go to manage locations there's our new menu i don't want it in a secondary menu that'll be above our primary up there so i'm going to reset that to select menu so it doesn't show up up there i do want it in the footer so let's give that one the name of footer save our changes now we've created that menu we can go back into our custom footer down here divi theme builder go back into our global footer and we'll change out our menu right here just go in there hit the little cob for the module settings and select our new menu it should show up here now there it is footer there we go a lot more concise for the bottom there save our changes and we should be good to go we'll exit out of here make sure everything's saved and we'll refresh this page and go down and we should have our new footer on the bottom there okay let's go all the way down to our contact us we'll be right at the bottom roll down a little bit and there's our new footer with our new menu our social media links as you can see they change color when we hover over them make sure our links are going to work there's our hosting options great so we're pretty much done with this site now so that's how to create a simple global footer using a bit of dynamic content for the date down there i hope you've enjoyed this today and found it useful if you have please give it a thumbs up ring the bell comment share and subscribe to our youtube channel once again this has been jamie from system 22 and web design and tech tips dot com thanks for watching have a great day

Channel: System 22 I.T. Solutions

Views: 1,107

Keywords: Divi Theme, Divi Theme How To Create A Global Footer With Dynamic Content, wordpress divi theme demo, elegant themes, divi tutorial 2020, Divi 4 Theme How To Create A Global Footer With Dynamic Content, Divi 4 How To Create A Global Footer With Dynamic Content, Divi Wordpress Theme How To Create A Global Footer With Dynamic Content, Divi How To Create A Global Footer With Dynamic Content, How To Create A Global Footer With Dynamic Content, system22tv

Id: JOtMQ5ZnoBQ

Length: 18min 22sec (1102 seconds)

Published: Sun Mar 07 2021