In this tutorial, I’ll show you how to create a homepage using Elementor WordPress Page Builder. Elementor is a free drag and drop page builder and editor for WordPress with currently over 10 million active users.

Elementor comes as plugin on the WordPress repository with a great number of addons/extensions to extend the functionality and possibilities of creating websites today. You can download and install elementor page builder for free on your WordPress website.

Note: the digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.

Video: Creating a Homepage using Elementor Tutorial

Working with Elementor Page Builder

For this tutorial, you should have Elementor page builder plugin installed.

To do this go to Plugins > Add New, search for Elementor then install and activate it (01:59)

With your Elementor page builder installed and activated, your new homepage should look like this (02:18)

Creating a Homepage using Elementor

Back on your dashboard, go to Pages > Add New, name it ‘Home’, hit the Publish button then Edit with Elementor (02:45)

Create a Menu for your Homepage

Go to Appearance > Menu, under Menu Structure, give it a Name; ‘Main menu’, then click Create Menu. 

Under the Add menu items option, select Home and Sample Page and click Add to menu (03:59), check the Primary Menu option then click Save Menu. 

When you reload your page, your menu should now be showing.

Using Elementor Templates to Design a Homepage

Tip:

Elementor comes with several free and pro templates that you can utilize in your website. In this case, I’m going to show you how to create your homepage using the free Elementor templates.

Back in your Elementor editor, click on the folder icon (📂) to go to the Templates Library, here you can check out the many templates provided and when you find one you like, insert it into your page (05:28)

When your template is inserted, you can make any changes to any of the elements in it, for example, you can change the styling, the background, etc.

Click (+) to add a new section with two columns.

Go to your Widgets area and drag a Heading widget to the first column (06:54)

Under Content >Title, add text; ‘Best Digital School’.

Go to Style > Typography, change the font (Family) to PT Sans, set the Size to 72 pixels and Weight to 700. You can go ahead and make further adjustments to your typography like on the letter spacing, transform, etc.

On the Text Color option, you can choose a colour for your title (07:46)

Go to the next section and copy the widget in the second column, then paste it into your second column (07:55)

Select the first column then in the Edit Column area on the left, under Layout > Vertical Align, select Middle.

Add Background Video to your Homepage

We’re now going to add a background video to this website.

Tip:

You can only access the background video feature in Elementor version 2.7 and above.

To add a video go to youtube copy the URL of the video you would like to add

Back in your Elementor editor and select your section, under Style > Background Type, select the video option, then on Video Link paste your video URL.  you can edit the Start Time and End Time of your video to your preference. You can also enable your video to play on mobile devices, and you can make more changes like adding background overlay, border, etc.

In the next section, click on the image widget then under Content > Image, choose another image and insert it from your media library, give it a Width of 100%.

Or if you want to use your image in the whole column, go to Background Type and select Image then upload your image.

Go to your Widgets area and drag a Spacer widget, in the Edit Spacer area, give it 50

Select the column and under Position select center center. Or you can use Custom position and show only the part of the picture you prefer (12:59)

Add a Button to your Homepage

Back in your Widgets area drag a Button widget to the second column in this section (13:31)

In the Edit Button area, go to Style; on Normal set the Text colour to white and Background colour to orange, then on Hover set the text colour to orange and the Background colour to white.

Under Border Type select solid then give it a Width of 1 px on all sides, under Border Radius give it 80 px on all sides.

Under Content, you can change your button text under Text, and you can add a Link that you wish to redirect your visitor to. You can also use an Icon for your button.

With the button still selected, go to Advanced > Padding, unlink the values then add 80px to the Top. delete the old button (17:26)

Add a Second Hero Section (Block) to your Homepage

There are a bunch of other sections and elements that you can insert and use on your site. For example, you can go back to your templates library and under blocks select a block and insert it (18:28) 

You can use the Navigator to reposition your section to where you want it and to even rename your sections.

When you’re done creating and editing your homepage to your preference, just click the Update button, reload your homepage and your changes will reflect on it.

To set your page as your default page for your website, go back to your dashboard under Settings > Reading settings, select Static page then select your homepage and save changes, and on reload, your new homepage should now be active.

In conclusion

That’s how you can create a homepage using Elementor for free, with the different sections and blocks edited to your preference.

For any questions or comments about this or any other tutorial, let me know in the comments section below, and don’t forget to subscribe to my newsletter and youtube channel for more of these tips and tutorials.