How to make a responsive footer with Elementor Pro in Wordpress | Rino De Boer | Skillshare

How to make a responsive footer with Elementor Pro in Wordpress

Rino De Boer, Designer & Content creator

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
6 Lessons (10m)
    • 1. How to make a responsive footer with Elementor Pro in Wordpress

    • 2. Theme builder and example

    • 3. Creating the actual footer

    • 4. Placing the footer with conditions

    • 5. A double footer

    • 6. The end, want more?


About This Class

He guys, in this short class I will show you how to create a quick and clean looking footer template in Elementor Pro on Wordpress. I first designed the footer in Adobe XD, so I didn't use a design template.

I hope you like this short class.


1. How to make a responsive footer with Elementor Pro in Wordpress: hi. In this class, I'm going to show you how you can create a responsive footer that will appear on all of your WordPress. Page is we're gonna make this foot or responsive, and that means that it will automatically change to the side of your screen. So mobile. It's a different design than on desktop and in the food. And there are also two links that are clickable. And you can link that to any page or any website that you want. So to create this food or you will need element or pro because we're gonna use the team builder in L. A mentor, which is a pro feature, in my opinion, you should always use elemental pro for food er's because the food is one of those elements that will appear on all of your pages. So if you want to make a change to the food or you don't want to change 100 pages, you just want to change it in one place, and then you want that change to automatically appear on all of your pages. So that's why I'm using element of pro in these class. I will also show you how I created this double food or that I created for one of my clients on this foot has two sections, a black section and a green section with different element in each section. So after the shirt class, you will know how these foods are made inside of element of pro. We just drag and drop if you don't know me. My name is Reno. I'm a designer myself, and they used his foot on my own personal website. So you're gonna work on a real project? I'm also a content creator on YouTube and create videos under this name called Living With Pixels. So this glasses pretty quick and short is just a few videos. So I hope that you like it, and I hope to see you in the next video. 2. Theme builder and example: So now I'm locked into WordPress and here on the left, you have to stop over here. That's called templates. And if you don't go to the team builder, which is a pro feature, you can if you zoom out because my screen is too small. Um, yeah, like this. You can create a different parts off your team inside of L. A mentor. So your team is just running in the background and you're just using L. A mentor to kind of override the teams is not really overriding, but it's replacing the normal team settings. So if you want to create a food, I like that you just go to food. Er, then you can see my food. Er and I will first show you what's inside off my food. Er so what I essentially just did is I created just one big section with five columns, and those are just headings because I'm heading. You can put a link. So let's just create this header now together. So you know what I'm talking about? Um, I'm not going to do that in this fella. I will start from scratch, so we're going to the team builder and I'm gonna click on at New Select the food or option , because then you can replace all the footers on your website. And then now I'm gonna dio video video tutorial because it's just for the video. 3. Creating the actual footer: Okay, So if you have element of pro, you can choose out of all these free food or templates, which are actually pretty cool. So, for example, let's preview this one. If you just click on the magnifier, you can just insert this for with one click, and then you only need to link those things, replace the logo and connect this forum. Then you have a cool food er or something, even like this, that's a pretty big food. Or with social media and all kinds of links, you just can import them with one click. So that is really cool. But I as you guys know, I like to design things myself. Eso for my website. I created this header footer. Sorry. Okay, so let's just get started. What we're gonna do is we're gonna click on a main section, and then I want to give it some betting on the inside. So I just went over here and at its I don't know, maybe 60 to the bottom of 60 to the top. Give it some height than EC at a background color. So you just added background color like this. Boom. There you go. Maybe even this darker color. And then what I did, I inserted a heading text. So I inserted the heading text, putting a text. I made the text. Whites made it even smaller. Or maybe making an H for something like this. And now it's a bold one. Right? So I have one column with one text, and that's it. And before I started duplicating the columns, you want to think about your responsiveness? Um, because on the responsive page, like here, you can see that all the columns have 100% with and in that way all the items will be stepped upon each other. And that is what you want in a food or on mobile. So before you start duplicating, just make sure that your column on mobile is 100%. With Andy Texas, you can see right here is aligned in the middle, but then only on mobile. But you can see Boom. And now, if I start duplicating, you're going to see that we have a layout like this. I'm gonna go back to desktop mode and I'm going to duplicate this thing like five times or four times, actually, boom four times. Does Dio I want them to be right a line because that looks a little bit nicer. And then, for this one, I just replaced this one with a logo and I don't use decide local option because then you have to go back into the Harper settings that I just like to be to stay inside off element or so just grab an image select image that I want. So I just have a white version of my logo right here, very small on this, you can see so it will stay very fast and boom, There's my logo. Go to stele. Two pixels make make it a little smaller. Delete his layer and now we're almost done. De text, as you can see, is not middle align. So that's what I forgot to do before I started duplicating. But that's not a big problem. You could just go to vertical alignments middle as you can see and then copied this and based it on all the other layers. All right. And now if we go back to Mobile mote, it almost looks perfect. So this is almost everything that I did and also on a tablet issue, concede the with its 100%. So now all you need to do is just changed the text. So, for example, just put a email in here. And by the way, if you want to make your email link, you just put the email in here. It's a link and you type mill, too. And then I just put Instagram a linked in over there, and that's all I did, so no. 4. Placing the footer with conditions: Here's the trick with elemental pro, you can click on publish and if you click on publish, it will give you an option. Where do you want to display your template? Here, you can set up your conditions and this is where the power of elements are. Pro comes in because you can say I have entous food er to be at the bottom off the whole website, right? Or maybe you just want a special food er on Lee for your portfolio items or on your block boast, for example, or maybe just his food or on the front page. And then I want another food er on the other pages. So you can, for example, create two different footers and then give them difference conditions here in the settings . And now, if you click safe this food or will be on all pages like I did on my website, But this how I did it 5. A double footer: And now I'm gonna show you how I did this food or which is a little bit more complicated. So let's just go to that website. And by the way, this is a real project. So this is actually in a food that I'm using right now on. The website will open the navigator so we can see what's going on. There are two sections. One, This is the one big black section, and this is the smaller green one. And inside the smaller Greenman, there are just two columns, the left column and the right column in the right column there. It's just a social Aiken Wichit, which you can just find over here. If you type social, there it is. And on the left, the tradition is just a heading text. And then in this black box we have four columns. So I just created one column. There is a image in here, a little text and then thes or two titles, and for this part I have used the Eiken list. So I've just created a text and then linked it to Death Page s. So it's just an Eigen list. But then, actually, without the Aiken's so have just deleted the icons like this. And if you guys want a full tutorial, how I created dish food er and now I'm just showing how how it's made. Then leave. Leave a comment below because it is a more complicated food. Or, of course, and I'm also show you the mobile version. This column is 100% then thes two are 50 so the food will not become too long on mobile. And then this whole part is hidden on mobile. So if you go to advance and the responsive, you can see that I've hidden this, otherwise food will become too long. Yeah, but it is a more complicated footer. 6. The end, want more?: so yeah, that's actually all I did. If you have more questions about food, dish or maybe about headers, just let me know You can DME on Instagram Atorino the boar. Or you can just leave it coming down below here on skill share. Now, if you want to learn more about Element or I also have a class on how to create a header that's actually and transparent header, which is a huge trend investigation right now, I think it looks really clean and you can find that class on my profile. But there are a few other classes, like my main course about element or free. So if you want to learn how I created my whole portfolio website with the free version of Elemental Pro, you should check out my course on my profile. So for now, thank you so much for watching, and I hope to see you in one of my other classes