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 Create Pages With Our Templates

Action Plan

Step 1: Create Your Home Page


Watch Our Video Tutorial For This Step

This video will walk you through how to use our Elementor templates to build your first WordPress page (and set it as your home page).

Video Summary

  • Go to Pages > Add New (0:27)
  • Tips for creating page titles (0:38)
  • Click “Save Draft” to create permalink (1:14)
  • Tips for creating permalink URLs (1:19)
  • Difference between “Save Draft” and “Publish” (2:12)
  • Open the Elementor Page Builder (2:30)
  • Watch our getting started with Elementor video (2:39)
  • Add a full page “Home” template to your page (2:50)
  • Two ways to create pages, section by section, or with full page templates (3:30)
  • Copy and paste the template name to insert a template (4:15)
  • Click “No” when asked to import the document settings (4:59)
  • What’s the goal of the page, segmenting visitors (5:20)
  • Use the navigator to find the template name (6:04)
  • Add/remove section templates (6:27)
  • How to edit content on the page (8:00)
  • Always check layout on desktop, tablet, and mobile (9:27)
  • Change the background image of a section (9:47)
  • Color photos vs black and white photos (9:53)
  • Learn how to download, crop, resize, and compress photos (10:46)
  • Adjust the gradient background overlay settings (11:30)
  • Why shape dividers are great for better usability (12:45)
  • Use images with emotion, action, eye contact, or curiosity (15:10)
  • Use the history setting to undo changes (16:50)
  • Adjust the border radius of an image (17:14)
  • Publish the page to make it live or save as a draft (19:15)
  • Set your new page as your website’s default home page (20:01)

(I created my Home page)

Step 2: Create Your About Page


Watch Our Video Tutorial For This Step

This video will walk you through how to use our Elementor templates to build your About page.

Video Summary

  • Go to Pages > Add New (0:18)
  • Add a full page “About” template to your page (1:33)
  • Replace the title section with a new “Title” section template (2:41)
  • Vertically align the content within a column (3:54)
  • Search for widgets in the sidebar (4:12)
  • Learn how to download, crop, resize, and compress photos (4:31)
  • Alternate template colors by changing the section background color (5:30)
  • Most widgets are not styled by default (6:38)
  • How to insert pre-styled widgets using our settings template (6:40)
  • Open the “Finder” by using the keyboard shortcut “Ctrl + E” (7:05)
  • Search for “settings” in the finder and open LP-SETTINGS-widgets-white-bg (7:28)
  • Copy/paste the button widget into your design (8:05)
  • Duplicate rows within a section (9:22)
  • Change the border radius from “percentage” to “pixels” (10:45)
  • Double check your design on tablet and mobile (12:01)
  • Changing text alignment on different devices (12:57)
  • Publish the page to make it live (13:16)

(I created my About page)

Step 3: Create Your Contact Page

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

Watch Our Video Tutorial For This Step

This video will walk you through how to use our Elementor templates to build your Contact page. This will include detailed instructions on how to create a contact form using the Elementor Form widget.

Video Summary

  • Go to Pages > Add New (0:25)
  • Click “Save Draft” to adjust the permalink (0:40)
  • Add a full page “Contact” template to your page (1:05)
  • How to replace the contact form section with a new section (2:05)
  • What to do when inserting an image and it’s the wrong size (2:55)
  • Use the Social Icons widget to link to your social media profiles (3:16)
  • Edit the left/right form widget padding (3:41)
  • Turn on required fields (4:45)
  • Add/remove form fields and adjust settings (5:05)
  • Add icons to buttons (5:55)
  • “Actions After Submit” settings (6:17)
  • Redirect user to a thank you page after they submit the form (6:30)
  • Email address settings (7:05)
  • Adjust the default email address (7:09)
  • Change the reply-to address to be “Email Field” (8:00)
  • Meta data (8:27)
  • Change the success message and error message (8:40)
  • How to organize your contact page, what’s the goal (9:05)
  • Publish the page to make it live (9:42)

(I created my Contact page)

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.

Here’s a rough guideline for the image sizes we recommend using:

Full background = 1920 pixel width
Full background with overlay = 1600 pixel width
One-column section = 700 pixel width
Two-column section = 700 pixel width
Three-column section = 500 pixel width
Four-column section = 400 pixel width

*This is based on a page layout width of 1400 pixels (set in the Elementor settings)

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.

Have a question?
Click here to submit your own

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.