How to Create a Website Homepage with Elementor

by Aliko Sunawang

Last updated on February 15, 2024

The homepage is the most vital element of a website. It is the first thing your visitors see when they visit your website. Everything on your website homepage affects the perception of your visitors about your business. With Elementor, you can create your website homepage without having to deal with CSS or HTML code.

As you have probably known, Elementor has a visual editor that allows you to create a webpage in the front end. Everything is drag and drop, no need to write any single line of code.

New to Elementor? No worries. In this post, we will show you how to create a website homepage with the world’s most popular page builder plugin. We will create a website homepage like the following.

You can use the free version of Elementor to create a website homepage like the one above. However, there is no bad if you want to upgrade your Elementor version to pro since the pro version Elementor has more features.

With Elementor Pro, you will be able to create a custom header, custom footer, custom 404 page, custom single post template, popup, and so on. Read here to find the differences between Elementor Free and Elemenfor Pro.

It takes 4 sections to create a homepage like the one above.

Section 1: To place the company name and tagline.
Section 2: To place the service description.
Section 3: To place the team description.
Section 4: To place the clients’ logo carousel and closing section (the “Need more details?” sentence).

Let’s get started.

First off, login to your WordPress dashboard and create a new page (Pages -> Add New) and edit it with Elementor by clicking the Edit with Elementor button. You will be taken to the Elementor editor after clicking the button.

To make it easy for you to identify your homepage later, we suggest you give the page title like “homepage” “front page” or something similar.

Before start working the Elementor editor, set the page layout by clicking the gear icon on the bottom side of the left panel. Set the page layout on the Page Layout option. In this example, we set the page layout to Elementor Full Width. This option will remove the sidebar of your theme (if any) and retain only the footer and header.

Section 1

Click the plus button to add a new section. Select the single-column structure option.

Go to the left panel. On the Layout section under the Layout tab, set the content width to Full Width. Also set the height to Fit To Screen

Go to the Style tab and set the background on the Background section. We will use an image as the background of the top section. For a better result, you can prepare a large image with a dimension of 1200px or wider. You can click the image selector to select an image.

Still on the Background section, set the image size to Cover.

Now go to the Background Overlay section and set the background overlay. In this example, we use the gradient overlay (orange and black). Set the background overlay opacity on the Opacity option.

Once done setting the background overly, add the Heading widget to the canvas area.

Go to the left panel to change the default text. You can change the text on the Title field. Also set the alignment on the Alignment option (bottom-most).

To change the font color, font style, and font size you can go to the Style tab. Click the color selector on the Text Color option to change the font color and click the pencil icon on the Typography option to change the font style and size.

Add another Heading widget for the company tagline. You can repeat the steps above to customize the new Heading widget.

Section 2

Add a new section by clicking the plus button. Select the single-column structure option.
Add the Inner Section widget. From this step, you will have two columns on Section 2.

Add the Image widget to the left column and select the image you want to use (make sure you have prepared the image).

Go to the Style tab to set the image size. You can set the size by adjusting the Width value and Max Width value on the Image section.

Add the Heading widget to the right column. Customize the heading by going to the Style tab on the left panel as you have done in Section 1 above.

Add the Text Editor widget to the right column. Place it beneath the Heading widget. Replace the default text with your own text. You can also go to the Style tab to customize the text.

Once done with the Text Editor widget, add the Button widget to the right column. Place it beneath the Text Editor widget.

Go to the left panel to customize the button. You can add a link to another page on the Link field. To change the button size, you can select from the dropdown menu on the Size option.

To change the button color and the border radius, you can switch to the Style tab. Set the button text color by clicking the color selector on the Text Color option and the button background color on the Background option. To set the border radius, you can go to the Border Radius option.

Add the Spacer widget above the Inner Section to give extra space between Section 1 and Section 2.

Set the space value from the left panel.

Add another Spacer widget beneath the Inner Section.

Section 3

Add a new section by clicking the plus button. Select the single-column structure option.
Add the Inner Section widget. From this step, you will have two columns inside section 3

Add the Heading widget to the left column. Replace the default text with your own text. Go to the Style tab on the left panel to customize the heading.

Add the Text Editor widget to the left column and place it beneath the Heading widget. Replace the default text and customize the text from the Style tab on the left panel.

Copy the Button widget from section two and paste it to the left panel on section 3 (beneath the Text Editor widget). This can save you time rather than creating the new button from scratch.

Activate the Button widget you have just copied (by clicking its handler) and change the link.

Add the Image widget to the right column and select the image you want to use (make sure you have prepared the image).

Go to the Style tab on the left panel to set the image size.

Activate the left column of the Inner Section by clicking its handler and go to the Advanced tab on the left panel. Change the left margin to about 40 to slide it slightly to right.

Activate the section (section 3) by clicking its handler and go to the Style tab. Change the background to your liking. We choose a soft blue solid background in this example.

Add the Spacer widget above and beneath the Inner Section widget. Change the space value to about 40.

Section 4

Add a new section by clicking the plus button. Select the single-column structure option.
Add the Heading widget. Replace the default text and set the alignment to right. Go to the Style tab on the left panel to customize the heading.

Add the Image Carousel and place it beneath the Heading widget.

Go to the left panel and select the images. In this case, the images are the logos of your clients’ company.

Go to the left panel to customize the carousel. You can set the number of images per slide on the Slides to Show option, image size on Image Size option and navigation style on the Navigation option. You can play around with the left panel to customize the carousel.

Add Inner Section and place it beneath the Image Carousel widget. Set the column ratio to about 70%:30%.

Add Heading widget to the left column of the Inner Section you have just added above. Replace the default text and go to the Style tab to customize the heading.

Add Text Editor widget to the left column of the Inner Section. Place it below the Heading widget. Replace the default text and go to the Style tab to customize the text.

Copy the Button widget from section 3 (or section 2) and paste it to the right column of the Inner Section widget.

Activate the Button widget you have just copied by clicking its handler and go to the left panel. Replace the link on the Link field under the Content tab.

Switch to the Advanced tab and set the top margin to about 60.

Add Spacer widget and place it above the Inner Section widget. Set the space value to about 40.

Done!

You can now publish your page by clicking the PUBLISH button on the bottom side of the left panel. Before publishing your page, you can also preview it first by clicking the eye icon. You can preview your page on desktop, tablet, and smartphone by clicking the device icon.

How to Use the Homepage on Your WordPress

After publishing your page, the next step you need to do is use it on your WordPress site. To set the homepage you have just created as the homepage of your WordPress site, return to the WordPress dashboard by clicking the three-line icon on the top-left corner of the Elementor editor and click EXIT TO DASHBOARD.

On the WordPress dashboard, go to Settings -> Reading.

On the Your homepage displays option, set to A static page (select below) and select the homepage you have just created from the dropdown menu on the Homepage option.