Elementor page builder landing page with Genesis Framework

Updated May 3, 2023

NOTE: This article is deprecated. I do not support using Elementor or any other WordPress page builders anymore.

Elementor is an advanced front-end drag-and-drop page builder for WordPress. It has a free version which I used here. If you have the paid Elementor Pro version installed, you will have more options. Here I will show you how to use the free Elementor website builder plugin to build a landing page with the Genesis child theme. To begin, you need the Genesis Framework and any Genesis child theme. Genesis is now open source, so you can get it for free. You can use the Genesis Sample child theme which is also free to download.

I previously wrote an article “Divi Builder together with the WordPress Genesis Framework,” where I showed how to use the Divi Builder plugin to make a static homepage in Genesis.  I believe Elementor is a much easier-to-use page builder than Divi.

In this example, you will create a landing page for a real estate agent website using the Elementor page builder.  You can find a link to the finished page at the bottom of this article.

Elementor landing page template

To begin, you need the Genesis Framework and any Genesis child theme. If you don’t have a child theme, use the Genesis Sample child theme which is a free download for anybody who owns Genesis.

Next, you need a template for the landing page. There seem to be two schools of thought regarding landing pages. One declares that a landing page should be completely free of any distractions, except whatever you offer on your landing page (no header, no footer, etc.).

The other declares that the landing page does have the normal header and footer, and everything between them is the landing page (no sidebar). I like this option for several reasons too long to discuss here.

You could design your landing page template, but Elementor has templates you can use.

Create the landing page with Elementor

In the admin, click on “Pages” and then “Add New.” Name the page “Landing” or any title you want. The title will not show because we removed it from the template.

In the “Page Attributes” (right margin) click on the “Template” drop-down and choose “Elementor Full Width.” This will build a completely full-width landing page, but your normal WordPress header and footer are still active. If you want to start with a completely blank page, you may choose “Elementor Canvas” from the drop-down. Not even the WordPress header and footer will appear.

Style the landing page

Next, you want to eliminate the margins and the padding added automatically by Genesis, so your landing page stretches from edge to edge and from header to footer regardless of the device. Add the following style to Body Scripts section at the bottom of the page:

<style>
/* ### LANDING PAGE STYLE ### */
.site-inner {
max-width: none;
margin: 0px auto;
padding: 0px;
}
</style>

Build the Elementor landing page

Now, hit the big blue “Edit with Elementor” button. You will see a blank canvas where you are going to build your landing page. If it shows a blank page or a similar problem, you may have to adjust your server’s requirements. See the page Can’t Edit with Elementor.

At this point, you can choose to use a template to build your page, in which case you will click on “Add a Template.” Some templates are free, and others are only available if you have the Pro version. In this tutorial we will build from scratch, so click on the “Add New Section” button.

Next, click on the structure you want to select. In this example, choose the two-column structure, where the left column is 1/3 of the width and the right column is 2/3 of the width. If you hover the cursor at the top of the canvas and you’ll see the two empty columns ready for adding elements. Hover over the section and you will see the control icons of the section. Click on the one at the far left, “Edit Section,” and this edit section will appear in the left sidebar.

Choose stretch section, yes; content width, full width; height, fit to screen; and content position, middle. Then click the Update button at the bottom.

Choose a background

For this example, you are going to use a nice landscape photo as the page background so next, click on the Style tab at the top. Choose Background Type, classic, and then click on Image to load the photo. Choose the photo from your media library or upload it if you have to. Now the photo you picked will cover the canvas. Choose Position, Center-Center; Repeat, No-repeat and Size, Cover. If you look at the page now you will see your big landscape photo with the header at the top and the footer at the bottom.

Next, you are going to make the photo darker so the white text over it will be easy to read. Click on Background Overlay and then choose Background Type: Classic. Next, click on Color to choose a gray overlay to darken the photo. There is a little circle that you can move around on the grey gradient to choose the overlay you want. You can always come back to make the overlay darker or lighter.

Put content in the left column

Click on the cross in the left column. The possible elements you can add appear on the sidebar. Drag the Image element to the left column. You will now see “Choose your image” there. On the sidebar, choose the image you want there. We will use the photo of the real estate agent here. You can choose the image size you want from the drop-down.

Also, you can enter here the caption which will appear under the photo as well as add a link to the photo, so it links to the agent’s “About” page. Then go to Style and change the text color to white so you can see it better. You can also change many other parameters. Play around with them so you learn what they do.

Put content in the right column

Next, click on the cross of the right column and drag the Heading element to the right column. Now we can add the title (“Wondering what your Four Corners home is worth?”), choose the HTML tag (H1) and the Alignment (center). Click on Style and change the font color to white. Go to Edit Column and in Layout change Content Position to Middle so all the content in the right column is centered in the middle.

If you’re having problems with the landing page not updating when you make a change, for example when you change the font color to white, do the following. Go back to the Dashboard, click on Elementor, Settings, and then on the Advanced tab. Try changing the CSS Print Method to “Internal Embedding”.

Mobile font size: go to Style ➙ Typography ➙ Size and change the font size per device by clicking on the little icon next to “Size”. Now you have 3 icons, desktop, tablet, and mobile. Change the size of this heading to whatever suits you for the different screens.

Next, drag another Heading element to the right column, underneath the previous one, but make this one an HTML H2. Add the title (“Let me find out!”). Style it as you did for the previous one, as well as set the mobile font size. You should make the font a bit smaller than the H1 for each device since this is a subtitle.

Add a button

Next, you are going to add a button. Drag a Button element to the right column, underneath the H2 heading. Change the text to “Get started”. In this case, you would link the button to the “What is my home worth” page of the real estate agent website and center the button. As above, you can change the text size of the button for each device, which also changes the size of the button.

See what the finished Elementor page builder landing page example looks like.

Conclusion

You now have a basic landing page. There is a whole science and art behind landing pages that go well beyond the scope of this article. You have probably realized that there are all kinds of things you can do to modify the page you just constructed, such as changing the size of the agent photo, putting a border around it, putting it on the other side of the text, putting it under the text (one-column landing page), etc., etc. Just make a page and try anything you want on it. Instead of clicking “Publish,” click on “Save Draft.” This way, nobody will be able to see it except you, until you publish it.