How to build a Page with Elementor?

Building your first page should be one of your first priorities after setting up your website. WordPress integrates with the Elementor editor and site builder. So, before you can choose Edit with Elementor when making a new page, you must first create the page in WordPress. In this article, we will talk about how to build a page with Elementor.

The ‘Pages’ menu in your WordPress dashboard allows you to create and edit pages. How to Add New Page:

Once you create the page, in order to edit with Elementor, simply hover over the page you created, and you will notice the Edit with Elementor option:

If you want, you can learn more about the Elementor editor in the post: How does the Elementor editor work? – Overview.

Creating the page with Elementor

Usually, when building the Page, we start with creating the Hero section – that is the first section of the page. They are made to draw people to your website and keep them there.

A great image, video, or slideshow serves as the foundation of a great hero section. In this instance, we’ll begin with a picture.

Click on a plus icon to add a New Section:

After that choose a Section structure:

After you add a new Section, you will need to style it in order for our Hero section to look nicely. To edit the Section you need to click on the dots, or to select the Section in the Navigator:

Usually, the Hero section is set to be across the whole screen. In this case, we will set the Page Layout to Full Width so that our Hero section will cover 100% width of the viewport. Also, we will add the Min Height of 100vh, that means that the height of the section will cover 100% height of the viewport.

In order to add the background image for this Section, we need to go to the Style tab and add the background image:

Adjust the image per your design. Usually, the Hero section Image size is set to Cover. That way the image will be spread across the whole viewport.

Adding content to the Hero Section

Now we can start adding some text to our Hero section. You can simply drag the Heading widget into the Column:

Don’t forget to style your Heading:

Let’s add a little bit of text below our Heading, and style it. From the widget panel on the left choose a Text Editor widget:

We can add a button below the text, so our users can click to find out more about what we offer. Find the Button widget in the Widget Panel on the left:

Now we have a complete Hero section which can be created in just a few minutes with Elementor’s easy drag & drop technique.

You can easily continue creating the rest of the page using the Elementor’s widgets from the Widget Panel on the left.

Summary

Of course, we’ve just begun to scratch the surface of what Elementor is capable of. So, after that, add more parts to the page below the hero to complete it. Alternatively, you might try adding a website kit to your site and tailoring it to your requirements.