In this tutorial we will create a homepage for our website as shown below. This will include a “call to action” button, a navigation menu, and supporting content boxes with awesome icons. The page is very simple, but it provides a fast way to get your site up and going, which can then be refined in the future.


It is assumed you will be using a WordPress and the Avada theme as outlined in a previous DIY tutorial.

Please see the full series of recommended DIY tutorials on our DIY page.

The homepage is logically where new visitors to your site will arrive, so it is arguably the most important page for creating a first impression.

The most time consuming part of this tutorial will probably be your time thinking on the content and layout. This post on the 12 critical elements to consider when designing a homepage may get you started.

This objective of this tutorial is for a simple homepage, that can then be modified over time to become more advanced.

The instructions that follow show how I made the homepage show above.

1. Every homepage needs a good image. For me, a professional image provides a great contribution to the site. I did a search for “DIY” and found the below image at While the file type is shown as “Vector Image”, it includes a large JPG format that I can use in the following steps.


2. I have used Microsoft PowerPoint, rather than a specialist drawing program, to create the full homepage image, as PowerPoint is provided as part of Office 365 which I recommend. Obviously if you have, and are familiar with a specialist design program, then use it. I used some of the same simple techniques used when I created my logo in a previous tutorial. You can see the dimensions of the overall image highlighted below, these do not need to be precise as we make adjustments in a following step.


3. I’ve selected the components of the overall image and then saved as a picture.


4. Next I have opened the image in Paint, and I have selected the resize option to make the horizontal width 940 pixels, while maintaining the image aspect ratio. Then I have saved the image. I have used Paint as it is a standard part of Microsoft Windows, and Microsoft PowerPoint does not have the function to resize based on pixels. Pixel width is the standard metric when dealing with images. A specialist design program will have pixel dimensions as standard.


5. Next login to your website (go to “” and use the admin and user name used to setup WordPress), and go to “Pages”, “Add New”.


6. Add a name to the page, for example “Welcome”, select the “Full width” template, then click on “Add Media” and navigate to your homepage image created earlier.


7.  Now insert the homepage image at the full size (note the pixel width of 940 that we set earlier).


8. Now “Save Draft” and “Preview” to see the homepage so far.


You should see something similar to the below. In the steps that follow we will add a menu and remove the footer (the footer can be added back when we are ready with additional homepage content)


9. First, to remove the footer, go to “Appearance”, “Footer Options” and click on the “Check the box to display footer widget” to deselect the option.


10. Scroll down the page to modify your Copyright text as appropriate, then click on “Save All Changes” to finish.


11. Now to add a navigation menu, go to “Appearance”, “Menus”, select the Pages you would like to add, and then click on “Add to Menu”. The Menu Structure area will then populate with your selections. Type in a menu name, such as “Main navigation”, select the theme location of “Main Navigation” and then finally click on”Save Menu”.


12. Now if you go to the homepage, you should see something similar to the below.


13. Next we are going to add the “call to action” button.


This is created using something called “shortcodes”. Shortcodes provide a shortcut method for creating elements on a website without doing any coding. This is obviously helpful for DIY tutorials. Click on the shortcode icon highlighted in the image below. I’ve centrally justified the cursor so that the inserted button will be centrally justified.


14. Select the “Button” shortcode from the drop down menu.


15. When users click on your button, they will be redirected to the destination you insert into the “Button URL” field. Add the “Button Title attribute” (this is the text that will appear when your cursor hovers over the button), and also add the “Button Text” that users will see as part of the button.


I have selected the address, or URL, of my DIY tutorials page.


16. Scroll down the page to “Insert Shortcode” (I have left the other fields on the page unchanged”).


17. The inserted text will then highlight why the function was called a “Shortcode”. Click on “Update” and then on “Preview Changes”.


18. Now you will see the Button on the homepage.


19. In these final steps I’ll add the supporting content at the bottom of the page. Start by clicking on the the shortcode button again.


20. I have used the “Content Boxes” from the Shortcode menu, then the “Icon Beside Title” option.


21. Scroll down the page, then add a title for the content box, and an icon. There is an option to upload your own icon also (not highlighted).


22. Continue down the page, add a “Read More Link URL”, and a “Read More Link Target” and then the “Content Box Content”. I hope these fields are self explanatory.


23. Now repeat the process for as many content boxes as you want. A total of 4 content boxes seems to fit nicely. Once complete, click on “Insert Shortcode”.


24. The resulting code will now be inserted into your page. Now the disadvantage of using the shortcodes, is if you made a mistake, or you want to make a refinement, such as change the logo, you either need to start again, or modify the resulting code. After starting again a few times, you will find it easier to just modify the resulting code, thus the next step.


25. This step is here because I know you won’t get the content boxes perfect in one go, and you will restart the shortcode method over and over, and you will get frustrated having to repeat all entries each time. If this occurs, spend a few minutes to read what the code says. Below you can see the title in red text, the icon name in green text, the target link in pink, the link text in blue and the content box text in purple. This is then repeated for times. You may have some other attribute text visible, but in this tutorial, only the below were modified.


If you need to modify any of the above elements, just directly change the text in the edit view. You will need to use the shortcode method, to select, insert and then read the name of the icon you need, but all other items are easier to change via the edit view, rather than restarting the shortcode method.

26. If you are feeling adventurous, then have a look at the full Avada them demo site, and then go to the documentation page to see the underlying code that you can re-create by copying into the page edit view and modifying as you see fit. Skip this step if you are not feeling adventurous!

27. To finish, lets set the homepage to be the front page of your website. Go to “Settings”, “Reading”, and use the drop down menu for the “Front page” to select your homepage, and “Save Changes”.


28. Now visit your website to see the completed homepage. This homepage provides a simple and professional start for your website. The page can then be enhanced as you get more time.