Let’s start with your site header. It’s a simple build and will get you comfortable with using Elementor’s Theme Builder. So, to get started, head over to Templates > Theme Builder:
Keep in mind, this won’t show if you don’t have Elementor Pro. So, if you haven’t got that, yet, head on over and do that.
Next, click the “Add New Template” button:
Next, choose the “Header” template from the dropdown and give your template a name. I usually just keep it simple and name it “Header”:
Then, click the “Create Template” button. You’ll be loaded into Elementor and shown a list of pre-built header templates. I almost always start with one of the pre-built templates and just tweak it when I’m building in Elementor.
I’m just gonna go with a simple one. Hover over the one you want and click the “Insert” link:
This will give you a good start. It’ll look something like this:
We’ll add your site logo in a minute, but in a lot of cases, this header would be just fine. As you add items to your main navigation menu, they’ll show up here. But, we’ll do some tweaking so you can see how.
Let’s start by giving our menu a background color.
To do that, hover your mouse over the menu. You’ll see some blue lines show up and some icons in the center that you can click. We’ll click the middle icon with all the dots to edit this section. Then, on the left sidebar, select the “Style” tab.
Here you’ll see the Background section with the “Color” option:
Click the box to pop up a color picker and select a color. I’m gonna go with a jet black:
As you select colors, you’ll see your menu instantly change. This is one of the benefits of using Elementor. You can see you changes in real-time which makes building your site much simpler (and more fun).
Next, we’ll need to change the color of the text on our menu.
To do that, hover over the menu and simply click in an area near your menu items. You’ll see the left sidebar change and the title at the top should say “Edit Nav Menu” now. Again, click the “Style” tab and under the “Main Menu” section, look for the “Text Color” option:
I’m gonna go with a simple white. Again, you’ll see the text color change as you pick different colors. We’ll, also, change the hover color. I’m just gonna go with a simple gray:
These are some simple changes, but should get you familiar with Elementor. Last thing we need to do is change our logo. But, if you click on the image block, you’ll notice it’s set to “Site Logo” in the Image section and you can’t change it here:
This is unique to the Theme Builder. When you’re building regular pages, you’ll be able to add images right here inside Elementor. But, in this case, because it’s our Site Logo, we set it on a “global” basis. And, we actually do that in OceanWP.
So, let’s do that real quick.
First, Publish the changes you just made to this template:
When you click the Publish button, you’ll see a pop-up that will ask you to “Add a Condition”. The reason you get asked this is because you can create multiple header templates and display different ones on different parts of your site… if you want.
Which is pretty dang cool.
But, for now, we’ll just display this header on our entire site. To do that, click the “Add Condition” button. It will default to “Include” and “Entire Site”. That’s what we want. So, we’ll click the “Save and Close” button.
The header you just created is now live on your site!
Now, we can set our site logo. To do that, click the three lines in the top left of Elementor (in the purple section) and then select the “View Page” option:
Now, at the top of your screen, select the “Customize” link:
This will open the WordPress “Customizer”. This is where are your theme options for OceanWP are. On the left sidebar, select Header. Then Logo. You’ll see this:
Click the “Select logo” option and a pop-up will appear:
Click the “Upload Files” tab. Here, you can drag and drop the logo you want to use. Or, click the “Select Files” button and find the logo on your computer. Once your image has uploaded, click the “Select” button in the bottom right of the pop-up:
You’ll be given the option to crop your image. Do so if you’d like. I normally just select the “Skip Cropping” button because I want my image exactly how it is.
You’ll now see your logo placed into your header:
You can adjust the height and width. And, when everything looks good, click the “Publish” button to make your changes live.
And, that’s it!
You just created a custom header for your website using Elementor.
Pretty slick, eh?
Play around with it a bit and get it looking how you want. And, the great thing is even after you make it live, you can always go back in and make changes. And, nothing “goes live” until you hit the “Publish” button in Elementor.
It just gives a lot more control over your site.
So, that’s the header.
Next up is the footer, which we’ll tackle in our next lesson: