This article on 'How to create a home page in WordPress from scratch', covers just that. I cover the exact steps you can use to create a home page using Elementor from scratch.
And as always, for any one-on-one consulting and assistance, you may mail me at firstname.lastname@example.org
Well, it is a given that if you are creating a website, there is going to be a home page. The home page is the main page or rather the welcome page, every user typing out your URL in the browser will get to see.
Hence, make an impression on your home page.
And this article will teach you how to create a home page in WordPress from scratch. Yes, we can use starter templates too that some themes such as Astra allow us to.
While I will be covering this option too, I will start off by creating a simple home page using Elementor.
Let’s start creating the home page for our website.
While you can let your imagination run wild and create a design of your choice, I will be creating a simple home page.
Click on ‘Add New‘ under the Pages section on the left menu.
Add the title of the page as Home Page and then click on ‘Publish’ on the top.
Your home page will be live now, as indicated in the image below.
As shown below, you will notice “Home Page” is now live.
“Home Page” here is the title of the page you have entered. It may be different, if you have entered a different title for the page.
Click on “View Page“
You will notice this opens as https://yourdomainname.com/home-page and not as https://yourdomainname.com
That’s ok for now. Once we create the home page, we will make this page the default page for the website.
Now, let’s begin to edit this page.
You will notice ‘Edit Page‘ on the top black band. Click ‘Edit Page‘.
After clicking on ‘Edit Page‘, notice the set of tabs on the right hand side of the page.
Under the ‘Page Attributes‘, you will notice 3 options.
- Default template
- Elementor Canvas
- Elementor Full Width
Please note. I am assuming you have installed Elementor as your page builder. If you have not, please go ahead and install Elementor before we proceed.
If you would like to know how to install a WordPress Plugin, I have an article on ‘How to install WordPress plugins for beginners‘.
So, assuming you have Elementor installed, let’s proceed.
Ideally, I like to have my home pages without navigation links on the right and the left. I prefer having only menu links on the top.
Hence, under the ‘Page Attributes‘ tab, I will select ‘Elementor Full Width‘ option.
Once you have selected ‘Elementor Full Width‘, click on ‘Update’ on the top right of the page, as shown below.
After clicking on ‘Update‘, your home page should now look as follows.
You will notice only the site title (e.g., My WordPress Blog), Menu links (e.g., Home Page), and the footer (e.g., Copyright…).
If you see this, great. We are on the same page!
Now, back to editing your page. You can click on ‘Edit with Elementor’.
Since this is the first time you will be editing the page with Elementor, the page appears as below.
Henceforth, the page will appear as follows,
After clicking on ‘Edit with Elementor‘, you will find the following screen.
While I will come up with a full-fledged article & tutorial on Elementor, I will give you a quick introduction to Elementor.
On the left-hand side, you will notice a number of Widgets. Widgets are a small piece of code or content that you can add to your website.
For e.g., if you would like to add an image, all you need to do is drag the ‘Image’ widget on the left to the row or column you’d like to add it to, on the right.
In a similar fashion, you can add Heading, Text Editor, Video, Button, etc. There are a lot of PRO features too, for which I highly recommend you buy the PRO version of Elementor.
Your web page is created by a set of rows and columns. And this depicts what we call a section. Hence, a section has a row and in it, there may be single or multiple columns.
Within this row or column, we include images, text, content, etc.
I would like to take your attention to the three buttons in the middle of your page
Click on the first circle, a window opens up with Premium Templates.
As you can notice, all the themes in this is tagged ‘PRO’.
Yes, all these themes comes along with the Elementor PRO version.
The next circle with the ‘+’ sign will be the most commonly used button.
Clicking on the ‘+’ button, will open up the following ‘Select Your Structure‘ modal.
As you can notice, this shows a number of sections or structures that you can use. Remember, we mentioned about sections having rows & columns. Well, this is how you create the rows and columns.
You can either select a row with no columns (1st option) or with multiple columns (the remaining options).
Click on the final circle (button) – with the folder icon.
A window opens up with 3 tabs – Blocks, Pages (default) and My Templates.
The default tab – ‘Pages‘, has a mix of free and PRO themes that you can use as your page design.
The first tab – ‘Blocks’, again has a number of free and paid sections that you can include in your page.
Notice the ‘Category‘ drop down on the top left of the page. These has a range of options, based on the section you would like to create on your page.
The third tab is – ‘My Templates‘. This sections comes empty by default.
You can create your own templates and save them under this tab.
For e.g., have you noticed, I have the following strip running at the bottom of all my pages.
For ease of use, I have created the above strip as a template and saved it as ‘footer-enquiries‘, that you may have noticed under the ‘My Templates‘ tab.
It does help creating such templates that you can use across the website, hence maintaining consistency.
I hope this small intro on Elementor will help you in how to create a home page in WordPress.
How to Create a Home Page in WordPress
Ok, now that we have a fair understanding of Elementor, let us get on with how to create a home page in WordPress.
We will use a free template from the Elementor repository. Click on the 3rd circle – button (folder icon).
Under ‘Pages‘, search for ‘homepage‘ in the right hand ‘search‘ area.
You will find a list of free templates you can use.
For this example, I will go ahead with the ‘Homepage – Business page‘ option.
Hover on the image and click on the ‘zoom‘ icon.
The home page template opens up as shown below. If you are happy with the template, click on the ‘Insert‘ button on the top.
Since this would be the first time you are using Elementor & it’s themes, you will be asked to create a free account.
Sign up and log in to a free account.
Once you have signed in, the template gets inserted into your home page.
Refresh your home page and you will see the design has been applied.
You can now start customizing your home page to suit your requirements. Just as any text editor, you can make changes to the text, images, links, etc. You can play around and make changes as per your needs.
There are few elements that need to be mentioned. For e.g., changing the menu links, customizing the fonts and colours, etc.
For this, we go back to the dashboard. Click on ‘Customize‘ under ‘Appearance‘
You will find the following screen.
Notice the ‘Home Page‘ is not the same as the Template we inserted.
Remember we mentioned about making ‘Home Page‘ we just created as the default page for the website.
We will make that change right away.
Go to ‘Homepage Settings‘
You will notice by default, ‘Your latest posts‘ will be selected under ‘Your homepage displays‘.
Select ‘A static page‘.
You will then have an option of selecting your page under the ‘Homepage‘ tab.
In our example, we have name our main page as ‘Home Page‘. Hence we will go ahead and select ‘Home Page‘.
We can select the ‘Posts page’ later on.
After you have selected the homepage, click on ‘Publish‘ on top.
Now the ‘Home Page‘ you created will display as the default page for your website.
I will create a separate article on customizing your pages, creating menu links, etc., and link it here.
Ok, so was it easy to create your home page in WordPress?
I hope the steps mentioned in this article would have made it easy for you to follow and create a home page.
So let me know your views on this article in the comments section below.