Shutting Down Notice

I have decided to shut down launchparty.org and discontinue our tutorials and templates.

Sadly, it's just not going to be possible to execute LaunchParty’s long-term vision with the new Elementor 3.0 design system.

Our website will be accessible (but not updated) until November 1, 2020. If you plan on using our templates after we shut down, be sure to download our preview images.

If you have any questions, feel free to contact me.

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

How To Install And Configure Elementor + Elementor Pro

Action Plan

Step 1: Install And Configure The Free Elementor Plugin


Complete The Following Tasks

Install and Activate Elementor.
In your WordPress admin, go to Plugins > Add New and search for Elementor in the search box. Click Install and then click Activate for the Elementor Page Builder plugin by Elementor.com.

You will be using Elementor (and Elementor Pro) to visually create and design your entire website. It’s the absolute best drag-n-drop editor for WordPress.

Our entire course will walk you through how to fully take advantage of this amazing plugin.
Go to Elementor > Settings and configure.
In the General tab, check the box for Disable Default Colors and check the box for Disable Default Fonts and click Save Changes.
The reason you want to disable these two options is so that you can control your site-wide fonts (and some colors) using the WordPress Customizer.

This will make it easier to ensure you’re using consistent fonts and colors throughout your entire website. We will discuss this further in future tutorials.
In the Style tab change the Content Width to 1400 and click Save Changes.
In our testing, we found that a default width of 1400 pixels (px) worked best with our free Elementor templates. You can still use the default width if you prefer, however, we think 1400 pixels is best.
In the Advanced tab, next to the Switch Editor Loader Method, choose Enable from the drop-down and click Save Changes.
The reason you want to enable this Switch Editor Loader Method is because with some configurations (like the configuration we're using in this course), when you try to open the Elementor editor you’ll get a blank white screen. Enabling this option fixes that issue.

Watch Our Video Tutorial

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 five million websites.

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

Elementor Pro is required for many of our tutorials throughout this course. Read our Elementor Pro review.

Complete The Following Tasks

Purchase Elementor Pro.
In our tutorials, you will be using Elementor Pro to design your entire website. That means you will need access to Elementor Pro's theme builder features in order to design your header, footer, blog posts, archive pages, search results pages, and more.

Read our Elementor Pro review (full feature list)
Download the Elementor Pro plugin zip file from your Elementor account.
Log into your Elementor account (my.elementor.com) and in the My Account tab, click the Download Plugin button.
Install the Elementor Pro plugin in your WordPress admin and activate your license key.
In your WordPress admin, go to Plugins > Add New > Upload Plugin and select the zip file you just downloaded. Click Install Now and then click Activate Plugin.

Next you will need to activate your license key. In your WordPress admin, go to Elementor > License and click the Connect & Activate button. Then click Connect.

Confirm the Status on the License Settings page, it should now say Active.
You Earned A Badge!

Watch Our Video Tutorial

Why Buy Elementor Pro?

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

  • 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, multi-step forms, and surveys
  • Create opt-in forms
  • 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
  • Use Lottie animations
  • Add a table of contents to pages and posts
  • 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.

FAQ


Is Elementor Pro required for this course?

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.

What is Elementor?
Read our Elementor Pro review

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 is Elementor?
Read our Elementor Pro review

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, multi-step forms, and surveys
  • Create opt-in forms
  • 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
  • Use Lottie animations
  • Add a table of contents to pages and posts
  • 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

What is Elementor?
Read our Elementor Pro review

Can I activate Elementor on multiple websites?

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

  • Personal allows you to activate Elementor Pro on 1 website
  • Business allows you to activate Elementor Pro on 3 websites
  • Expert allows you to activate 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).

Submit a question

Continue To The Next Tutorial Below

Day 1

Set Up Your Website

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.