Completely Free Course

Or log in with email below...

Forgot my password

Reset Your Password

Enter your email address below. We'll look for your account and send you a password reset email.

Don't Have An Account? Sign Up Free

Completely Free

or

By signing up to create an account I accept LaunchParty’s Terms of Use and Privacy Policy. This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Already Registered? Log In Here

Day 2: Design Your Website

How To Create Archives With Elementor Pro

Action Plan

Step 1: Design Your Blog Archives With Elementor

Elementor Pro is required for this step. Read our Elementor Pro review.

Complete The Following Tasks

Create a new page and set the permalink as /blog/.
In your WordPress admin, go to Pages > Add New. This page will be your blog homepage (also known as a blog archive).

Set the title as Blog and click Save Draft. Click the Permalink box and set your permalink (/blog/ is usually the standard). Click Publish > Publish to make this page live.
Set this new page as your blog archive by going to Settings > Reading in your WordPress admin.
In your WordPress admin, go to Settings > Reading and in the drop-down next to Posts page, select the page you just created.
Design your blog archive page using Elementor Pro's theme builder functionality.
Visit our theme builder preview page to find the Archive template you want to use for your blog archives.
In your WordPress admin, go to Templates > Theme Builder and click the Archive tab. Find your template and click Edit with Elementor.
Customize the template if necessary.
Click Update and set the Display Conditions.
Display conditions will allow you to choose which archives use this design. To set this design as your site-wide archive design, go to Update > Add Condition > All Archives > Publish.

In the future you can create additional archive designs for specific blog categories by using the display conditions.

Watch Our Video Tutorial

Why This Step Is Important

Archives are an easy way for your users to see all of the articles (blog posts) you have published in the past. Creating a blog archive will allow you to send users to a specific url, such as /blog/, and view all of your latest blog posts. You can also design archive pages for specific categories.

Step 2: Design Your Search Results Page With Elementor (Optional)

Elementor Pro is required for this step. Read our Elementor Pro review.

Complete The Following Tasks

Design your search results page using Elementor Pro's theme builder functionality.
Visit our theme builder preview page to find the Archive template you want to use for your search results page (either LP-ARCHIVE-07 or LP-ARCHIVE-07).
In your WordPress admin, go to Templates > Theme Builder and click the Archive tab. Find the correct template (either LP-ARCHIVE-07 or LP-ARCHIVE-07) and click Edit with Elementor.
Click Update and set the Display Conditions.
To set this design as your search results page, go to Update > Add Condition > Search Results > Publish.
You Earned A Badge!

Watch Our Video Tutorial

Why This Step Is Important

If you want to add a search box to your website, you can control how your search results page is designed using Elementor’s “archive” template feature.

FAQ


How do I control the number of posts shown per page?

As you probably noticed, once you reach a certain number of posts per page, Elementor will automatically add pagination to the bottom of your archive.

To control the number of blog posts shown per page in your archive, in your WordPress admin go to Settings > Reading > Blog page shown at most and adjust the number. The default is 10 posts per page.

How do I adjust the padding above the pagination links?

First, make sure you have updated your Elementor and Elementor Pro plugins to the latest version since this feature was recently added.

Next, when you’re in the Elementor editor, click on the Post widget or Archive Posts widget. In the sidebar, go to the Style tab and then click on Pagination. From there you’ll see the Spacing toggle where you will be able to adjust the padding above the pagination on desktop, tablet, and mobile.

Submit a question

Continue To The Next Tutorial Below

Day 2

Design Your Website

Elementor Pro is required for many of our tutorials in Day 2.
Your Progress
0

How Can This Be Free?

All of our tutorials are supported by the small affiliate commission we receive when you purchase SiteGround Hosting and Elementor Pro. We are not associated with SiteGround or Elementor in any way.