Are you looking to take control of the design of your website without needing to know how to code? Elementor allows users to easily build and customize their website without any coding knowledge. While Elementor can be extremely useful, it has its limitations as it is your WordPress theme that ultimately controls certain elements on your site such as the header, including the logo and navigation menu.
If the built-in header options provided by your theme don’t quite meet your needs or you want to use a unique header for a specific page, Elementor can be used to achieve full customization of your website’s header through its drag-and-drop interface. In this tutorial, we’ll show you how to use Elementor to create a custom header for your WordPress website.
Free Elementor Theme Builder
Your website’s header is crucial for both aesthetics and functionality, as it is where important elements such as the navigation menu, logo, cart, and more are located. A well-designed header can greatly improve the user experience of your website.
To customize your header using Elementor, you can utilize the Theme Builder feature, which is only available in the paid version of Elementor (Elementor Pro). However, thanks to the UnlockElementor plugin you will be able to create unlock Elementor theme builder for free and create your own header as you like!
Follow the steps here to unlock Elementor pro for free and create your custom header with the theme builder.
Create your header in the Elementor theme builder
Here’s how to get started with the Theme Builder.
Step 1: Go to Elementor templates
Navigate to ‘Templates > Theme Builder‘.
Step 2: Create a New Template in Elementor
Click the ‘Add New Template‘ button to create a new template in Elementor.
Under the dialog box, select the ‘Header‘ option and give your template a name.
Step 3: Click “Create Template” to Get Started
Once the template is created and published, you can edit the header directly using Elementor!
Elementor Widgets
Designing your header works the same as any page or section with Elementor. Simply drag different widgets to the main page to create something amazing.
Speaking of widgets, you’ll find all kinds of handy Elementor widgets for quickly building a custom header in the Elementor Pro sidebar.
Here are a few of the most useful:
- Site Logo
- Site Title
- Page Title
- Nav Menu
- Search Form
- Sitemap
With these widget options in Elementor, you can build a header that has every element you need!
Just remember, if you’re designing a custom header, you want to take advantage of dynamic content so that the website pulls the same element from every page.
For example, to get a consistent logo, you can upload a site logo to your customizer with the Site Logo widget and use it as a dynamic element in your header template, rather than using an Image widget for the logo.
That way, it’ll appear the same on any page that uses this header template – and when it’s time to update your logo, you only have to swap out the logo in one place!
Step 4: Choose Display Conditions
Once you are satisfied with your header design and click ‘Publish‘, you will be prompted to select the display conditions, or where you want the header to appear on your website.
There are three options:
- Entire Site
- Archives
- Singular
Selecting ‘Entire Site‘ will show the header on all pages and posts, ‘Archives‘ will show the header on a specific archived page or post, and ‘Singular‘ will show the header on a specific page, category, or post. This targeted display feature allows for the creation of custom pages, posts, and landing pages within your WordPress website.
Elementor Sticky Header
If you have Elementor Pro or you have unlocked it for free with UnlockElementor, you can create interesting header variations, including a sticky header feature!
To create a sticky header for your header template, go to the panel and select ‘Advanced > Scrolling Effect‘. Choose ‘top‘ or ‘bottom‘ to have the header “stick” to the top or bottom of the page as the user scrolls.
Additional options for defining the header’s animation and selecting which devices to apply the sticky header to (desktop, mobile, tablet) are also available.
Conclusions
In conclusion, using Elementor to create a custom header for your WordPress website is a simple and efficient process. With its drag-and-drop interface and customizable options, you can design a header that matches your brand and style.
Don’t forget that to follow along with this tutorial, you will need to unlock Elementor Pro with our plugin. We hope this tutorial has helped you learn how to create a custom header using Elementor.
