Designing Responsive Elementor Pro Templates: Header

Elementor Pro is an all in one website development tool for WordPress that I highly endorse and suggest you try out for yourself. If your in the position where you need to develop your own landing pages or your own website, Elementor is a completely WYSIWYG (What you see is what you get) design solution.

I’d recommend putting in the extra effort of learning the WordPress ecosystem over using a site creation tool like Wix or Squarespace because even though you could make something pretty on these web development services, not only will you be paying for the service of using their software but you’ll be limited to their software’s capabilities.

WordPress is a free opensource platform that been around since the beginning of the internet and has been the most popular web development programme around for just as long. Therefore the platform is a hell of a lot deeper that what any other tool can give you.

Pairing this with the beautifully simple but super effective Elementor and you’ve got a winning combination – and Elementor isn’t even that expensive! Check it out at elementor.com, starting at $50 a year for one site. That’s less than $5 a month.

Getting started designing a template

Once you’ve gotten your bearing’s of Elementor and WordPress, we’re going to create a static front page, now Elementor does have a very powerful template system that allows you to pull things like footers and headers and the like to your pages, which is very useful.

But for the front page it’s often easier to develop it as a single entity then siphon out the relative elements like your header and footer if needed for templates for child pages.

Once you’ve got the front page right and finalised in terms of design, layout and structure then you’ve then you’ve solved these problems for every other page by proxy! So we’ll work in an analogue fashion to begin with, solving the front page.

Getting your home page designed, laid out and structured…

Every good website starts with two things. A colour pallet and a logo.

Designing Responsive Elementor Pro Templates: Header
Here’s a logo from our article on logo creation for newbies in 2019

That’s the logo we made for our guide on logo design for newbies in 2019, which you can check out here…

Getting the logo designed is a great way to consider the feel and direction of the accompanying website. You can consider a lot of questions like…

  • Who’s my logo appealing to?
  • How does my logo represent my brand?
  • Is my logo memorable?

Just switch logo with website and you’ve already answered your questions.

Here’s the logo I designed for Bespoken.co and it’s accompanying design and work colour scheme that later informed the web design.

Designing Responsive Elementor Pro Templates: Header
The square represents web design, the triangle video production and the green lead generation. This is used throughout blog page and informed our design decisions.
We used simple shapes to represent the childlike learning aspect that we employ with the blog, i.e. learn by doing.
Designing Responsive Elementor Pro Templates: Header
The logo has a wave in it to represent a dream like quality which is associated with storytelling, which is our core principle.
Designing Responsive Elementor Pro Templates: Header
Our favicon (the favorite icon you see to the right of this tab) is a smaller version of the logo that’s legible small but also has a bit of character still.

The goal of design is to boil down your ideas into simple beautiful shapes, using your elements sparingly across your website, filling it all up with white space, and showing off your brand in the best light.

The goal of design is for it to be invisible.

90% Testing, 10% Execution

Designing your home page should take you about 10x as long as it takes you to produce it.

Pre production of your site is everything – you have to get it wrong a to learn how to get it right. So I advice you to fail as often as you can, that way you’ll iron out all the kinks before you execute and start showing people your website.

Now, this is still a tutorial so I will be teaching you the structure of designing a home page not just telling you to fail a bunch of times, here’s the elements of a basic website front page…

  • header: nav bar, logo, socials
  • body: titles, text, etc.
  • sidebar: widgets
  • footer: contact info, about, etc.

In this tutorial I will be showing you how to develop a front page with a sidebar, because it’s an important thing to learn to make! Be aware though, often times front pages don’t have sidebars.

Building the framework…

I build websites in Elementor in a very analogue way. Which is to say I don’t build a framework I build each element as it appears on screen. Elementor allows me the ability to do this but you may find it easier or more helpful to build the framework first before building each element yourself.

So let’s build the header, it’s going to contain a logo, links to social and a navigation to the pages bar…

Go to Pages > Add New… in the wordpress sidebar, then type in the name of your page: Home click the Publish button and click the edit with Elementor button…

Designing Responsive Elementor Pro Templates: Header
Your URL should read /home (if not check your permalink settings in settings > permalinks and make sure they’re custom to /%postname%/ – this will make your post names read the same in the URL as the page title.
Designing Responsive Elementor Pro Templates: Header
Make sure Elementor Canvas is selected in the page settings (page settings can be found by clicking the small cog in the bottom left as seen in this screenshot)

Adding an element as a header

To create your header element framework we’re going to have 1 section with 3 columns, when you create a section it automatically has 1 column, to add more right click and hit duplicate or add more columns from the drop down.

Designing Responsive Elementor Pro Templates: Header
Take note of the settings to the left, and the 3 columns in the section.

I’ve set the content width to Boxed and 1200px. I set the column gap to No Gap (this make it so there’s no strange padding on our sections – you’ll want to select this every time you create a new section.) Minimum height is set to 75px, this is the height of our navbar/header.

I set the background colour to a light grey to distinguish it from the background you can do this too by going to Style > Background colour.

Hint: When making a section ‘No Gap’, go to the advanced tab and set the margin top to -1 then back to 0 – this will update the ‘No Gap’ setting with Elementor and show the section as intended – flush to the top of screen with no padding or margin.

Now we want to add some placeholder stuff to our header.

Setting up a placeholder menu…

In a new tab go to your /wp-admin, select appearance > menus and create a menu with some custom links as pictured below, if you know the names of the URLs or already have your pages made for your menu select them here…

Designing Responsive Elementor Pro Templates: Header
If you haven’t created a menu yet you’ll need to click the create a new menu link as pictured above.

Now save that and head back to your Home Elementor tab, on your Elementor search field type in ‘nav’ and select nav bar from the menu. Drag and drop this into your left column on your header…

Designing Responsive Elementor Pro Templates: Header
Centre align your menu

Now your menu is already aligned vertically thanks to the Column position settings from above that automatically make columns align content and items to the centre of a column based on their min-height which we set earlier as 75px.

Next let’s add in your logo, we don’t need a finished logo yet but it must be of a height smaller than 75px, so if you can – export your logo with a transparent background, scaled down to have a height of 75px or better yet a little smaller.

To add you logo select image from the elements tab and then upload your logo to your website.

On the right we can add in social icons, which can be found by searching social icons in the Elementor search bar to the left. When your done you should have something like this…

Designing Responsive Elementor Pro Templates: Header
There you go! You’ve got a header sorted.

Playing around with your website stlying…

Now you’ve got something basic designed, i.e. your header – we can start going a bit deeper into the design and the cool styling options we get from choosing Elementor as our web page builder of choice.

Let’s get some colour schemes going on!

Designing Responsive Elementor Pro Templates: Header
A great site for new and hip colour schemes to use for your web design.

Head over to flatuicolors.com, and find some colours you want to use for your website. Let’s focus on 3 different styling’s

  • Logo colour
  • Font colour
  • Header background colour
  • Social Icons

Apologies if your American – colour is the English spelling!

We can change 2 of these inside Elementor, for your logo let’s export a black and white version we can switch between.

Designing Responsive Elementor Pro Templates: Header
This will make it easier when testing colour schemes…

Now let’s change up the header colour using flatuicolours.com

I chose ‘Dark Mountain Meadow‘ from the Canada pack…

Simply click to copy your preferred colour and paste it into the background colour settings of the main section in the Style tab found here…

Designing Responsive Elementor Pro Templates: Header
As you can see our text is doesn’t stand out too well with this background colour…

We can change the font and swap the image to our white logo to make this work a bit better!

Designing Responsive Elementor Pro Templates: Header
The settings for the menu can be found here…

We can also change the settings of the social icons in the 3rd column, to be white too. Play around with the settings to achieve the desired effect.

Designing Responsive Elementor Pro Templates: Header

There’s our header! We’ve got the colour sorted next let’s figure out the fonts!..

Deciding on a font for your website…

We’re very lucky to have a lot of options when it comes to fonts – as we have Google Fonts integrated into Elementor, and depending on your version you should have a goo percent of them available to you.

For this reason when I come to find a font that I’d like to use for my site, my first port of call is to head over to fonts.google.com

Designing Responsive Elementor Pro Templates: Header
big old list of fonts! Most of them are available through Elementor…

What I like to do is scroll through the fonts, and when I find one I like I can check the name in the top left, head over to my Elementor tab and punch in the name of the font, and check it out in real time on my website…

Designing Responsive Elementor Pro Templates: Header
Here I’ve gone for PT Serif, which is a nice font for my titles.

Once you’ve decided on a font for your navigation bar – this font will also be used for all your titles too! So we can set that up by heading over to the global settings.

To get to the global settings, hit the top left icon in your Elementor bar until you see this screen…

Designing Responsive Elementor Pro Templates: Header
This is the global settings menu…

From here we can set our default colours and fonts, on the Fonts tab type in your new title fonts, play around with the weight too if you like this can also be set from this screen.

Designing Responsive Elementor Pro Templates: Header
You also have body and accent fonts – I generally leave these on Roboto, but you can test and change yours as you like. This will be easier later on once we’ve added text to our home page.

And there you go – you’ve now set all the titles to be the same font as your Navigation Menu’s font – so we’ve already got a nice theme going on before we’ve added anything more than the header and navigation menu.

That’s all for this tutorial, check back soon with links to the second part where we will be discussing how to develop a body and sidebar for your website, for now you can test and play with the settings for the header.

Check out the contents links at the top of the page or hit next tutorial below for the next part!

Written by Adam Smith

Designing Responsive Elementor Pro Templates: HeaderI’m a designer and storyteller.

This blog is a place for me to document my experiments combining three key fields: Design, Storytelling and Digital Marketing.

I hope I can also inspire and guide you towards towards your own Digital Storytelling goals and successes.

Designing Responsive Elementor Pro Templates: Header

Leave a Comment

Your email address will not be published. Required fields are marked *

Like This Blog?
Thanks, we
designed it
ourselves!..

Check out our portfolio of work and get in touch with us if your looking for your own website or blog designer…

Subscribe to my blog!

Keep up to date with the latest, greatest storytelling posts with alerts to your inbox…

© 2019 Bespoken. All Rights Reserved.