How to edit your blog page in WordPress with Elementor

You might not like the way your theme displays blog posts by default. So let’s change this. Follow this tutorial to build your own blog archive page using the theme builder from Elementor PRO. We’ll create a blog header with an opt-in form to promote your lead magnet, add the posts archive itself of course, and add a Categories & Search section to allow people to search for a post or browse through the categories.

Note: You need Elementor PRO to be able to create a custom blog overview page.

Looking to edit your single post blog template instead? Read How to create a blog post template with Elementor.

First, you need to make sure you’ve set a page to be the blog archive page. You can do this in your WordPress admin area under Settings > Reading.

Then, let’s go to the theme builder, and then we’re going to create a new archive template. Click the Add New Archive button.

Type in the name of your Archive (for example, Blog Overview) and click Create Template.

Now you can choose from one of the pre-made templates, or create a template yourself. We’ll create one ourselves. To do so, close the library to start using the builder.

Create a blog header with an opt-in form

Start by selecting a two-column structure for the blog header.

Then, add a heading to one of the two columns.

Edit the text for your heading to promote your opt-in freebie.

Add some additional text to explain what your opt-in freebie is about.

Then, insert an HTML block for your opt-in form. Insert the embed code from your email service provider (ConvertKit, Mailerlite, etc.)

Add a background to the section by selecting the whole section (click the middle icon at the top of the section, between the plus and the cross), then going to the Style tab.

Select a basic background (the brush icon), then choose or upload an image.

I recommend using either a photo of yourself pointing at the text and the form, or a mockup of your opt-in freebie. If you don’t have a large enough image mockup of your opt-in freebie to use as the background, you can also leave the background empty and add a simple image to the other column opposite the text.

Add posts to your blog post overview page in Elementor

Use the Archive Posts widget to add the posts underneath the blog header.

Use the settings on the left-hand side to change the way your posts look on this blog archive page.

Add a search & categories section on your blog archive page

First, add another two-column section between the blog header and the posts. Add a search form.

Add the Categories widget to the other column.

It will add a list of your categories, but that doesn’t look great. Let’s change it with some custom CSS.

The custom CSS I used for the categories is:

.elementor-widget-wp-widget-categories ul {
    padding: 0;
}
.elementor-widget-wp-widget-categories li.cat-item {
    list-style: none;
    display: inline-block;
}
.elementor-widget-wp-widget-categories li.cat-item a {
    background: #fff;
    border: 1px solid #E55555;
    color: #E55555
    display: inline-block;
    padding: 5px 10px;
    margin: 2px 1px;
}

This custom CSS results in the categories looking like this:

Add a background to the Categories & Search section to make it stand out between the header and the posts sections.

Using your blog archive template on your actual blog posts overview page

Click the Publish button at the bottom left of Elementor. A pop-up will show up, asking you where you want to display this template. You need to add Display Conditions.

You can choose to use this template on All Archives, or on a specific Archive page. Then, click Save & Close.

Go to your blog overview page to see your new template in action!