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

How To Make A Website Using Elementor Pro

A complete step-by-step checklist for creating WordPress websites with Elementor. This checklist includes all the important steps from Day 1 and Day 2 of our "Website In A Weekend" challenge.

Matthew Averkamp

Before You Begin

Who is this for?

This step-by-step checklist was created for freelancers, agencies, and experienced users who want to quickly launch websites using our LaunchParty method. This checklist includes all of our tutorials from Day 1 and Day 2 of our 3-day challenge.


Testimonial: “My stumbling across the LaunchParty tutorials has been a Godsend! They are invaluable, even if you think you know more than you really do. My Elementor Pro skills have grown in just a few tutorials, along with my understanding of the WordPress dashboard itself. I am only 2/3 way through the course, and it has blown any Netflix binge out of the water! Your tutorials are amazing. Thank you again.” -Amy K.

How long will this take?

This varies widely depending on your experience and the type of website you’re creating. While technically, your website will be live in as little as an hour, it usually takes several days to create and design a basic website.

Most of our users like to work at their own pace, so we’ve added progress tracking to this guide so that you can come back at any time and continue where you left off.


Testimonial: “I LOVE this course. With LaunchParty, I’ve learned how to launch my designs on my own — literally in a day. After trying various courses and tutorials, I was thrilled to find a course that demonstrated a clean workflow, wasn’t costly, and explained everything step by step from install to site launch. Also, the free template library is amazing! So glad I found you all!” -Julie M.

Do I need to know how to code?

No, there is absolutely no coding in this entire guide. We created this guide for beginners that want to build their website visually using Elementor (the most popular drag-n-drop editor for WordPress).


Testimonial: “I am so in love with LaunchParty. It is by far the best time investment I made for my business. The tutorials are the ultimate guide to building a professional website with ZERO coding skills needed! Not only am I thrilled about the resulting site that I built for my business.” -Nicole L.

Are there video instructions?

Yes, there are more than 25 step-by-step video tutorials throughout this entire guide. You can find our video tutorials in the Action Plan sections we’ve included at the end of each part. This is where you can track your progress, watch our video tutorials, and read our FAQ.


Testimonial: “The LaunchParty tutorials have been amazing – the step by step method – and small bitesized video tutorials for every step has given me a more systematic way to approach things. Previously I was spending hours trying to figure these things out. I’m loving the tutorials!!” -Sabrina A.

Can I use your templates?

Yes, we created our very own collection of 600+ professional Elementor templates the you can download and use for free. This means you won’t ever have to start with a blank page and you won’t need any previous design experience.

Our video tutorials will teach you how to customize these free templates in any way you want so you can use your preferred style, layout, colors, fonts, etc.


Testimonial: “LaunchParty completely blew me away. It was much more than a tutorial. It guided me step-by-step to success. The resulting website looks amazing and I learned a ton of tips & tricks on the way. The templates are versatile and make building a website as fun as playing with LEGOs. The course itself is well thought out, with videos, transcripts and motivating badges. Oh, and it’s free. Wait, what? Yup. Mind blown. LaunchParty rocks!” -Daniel W.

How much does it cost to make a website using this method?

There are a few things you will need to purchase in order to create a website with WordPress.

1) You will need a domain name, 2) you will need web hosting, and 3) you will need Elementor Pro (the most popular drag-n-drop visual editor WordPress).

The total cost of these three services will be less than $10 per month. Our video tutorials will guide you through this entire process step-by-step from start to finish.


Testimonial: “I needed a website for my business, and the amount of money that some of these agencies charge I could not believe! I stumbled onto LaunchParty trying to learn how to do the website myself. Since finishing Matthew’s tutorials I have built 3 websites! I am very happy with the videos and Matthew’s teaching style! I tried a few other WP development courses out there and they just could not hold my attention, but I could not stop watching the videos on LaunchParty! The videos are to the point, informative and very easy to follow. Thank you Matthew for providing such a great service for free!” -Luke

Are these tutorials really free?

Yes, everything we offer is completely free. Our goal is to provide free educational resources to entrepreneurs, small business owners, and students all around the world.

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


Testimonial: “These tutorials are excellent. It’s by far the clearest, most comprehensive and easiest course I’ve seen. Highly recommend for both new business owners and experienced entrepreneurs looking for a quick and easy way to set up a website without paying anything at all to gain this knowledge! The step-by-step video tutorials are very straightforward and use the best tools available in the industry. You could pay hundreds or even thousands of dollars for someone to set this stuff up for you – which would take months – or you could watch these videos for free and achieve a better result. The choice is pretty clear.” -Miguel R.

Read Our Testimonials
Send Feedback
Register Your Domain Name
1.
Visit Lean Domain Search to brainstorm domain name ideas before purchasing your domain name.
When using this tool, one-word keywords work best. The results will display available .com domain names using that keyword. You can filter and sort the results on the right-hand side of the page.
2.
Visit Hover and purchase your domain name.
Enable WHOIS privacy.
This protects your personal information (name, address, and email address) from being publicly displayed in various domain registration databases. Spammers can use this public information to send you unsolicited emails.
After submitting your order, click the confirmation link in your email and follow the instructions to finalize registration.
You Earned A Badge!

Need Help?

Sign Up For Hosting And Install WordPress
3.
Visit SiteGround and choose either the StartUp or GrowBig plan.
Choose the StartUp plan if you want to create a single website. Choose the GrowBig plan if you want to create multiple websites.

Why we recommend SiteGround
After testing a lot of other hosting providers (Bluehost, HostGator, etc.), we always come back to SiteGround. Their control panel is more intuitive, their support is extremely fast and knowledgeable, and they are always launching new cutting-edge features and upgrades.

For example, they were one of the first hosting providers to offer free SSL certificates and PHP 7 standard on all servers. They continually add innovative features such as their new control panel, site migrator plugin, and free daily backups with one-click restores.
Choose your data center.
Pick a data center (server) that's closest to your location, or better yet, closest to your customers or website visitors.
Pay up to 3 years upfront and get 60% off.
When it comes time to renew your plan you will be offered additional discounts, usually 20-30% off the renewal price depending on how many years you want to renew.

This pricing structure is pretty standard for hosting companies.
Confirm your order, save the login details from the email confirmation.
4.
Install WordPress in the SiteGround control panel.
Log into the SiteGround control panel (login.siteground.com).
In the Websites tab in the main menu, click Complete next to your new website/domain.
Click Start A New Website > WordPress and choose a username and password. Then click Continue.
Save this username and password somewhere safe, you will be using it to log into your WordPress dashboard.
Click Finish.
There’s no need to add any extras like the SG Site Scanner.
5.
Add the SiteGround nameservers to your domain name in your Hover account.
Log into SiteGround and go to Websites > Site Tools. Copy the two nameservers listed on the right-hand side as you scroll down the page.

Now open a new browser tab, log into your Hover account, and find the Edit Nameservers link for your domain name.

Paste the two SiteGround nameservers into the two appropriate fields in Hover and save your changes.
Note: Your website will not be accessible until your nameservers have finished updating. This usually takes around 15-30 minutes, however, in some rare cases it can take up to 24-48 hours.
You Earned A Badge!

Need Help?

Install SSL And Configure WordPress
6.
Install the Let’s Encrypt SSL certificate in your SiteGround control panel. (Websites > Site Tools > Security > SSL Manager). 
An SSL certificate is extremely important for both security and Google search engine rankings. After installing the Let’s Encrypt SSL certificate your website’s URL will be using https://. This tells your visitors that they are accessing a secure connection and their personal information will be protected.
On the SSL Manager page, choose your domain from the first drop-down. In the second drop-down, choose Let’s Encrypt. Click the Get button to activate your SSL certificate.
In the sidebar, go to the HTTPS Enforce page and enable Enforce HTTPS.
7.
Log into your website's WordPress dashboard.
To log into your WordPress dashboard, first log into the SiteGround control panel and go to Websites > WordPress Kit > WordPress Admin.

This will launch the WordPress dashboard for your website. You can bookmark your website's WordPress login page after we show you how to change the URL structure later in this tutorial.
Exit the WordPress Starter setup by clicking the Exit link at the bottom of the page.
WordPress Starter is a plugin developed by SiteGround that walks you through a different method for launching a WordPress website. You can de-activate this plugin since it will not be needed for our tutorials.
In your WordPress dashboard, switch to the default layout by clicking the switch to default link at the bottom of the page.
8.
De-activate and delete any unnecessary plugins.
De-activate and delete the WordPress Starter plugin by SiteGround.
Go to Plugins > Installed Plugins and click Deactivate and then Delete.

WordPress Starter is a plugin developed by SiteGround that walks you through a different method for launching a WordPress website.
Leave the SG Optimizer plugin activated.
This plugin was created by SiteGround to help improve your website’s speed and performance. I recommend leaving it activated.
9.
Adjust the Settings > General options.
Add your site title (This should be your company name or brand name.)
Delete the tagline and leave that field empty.
Change the WordPress Address (URL) so that your URL is using https://.
Because you activated the Let’s Encrypt SSL certificate in the previous tutorial, you now need to make sure your website is using secure https:// URLs.
Change the Site Address (URL) so that your URL is using https://.
Because you activated the Let’s Encrypt SSL certificate in the previous tutorial, you now need to make sure your website is using secure https:// URLs.
Change your admin email address if necessary.
Your WordPress admin email will be the default email address used by WordPress and other plugins such as Elementor. For example, when you create a contact form with Elementor, form submissions will be sent to your admin email address by default.

Once you save your changes on this page, WordPress will send you a confirmation link to the new email address. Please note that your admin email will not be updated in WordPress until you click that confirmation link.

In a future tutorial, we will show you how to create custom email addresses for your domain, such as [email protected] You may want to wait until then to change this email address.
Click Save (you will be logged out since you changed your URLs to https://).
Bookmark your new login page and log back into your WordPress dashboard.
You can use this new URL to log into your WordPress dashboard instead of going into the SiteGround control panel.

Your WordPress login URL will be https://yourdomain.com/wp-login.php.
10.
Adjust the Settings > Discussion options.
Uncheck Allow people to post comments on new articles.
I recommend keeping comments turned off until your website grows and you have enough traffic for meaningful discussions.
Click Save.
11.
Adjust the Settings > Media options.
Uncheck Organize my uploads into month- and year- based folders.
I would turn this off so that your image URLs don’t show the year you uploaded each image (it can make your content seem old).

For example, let’s say five years from now I’m reading one of your blog posts and I notice that the image URL for one of your images is five years old. That might make me feel like your content isn’t up-to-date.

I prefer to hide any evidence of when my content was published so that it always feel current for the user.
Click Save.
12.
Adjust the Settings > Permalinks options.
Select Post name.
The Post name permalink structure uses the titles of your Pages and Posts as your URLs. This is really important for SEO (search engine optimization) since it makes your URLs more relevant and easier to read.

Keep in mind you can also manually choose your URLs each time you create a new Page or Post in WordPress. We will discuss this in a future tutorial.
Click Save.
You Earned A Badge!

Need Help?

Install Astra And Configure
13.
Install and activate the Astra WordPress theme.
In your WordPress admin go to Appearance > Themes > Add New and search for Astra in the search box. Click Install and then click Activate.

We tested many different WordPress themes for this course and Astra was easily our favorite choice. The Astra theme is continuously updated and their team is dedicated to making sure it works perfectly with Elementor (the visual drag-n-drop editor you will be using to build and design your website).

Astra’s theme settings are also much more intuitive than other themes, especially for beginners. And since their theme is super lightweight, your website will load much faster with Astra compared to other WordPress themes.

We will be using the free version of Astra throughout all of our tutorials. Astra also offers a Pro add-on with even more features.
14.
Download and import our recommended Astra settings.
Download our Astra settings file.
Below is a list of all the changes we make to the Astra theme's default Customizer settings when you import the astra-settings.dat file.

Global > Container >
Container Width: 1360
Layout: Full Width / Stretched

Global > Typography > Base Typography >
Family: Open Sans
Size: (18, 17, 16) px
Line Height: 1.6
Paragraph Margin Bottom: 1.4

Global > Typography > Headings >
Family: Libre Franklin
Heading 1: (3.4, 2.6, 2.3) em
Heading 2: (2.8, 2.3, 2) em
Heading 3: (2.3, 2, 1.8) em
Heading 4: (1.7, 1.6, 1.5) em
Heading 5: (1.3, 1.3, 1.2) em
Heading 6: (1.1, 1.1, 1.1) em

Global > Colors > Base Colors >
Text Color: #61636b
Theme Color: #0072e5
Link Color: #0072e5
Link Hover Color: #0856d3
Background Color: #ffffff

Global > Buttons >
Text Color: #ffffff
Background Color: #0072e5
Hover Text Color: #ffffff
Hover Background Color: #0856d3
Border Radius: 35 (5 if using rounded edge buttons, 0 if using straight edge buttons)

Blog > Blog / Archive >
Post Structure Featured Image: Not Visible
Post Structure Title & Blog Meta: Not Visible
Meta Comments: Not Visible
Meta Category: Not Visible
Meta Author: Not Visible
Archive Title Font Size: (1.7, 1.6, 1.5) em
Post Title Font Size: (2.8, 2.3, 2) em

Blog > Single Post >
Structure Featured Image: Not Visible
Structure Title & Blog Meta: Not Visible
Meta Comments: Not Visible
Meta Category: Not Visible
Meta Author: Not Visible
Post/Page Title Font Size: (3.4, 2.6, 2.3) em

Sidebar >
Default Layout: No Sidebar

Footer > Footer Bar >
Layout: Disable

Additional CSS >
h1 {line-height:1.2 !important;}
h2 {line-height:1.2 !important;}
h3 {line-height:1.3 !important;}
h4 {line-height:1.4 !important;}
h5 {line-height:1.5 !important;}
h6 {line-height:1.6 !important;}
p:last-child {margin-bottom: 0 !important;}
In order to import our settings file, install and activate the Customizer Export/Import plugin by the Beaver Builder team.
Go to the WordPress Customizer, click to the Export/Import tab and import the settings file you just downloaded.
Click Publish (if necessary) to save your changes.
15.
Purchase the Astra Pro add-on for even more features (optional).
You Earned A Badge!

Need Help?

Install Elementor And Configure
16.
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.
17.
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.
18.
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.

You will also need Elementor Pro if you want to use their 30+ pro widgets. For example, with their form builder widget you can create contact forms, surveys, and opt-in forms that integrate with email marketing providers such as MailChimp.
19.
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.
20.
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!

Need Help?

Create An Email Address
21.
Create an email address in your SiteGround control panel.
Log into your SiteGround control panel and in the Site Tools section go to Email > Accounts. Choose your new email address and password and click Create.
Adjust the mailbox quota to 2000MB.
Scroll down to Manage Email Accounts and next to your new email address, click the three-button kebab menu in the Actions column and click Change Quota. Slide the quota to 2000MB and click Confirm.
Configure your email client (or skip this step and watch the Gmail alias video tutorial below).
In the Manage Email Accounts box, click the three-button kebab menu in the Actions column and click Mail Configuration. Select Manual Settings to find all of the necessary settings needed to configure your email client.

If the recommended Incoming Server and Outgoing Server settings shown in your SiteGround account are not working, try using your nameserver URLs instead.

For example, if your ns1 nameserver is ns1.giow1001.siteground.us then your mail configuration will be as follows:

Incoming Server (POP3): giow1001.siteground.us
Outgoing Server (SMTP): giow1001.siteground.us

Make sure to use the nameserver URLs shown in your SiteGround account, and not the URLs shown above.

You can find the nameservers for your website by logging into your SiteGround account and going to Websites > Site Tools. Your nameservers will be shown on the main Dashboard page.
22.
Create a Gmail alias for your new email address (please watch our video tutorial below for this step).
You Earned A Badge!

Need Help?

Download And Import Our Templates
23.
Download our free templates (must be logged in).
Choose one of our existing color schemes or create your own.
To create your own color scheme, first choose one of our existing color schemes and then click the Edit Colors button. This will take you through our custom color scheme editor. Any custom color schemes you create will be saved to your account.

If you need help with our custom color scheme editor, please watch our video tutorial below. We discuss custom color schemes towards the end of the video.
Once the download has finished, unzip the download file.
After you unzip the download file, you will find five zip files inside. These are the files you will be importing into the Elementor template library.
24.
Import each of the five zip files into the Elementor template library.
In your WordPress admin, go to Templates > Saved Templates and click the Import Templates button. Click Browse and import each zip file one by one.

If you need help, please watch our video tutorial below.
Import the PAGE-templates.zip file.
Import the SECTION-templates-1.zip file.
Import the SECTION-templates-2.zip file.
Import the SECTION-templates-3.zip file.
Import the THEME-BUILDER-templates-(requires-pro).zip file.
You will not be able to import this zip file unless you have Elementor Pro activated.
You Earned A Badge!

Need Help?

Add Your Default Colors
25.
Add your color scheme colors to the Elementor color picker using our LP-SETTINGS-colors template.
Adding your most-used colors to the Elementor color picker is going to make creating your website go much, much faster.
Open our LP-SETTINGS-colors template to find the color codes for your color scheme.
Delete the existing colors in the color picker by dragging them into the trash.
Add all of your color scheme colors by clicking Edit Column > Style > Color and then click the + sign to add that color.
If you're having issues adding colors to the color picker (colors are being added as black) you may need to copy and paste the 6-digit color code into the color code box and then click the + sign.
26.
Add your color scheme colors to the WordPress Customizer.
In your WordPress admin, go to Appearance > Customize and then go to Global > Colors > Base Colors.
Copy and paste the colors shown in the LP-SETTINGS-colors template in the appropriate fields (Text Color, Theme Color, Link Color and Link Hover Color).
Next change the button colors by going to Global > Buttons and click the pencil icon next to Color. Copy and paste the colors shown in the LP-SETTINGS-colors template in the appropriate fields in the Normal tab and Hover tab.
Click Publish to save your changes (if necessary).
You Earned A Badge!

Need Help?

Pick Your Fonts
27.
Visit Font Pair to browse hundreds of Google font pair combinations and decide on a font pair for your website.
Write down the names of your favorite heading fonts and body fonts so that you can test them in the WordPress Customizer in the next step.
28.
Add your font pair to the WordPress Customizer. You can use our LP-SETTINGS-typography template to make this step easier. Watch our video below to learn more.
In the WordPress Customizer, go to Global > Typography.
To open the Customizer, go to Appearance > Customize in your WordPress admin.
Click on Base Typography and select the font you want to use from the Family drop-down list. Adjust the Weight and Line Height if necessary.
Click on Headings and select the font you want to use from the Font Family drop-down list. Adjust the Font Weight if necessary.
Our recommended headings sizes are as follows. These should have been automatically updated when you imported our recommended Astra settings in the previous step.

Heading 1: (3.4, 2.6, 2.3) em
Heading 2: (2.8, 2.3, 2) em
Heading 3: (2.3, 2, 1.8) em
Heading 4: (1.7, 1.6, 1.5) em
Heading 5: (1.3, 1.3, 1.2) em
Heading 6: (1.1, 1.1, 1.1) em
If you want to adjust the line height for your H1-H6 Headings, you can do so in the Additional CSS tab of the Customizer.
We added this Additional CSS code as a work-around for users using the free version of Astra.

If you want full control over Astra's typography settings (and more advanced features) we recommend upgrading to Astra Pro.
Click Publish to save your changes.
You Earned A Badge!

Need Help?

Create Your First Page
29.
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.
30.
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.
31.
Create more pages using the same process.
32.
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.
33.
Create a new page for your contact page.
34.
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.
35.
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.
36.
Click Publish to publish your page.
37.
Test your new contact form to make sure it's working correctly.
You Earned A Badge!

Need Help?

Create Your First Blog Post
38.
Create a blog post template using Elementor Pro's theme builder functionality.
Visit our theme builder preview page to find the Post Single template you want to use for your blog posts.
In your WordPress admin, go to Templates > Theme Builder and click the Single tab. Find your template and click Edit with Elementor.
To use this template as the default for all of your blog posts, edit the display conditions. Click Update > Add Condition > All Singular > Save & Close. I recommend watching our video tutorial for this step.
Display conditions will allow you to choose which blog posts should use this particular design.

In the future, you can create additional blog post designs for specific blog categories by using the display conditions.
39.
Create a new blog post by going to Posts > Add New in your WordPress admin.
Add your post title.
This title that will automatically appear at the top of your blog posts. The location of your blog post title is set in your Post Single template.
Click Save Draft and edit the permalink (if necessary).
After you click Save Draft, on the right-hand side there will be a box called Permalinks. This will be the URL for the blog post.
Select the appropriate categories for your post. You can create new categories if necessary.
Add a featured image.
If your Post Single template uses a featured image, the image you set here is what will be used. This featured image will also be used as the image thumbnail when you share this blog post on social media sites such as Facebook.

To learn more about creating images, view our tutorial on how to download, crop, resize, and compress photos.
Click Edit with Elementor.
Use our LP-POST-CONTENT templates to create your blog post. I recommend watching our video tutorial for this step.
Click Publish to publish your blog post.
40.
Edit your Single template with Elementor (I recommend watching our video tutorial below for this step).
Add one of our LP-POST-CTA templates to the end of the Single template and edit the contents.
Adjust the width of the LP-POST-CTA section.
I would use 900 or 1000 pixels if you want the call-to-action to be wider than your content. Or you could use 700 pixels if you want the call-to-action to be the same width as your content.
Make sure there is enough padding below the call-to-action so that it doesn't run into your footer (you will be creating your footer in the next tutorial).
For the bottom padding, the default we use in our templates is 100px on desktop, 80px on tablet, and 50px on mobile.
You Earned A Badge!

Need Help?

Create Your Archive Pages
41.
Create a new page and set the permalink as /blog/.
In your WordPress admin, go to Pages > Add New. This page will be your blog homepage (also known as a blog archive).

Set the title as Blog and click Save Draft. Click the Permalink box and set your permalink (/blog/ is usually the standard). Click Publish > Publish to make this page live.
42.
Set this new page as your blog archive by going to Settings > Reading in your WordPress admin.
In your WordPress admin, go to Settings > Reading and in the drop-down next to Posts page, select the page you just created.
43.
Design your blog archive page using Elementor Pro's theme builder functionality.
Visit our theme builder preview page to find the Archive template you want to use for your blog archives.
In your WordPress admin, go to Templates > Theme Builder and click the Archive tab. Find your template and click Edit with Elementor.
Customize the template if necessary.
Click Update and set the Display Conditions.
Display conditions will allow you to choose which archives use this design. To set this design as your site-wide archive design, go to Update > Add Condition > All Archives > Publish.

In the future you can create additional archive designs for specific blog categories by using the display conditions.
44.
Design your search results page using Elementor Pro's theme builder functionality.
Visit our theme builder preview page to find the Archive template you want to use for your search results page (either LP-ARCHIVE-07 or LP-ARCHIVE-07).
In your WordPress admin, go to Templates > Theme Builder and click the Archive tab. Find the correct template (either LP-ARCHIVE-07 or LP-ARCHIVE-07) and click Edit with Elementor.
Click Update and set the Display Conditions.
To set this design as your search results page, go to Update > Add Condition > Search Results > Publish.
You Earned A Badge!

Need Help?

Design Your Logo
45.
Visit Ucraft logo creator to create your logo.
Create a free account and log in.
Design your logo. I recommend watching our video below for this step.
Download your logo by choosing PNG with transparent background on the download options page.
Keep the full resolution version of your logos in a safe place. You may want to download your logo in different colors (white with transparent background, black with transparent background, color logo with transparent background, etc).
46.
Visit Ucraft logo creator to create your site icon.
Design your site icon. I recommend watching our video below for this step.
Download your site icon by choosing PNG with transparent background on the download options page.
47.
Visit BeFunky to crop and resize your logo and site icon.
You will need one regular size logo and one 2x logo for retina devices. (Watch our video below for more help with this step.)
You will want your site icon to be around 500 pixels wide. (Watch our video below for more help with this step.)
48.
Add both logos (regular size and retina size) to your website in the Customizer. You will find the Logo options by going to Header > Site Identity.
To open the Customizer, go to Appearance > Customize in your WordPress admin. In the Customizer, go to Header > Site Identity. In the Logo section, click Select Logo and upload your regular size logo.

Next, select the box for Different Logo for retina devices. Click Select image and upload your retina logo.
49.
Add your Site Icon to your website in the Customizer. You will find the Site Icon options by going to Header > Site Identity.
To open the Customizer, go to Appearance > Customize in your WordPress admin. In the Customizer, go to Header > Site Identity. In the Site Icon section, click Select site icon and upload your icon.
50.
Click Publish to save your changes (if necessary).
You Earned A Badge!

Need Help?

Add Your Header And Footer
51.
Create your header menu in your WordPress admin by going to Appearance > Menus.
Create a new menu.
Add any pages and posts you want to appear in your menu.
Edit the names for each page/post.
To create drop-down menus, watch our video tutorial below.
52.
Create a header using Elementor Pro's theme builder functionality.
Visit our theme builder preview page to find the Header template you want to use for your website header.
In your WordPress admin, go to Templates > Theme Builder and click the Header tab. Find your template and click Edit with Elementor.
Customize your header template on desktop, tablet, and mobile.
Make your header sticky (optional) by going to Edit Section > Advanced > Motion Effects > Sticky > Top.
Using a sticky header means that your header will "stick" to the top of the page as users scroll down the page. I usually disable the sticky header on tablet and mobile by removing those devices from the Sticky On options.
Click Update and set the Display Conditions.
Display conditions will allow you to choose which pages use this header design. To set this design as your site-wide header, go to Update > Add Condition > Entire Site > Save & Close.

In the future you can create additional header designs for specific pages by using the display conditions.
53.
Create a footer using the Elementor Pro's theme builder functionality.
Visit our theme builder preview page to find the Footer template you want to use for your website footer.
In your WordPress admin, go to Templates > Theme Builder and click the Footer tab. Find your template and click Edit with Elementor.
Customize your footer template on desktop, tablet, and mobile.
Click Update and set the Display Conditions.
Display conditions will allow you to choose which pages use this footer design. To set this design as your site-wide footer, go to Update > Add Condition > Entire Site > Save & Close.

In the future you can create additional footer designs for specific pages by using the display conditions.
You Earned A Badge!

Need Help?

Warning! You’re about to clear all progress on this site. Please type “CLEAR” into the field below and press continue.

Warning! Clicking the "Clear Progress" button will clear all of your progress on the site.

Additional Resources

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.