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 1: Set Up WordPress

How To Install And Configure Elementor + Elementor Pro

Action Plan

Step 1: Install And Configure The Free Elementor Plugin


Why This Step Is Important

All of our free tutorials are centered around the Elementor Page Builder plugin. You will be using this amazing plugin to visually create and design your entire website without any coding. You will soon discover why Elementor is considered the absolute best drag-n-drop visual editor for WordPress, powering more than 3 million websites.

Watch Our Video Tutorial For This Step

This video will walk you through how to install the free Elementor plugin and configure the settings.

Video Summary

  • Log into your WordPress dashboard (0:43)
  • Go to Plugins > Add New (0:46)
  • Search for “Elementor” (0:54)
  • Install and active the “Elementor Page Builder” plugin by Elementor.com (1:07)
  • Go to Elementor > Settings (1:20)
  • Disable default colors (1:28)
  • Disable default fonts (1:33)
  • Why we disable the colors and fonts (1:36)
  • Go to the Style tab and change the content width to “1400” pixels, this is the preferred width when using LaunchParty’s Elementor templates, see our FAQ for more info (1:52)
  • Go to the Advanced tab and enable the switch editor loader method to prevent any editor loading issues (2:15)
  • Click “Save Changes” (2:25)

(I installed the free Elementor plugin)

Step 2: Purchase And Install The Elementor Pro Add-On

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

Why Buy Elementor Pro?

In order to follow along with all of our tutorials you will need to purchase the Elementor Pro add-on. The Elementor Pro add-on offers a ton of amazing features including:

  • Design your headers and footers
  • Design blog post layouts
  • Design blog archive pages
  • Use more than 30 pro widgets
  • Access the pro template library
  • Create contact forms and surveys
  • Create portfolios and image galleries
  • Create and design popups with advanced targeting
  • Integrate with email marketing services
  • Add social media sharing buttons
  • Add Facebook comments to any page
  • Add pricing tables and price lists
  • Use motion effects and animations
  • Save your most-used widgets (pre-styled)
  • Create targeted layouts using conditional formatting
  • Create custom post types with ACF, Toolset, and Pods
  • Design your WooCommerce pages and archives
  • Get premium support from Elementor

Our website is supported by those who purchase Elementor Pro through the links on our website. The small affiliate commission we receive is what allows us to keep our tutorials completely free.

Watch Our Video Tutorial For This Step

This video will walk you through how to purchase, download, install, and activate the Elementor Pro add-on.

Video Summary

  • Visit the Elementor Pro order page
  • The Elementor Pro add-on is required for many of our tutorials (0:05)
  • Elementor Pro personal, business, and expert pricing explained (0:35)
  • 30-day money back guarantee and refunds (1:26)
  • Start the checkout process (1:40)
  • Where to find your license key and renewal information (2:45)
  • Download the Pro plugin from your “My Account” page (3:01)
  • Upload, activate, and install the Pro plugin in your WordPress admin (3:16)
  • Go to Elementor > License (4:05)
  • Click the “Connect & Activate” button (4:15)

(I purchased and installed the Elementor Pro add-on)

FAQ


Is Elementor Pro required for this challenge?

Yes. Our “Website In A Weekend” challenge was created specifically for Elementor Pro.

You will be using Elementor Pro to design your entire website. That means you will need access to the “theme builder” features in order to design your header, footer, blog posts, archive pages, search results pages, and more.

You will also need Elementor Pro if you want to create contact forms, feedback forms, or opt-in forms that integrate with email marketing providers such as MailChimp.

Lastly, many of the templates you will be using to design your website include pro widgets, which will also require Elementor Pro.

How much does Elementor Pro cost?

Elementor Pro only costs $49 per year. If you choose to cancel your subscription your site will still work, but you will no longer receive any new updates or support.

What's the difference between the free and Pro version of Elementor?

The Elementor Pro add-on offers a lot of additional features that are not available with just the free version of Elementor. Click here to see all of the free vs pro features. We recommend upgrading to Elementor Pro because it will allow you to:

  • Follow along with all the tutorials in this course
  • Use more than 30 pro widgets
  • Access the pro template library
  • Design your headers and footers
  • Design blog post layouts
  • Design blog archive pages
  • Create portfolios and image galleries
  • Create contact forms and surveys
  • Integrate with email marketing services
  • Create and design popups with advanced targeting
  • Add social media sharing buttons
  • Add Facebook comments to any page
  • Add pricing tables and price lists
  • Use motion effects and animations
  • Save your most-used widgets (pre-styles)
  • Create targeted layouts using conditional formatting
  • Create custom post types with ACF, Toolset, and Pods
  • Design your WooCommerce pages and archives
  • Get premium support from Elementor
Can I use Elementor on multiple websites?

Yes, Elementor Pro offers three different licenses (personal, business, and expert).

  • Personal allows you to use Elementor Pro on 1 website
  • Business allows you to use Elementor Pro on 3 websites
  • Expert allows you to use Elementor Pro on 1,000 websites
What happens to my site if I don't renew after the first year?

Your website will still look the same and function the same, even if you cancel your subscription and decide not to renew.

However, keep in mind that if you don’t renew, you won’t receive any more updates to the plugin. This can be risky because there may be important security changes or bug fixes that you won’t receive.

In general, it is recommended that you continue to renew your license each year. Especially when it’s so extremely affordable and only costs a few dollars per month. Renewing your license also gives you access to every new feature that Elementor releases, as well as their premium support.

Why do you disable default color?

It’s better to control some of your site-wide colors (such as link colors) using the WordPress Customizer. This way any pages that aren’t built with Elementor will be using the correct colors. It makes it easier to ensure that your color scheme is consistent throughout your entire website. We will show you how to add your default colors to the Customizer (and to Elementor) in Day 2.

Why do you disable default fonts?

It’s better to control your site-wide fonts using the WordPress Customizer (we will show you how in Day 2) than using Elementor’s font settings. This way, if you ever want to change your fonts across your entire website, your changes will automatically update site-wide.

Why do you use 1400px (instead of the default 1140px) as the default width in the Elementor?

A default width of 1400 pixels (px) works best with our free Elementor templates. Our templates will still work with the default 1140 pixels, however, we think 1400 pixels works better.

To understand why we chose 1400 pixels, it’s important to think about actual content (text) width rather than “website” width. For example, in a single column layout, we reduce the content (text) width to around 700px, you’ll see this in our blog post layouts for example. For two columns we typically use 1000px (and in some cases 1400px), and for three columns we use 1400px.

If you use the default 1140px width, and you want 3 columns in a particular section, there isn’t much width for your content in each column. Especially when you consider the padding between each column. If there’s 40px spacing between each column then you’re only left with around 300 pixels for each column’s content. On a smaller resolution laptop this might look fine, however, on a larger resolution monitor, it can look kind of silly. A user might wonder “Why is the content so narrow when there’s so much extra space on my screen?”.

To summarize, in our testing, we found that a default width of 1400 pixels had the most flexibility for multi-column sections.

What's the different between a page builder (Elementor) and a WordPress theme (Astra)?

A WordPress theme is required for all WordPress websites. You can think of it as the “nuts and bolts” of your website. It’s where the main framework and functionality resides.

The Elementor page builder is a plugin that’s used on top of your theme. It gives you drag-n-drop capabilities to design your pages and posts visually. Recently, page builders like Elementor have been getting more and more advanced. Elementor can now do a lot of things that only WordPress themes could do in the past (like design your header, footer, and blog posts).

Have a question?
Click here to submit your own

Continue To The Next Tutorial Below

Day 1

Set Up WordPress

Your Progress
0

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.