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 2: Design Your Website

How To Create Pages With Elementor Pro

Action Plan

Step 1: Create A New Page In WordPress


Complete The Following Tasks

Create a new page in your WordPress admin.
Create a new page.
In your WordPress admin, go to Pages > Add New.
Add your page title.
This is the title that will appear in Google search results. When creating your title, think about which keywords people will be searching for and will want to click.

Watch our video below to learn more.
Click Save Draft and edit the permalink (if necessary).
Permalink is another name for the URL of your page. It's best to choose a URL that's permanent, so you might want remove any keywords that might change in the future. For example, I usually remove numbers from my URLs in case I update the page and that number changes.
Add a featured image.
This is the image that will be used as the thumbnail when people share your page on social media. I recommend using an image that's at least 1200 pixels wide.
Click Save Draft again and then click Edit with Elementor to start designing your page.

Watch Our Video Tutorial

Step 2: Design Your Page Using Elementor


Complete The Following Tasks

Design your page using the Elementor editor and our templates.
Click the Edit with Elementor button to start designing your page.
Open the Elementor editor and add one of our Page Templates.
To add a template to your page, first visit our page template preview page. Click the template you want to use and it will automatically copy the template name.

Next, in Elementor, click the Add Template icon to open the template library popup. Click the My Templates tab and paste the template name in the search box. Click Insert to add the template to your page.
Insert additional Section Templates to customize the layout.
To add a template to your page, first visit our section template preview page. Click the template you want to use and it will automatically copy the template name.

Next, in Elementor, click the Add Template icon to open the template library popup. Click the My Templates tab and paste the template name in the search box. Click Insert to add the template to your page.
Learn more about customizing your design by watching our design tutorials.
Click Publish to make your new page live.
Use the Facebook sharing debugger to see how your page will look when shared on social media.
Enter your URL and click Debug. If your URL has never been shared on Facebook, you will need to click the Fetch new informtion button. Review the Link Preview section.

The link preview will be using the featured image you have set for your page in WordPress. If you update your featured image, click Scrape Again in the debugger to have Facebook refresh your information.
Create more pages using the same process.
In your WordPress admin, set your default home page by going to Settings > Reading.
In your WordPress admin, go to Settings > Reading. Where it says Your homepage displays, select static page and then select the page you want to use for your homepage from the Homepage drop-down list.

Watch Our Video Tutorial

Step 3: Create Your Contact Form

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

Complete The Following Tasks

Create a new page for your contact page.
Open the Elementor editor and add one of our Contact page templates.
To add a template to your page, first visit our page template preview page. Click the template you want to use and it will automatically copy the template name.

Next, in Elementor, click the Add Template icon to open the template library popup. Click the My Templates tab and paste the template name in the search box. Click Insert to add the template to your page.
Start editing the Form Widget.
In the Form Fields section, add or remove any necessary form fields and select which form fields are required.
In the Actions After Submit section, add any necessary tags.
Watch our video tutorial to learn more about adding tags (such as a redirect tag). If you want to use the form widget as an opt-in form, view our bonus module on email marketing.
In the Email section, adjust the To email address and the Subject if necessary.
The To email address is where the contents of a form will be delivered once a user submits the form. By default, Elementor will use the email address you have set in your WordPress admin (Settings > General > Email Address).
In the Email section, leave the From email as the default.
In the Email section, change the Reply To to the email field used in your form.
If you're creating a form where users enter their email address, you want to make sure the Reply To field is set to the email address they entered so you can easily reply to them after they submit the form.
Click Publish to publish your page.
Test your new contact form to make sure it's working correctly.
You Earned A Badge!

Watch Our Video Tutorial

FAQ


Where can I find images for my website?

Use the links below to discover all of the websites we recommend for downloading photos and images:

How do I crop and resize images for my website?

You can watch our tutorial on how to download, crop, resize, and compress free stock photos to learn all about how we suggest preparing your images for the web.

What width (in pixels) should I use when I resize my images?

You can watch our tutorial on how to download, crop, resize, and compress free stock photos to learn about our recommended photo settings.

When uploading images to the WordPress media library, I recommend using a width of 1920 pixels for landscape photos and 1024 pixels for portrait photos. However, keep in mind that you typically won’t use an image as large as 1920 pixel image on your page (unless it’s for a section background image).

This is because WordPress automatically creates additional lower resolution version of your image (1024 pixels, 728 pixels, 300 pixels, and 150 pixels) every time you upload an image to the media library. So when you’re designing your page using Elementor, you will be able to control which image is used by selecting the image size within Elementor.

How do I set a page as my homepage?

You can easily set any page as your homepage in your WordPress admin.

In your WordPress admin, go to Settings > Reading. Where it says Your homepage displays, select static page and then select the page you want to use for your homepage from the Homepage drop-down list. Then click Save to save your changes.

How do I edit the main menu in my header?

We will walk you through how to design and customize your header and footer in a later tutorial (Add Your Header And Footer).

If you just want to change the link names in your main menu, you can do that in your WordPress admin by going to Appearance > Menus. This is also covered in the same tutorial.

How do I remove the extra padding in the text widget?

You can remove the extra padding that’s added to the bottom of Elementor’s text widget by adding the following CSS to your theme’s customizer:

p:last-child {margin-bottom: 0 !important;}

If you are following our complete challenge and you already imported our recommended Astra settings, this CSS has already been added to the customizer.

You can learn more about our recommended customizer settings for the Astra WordPress theme in our Astra installation tutorial.

How do I exit fullscreen mode when creating a new page in WordPress?

When you create a new page in WordPress, you will see a 3-button (kebab) menu icon at the top right of your screen. Click this icon and uncheck “Fullscreen mode”. This will exit fullscreen mode so you have access to the normal WordPress menu items found in the left-hand sidebar.

Elementor won't open, it shows a blank white page

Did you enable the “Switch Editor Loader Method” in the Elementor settings in your WordPress admin? We discuss this in our Elementor installation video.

In your WordPress admin, go to Elementor > Settings. Click the Advanced tab, and next to where it says “Switch Editor Loader Method”, choose Enable from the drop-down and click Save Changes.

If you’re still having issues, here are some more troubleshooting options you can try.

Elementor won't open, it shows a grey page that's endlessly loading

If you’re using SiteGround hosting, this can be caused by having “External Links Rewrite” enabled in your SSL settings in your SiteGround control panel. In our SSL tutorial we discuss this.

To fix this, in your SiteGround control panel, go to Websites > Site Tools > Security > HTTPS Enforce and turn off “External Links Rewrite”. In order for these changes to take effect you will need to clear the cache in various places.

First, in your SiteGround control panel, go to Speed > Caching and click the “Flush All” button. Next, log into your WordPress admin and in the sidebar go to SG Optimizer. Click the “Purge Cache” button on the right-hand side. Lastly, clear the cache in your web browser. The Elementor editor should work after you take these steps.

If you’re still having issues, here are some more troubleshooting options you can try.

How do I change the Elementor sidebar UI theme color?

To change the UI theme color, open the Elementor editor and click the hamburger menu at the top left. Go to Preferences and in the UI Theme drop-down you can choose either Light, Dark, or Auto Detect. The auto detect option will use your computer’s default settings.

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.