Every WordPress blog has a different homepage layout, depending on the theme it uses. In most WordPress-based blogs, the homepage usually displays the articles on the associated blogs. Be it the latest articles or the featured articles that are filtered by certain criteria. If the layout/appearance of the homepage offered by your theme doesn’t impress you, you can create a custom homepage with your own design to replace the default homepage offered by your theme. Elementor is a perfect plugin to do so.
In case you haven’t heard about it. Elementor is the most popular page builder plugin for WordPress. It comes with a visual editor where everything is drag and drop. Not only you can use Elementor to create a page, but also custom templates for the header, footer, and other parts of your theme. If you are a WordPress user who has no coding skills, working with Elementor would be so much fun.
How to Create a Custom Homepage for Your WordPress Blog with Elementor
Creating a custom blog homepage using Elementor, you can add any elements to your liking. From a slider, your photo (maybe), a brief intro about yourself, social media follow buttons, your articles (which you can filter), and so on. In this example, we will demonstrate how to create a simple blog homepage as follows.
Well, it’s just an example. You can create a custom blog homepage way better than that with your own design. Elementor itself also has some premade blog homepage templates that may suit you.
If you are completely new to Elementor, you can read our previous article to learn how to use Elementor. You can learn how to add and customize a section and widget. The custom blog homepage we will create here consists of three sections as follows:
- Section 1: To place the Image widget, Text Editor widget, and Social Icons widget.
- Section 2: To place the Heading widget.
- Section 3: To place the Posts widget.
Start by creating a new page (Pages -> Add New) and edit it with Elementor (by clicking the Edit with Elementor button). If you want to create the custom homepage from a premade template, you can click the folder icon on the canvas area to open the template library.
Search for a blog homepage template you like and click the INSERT button to import it to the canvas area.
Creating the Custom Blog Homepage from Scratch
Before you start to create the page, you can set the page layout first. Click the gear icon on the bottom side of the settings panel (panel on the left side).
You can set the page layout on the Page Layout option on the General Settings block under the Settings tab.
Section 1
As said above, we will use this section to place the Image widget, Text Editor widget, and Social Icons widget. Click the plus button on the canvas area to add a new section. Select the two-column structure.
Drag the Image widget and place it to the first column on the section.
Go to the settings panel to make the settings. You can click the image selector on the Image block under the Content tab to select an image. Or, if you want to use your WordPress ava (author profile picture), you can click the database icon and select Author Profile Picture.
To style up the image, you can switch to the Style tab. From this tab, you can set things like image size (width and high), border radius, border type, border size, border color, CSS filters and box shadow.
To set the spacing (and margin) of the Image widget, you can open the Advanced tab.
Once you are done editing your image, add the Text Editor widget. Place it to the second column on the section. Replace the default text with your text (you can replace the default text from either the settings panel or right from the Elementor canvas).
You can then open the Style tab to style up the text. You can set the typography (font family, font size, font style, and so on), text color, and align.
Same as the Image widget above, you can also go to the Advanced tab to set the padding and margin of the Text Editor widget.
Once done editing the Text Editor widget, you can add the Social Icons widget to the second column. You can place it beneath the Text Editor widet.
Go to the left panel to customize the social media profiles. To add a link of your social media account, you can open the existing item on the Social Icons under the Content tab. You can also click the icon to replace the default icon.
You can click the ADD ITEM button to add a new social media profile. To customize the icons, you can go to the Style tab. From this tab, you can set the size of the icons, color of the icons, space between icons, border style, border size, border radius, and so on.
You can go to the Advanced tab to set the padding and the margin of the Social Icons widget just like the first two widgets above.
Section 2
We will use this section to place the Heading widget. We will use this widget to add a “blog posts” text.
Click the plus button on the canvas area to add a new section. You can select the one-column structure. Once the the section is added, add the Heading widget and replace the default text with your own text.
You can then go to the Style tab to style up the heading. You can set the typography, text color, text shadow and blend mode.
Simply go to the Advanced tab to set the padding and the margin of the Heading widget.
Section 3
We will use this section to place the Posts widget. The Posts widget itself is only available on Elementor Pro (read: Elementor Free vs Elementor Pro). In other words, you need to use the pro version of Elementor to use it. Or, you can use one of the following Elementor add-ons.
- Happy Addons
- Stratum
- Essential Addons
Those three add-ons have a free widget to display the blog posts on your website to replace the native Posts widget of Elementor. Since we use Elementor Pro, we will use the Posts widget.
Click the plus button on the canvas area to add a new section. This time, select the three-column structure. Before adding the Posts widget, you can set the size of the columns first. To do so, click and hold the edge of a column and drag rightward or leftward.
Once the column is ready, drag the Posts widget and place it to the second column (the middle one).
By default, the Posts widget displays the articles on your website in three columns. You can go to the settings panel to customize it. You can also filter the articles from the settings panel.
For more detailed instructions on how to use the Posts widget, you can read our previous article.
Once you are done editing the page, click the PUBLISH button on the bottom side on the settings panel to publish the page. You can also preview it first by clicking the eye icon next to the PUBLISH button.
Set the Page You Have Just Created as the Homepage of Your Blog
After publishing the custom homepage above, you need to set it as the homepage on your blog. To do so, go to Settings -> Reading on your WordPress dashboard. On the Your homepage displays option, set to A static page and select the homepage you have just created from the Homepage dropdown menu. Don’t forget to click the Save Changes button to apply the change.
The Bottom Line
If the WordPress theme you use on your blog doesn’t offer a homepage layout according to your need or what you want, you can simply create a custom homepage to replace it. Elementor is a plugin that you can use to do so. It has a very intuitive visual editor where everything is drag and drop. There are over 90 elements (widgets) offered by Elementor in total. Elementor also comes with a theme builder which you can use to create a custom template for the header, footer, archive pages, 404 page, and so on.
1 thought on “How to Create a Custom Homepage for Your WordPress Blog with Elementor”
Very helpful article learned some new things. Thanks for sharing your knowledge.