You don't need to use code to fix your header!
In this post, you will learn about the revolutionary new way to edit your site's WordPress header using Elementor Theme Builder. Watch the creative header speed art videos I created for this post.
It’s true –
You no longer need to use code to edit your website’s header!
As a web designer, editing website headers has always been a huge deal for me.
You had to use code – and I prefer designing over coding any day.
Honestly, I fell in love with the way you can edit and customize headers visually in Elementor. I was so inspired, that I decided to create not one but 5 videos showing how I design different headers and footers in Elementor.
So what is a website header, and why is it so important?
The header is the top area that consistently appears throughout your site’s pages and posts. Some websites have different headers for different sections of the site.
The very first encounter your customers and users have with your brand begins with your site’s header.
This is your website’s hook.
The header is also the business’ branding label – the logo, colors, and overall brand language. This is why web designers invest serious time designing this area with both originality and efficiency.
Headers also contain functional options such as site navigation, site search, shopping cart (for sales sites) and more.
In the past, editing required designers to use the template’s ready-made options. When building a website, the last thing you want to do is give your customers a ready-made template that is not custom-built to fit their brand design. Rather, the goal is to build a tailored branded design for your customers.
Today, Elementor gives you both the control and possibility of easily designing headers and footers that are uniquely personalized for each screen.
Combine any feature that comes to mind inside your header – titles, pictures, forms, logos, navigation, share buttons, shopping cart, search, etc.
In this post, we’ll show you examples of headers and footers from various inspiring website examples that we created.
1. How to Add a Search Box, Menu and Logo in the Header Area
This header is suitable for sites with more complex navigation. It has a top bar and another central navigation menu. The footer design also puts an emphasis on design with complex navigation.
On the left side it has a column with a logo and details, and on the right, there’s a navigator, contact, newsletter, and social buttons. What’s key to emphasize here is that even when the footer and header contain numerous features they do not appear overloaded, because there is a clear design division in the regions.
2. How to Add Social Media Icons to Your WordPress Header
In this second example, we show how easy it is to add social media icons to any WordPress header using Elementor.
The process is simple:
1. In your WordPress admin, Go to Templates > Theme Builder
2. Click ‘Add New’ and choose ‘Header’
3. Search for the ‘Social Icons’ widget and drag it in
4. Style the widget however you like. (See this tutorial for more info)
The ‘hidden’ navigation in the Hamburger, and on the other side the contact details and location are highlighted with large icons. The header also has a top bar with social network buttons.
The footer’s substantial size is eye-catching, its large area is filled with a video form background form and with a contact form. Again, the contact information and location are positioned in a place that really stands out.
3. Create a Menu in the Header and Footer Using Elementor's Menu Widget
In this design, I demonstrate an example of an unconventional use case – navigation not via the traditional menu, but rather using an icon with a link. This can be used on sites with a small number of pages or that have internal navigation on long landing pages (Or, instead of creating navigation you can simply drag in an icon or any other widget and give it an anchor link.) There is also the use of a ship in the header and footer, that looks sort of like waves.
The footer has a large area with a video background and complex navigation. I also added an image in a separate area and attached it to the center to get a suitable design effect.
4. Header & Footer for a Travel Agency
Want to change the header text? This example shows how it is done.
Here, large background images are used to extend a full-screen-width. The menu appears at the bottom while only part of it is sticky.
The footer has a large image above the navigation area, with the bottom area being the background color of the image, containing basic navigation in several columns, a contact form, and more.
5. Header & Footer for a Gallery
If you wanted to play with the color of your headers, this example will show you how. The design shows uses of bright orange colors set upon a dark grey background. If you wanted to switch the colors around, or use gradients instead, it will take you only a few seconds to achieve the desired result.
6 Elementor Header Tricks and Best Practices You Should Know
1. You can change the header image, and even set the featured image to be displayed dynamically, a different image for each page, using the Featured Image widget. You can also use the Conditions feature to create several headers and use each one per category or other condition. For example, you can build one purple header for your health category and another pink header for your teen category. The possibilities are endless here.
2. If you want to add code to your header in WordPress, simply follow the process of building your header using Elementor, then place an HTML widget inside the header. After this step, paste the code or CSS you want to insert. This is a simpler and safer method for placing code or CSS to your header, and is more recommended than trying to add code to ‘header.php’ or ‘functions.php’.
3. In order to remove a header or footer in a specific WordPress page, use Elementor’s built in ‘Blank Canvas’ template. Here is a quick guide how to do it.
4. We recently release a guide concerning how to create a Sticky Header in WordPress – be sure to check it out.
5. I wrote this earlier but it’s important enough to repeat: place ANY widget or element in the header using Elementor. Some recommended yet uncommon widget choices for headers include: social media buttons, video, slider and call to action widgets.
6. Create an Elementor transparent header by using Elementor’s Motion Effects or by following this video guide.
Conclusion: Edit Your Own Header in WordPress
The great thing about the Theme Builder, as opposed to any theme you download, is that you are always only a few clicks away from changing your site’s header, or even designating a certain header just to a particular area of your site.
Need more inspiration? Check out the Envato Elements plugin, which offers dozens of header templates for Elementor, as well as over 2,000+ free templates, each with its own header.
As we demonstrated in this post, you really don’t have to settle for the premade header and footer templates that the theme you’re using provides. With Elementor’s Theme Builder you can create a customized header and footer that will perfectly fit your website’s needs.
We encourage you to experiment with the Theme Builder, you’ll be amazed at how fast this process is.