Hello, everybody! This is Peter, and you’re welcome to my tutorial. Okay, now in this particular tutorial, I’m going to teach you how to create custom headers with Elementor. For those who say, ‘I want to create a custom header from my WordPress site, and I don’t have Elementor Pro, or maybe I can’t afford it, or maybe I don’t want to,’ we’re going into those kinds of experiences now. But I want to create a custom header, and you’re in the right place. Okay, don’t go away.
Introduction
Okay, so I’m going to show you how to create custom headers with Elementor, the free version. Now, there are some other plugins we’re going to add together to make it work. You’re not just going to learn how to create a custom header that involves Elementor, you’re also going to create a custom header that is responsive—responsive means it looks good on every device. You’re going to view it on the three major devices we know: desktop, tablet, and mobile phones. It’s going to look good across all three devices, and the good thing is that you can regulate it. You can actually change the look on different devices if you want to.
So, before we go into the main tutorial, I just want to give you a little recap for some of us who might be total newbies to the whole process; you want to know how all these things work. Let’s continue.
Okay, so basically, we understand that a website is like a book. Note that all books have pages, irrespective of the kind of book. So if we’re talking about newspapers, you know there are pages for different things. There are pages for different topics and news. For instance, on your newspaper cover page, there are highlights of everything that’s inside, and when you open them, you see the details. Your website is structured that way.
The cover page of a book is just like your homage on a home page. The home page is the first page you see when you open a website in your browser. Other pages include the about page, the contact page, and the service/product pages. We are going to go into the details of pages when we go into website pages. The number of pages now depends on the type of website or how complex it is.
Different pages are now combined together to make a book, but inside the page, if you have your normal book, you’ll discover that your book is divided into three sections. The top part, where you can put your title or the date, is considered the header. Then, you have the body parts, and finally, the footer part where you can put footer notes or footnotes. Your website page is also structured in a similar way, with a header, body, and footer.
For the sake of this tutorial, we’re not going to delve into the body of the footer. Perhaps in subsequent videos, I’ll talk about that. But for this tutorial, we’re going to focus on the header and how to build a custom header with Elementor.
Getting started
Over here on my side, we’re going to the plugin section. But before we do that, let’s make sure to be on the safe side and choose a theme. Ensure you choose a theme that will not interfere with your Elementor because sometimes the themes you select can adversely affect the outcome of your design. Based on my experience, I make sure to use Astra themes. I use Astra themes on many of my projects, like 60% of my projects are Astra themes. To do this, you can come to the ‘Appearance’ section, go to the ‘Themes’ section, and select the theme. Here, you can add a new theme. For those who are new or confused, make sure you select a good theme that might not interfere with your Elementor.
You can come over here, then select a theme from the search box. Just type ‘Astra,’ and it pops up. After popping up, wait for a minute. I don’t want this video to be very long, but then you can click ‘Install.’ If it’s already installed, it will show that it’s installed. In case you want to install it next time, when Astra pops up, you just click ‘Install.’ This will appear, and you click ‘Install,’ and it installs inside the directory of your themes inside your WordPress site. Always select the one you want. Now that it’s installed, you can click ‘Activate.’ Okay, well, this is the one we’re using. Please note that this is the one we’re using; I’m using this to explain because this one is already activated.
So next, when you come here, make sure you click ‘Activate’ or if you first click ‘Install,’ then click ‘Activate.’ Knowing this, we can now proceed further. Let’s go to the plugin. I’ll put my mouse over the plugin, and these three options appear. Then, I’ll go to ‘Add.’ If I go to ‘Add’ to add some other plugins, I don’t know if it’s in this site already. If it’s here, I’ll show you how to still install it. The first one we’re looking for in our list is ‘LMS kits.’ I say…”