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 sign up with email below...

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

Already Registered? Log In Here

Day 2: Design Your Website

How To Design WordPress Archives With Elementor Pro

Action Plan

Step 1: Design Your Blog Archives With Elementor

Elementor Pro is required for this step. The small commission we receive from your purchase helps us keep our tutorials completely free.

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:31)
  • Check the permalink url so you know how to link to this page (0:51)
  • Go to Settings > Reading (1:13)
  • In the dropdown menu next to “Posts page,” select the new blog page you just created (1:22)
  • Click “Save Changes” (1:31)
  • Go to Templates > Theme Builder > Archive (1:48)
  • Choose an archive template by visiting our Theme Builder Previews page (2:11)
  • Click “View” to preview the designs (3:08)
  • When you decide on a template, click “Edit with Elementor” (3:35)
  • Editing the Archive Post widget (4:01)
  • Save your archive design by going to Save Options > Add Condition > All Archives > Publish (4:14)
  • Add a link to your blog in your main menu by going to Appearance > Menus (4:50)
  • Two ways to create categories and assign them to specific blog posts (5:39)
  • How to view the URLs for specific categories (6:48)

(I created an archive template for my blog posts)

Step 2: Design Your Search Results Page With Elementor

Elementor Pro is required for this step. The small commission we receive from your purchase helps us keep our tutorials completely free.

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.

Watch Our Video Tutorial For This Step

This video will walk you through how to add a search box to your website and use display conditions to design your search results page.

Video Summary

  • Add a search box to your website using the “Search Form” widget (0:16)
  • Use the keyboard shortcut “Ctrl + E” to open the Finder and search for “settings” (0:39)
  • Use the keyboard shortcut “Ctrl + ?” to learn more about shortcuts (0:49)
  • Open the “LP-SETTINGS-widgets-dark-bg” template in a new tab (1:07)
  • Open the Navigator to more easily find the pre-styled widget you want to use (1:20)
  • Copy/paste the Search Form widget (1:37)
  • Edit the right/left padding for the Search Form widget (2:00)
  • Test your new search box and see your current search results page (3:00)
  • Go to Templates > Theme Builder > Archive (3:30)
  • Choose a design by going to the “Archives” section on the Theme Builder Previews page (3:40)
  • Choose either the “dark-bg” version or the “white-bg” version and click “Edit with Elementor” (4:10)
  • Edit the Archive Posts widget to adjust the search results settings (4:26)
  • We added a search box at the bottom of the template so users can easily search your site again if they need to (4:35)
  • Go to Save Options > Add Condition > Search Results > Publish (4:44)
  • Test your new search results page by searching your site (5:09)

(I designed my search results page)

Continue To The Next Tutorial Below

Day 2

Design Your Website

Elementor Pro is required for many of our tutorials in Day 2. The small commission we receive from your purchase helps us keep our tutorials completely free.
Your Progress
0

Your Achievements

You have earned 0 badges

How Can This Challenge Be Free?

Our "Website In A Weekend" challenge is supported by the small affiliate commissions we receive from SiteGround Hosting and Elementor Pro. Other than this, we are not associated with SiteGround or Elementor in any way.