WordPress is a popular CMS (content management system) to create a blog and other website types in general. Many bloggers prefer to use WordPress as it is fully customized. You can customize your WordPress blog according to your needs. You can, for instance, create a custom homepage for your blog to display other elements, apart from blog posts.
By default, most WordPress themes display the latest blog posts on the homepage. WordPress itself has a built-in feature that allows you to create a custom homepage, but to add elements like blog posts, slider, author profile, and so on, you need the help of a plugin. Some plugins we recommend to create a custom homepage for your WordPress blog are:
- Elementor
- Divi Builder
- Brizy
Not only you can use those three WordPress page builder plugins to create a custom homepage, but you can also create a custom header, custom footer, custom archive pages, custom 404 page, and so on thanks to their respective theme builder feature.
In this article, we will show you how to create a custom homepage using Elementor. We will add the following elements:
- Photo of the blogger (your photo)
- A little introduction
- Blog posts.
You can create a way better custom homepage than the one above, with your own design concept. If you haven’t used Elementor before, you can read this article to learn how to use it. There are a bunch of design elements you can add to your page.
How to Create a Custom Homepage Using Elementor
You have seen the example of the custom homepage we will create on the image above. It takes three sections to create the homepage like the one above:
- Section 1: to place the blogger photo and the introduction
- Section 2: To place the heading that says “Blog posts”
- Section 3: To place the blog posts
One thing to note before you get started, the Elementor widget to display the blog posts — the Posts widget — is only available on the pro version of Elementor. That said, you need to use Elementor Pro to be able to add the blog posts element to your custom homepage. You can get the pro version of Elementor on its official website.
Once you are ready, 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 Edit with Elementor above. Before start editing the page, you can set the page layout first. To do so, you can click the gear icon on the bottom-left corner of the settings panel (panel on the left side). You can set the page layout on the Page Layout option.
Section 1
Once done setting the page layout, you can start editing the page. Start by clicking the plus button on the canvas area to add a new section. For the first section, we will use the section with a two-column structure.
Before adding any widget, you can set the top margin. To do so, go to the Advanced tab on the settings panel. You can set the top margin on the Advanced block.
If you want to style up the section (such as changing the background color, applying a divider, and so on) you can go to the Style tab on the settings panel.
As mentioned, we will use the first section to place the blogger image profile as well as the introduction. So, drag the Image widget and drop it to the first column.
Go to the settings panel to add your image. Simply click the image selector on the Image block under the Content tab to select your photo. Or, if you want to use a dynamic image, you can click the database icon. You can select the Author Profile Picture to display your profile image.
Once your image is added, you can go to the Style tab to set the size, apply CSS filters, set the border size, and the border radius.
Once done styling the image, add the Text widget to the second column and replace the default text with your own text. You can then go to the Style tab to style up the text. You can set the alignment, text color, and typography (font family, font size, font style, and so on).
Section 2
We use this section to place the heading that says “blog posts”. Of course, you can use any text to your liking. Click the plus button on the canvas area. You can select the single-column structure. Add the Heading widget to the section 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 text color, typography, text shadow, and blend mode.
Section 3
We use this section to place the Posts widget to display your blog posts. Click the plus button on the canvas area to add a new section. You can select the one-column structure. Once the section is added, simply drag the Posts widget to the section.
Once the Posts widget is added, you can go to the left panel to make the settings. On the Layout block under the Content tab, you can set the skin (Classic, Cards, and Full Content), number of columns, image (thumbnail) position, image size, image ratio, excerpt length, and so on.
On the Query block (still under the Content tab), you can filter the posts to be displayed. By default, the Posts widget displays all articles on your blog. If you want it, you can filter them. For instance, you can display only articles under certain categories to be displayed. You can filter the articles on the Include By option.
On the Pagination block, you can set the pagination. You can read this article to learn more about how to add pagination in Elementor.
Once done making the basic settings under the Content tab, you can go to the Style tab to style up the widget. There are 5 blocks you can open: Layout, Box, Image, Content, Pagination. You can read this article to learn more about how to use the Posts widget in Elementor.
Once you are done editing the page, you can click the PUBLISH button on the bottom side on the settings panel. You can also preview it first before publishing the page by clicking the eye icon next to the PUBLISH button.
Once the page is published, the next step is to set as it the homepage of 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 page you have just created on the Homepage dropdown. Don’t forget to click the Save Changes button to apply the change.
Summary
Being an open content management system, WordPress is fully customized. You can customize every part of your website, including the homepage. Page builder plugins like Elementor, Divi Builder, and Brizy are great tools to create a custom homepage for your blog or other website types in general. You can add any element you like apart from the ones we demonstrated above.
One thing to note. You can only install a plugin if you use a self-hosted version of WordPress. Or, if you have a website on WordPress.com, you can use either the Business plan or the eCommerce plan to be able to install a plugin.
