Divi Supreme Modules Global Footer With Vertical Menu Columns 👍

hi guys and welcome to another divi theme video this is jamie from system 22 and web designer techtips.com well today we're going to use the awesome divi supreme modules plugin to create this global footer here we're going to use the great supreme menu module to create this nice little vertical menu in our footer down here if you enjoyed this video today please give it a thumbs up ring the bell comment share and subscribe to the youtube channel it lets me know whether or not to make more videos on a particular topic or not so let's get started first thing i'm going to do for this today is go to the dashboard once down to the dashboard i'm going to go down to divi and theme builder now you will need divi supreme pro installed and activated to be able to do this today so i'm in my theme builder here and there's the global footer that we've got on the front end i'm simply going to trash that and we'll start from scratch okay well let's add a global footer i'm just going to left click where it says add global footer i'm going to build a global footer and i'm going to build from scratch i'm going to use five columns for mine today three for menus one for a logo and one for some social media you can make this as simple or as complex as you like so i'm going to put that in there now before we start building with this we want to make sure we have the menus that we're actually going to use here and in my example i split them up into four pages or links in each one here so if you go to your dashboard again down to appearance and menus i've already created three menus and each of them has got four links in like i mentioned before so if you don't know how hit the create new call it what you will and you want to create one for each of your columns hit the create menu button and add the links that you want to add so i'm going to put four on each just select the four that you want to put in hit add to menu and of course you use posts or custom links or categories if you've got them once you've added your pages reorder them how you like just simply left click hold and drag drop them where you want and hit save when you're ready down the bottom here it's already going to assign its secondary menu and footer menu i'm going to take both of those off because i just want this to be custom assigned you can also assign them up here in many locations so we'll save and we're good to go like i said i've got mine already done i've got mine f1 f2 f3 so we'll go back into our theme builder now and here's our row with five columns in it i'm going to make this full width so we've got enough room to fit everything in nicely do that just click the little cog there go on to design sizing width i'm going to slide that up to 100 i'm going to copy that ctrl c go down below to max width i'm going to paste it in there ctrl v or you can type it in we've now got a full width row that stretches the full viewable width of our monitor great so let's starting put things in there first thing i want to put in is my logo i'll use an image module to do that a lot of images on this site there's my white logo i want to put in the bottom there won't stand out too well at the moment okay design wise i want it to be in the middle of our column here and sizing i want to shrink it down a little bit perhaps to about 70 or 75 percent yeah 70 i think that will do fine there great okay well now we can start adding our supreme menu items the light grey ones here are all the ones that come as standard with the fantastic divi theme when you add divi supreme you get another 49 of these as well as some fantastic extensions and i'm going to use the supreme menu which will give you us this nice horizontal menu that i'm looking at there it is right there supreme menu we can give it a title and it's already put in everything that we've got in our menus and down below is where we select the menus that we created in the last step like i say i created f1 f2 f3 so i'm going to use f1 each of them have four pages or four links in there great now before i go any further what i want to do is i'm going to put a background color in our section here and change this writing to how we want it so i'm going to just save that i'm going to go up to my section which is the blue tab right there in the background i'm going to give it a gradient background similar to what we have so you've got color gradient image or video and at the top i'm going to make it purple at the bottom i'm going to make it black great so that logo stands out nicely there let's make the menu stand out nicely too so i'm going to go back into the menu module i'm going to go to my design now layout there's only one option here vertical the title well i want to make that white and perhaps give it a bigger gap so let's do that first and make it a little heavier let's make it semi-bold and a little bit bigger there we go and let's roll on down to actual menu itself i'm gonna make everything right white here link active and menu link we hit like i said we haven't got any sub menus but you can do this for sub menus if you've got them space between you can pull that up if you want to spread it out a bit the left spacing i'm going to leave just as it is i think i might capitalize these that's fine and let's just go back up to my heading one or the title i should say and i'm going to put a slightly larger gap in the bottom there something like that obviously you do exactly what you want to do here now to make this quicker today what i'm going to do is save that i'm happy with that i'm going to clone this module i'm going to drag one of them over to the middle i'm going to clone it again drag it over the right it doesn't matter which one you drag over because they're all exactly the same i'm going to go in footer two i'm going to change f1 to the f2 my other menu and we'll save that and we'll do the same one for this third one footer three whatever your title happens to be i'm going to change that to f3 great and all i really want to do now is add some social media icons over here and that's a regular divi module so we scroll down social media follow as you can see it's put two in there simply add the new ones choose your social media put the link obviously to your social media page in there rinse and repeat so add a couple more so we better do youtube again put your link in there and we'll do one more instagram how's that okay and you can custom color these you they put them in as the default colors but you can use custom colors if you want to just go over to the design and you can choose whatever color you want and you can make the icons whatever size and shape you want as well but for expediency i'm very happy with that i'll leave that just as it is okay only other thing i really want to do to this foot is just shrink it down just a little bit a little bit too much padding top and bottom there so let's try taking the padding away from our section or we could do it from the row but i think it'll work if i just take it away from the section that looks like it's going to work because when we hover over the row you can see where the green lines there that's what we're going to be left with so i'm going to go into the section i'm going to go to design i'm gonna go to spacing and simply put a zero in the top hit the chain do similar for the bottom and obviously if that doesn't work for you just put in whatever you want there put a bit a little bit more in yeah let's leave it like that and there's our little global footer with those nice little vertical menus right there so let's save this we'll save our page changes and we'll x out at the top here make sure everything's saved up there go back to our page and we'll go down and there's our new footer with our little logo our nice little menus that we've used with the supreme menu module there and a few little social medias like i say you can make this as complicated or simple as you want but that's a great little feature to have on your footer menu so 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 with system 22 and web design and tech tips dot com thanks for watching have a great day you

Channel: System 22 I.T. Solutions

Views: 181

Keywords: Divi Supreme Modules, Divi Supreme Modules Global Footer With Vertical Menu Columns, supreme modules pro, divi supreme pro, divi supreme modules, divi supreme plugin, divi tutorial 2020, Divi 4 Supreme Modules Global Footer With Vertical Menu Columns, Divi theme Supreme Modules Global Footer With Vertical Menu Columnsp, Divi Global Footer With Vertical Menu Columns, Divi 4 Global Footer With Vertical Menu Columns, Global Footer With Vertical Menu Columns

Id: 5Y5lb8mhoGM

Length: 11min 19sec (679 seconds)

Published: Fri Mar 26 2021