Divi 4.0 offers the ability to build custom footers with drag and drop ease. Kori Ashton will show you how to easily apply a custom footer layout that includes an Instagram feed.
Click here to buy Divi using Kori’s Affiliate Link (Thank you!)
https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=37301
Here’s the video for the Instagram Plugin – https://youtu.be/EuSLML5IX4M
Here’s the link for the Custom Header Options – https://askkori.com/wordpress-wednesday/divi-4-0-how-to-build-a-custom-header-for-wordpress/
Free Footer Layouts – https://www.elegantthemes.com/blog/divi-resources/free-divi-footer-layout-pack-10-unique-footer-designs-to-give-your-site-a-leg-up
Full Transcript
Hey y’all, I’m Kori Ashton, today we’re gonna continue the series, a little mini-series I’m doing on the new divi 4.0 amazing features. Last week I did the custom header, how to drag-and-drop and kind of create really cool dynamic looking headers, that you can set globally right across your whole website.
This week we’re gonna be looking at the footer area, I know it’s been a point of pain for quite some time, especially if you’re trying to use the divi themes, how do you get into the header, how do you get into the footer, and really make ’em look custom, make ’em look the way you want them to look. I’m gonna show you all right now how to do it in drag-and-drop, all in this free tutorial, stick around.
Liquid Web
All right y’all, this is brought to you by Liquid Web, the most helpful humans in hosting, and they are truly the most outstanding hosting company providing you great WordPress support, extra security, and faster hosting, all the way around. So if you’re having issues with your website, reach out to them, let them know that Kori Ashton sent you their way.
Building Custom Footers
Divi Footer Tutorial
Let’s get to the tutorial all about the divi footer. So by default, this is the custom divi footer. Obviously, if you’re gonna use any sort of child theme, or other layouts, you’ve got other opportunities here to have better dynamic, beautiful layouts, but how do you make something that’s totally customized?
So this is the new idea I have, and I’m gonna show you how to build out something like this, right, where I’ve got an Instagram Feed at the top of my footer, and then I have these four columns. Seems pretty straightforward, but you can really get creative with what I’m about to show you, this is just to kind of give you examples of the things you can do easily with drag-and-drop environment now, and again, remember this can be one specific click sets it across the whole website, or you can designate this to appear in certain areas, so it’s really cool.
Set Up The Global Footer
Let me show you how I built this out with Instagram Feed and these four columns a little bit of variation of color on my background for my footer as well. Let’s go do it. So we’ll head inside your dashboard and now, because we are running the divi theme, we are able to come here to Theme Builder, and this is the new amazing playground, right?
Last week we talked about how to add the global header, if you’re interested in that tutorial I’ll put the link below, but today we’re looking at how to add a global footer. So we’ll come here, and for this tutorial we’re gonna go ahead and build the global footer from scratch, right? You can add from library, you can import, export if you wanted to, and add in really cool layouts, and stuff like that. Again this is very divi-esque, right? We all know these three columns here, built from scratch, pre-made layouts, clone existing page, we’re going to, for the sake of this tutorial, build from scratch.
Again, this is very exciting, this is opening up all the capabilities of divi right here inside of our dashboard right now. Remembering the layout example I’ve already given you we’ve got a full-width section at the top that has our Instagram Feed, and then we have the four columns, right? So the four columns we’re gonna have living in here, that first section I had my logo in there, so I’m gonna use their image block, come in here, add an image. Remember but just a couple of clicks, you can even make this image clickable, right? Add in a link to it right here in this little section here, where it can jump back up to the top of the page, or go to a designated page if you wanted to.
The next section that I had was just attach section, that had a little bit of About Us information in it, so I’m gonna go in and use that module here, and I’m also gonna add in a little bit of an like a H3, for that title area, right? About Us, let’s see, add that in there, click okay.
That next section we have is a Social Feed, and that’s also a default module that lives inside of the divi theme, so we’re gonna click here and look for Social, as long as you’re spelling it correctly you’ll be able to find it. And you’ll add in as many links as you want, right? So I’m gonna go ahead and add in Instagram on here, and you’ll just open up the drawer and type in the link that that little icon is associated with, click okay.
Let’s go ahead and add in another one that we had on that example, was YouTube living in there, and of course you can open up this drawer, add in a link that you want, click okay. You’ve got those icons that live there, click okay. In the example that I gave you though, we had a little bit of a header to bring some symmetry across these columns. So the way I did that was I duplicated this column, and grabbed it, dragged it over here, dropped it up there, but you know, we don’t need that text right? So we’re gonna open this drawer back up, remove that paragraph text, and we’re gonna change this to read, instead of saying About Us, to Get Social, there we go, and click the okay, the little check box, there’s our Social Media Feed, and then this next column over here, we add some Contact information, so I’m gonna go ahead and duplicate this little title section, drag this over here, open that up, I’m gonna say Contact Us, and drop in some fake contact information, right? 123 Somewhere Lane. And you of course, are gonna be able to do this easily and quickly on your own. Best State Ever, Texas, 78215. And then if you wanted to, you could put in a phone number, right? We did that as well. 867-5309, maybe that’ll get stuck in your brain?
And then for the example that I also gave you, we had a button living here for a contact, for a nice CTA or a call to action button, that lives down here in this area. I think it’s a great reminder that as people are scrolling down, and get down to the bottom part of your website, we want them to be able to click and do something, right? We want to call them to action. So we’re gonna come over here, and we’re gonna add a default module, there’s a button in here, so we’re gonna Add Button, and this is where we’ll say Contact Us Today, and then you’ll open up this little drawer here, right up above me, type in your link, and click okay, there’s that. All right, how cool is this you guys?
In just a matter of minutes we’ve made our four columns, put anything we want inside of there, and again, any module is open game to put in these areas. You can also easily drag-and-drop them, so if you just want to play around, and kind of see, well maybe I want this About text to live underneath my logo, and I want to put something else here? You can do that, of course, quickly and easily in this one section, click save, and I applies all the way across the whole website, in just a matter of seconds you’re done.
Add Instagram Feed To Custom Footer
All right, what about the Instagram Feed, how do I make that work? Let’s do it, I want to put it up above this top section up here. So I’m gonna come here, into my blue, because I want a full-width section, click Add Section, right? Now we’ve got this, I want to choose Full-Width, and I’m gonna choose the Code option, ’cause I’m actually going to drop in some shortcode from a plug-in that I’m using from my Instagram Feed.
I already have the shortcode on my clipboard, if you’re interested in what plug-in I’m using for my Instagram Feed, I have a whole video on that, I’ll put the link in the description box below, so that you can go use the same free Instagram plug-in and get the same shortcode and paste it right in here.
My settings for this is eight images across, one column, because I want it to display really nicely across here, I removed the header, I removed the Load More button, you’ll be able to follow it easily, quickly, and again, this is just a free Instagram plug-in, right? All right, so my layout right now, that puts this below my four-column, I want to drag this up and put it up above my four column. There it is.
And remember I wanted to kind of section out this footer and give it a little bit of a difference of background color so I’m gonna come here, I’m gonna go into my gear icon for this full section area, open this up, click on background, and I’m just gonna kind of tweak the background color shade, just a bit, so it kind of stands off, that white crisp background, there it is.
All right, very exciting. Okay, I’m gonna click Save, right? So that’s the step in clicking and saving everything that we’ve done here. Top right-hand corner you’re gonna X out of this screen, there’s one more step you have to do, you have to go ahead and click Save Changes, and that basically publishes that to your website.
Then you’ll come to the front side of your website, click Refresh, and look at this, there it is, there’s our new global footer, that lives literally on every single page with just those few clicks. So this is my homepage. I’m gonna go into an individual article, an individual blog article, I’m gonna scroll down, there it lives. Perfectly and easily, and if I were to make one simple change, of course, it would affect it across the board.
I get so passionate and excited about this stuff, because it’s so simple to do, and please don’t think for one second that everybody should think this is super-easy, because a lot of us don’t know how to do this stuff, right? But I want to challenge you, you can do this, no code needed, you can drag-and-drop and make beautiful creations, using the same theme.
That’s why divi’s so powerful, you can just buy it one time, you’ve got an unlimited license, you really start to learn this theme and learn the function of it, you can make multiple websites quickly and easily, you’ll only get faster because the learning curve is gonna minimize as you just continue to work and build libraries of layouts that you love, and just a couple of clicks, you’re off and running, and it’s a global effect. It’s so cool, you guys.
Anyway, I hope you’re nerding out as much as I am, and I hope you subscribe to my channel, because every Wednesday I’m creating content like this to help you improve your online marketing inside the world of WordPress. For those of you headed to WordCamp US, I am flying out tomorrow, I’m gonna be there in St. Louis, I hope to see your amazing faces there, holler at me, let me know that you’ve found me on YouTube, holler at me and let’s take a selfie together, and get on my Instagram feed, I’d love to have you there and get to know you more. All right y’all, I’ll see you next time, bye everyone.
