This is our eighth article on how to create your own professional WordPress website on 1&1 IONOS webhosting.
In the last post we installed the Primer theme onto our WordPress website. The homepage at the moment isn’t very exciting so in this post we are going to create a homepage. To make creating pages easy we are going to install a plugin called Beaver Builder Plugin (Lite Version). It has a drag and drop tools to make building pages easy and get them to look exactly how you want!
In this post we will create a homepage for your new WordPress website.
Click on Plugins and select Add New.
Search for Beaver Builder.
Click on Install Now next to the WordPress Page Builder – Beaver Builder and then click Activate.
Once done you will be taken to the Beaver Builder Settings page. There’s nothing of note here so we can now start building our homepage.
Go to Pages and click Add New.
Enter a title of Homepage.
On the right hand side, under Layout click Custom and click the first icon.
Click Beaver Builder tab.
You will then get a prompt asking you whether you’d like a tour. We recommend you click Yes Please! and once done come back to carry on.
We are going to create 4 boxes outlining the main features of our shop / website.
Click on Rows and hover your mouse over 4 columns and drag it across to the area where it says DROP A ROW LAYOUT OR MODULE TO GET STARTED
As you drag it will look like below.
Once you let go of your mouse you will get this:
Now we can start putting images and text into these 4 boxes.
Go up to the + sign next to Done in the top right corner of the webpage.
Click on Modules
Click and drag Photo to the inside of the 1st box.
A pop-up will appear so click Select Photo.
In our last blog post we talked about how to add photos to your WordPress media library.
Click the Media Library tab to see the photos you previously uploaded. Alternatively you can upload photos on the Upload Files tab.
Click the photo and click Select Photo button.
You will be taken back to the Beaver Builder Photo window where you can then scroll down and click Save.
Now repeat the process of clicking the + sign and clicking and dragging the photo icon to the next box and select a photo and click save. Do this 3 times so your homepage looks like the following:
Next we will add some text underneath the four boxes.
Go back to the + sign in the top right corner and select Text Editor and drag it underneath the first photo. A popup window will appear where you can add some text. We added the following:
Sallys Cakes in Windsor is a small cake shop on Windsor High Street where we have been baking our own cakes for over 5 years.
Repeat these steps and add text boxes underneath the other 3 boxes and your website will look like this:
We now need to add some more information to the homepage underneath the 4 boxes to tell visitors more about us and things.
Go to the + sign up in the top right corner and select Rows and then click and drag the 1 Column to underneath the 4 boxes. When dragging the column ensure it sits completely beneath the existing boxes as shown below.
Now drop a text box inside this new column and add the following text:
Beautiful home made cakes in the heart of Windsor
Weclome to Sally’s Cakes in Windsor
We are a small shop in Windsor specialising in baking and selling cakes.
Whether you need a cake for your big wedding day or a birthday or just fancy a treat we will have something for you.
Come and visit us
123 Cake Street
Windsor
CK1 1ES
To get different sized text we make use of Headings and font sizes.
The first line of Beautiful home made cakes …. is a Heading H1.
Welcome to Sally’s Cakes in Windsor is a Heading H2
The rest of the text up to Contact Us is font size 18px.
Contact Us is a Heading H2
The telephone number and email address is font size 22px.
Let’s save our changes.
Go to Done in top right corner and click Publish.
Ttelling WordPress that this is our homepage
At the moment we have Homepage at the top of the page – underneath the blue header and above the 4 pictures. It’s there because at the moment WordPress doesn’t know that this is our homepage. Let’s make that change.
Go to the WordPress dashboard by clicking Sallys Cakes in Windsor in the top left corner and selecting Dashboard from the menu.
Select Settings and then Reading.
Select A static page (select below) and then for Homepage select Homepage from the drop down menu.
Click Save Changes.
Finally let’s change the blue header to a nice picture.
Go back to the WordPress dashboard in your other browser tab.
Click Appearance and then Customize and then Header Media.
Unselect checkbox of Use featured image.
Under Header Image click Add new image.
Choose the photo of the cream coloured cupcakes and then click Select and Crop.
You don’t need to adjust the crop slider so just click Crop Image.
The header image will update automatically.
Click Publish in the top right corner.
The picture in the header will automatically update.
Click the arrow next to Customising Header Media
Click Colours and then Menu. Under background click Select Colour.
Choose a green colour and then click Publish.
Go to your other browser tab and refresh your homepage.
Congratulations you now have a home page to show off to the world!
In the next article we will learn how to add a contact form to the website so potential customers can contact you.
About this series of articles
This is the second article in our series of creating a WordPress website from scratch. The complete list of articles is as follows:
- How to setup a 1&1 IONOS Web Hosting Account for a WordPress website
- How to install WordPress on 1&1 IONOS
- How to login to WordPress
- WordPress Settings you should change for new website
- How to create a “New website coming soon” for your WordPress website
- How to install a WordPress Theme
- How to add photos to your WordPress website
- THIS ARTICLE: Create a homepage for your WordPress website with Beaver Builder
- How to create a Contact Us page in WordPress
- How to create an About Us page on your WordPress website
- How to create custom menus in WordPress
- How to add a footer to your WordPress website