Looking for custom Elementor pro tutorials and building advice, browse some of the lessons at the top or bottom of this page or get in touch and I’d be glad to chat further.
Step 1. Determine Header Type
The first step is deciding whether or not you want to create a header that is specific to a single page/post or dynamic. Dynamic headers within Elementor can be set to all pages or posts of a specific category.
Misconception
One of the biggest misconceptions that I come across is 3rd party plugins, whether they are needed or not for Elementor headers. 90% of the time these custom header plugins are definitely not needed for building headers within Elementor. Elementor was built with the intention of being an all-in-one solution, no need for cluttering up the backend of your WordPress installation.
A similar concept (covered in another post) is the idea that a specific theme will lock in the appearance of your header and site’s appearance. Elementor is one of the most flexible drag and drop site builders on the consumer market today.
Most Popular. Custom Headers From Scratch
Let’s say you aren’t quite ready (or don’t have enough pages yet) for it to make sense to create a singular header for every single page on your website.
Let’s build one from scratch…
Start Here: Elementor Header With Background Image
To start, let’s open up a new page or post and then click on the maroon colored button to add a new section (screenshot attached below)
You’ll be presented with the option of choosing the number of columns within the new section. For now let’s choose the first option, a single column section.
Next, click on the 6 dots at the top of the new section that you’ve just created. This will open up the settings section in the left hand panel of your screen.
The new panel of settings that opens up will look like the image below. There are three key areas to find within these settings (all conveniently located on the same tab). Make sure you are on the ‘style’ tab of the section edit, this is the middle tab.
I’ve made sure to circle the three key settings needeed in the image below.
Next, click on the paintbrush icon, next to background type. This allows for a classic background, either a solid color (instead of an image) or a background image. For now we’ll be building in a background image.
After you’ve selected the classic paintbrush icon for the background type, continue down to the next setting which is ‘choosing your image.’ Click on the grey box, that says choose image, and a new popup will appear that is your media library.
Within the media library area, at the top left, you will see the option to choose between uploading your own image from your computer or choosing one that has already been uploaded to your website.
Either option is fine to use. Once you have navigated to your image, click on it and you will see it cover the background of your entire section.
Now, there are a few settings that you’ll want to address and I’ve shown them below. Configuring the exact background image placement will also depend on how much content (text, buttons and other settings that you have in your header section). Within the same section settings that you’ve just placed your background image, you’ll want to change the ‘repeat’ to no repeat, unless of course you are using a pattern instead of a singular background image. For size, you will want to choose ‘cover.’ These two options will ensure that you don’t have the background image cut off or hanging out the edge. You’ll find the best results from your background image if you use something that is more horizontal than vertical. If you want specific dimensions, what I typically use is something around 1400 x 500 pixels (that’s length =1400 and height = 500).
The last consideration for this part of the article is to make sure that the height of your section is balanced with the amount of content in your header area. The header on the top of this page has a minimum height of 400 pixels vertically. This vertical height can be set within the layout tab settings of your section. From the layout tab, click on height and set it as needed.