Welcome Back,

In our previous post you create your very own Fixed Vertical Header so congratulations on accomplishing that task now its time to add some widgets to wow your visitors.

Let’s Begin

Now that you have your fixed header we need to add things like logo, navigation and maybe even a copyright. But where do we begin sure you can open up the template and start dragging in widgets to your hearts content but for this tutorial we will be utilizing Elementor Pro template system and build things in parts or sections.

For example Vertical top and Vertical bottom templates to help stay organize and do some things we maybe couldn’t do other wise.

The Templates

We are going to build 2 templates that will live inside our fixed vertical header.

The first template which we will build is called Vertical Top and it will hold our logo and menu. The second template will be called Vertical bottom and it will be used as a kind of a footer for our vertical header.

Vertical Top Template

Navigate to Templates > Add New to create a new template section and give it the name of vertical top.

Next we need to drag some widgets onto the page. Make sure that all your widgets are in the same column so your outcome will be same as mine.

First we need to take care of the logo you can either use the logo widget or image widget either will work.

Next we need to add a spacer widget followed by the Nav widget. You should have something similar like the image below.

If you are using the image widget to house your logo be sure to use (px) because if you know your vertical header is 250px wide you can use that to decide how big you want your logo to be.

Style your menu anyway you see fit.

Vertical Bottom Template

For our vertical bottom template I am just going to include some social share options for the visitors who want to find me on social media.

Create another section template and give it the name of Vertical Bottom.

For this template all we will need is the Social icons widget. Drag it onto the page and style it how ever it fits your design.

I didn’t get crazy with the styling.

Now that we have our templates built we need to revisit our fixed vertical header template.

Putting it all together.

Open up your vertical header template by going to Templates > Theme Builder and selecting your vertical header template.

Next we need to drag 2 template widgets into the column within the vertical header.

Open the column options for the column inside the vertical header and apply this single option that will evenly proportion those 2 widgets no matter the size of the screen.

After selecting this option you should see the widgets spread even from one another and should look like image (b)

This method works great for 3 templates also you could have your logo at the top menu in the middle and copyright at the bottom for a very clean looking vertical header.

Here are some examples in some of the work I have done with vertical headers.

Example 1

Example 2

Let me know if you found this useful in the comments because I enjoyed writing it and sharing what I know 😀.