Completely Free Course

Connect with Facebook

or

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 Course

Connect with Facebook

or

By signing up to create an account I accept LaunchParty’s Terms of Use and Privacy Policy.

Already Registered? Log In Here

Module 1: Create Your Website

How To Design WordPress Archives With Elementor Pro

Action Plan

Step 1: Design Your Blog Archives With Elementor

The Elementor Pro add-on is required for this step

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.

Watch Our Video Tutorial For This Step

This video will walk you through how to create an “archive” template with Elementor and select the display conditions so that it’s used for your blog home page and blog category pages.

Video Summary

  • Go to Pages > Add New to create a new page for your blog archive (0:23)
  • Check the permalink url so you know how to link to this page (0:35)
  • Go to Settings > Reading (0:42)
  • In the dropdown menu next to “Posts page,” select the new blog page you just created (0:49)
  • Click “Save Changes” (1:03)
  • Go to Elementor > My Templates > Archive (1:14)
  • Preview the archive designs by visiting our template block preview page (1:30)
  • Images in the preview will be replaced with your blog posts’ featured image (1:50)
  • Copy the template name and paste it in the template library search box (2:10)
  • Click “View” to preview the designs (2:37)
  • When you decide on a template, click “Edit with Elementor” (3:08)
  • Click “Update” to open the display conditions window (3:23)
  • Click “Add Condition,” select “All Archives,” and click “Publish” (3:28)
  • When you view the page we created at the beginning of the video, it should now be showing your blog archive (4:01)
  • Go to Posts > Categories and view a category to see a category archive page (4:14)

(I created an archive template for my blog posts)

Step 2: Design Your Search Results Page With Elementor

The Elementor Pro add-on is required for this step

Why This Step Is Important

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

Watch Our Video Tutorial For This Step

This video will walk you through how to use display conditions to use an archive template for your search results page.

Video Summary

  • When you search for a term on your website, the search results are using the design we assigned in Step 1 (0:08)
  • This video will show you how to create a new design for your search results using our Elementor Templates (0:25)
  • Just so you know, you can add a search box to your website using the Elementor “Search Form” widget (0:36)
  • Go to Elementor > My Templates > Archive (1:09)
  • Choose the “LP-ARCHIVE-10” template (1:37)
  • Choose either the “dark-bg” version or the “white-bg” version and click “Edit with Elementor” (1:50)
  • We added a search box at the bottom of the template so users can easily search your site again if they need to (2:14)
  • Click “Update,” then “Add Condition,” select “Search Results” from the dropdown, and click “Publish” (2:26)
  • Test your new search results page by searching your site (2:57)

(I designed my search results page)

Continue To The Next Tutorial Below

Module 1

Create Your Website

Each video tutorial should be followed exactly so you don't make any mistakes.
Module 1 Progress
0

Your Achievements

You have earned 0 badges

How Can This Course Be Free?

Our course is 100% free forever because of our special partnerships with SiteGround Hosting and Elementor Pro.