How to Create a Homepage Using Elementor

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)

H

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

k0s9yx kbUbBwaSXl5uLG52lKBZKrEl4WFgJO ZmltAweZY0TE04I1lYjuNSaLcxeB9sRcZaZebRQWtDnujN9Y 9wk1HTrh3B60t8P76l 4YDAIIn cF3mCQIY9KG5cUkQNHnBoA

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)

GHm5RklR5Wz9jy4B3clqY2SGJpbfixMAhb16sKS2g3EQ

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

cDV5vBehYT5iAquBl JMHKm9aEj1F3FYzETEdfRsnnuxFZvXW1C4RiFU YHzkHgpPD6eED1qIK6HrAw9kuhiy52yPLXtsnEi1xeGabN6tzwVkq1nG20ck1b

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)

fKCD27asVhAkpssqsTt515HxXfY2Y1EfCiGBr3VTCDpX84qkuiJBReFwRRu xS0nExU3Id ZsNOM8 dlrboBJO Q4C6jTG pUrjg6RT7CtaSeuISIM4mr3U8XVBk6WjlhPWsHytg

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)

create a homepage using elementor

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)

NE7biG87txX0TpV

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

PXkHomkTcWxXaSz1OuSaEkiBAAMj9ehuVrpoS3aRfgOWOxFrBcbXzGXUhhMADD1Tcf2O8Mx0lZArGuumwhWmiv7 xZcwEyykHv1xZ2CK0IsVuHnbaQ7AeTI3s38 DO2x Xz3lL7d

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.

82XYFlQY5kPbMBEDULM3cmKWOlCWgr4R5TvCxa 3MGdHksHbzegpBp3P9i qbKgRbBzcVeANVBpwJBnHH1SthMaPSFD1jc8T aTuf0bGLyQQ22P7LOOKBtTw7ybwdvr7BXHYKG q

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)

cqM91pe TMpRx0T8tB 1axqwxq DiLOR4hWtukWUM97gQmmwWO dQRF6w1UEyfkqZltF EMeHAxYTflGgej WWd6scaumiYl8Ft8kz2QGta6ySzfxI3kcN1h0Rl6B2mlbx yws6I

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.

vP2q096dg PvLyiffST4Tj11LKLV5o6aecixgMSQcmh7j1vGwc9s8B03Mk174D 6pE20 3Ol4GxIOtm CGXhsMcTf acLXPAW3slanHKmBgjkFlGL48t90rm0 G9IASDl9FXUV8S

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

Fwc BbpEw6NxVdym4hhCuFvBOf1a0JKNHZSmrXAfRRb6LudsLS51NySG42gBicfsdc1b4aOozzY7nogyOcVmlYu

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) 

t1HwvxfVJfYz9mZJQ cNFDwcTM3rsd6 W2dS D0QwE8KscbMeyTeMBaTEtRjajUgO2roWNM6gYdFgwBwQIhTsh M7nfeGaz B wXuofRQyzY jYP3l0TmoarrGUZIMv3QWdCsid2

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.

Also Read. . .

How To Delete A Facebook Group in 2024?

Facebook allows for group interactions through its Facebook groups feature.  Facebook groups are created for specific reasons and attract like-minded people.  At some point, however, you may need to get rid of the group for

Read More »
Newsletter Subscription (EF)
Picture of Hamza
Hamza
Hamza comes from a design background with over 10years of experience in Web and Media design. He enjoys making web design videos on his YouTube channel GoTechUG. He also writes web design articles on this website. In his free time, Hamza loves riding a bicycle, swimming or going hiking.

Leave a Comment

Your email address will not be published. Required fields are marked *

Search

Recommended Tools

Hostinger offers premium WordPress hosting for small and medium size websites at an affordable price rated 4.5/5 on Trustpilot

Elementor is the WordPress most popular page builder with over 10 million active users