This post is the sequel to this post. You can read it to learn how to create a WordPress theme — which covers header, footer, and single post layout — with Elementor without writing any single line of code. Since the article would be too long if we include this chapter so we decided to write this chapter on a new article.

A brief intro about Elementor in case you haven’t heard about it. It is a page builder plugin for WordPress. Elementor comes with a theme builder feature that allows you to create a WordPress theme without coding. You can create a WordPress theme via its intuitive drag and drop visual interface. You can read our previous post to learn more about Elementor. Or read this review.

Homepage is probably the most crucial part of a website. It is the first thing your visitors will see every time they visit your website. You can use Elementor whether to create a homepage of a static website or dynamic websites like blogs or news portals. To give an overview, you can visit the showcase page of Elementor to figure out the examples of the website homepages created with Elementor.

On this article, we will show you how to create a homepage of a blog like the following.

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

• Section 1: To place the cover and the quote.
• Section 2: To place the Follow Me on Instagram, About Me, and Gallery menus.
• Section 3: To place the posts and author box.

Before getting started, you need to upgrade your Elementor to the pro version (in case you still use the free version) since two of the elements we are going to use — Posts and Author Box — are only available on the Elementor Pro.

# Section 1

• First off, login to your WordPress dashboard and create a new page (Pages -> Add New)

• Give your page a name and click the Edit with Elementor button.

• Before start designing, set the page layout first. In this example, we use Elementor Canvas option. To set the page layout, click the gear icon on the bottom-left of the left panel and click the drop-down menu on the Page Layout section.

• Click the plus button on the Elementor editor to create a new section. Select the single column option.

• If you want, you can rename the default name of your section. To do so, double-click the section name and replace it with your preferred one.

• With the top section selected (click the section name to select/activate), go to the Style tab on the left panel and change the background on the Background section. In this example, we use an image as the background.

• Set the size to cover.

• If you want, you can also set the background overlay. In this example, we use a black background overlay.

• Drag the Heading element to the editor. We will use this element to display a quote from Saint Augustine that says “The world is a book, and those who do not travel read only a page.”

• Write the quote on the Title section under the Content tab on the left panel and go to the Style tab to customize the text appearance like color, font style. To change the text margin, you can go to the Advanced tab.

• Drag the Spacer element and drop it above the Heading element to give an extra space above the text.

• Repeat the step above to add a blank space below the Heading section.

# Section 2

• Click the plus button on the Elementor editor to add a new section. Choose the single column option.

• Drag the Inner Section element to the new section you have just created. Since we need three columns, duplicate one of the columns (take a look at the screencast).

• Select the first column (the left-most one) and go to the Style tab to add an image background.

• Set the size to cover.

• Drag the Button element to the column. Set the destination link, text, and so on. Again, you can go to the Style tab to customize the button.

• Add a blank space above and below the button with the Spacer element.

• Repeat the steps above on the second and the third columns. Don’t forget to tailor the button text and destination link.

• To give a space between the columns, you can select a column and go to the Settings tab. Set the margin as you want.

• Repeat the steps above on other columns. Set both the left and the right margin if needed.

# Section 3

• Click the plus icon on the Elementor editor to add a new section. Select the single column option.

• Drag the Inner Section element to the new section you have just created. Set the column ratio to about 70%:30%.

• Drag the Posts element to the first column (the left one).

• By default, Elementor will display the latest posts of your website. You can set the source on the Query section under the Content tab.

• To set the pagination, you can go the Pagination, still on the Content tab.

• You can go to the Layout section under the Content tab to set things like the number of columns, image position, the number of posts per page, image ration, and so on. You can also go to the Style tab to make advanced customizations.

• Once you are done with the Posts element, drag the Author Box element to the second column.

• Just like other elements you have added before, you can play around with the left panel to customize this element. If you want, you can add other elements on the second column, such as Sidebar, Social Icons and so on.

Once everything is done, you can click the PUBLISH button to publish the page.

Once the page is published, return to the WordPress dashboard and go to Settings -> Reading.

Click the drop-down menu on the Homepage section and select the page you have just created. Don’t forget to click the Save Changes button.