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.
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.
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…
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.
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…
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…
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…
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!
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.
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…
We can change the font and swap the image to our white logo to make this work a bit better!
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.
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
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…
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…
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.
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!