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

How to Create A Digital Marketing Agency Funnel For Booking Sales Calls

The following step-by-step video guide was created specifically for beginners (updated for 2020)

Matthew Averkamp

Before You Begin

Who is this sales funnel guide for?

We created this guide for beginners that want to create their own sales funnel website using WordPress. Our guide will walk you through how to create a basic sales funnel where the goal is to get your clients to book a sales call or strategy call with you.

This guide will provide you clear instructions for every step, from start-to-finish. We even added progress tracking to this guide so you can work through each step at your own pace.

All of the step-by-step video tutorials in this guide were created specifically for non-coders, non-designers, and absolute beginners. We take great pride in simplifying the process of creating beautifully-designed websites in a way that anyone can understand.


Testimonial: “The moment I discovered LaunchParty I knew it was something special. As a student I feel like the team has done everything they can to set me up for success in the course and in the wild. The structure is well thought out and delivered in a way that is easy to follow for any learning preference. Thank you for creating a truly phenomenal course. Five enthusiastic gold stars!” -Michele M.

I don't have an agency, can I still use this guide?

Yes, of course! This guide will benefit anybody that wants to create a sales funnel and get more clients by booking sales calls or discovery calls (coaches, consultants, designers, etc).


Testimonial: “As a small business startup I could not afford to hire a web designer. I am very computer literate, but trying to build a site using the hosting platform tools was driving me crazy and taking way too much of my time. I thought I’d give LaunchParty a try but I didn’t expect much from a free service (I was very skeptical). Wow, was I wrong. LaunchParty offers plenty of page and section templates and exceptionally valuable step-by-step walkthrough videos. I was able to put together a much better website than I had anticipated and in much less time. A million thanks to Matthew for making this amazing service available!” -Cyndi S.

Will this guide teach me Facebook ads?

No, this guide will not teach you Facebook ads. However, it is intended for users that want to convert paid traffic into clients using a sales funnel.


Testimonial: “This is the best method to get started in WordPress. The videos are more illustrative and easy to understand than all the others I have investigated. LaunchParty arms you with resources and knowledge at zero cost with well-explained lessons at an intuitive level, which you can adapt and use in any type of project you undertake. The template designs have something that designers value: good composition of the elements and visual hierarchy. They were much more suitable for my project than Elementor’s own templates and other templates on the web. It is the least I can do to say thank you for such valuable content and excellent tutorials.” -Ernesto C.

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).

What is Elementor?
Read our Elementor Pro review


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.

What is Elementor?
Read our Elementor Pro review


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.

Can I customize my sales funnel design?

Yes, of course! In fact, the goal of this guide is to give you the skills and confidence to create any kind of design you need, all on your own. And since you will be using Elementor to design your website, anything is possible! You’ll have fun (and feel empowered) to express yourself and give your sales funnel website your own personal touch.

What is Elementor?
Read our Elementor Pro review


Testimonial: “LaunchParty is INCREDIBLE! I have built websites on many other platforms, but it’s never felt easier, and I’ve never felt more in control. Each step is clearly explained, and I had a beautiful website up before I could believe it. I feel empowered to make changes and put my vision directly on my website. Huge thanks to LaunchParty for helping me build a website that impresses people everyday.” -Adam K.

How long will it take to create my sales funnel website?

This varies widely depending on 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 sales funnel and get everything integrated correctly.

Most of our students 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.

How much does it cost to make a website?

There are a few things you will need to purchase in order to create a sales funnel 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 somewhere around $10-15 per month. Our video tutorials will guide you through this entire process step-by-step from start to finish.

What is Elementor?
Read our Elementor Pro review
Read about SiteGround hosting


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

Is this guide 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.

What is Elementor?
Read our Elementor Pro review
Read about SiteGround hosting


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
1
Part 1

Register A Domain Name For Your Sales Funnel Website

Note: We have included a step-by-step Action Plan for each part in this guide where you can track your progress, watch our help videos, and read our FAQ.

 

Brainstorm Ideas For Your Funnel Domain Name

Before you register a domain name for your sales funnel website, you’ll want to do a little research and brainstorm some possible ideas. Sometimes it can be hard to find a good .com domain name that’s available to purchase. That’s why I recommend using a tool called Lean Domain Search to brainstorm ideas (even if you think you already know what domain name you want to use).

Once you’re on the Lean Domain Search website, simply enter a keyword and it will give you thousands of available .com domain names that include that keyword. In this guide we are going to be using the example of a digital marketing agency that manages Facebook ad campaigns for their clients. Some example keywords you could try searching for might be ad, ads, lead, leads, consulting, agency, ppc, boost, social, media, grow, growth, engage, convert, etc.

 

Lean domain search

 

Consider How Your Business Might Change

It’s always important to think about the future when deciding on your domain name. For example, how might your services change and expand in the future? If you’re currently a Facebook Ads agency, what if you want to expand into email marketing sometime in the future? Are you working locally or will you offer your services worldwide? Pondering questions like this can help you choose a more flexible domain name as your agency services evolve.

 

Register Your Domain Name With Hover

Now that you’re ready to purchase your domain name, I recommend using Hover as your domain name registrar. We like Hover because their checkout process is super easy to use and they don’t hassle you with any upsells. They also include free privacy protection on all orders (privacy protection hides your personal information from publicly available databases).

Visit Hover

 

Hoven domain name registrar

 

Did you know? Each part of this guide includes a step-by-step Action Plan (shown below) where you can track your progress, watch our help videos, and read our FAQ.

Your Action Plan Tasks For Part 1
1.
Visit Lean Domain Search to brainstorm domain name ideas before purchasing your domain name.
When using this tool, one-word keywords work best. Lean Domain Search will display all the available .com domain names that include the keyword you entered.

You can filter and sort the results on the right-hand side of the page.

If you need help coming up with keyword ideas, try the Power Thesaurus and Urban Thesaurus.
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?

2
Part 2

Sign Up For SiteGround Hosting And Install WordPress

 

Sign Up For SiteGround Hosting

Every WordPress website requires web hosting. To host your sales funnel website, I recommend using SiteGround hosting and choosing either their Startup plan or GrowBig plan. All of our step-by-step video tutorials in this guide assume you are using SiteGround.

Here are a few reasons we love SiteGround:

  1. Their customer support team is amazing. This is the #1 thing that sets SiteGround apart from other (similar priced) hosting companies. It only takes a few seconds to be connected to a live chat support agent that is extremely knowledgeable and will quickly assist you in resolving your issue.

  2. SiteGround has consistently proven themselves to stay on the cutting edge of technology. For example, they were one of the first to offer free SSL certificates and PHP 7 standard on all servers. They continue to add innovative features such as their site migrator plugin, easy-to-use control panel, Google Cloud infrastructure, and free daily backups with one-click restores.

Visit SiteGround

 

SiteGround WordPress hosting

 

Install WordPress

Once you’ve purchased your hosting with SiteGround, you’ll need to install WordPress and create a username and password for your WordPress admin area so you can start editing your website. This is really easy to do from within your SiteGround account. You can follow the step-by-step help videos in the Action Plan below.

 

Install WordPress

 

Change The Nameservers For Your Domain Name

Lastly, in order for your sales funnel website to be live, you’ll need to add your new SiteGround nameservers to your domain name in your Hover account. Be sure to follow our video tutorial below to make sure you set this up correctly. Keep in mind 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.

 

Nameservers

 

Did you know? Each part of this guide includes a step-by-step Action Plan (shown below) where you can track your progress, watch our help videos, and read our FAQ.

Your Action Plan Tasks For Part 2
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.
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?

3
Part 3

Install An SSL Certificate And Configure WordPress

Note: Before you can install your SSL certificate, you might need to wait until your nameservers have been updated (from Part 2). This usually takes less than an hour, however, sometimes it can take up to 24-48 hours.

 

Why You Need An SSL Certificate

Installing an SSL certificate is now a standard requirement for securing your website and protecting your visitors’ privacy (and it’s free with your SiteGround account). Once your SSL certificate is installed, web browsers will start to show your website as being secure. This will be especially helpful in building trust in your sales funnel when you start asking for clients to book sales calls, send payments, fill out intake forms, etc.

Keep in mind that if you don’t have an SSL certificate installed, some browsers will display a warning message to your visitors warning them that your site might not be safe.

 

Install An SSL Certificate In SiteGround

You can easily install a free SSL certificate from inside your SiteGround control panel. Just watch the video tutorial below and I’ll walk you through the entire process from start-to-finish.

 

SSL certificate installation

 

Configure The Most Important WordPress Settings

Once your SSL certificate is installed, you will need to tell WordPress that your URL structure has changed and that it should use https:// URLs. Your site won’t be secure until you take this step.

You’ll also need to configure some of our other recommended WordPress settings in your WordPress admin (general settings, discussion settings, media settings, and permalink settings). Be sure to follow the video tutorial below.

 

WordPress settings

 

Did you know? Each part of this guide includes a step-by-step Action Plan (shown below) where you can track your progress, watch our help videos, and read our FAQ.

Your Action Plan Tasks For Part 3
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?

4
Part 4

Install And Configure The Astra WordPress Theme

 

Install The Astra WordPress Theme

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 reason I recommend Astra is because it’s one of the best themes to use with Elementor (the drag-n-drop editor you’ll be using to design your entire 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 than other themes.

To install Astra, go to Appearance > Themes > Add New in your WordPress admin and search for “Astra” in the search box. Next, click Install and then click Activate to activate the Astra theme.

 

Astra WordPress theme

 

Configure The Customizer Settings For Astra

Now that Astra is installed you’ll need to configure Astra’s settings in the WordPress Customizer. There are quite a few settings that you’ll need to change, so we created a downloadable file (in the Action Plan below) with our recommended settings that you can import into the Customizer. This will save you a ton of time trying to adjust all the necessary settings individually.

If you want to see exactly which settings are included in our settings file, click the FAQ link in the Action Plan below.

 

Astra customizer settings

 

Did you know? Each part of this guide includes a step-by-step Action Plan (shown below) where you can track your progress, watch our help videos, and read our FAQ.

Your Action Plan Tasks For Part 4
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.
In your WordPress admin, go to Plugins > Add New and search for "customizer import" in the search box.

The official plugin name is Customizer Export/Import by the Beaver Builder team.

Click Install and then click Activate.
Go to the WordPress Customizer, click to the Export/Import tab and import the settings file you just downloaded.
To open the Customizer, go to Appearance > Customize in your WordPress admin.
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?

5
Part 5

Install And Configure Elementor + Elementor Pro

Why Elementor

Elementor has quickly become the most popular page builder for WordPress and is being used by more than 4 million websites worldwide. With Elementor, you’ll be able to visually design every aspect of your website with their drag-n-drop editor (no coding needed).

To follow along with this guide, and to access our library of 600+ free Elementor templates, you’ll need both the free version of Elementor and the Elementor Pro add-on.

 

Elementor page builder

 

Install The Free Elementor Plugin And Configure The Settings

There are some important settings you will need to configure after installing the free Elementor plugin, so I recommend watching our video tutorial for this step below.

 

Install The Elementor Pro Add-On

To follow along with this guide, you will need to purchase the Elementor Pro add-on. Watch our video tutorial below for instructions on how to purchase, download, install, and activate your license.

Purchase Elementor Pro

Here are some of the cool features you’ll have access to once you purchase Elementor Pro:

  • 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

 

Elementor Pro add-on

 

Did you know? Each part of this guide includes a step-by-step Action Plan (shown below) where you can track your progress, watch our help videos, and read our FAQ.

Your Action Plan Tasks For Part 5
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.

Read our Elementor Pro review (full feature list)
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?

6
Part 6

Create A Business Email Address For Your Domain

 

Why Create An Email Address

Using an email address with your domain name in it will look more professional than using a personal email address (such as a Gmail account). For example, the domain name I chose for my sales funnel website is samuraileads.com. So using [email protected] will look more professional than using [email protected].

 

Create Your Email Address In SiteGround

It’s really easy to create email addresses for your domain inside your SiteGround control panel. SiteGround allows you to easily create as many email addresses as you want. Watch the video tutorial below for step-by-step instructions.

 

Siteground control panel

 

Add Your Email Address As An Alias In Gmail

I recommend adding your new email address as an alias to your personal Gmail account. This way you can check your business email using an existing Gmail account. Since there are several steps to this process, you’ll want to watch our step-by-step video below.

 

Gmail alias

 

Did you know? Each part of this guide includes a step-by-step Action Plan (shown below) where you can track your progress, watch our help videos, and read our FAQ.

Your Action Plan Tasks For Part 6
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.

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.

Set Up Mail Account On A Computer
Set Up Mail Account On An iPhone
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?

7
Part 7

Download And Import Our Free Templates

 

Why Use Our Templates

In this guide, you will be using our free Elementor templates to design your entire website (sales funnel pages, header, footer, etc.). Using our templates will allow you to follow along with all our video tutorials and make learning Elementor a lot easier!

 

Download Our Templates In Your Preferred Color Scheme

To download our templates, you will first need to make sure you are logged in to our website. If you haven’t registered yet, click the “Sign Up” button at the top of the page. Once you’re logged in, you can visit the template download page and select your preferred color scheme.

I’m going to use the “Pure Sky” color scheme (with “Curved Edges”) for my sales funnel website. You’ll want to watch the following video (also found in the Action Plan below) to learn how to download these templates and import them into your Elementor template library.

Visit The Download Page

 

LaunchParty templates Pure Sky color scheme

 

(Optional) Create Your Own Custom Color Scheme

If you don’t see a color scheme you like on our download page, you can always “Edit” the colors for any color scheme. Keep in mind that creating your own color scheme is more suitable for advanced users (so I would try and keep any changes minimal). If you want help customizing one of our color schemes, you can use our recommended tools for color palettes and gradient backgrounds to get some color palette ideas.

 

Import Our Templates Into The Elementor Template Library

I recommend watching the video tutorial in the Action Plan below to make sure you correctly import our templates into your Elementor template library found in your WordPress admin.

Once the zip file is finished downloading you will need to unzip the file. After unzipping the download file you will find five additional zip files inside. These are the five files you will be importing into the Elementor template library. Again, I recommend watching our video tutorial below for this step.

 

Elementor template library

 

Did you know? Each part of this guide includes a step-by-step Action Plan (shown below) where you can track your progress, watch our help videos, and read our FAQ.

Your Action Plan Tasks For Part 7
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?

8
Part 8

Add Your Default Colors To Elementor And WordPress

 

Why Add Your Default Colors

Adding your most used default colors to the Elementor color picker is going to save you a ton of time as you design your website. It will give you quick access to the exact colors used in your sales funnel website so you don’t have to remember any color codes.

You’re also going to add a few of your color scheme colors to the WordPress Customizer. This will ensure that any default pages or 3rd party plugins (not controlled by Elementor) will use the correct colors from your color scheme.

 

Add Your Default Colors To Elementor And WordPress

We created a special template (LP-SETTINGS-colors) that will make adding your colors to Elementor and WordPress go super quick. Watch the step-by-step video in the Action Plan below to see how to add your colors using our LP-SETTINGS-colors template.

 

Elementor color picker

 

Did you know? Each part of this guide includes a step-by-step Action Plan (shown below) where you can track your progress, watch our help videos, and read our FAQ.

Your Action Plan Tasks For Part 8
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?

9
Part 9

Pick Your Fonts For Your Sales Funnel Website

 

Brainstorm Ideas For Your Font Pair

In this step you’re going to choose the Google fonts you want to use on your sales funnel website.

I recommend using a tool called Font Pair to browse hundreds of Google font pair combinations and decide on your preferred fonts. If you can’t find what you need there, you can also browse the fonts found on the official Google Fonts website.

You will need two fonts for your sales funnel website. One font will be for your headings/titles and one font will be for your body/paragraph text. You can watch the video tutorial below to learn more about how to choose your fonts and the difference between sans serif and serif fonts.

Visit Font Pair

 

As a digital agency, here are a few heading/title fonts I liked:

  • Source Sans Pro (this is the one I chose)
  • Lora
  • Playfair Display
  • Poppins
  • Montserrat
  • PT Sans

Here are a few body/paragraph fonts I liked:

  • Roboto (this is the one I chose)
  • Open Sans
  • Nunito Sans
  • Lato
  • PT Serif

 

Add Your Font Pair To The WordPress Customizer

Now that you know what fonts you want to use, you’ll need to add your heading/title font and body/paragraph font to the WordPress Customizer. We created a template (LP-SETTINGS-typography) for this step so you can visualize more easily what these fonts will look like on your website. I recommend watching the video tutorial below for this step.

 

WordPress Customizer font settings

 

Did you know? Each part of this guide includes a step-by-step Action Plan (shown below) where you can track your progress, watch our help videos, and read our FAQ.

Your Action Plan Tasks For Part 9
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.
This Additional CSS code was added as a work-around for users using the free version of Astra. (This code was added when you imported our recommended Astra Customizer settings in our Astra theme tutorial).

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?

10
Part 10

Create And Design Your Sales Funnel Pages

 

Three Pages Needed For Our Sales Funnel

It’s time to start designing your website! The user flow for our sales funnel will include three pages. I’ll walk you through designing each of these three pages. At the end I’ll also show you how to use Calendly to book your calls and how to integrate everything with MailChimp.

Page #1: Landing page with opt-in form (the landing page for your ad campaigns)
Page #2: Case study video page (the free case study video with a button to schedule a call)
Page #3: Thank you page with intake form (where you’ll pre-screen your potential clients)

 

Sales funnel three landing pages

 

Create Your New Pages In WordPress

Before you start designing your pages with Elementor, you’ll first need to create these new pages in WordPress. Let’s start with Page #1. There are three important elements that should be adjusted for every page you create in WordPress.

  • The page title (for search engine optimization)
  • The permalink (URL of your page)
  • The featured image (the image used when people share your site on social media)

Watch the following video tutorial for this step to learn more about each of these elements.

 

Sales funnel opt-in page

 

Design Your Pages With Elementor

To start designing your pages with Elementor, click the “Edit with Elementor” button to open the Elementor editor.

Below, I’ll show you exactly which templates I used and how I customized them for each sales funnel landing page. Remember, we will be using the Elementor templates we imported in Step 7 to design all of our pages.

You can either choose to start with one of our full-page templates and then add/remove the sections you need, or you can build your page from scratch using section templates like I did.

Before you continue any further, be sure to watch the video below for an in-depth guide to designing pages with Elementor.

 

Page #1: The Sales Funnel Opt-In Page

For the opt-in page, all I need to add is a simple title, an opt-in form, and an image.

I’m going to use a template from the “CTA MailChimp” category on the section template preview page. Watch the help video in the Action Plan below to learn how to add templates to your page. The specific template I decided to use was the LP-CTA-MAILCHIMP-25-img-right-dark-bg template shown here:

LP-MAILCHIMP-25-img-right-dark-bg

After adding this template to my page here are the adjustments I made:

  • I edited the main heading and changed the HTML tag option to be H1. The main title of your page should always be an H1 (for search engine optimization).

  • I added a repeating background pattern from Patterncooler and adjusted the background overlay colors. See our video tutorial on adding background images in Elementor.

  • I created two social media mockups using Smartmockups, one Facebook ad mockup and one Instagram post mockup.

    You will notice the two images I added are overlapping. I did this by adding two images to the column, and then I used a negative top margin on the bottom image so that it overlaps the top image. When overlapping two images, sometimes you need to set a Z-index value to the image you want on top (Advanced > Z-index). Any number value will work. Watch our video tutorial on using negative margins in Elementor.

  • Lastly, I adjusted the MailChimp settings for my opt-in form and made sure the correct MailChimp Audience and MailChimp Tags were selected. I’m going to use the tag “case-study” so I can target these users later in MailChimp. Feel free to add multiple tags if you want. For example, you could add a tag “ad-campaign-1” if you’re sending users to this page from a particular ad campaign. You’ll want to watch our video tutorials on setting up MailChimp and integrating MailChimp with Elementor.

    I want users to go directly to the case study page (Page #2) after signing up so I added a redirect that goes directly to that page. I haven’t created the case study page yet, but I know the URL is going to be /case-study/.

    Again, be sure and watch our MailChimp/Elementor tutorials if you need any help understanding the settings.

Here’s what the section looked like after my adjustments:

 

Sales funnel opt-in page desktop

 

For every section you create, you will also want to adjust the settings on tablet and mobile. I made some adjustments like centering the heading and configuring the negative margins for the two mockup images. It’s really important that your looks good on every device. I recommend watching our tutorial on adjusting the mobile layout in Elementor (Elementor has a lot of cool responsive settings you can use).

 

 

If you want to also use this page as your homepage, go to Settings > Reading in your WordPress admin. Where it says Your homepage displays, select static page and then select this page from the Homepage drop-down list.

 

Page #2: The Sales Funnel Case Study Video Page

This pages will be the page that users will be redirected to as soon as they sign up for our mailing list. The goal of this page is for users to book a strategy call after watching a video.

In the first section I’m going to use a template from the “Title” category on the section template preview page. The specific template I decided to use was the LP-TITLE-25-dark-bg template shown here:

LP-TITLE-25-dark-bg

After adding this template to my page here are the adjustments I made:

  • After editing the heading and subheading text, I made a few adjustments to the video. First, I changed the video image overlay. Next I made the play button a little bit larger, changed it’s color, and added a secondary blue shadow color. I also added a 20px top padding to the vide player to separate it a little bit more from the heading above it.

  • For my call to action I added a button below the video player. I copied this button from the pre-styled widgets template called LP-SETTINGS-widgets-dark-bg. You can watch our video tutorial to learn more about copying and pasting styles in Elementor.

  • I want this button to link to my appointment scheduler. In this guide, I will be using Calendly to schedule calls with potential clients. You could either link directly to the scheduling page hosted on Calendly or you could create a new page in Elementor and embed the calendar there with the HTML widget. I’ll discuss setting up Calendly and integrating it with MailChimp further down in this guide.

Here’s what the first section of the page looked like after my adjustments:

 

Sales funnel case study

 

Sales funnel book strategy call

 

After the first section, I added the following two templates from the “Logos” category and the “Testimonials” category on the section template preview page. The specific templates I used were LP-LOGOS-01-4logos-white-bg and LP-TESTIMONIAL-10-img-alternating-white-bg:

LP-LOGOS-01-4logos-white-bg

LP-TESTIMONIAL-10-img-alternating-white-bg

After adding these two templates to my page here are the adjustments I made:

  • I changed the background color of the logos template to light blue and then added four “featured on” logos. I used black logos with transparent backgrounds and adjusted the opacity in Elementor to lighten the color. I also adjusted the width of each image on desktop, tablet, and mobile so that they looked uniform.

  • I didn’t need to make any design adjustments to the testimonials template, I simply changed the images and adjusted the content. I also considered slightly reducing the size of the quote icons.

Here’s how the sections looked after my adjustments.

 

Sales funnel agency testimonials

 

Lastly, I want to add another call-to-action section at the bottom of the page for anybody that scrolls down (it’s always a good idea to have multiple call-to-actions that are easily accessible). For this section I added the LP-CTA-BUTTON-01-dark-bg template from the “CTA Button” category on the section template preview page.

After adding this template to my page here are the adjustments I made:

  • First, I made sure the button linked to my scheduling page hosted on Calendly (discussed laterin this guide). I also made sure the button wording was the same as the other call-to-action buttons on this page for consistancy.

  • Next, I added two shape dividers. An “Arrow” shape divider on the top and a “Triangle” shape divider on the bottom. You’ll noticed that the bottom shape divider gives the illustion of a subtle background design. I did this by changing the shape divider color to white and then reducingf the transparency. See our Elementor shape divider tutorial to learn more about using cool shape divider effects.

Here’s how the sections looked after my adjustments:

 

Sales funnel book call footer

 

Page #3: The Sales Funnel Thank You Page

Our thank you page is where we want to force users to fill out an intake form before we get on a call with them. This way you can qualify your leads and cancel the call if you don’t think it’s going to be a good fit. This can also be a good way to make sure your potential clients are prepared for the call. In my example I even added a personal video to help explain what they can expect on the call and get them motivated to follow through and take action.

For this section I added the LP-SURVEY-04-white-bg template from the “Survey” category on the section template preview page.

LP-SURVEY-04-white-bg.png

After adding this template to my page here are the adjustments I made:

  • I added a “Slashes” divider widget with some text that says “Intake Form (Requred)” to the top of the seciton.

  • I added a video that users can watch before filling out the form. This video will help explain what they can expect on the call and get them motivated to follow through and take action. I also copy/pasted the same video widget styling from the previous page I created.

  • I added a light blue “Curve” shape divider to the top of the section with a height of 500px on desktop so that it went all the way down to the middle of the video.

Here’s how the sections looked after my adjustments:

 

Sales funnel intake form video

 

And here are the questions I added to the Elementor form widget for the intake form:

  • Briefly describe your business:
  • What’s your biggest challenge right now?
  • How many clients do you have right now?
  • What is your 12-month goal (how many clients would you like to have)?
  • Have you used Facebook ads before?
  • Have you used any other pay-per-click advertising before?
  • What is your current average cost to get one client?
  • What is your monthly advertising budget?
  • Are there any questions you have about working together?
  • How did you find us?

 

Sales funnel intake survey Elementor form

 

You may want to design an additional thank you page in Elementor that you can redirect users to after they submit this intake form (optional).

 

How To Properly Integrate MailChimp And Calendly Into Your Sales Funnel

 

Set Up An Automated Email Sequence When Users Are Added To MailChimp

When users sign up to recieve the case study video I made sure they get tagged as “case-study” in MailChimp. This is done inside of the Elementor form widget. If you need help setting up your opt-in form see our video tutorial on creating MailChimp opt-in forms.

Next, I created an automated series for new subscribers to remind them to watch our case study video and schedule a call with us. When I created the automated email series in MailChimp I made sure that this sequence only goes to users tagged as “case-study”. This way it won’t interfere with other opt-in forms I might add to my site later. (I also added a condition so that users tagged “booked-call” will not receive these emails. I’ll discuss this tag below.)

 

Sales funnel MailChimp automated sequence

 

Set Up Your Calendly Booking Page

When users reach the case study page (page #2 above), they will be able to book a 30-minute strategy session. This will be scheduled using Calendly (or one of our recommended Calendly alternatives).

After setting up the appointment in Calendly, I added the booking page URL to all of my buttons in Elementor. Here is what the booking page looks like:

 

Calendly scheduling calendar

 

When Users Book A Call, Tag Them In MailChimp Using Zapier

When a user books a call in Calendly I want to tag them in MailChimp so that I can transfer them to a new automated email sequence (optional). This way I can start sending them emails to help them prepare for their call and eventually sell them on my services. Integrating Calendly with MailChimp can be done with a tool called Zapier.

In Zapier I set up MailChimp to “Add Subscriber To Tag” when “Invitee Is Created” in Calendly. I used the tag “booked-call” in MailChimp.

 

Integrating Calendly with MailChimp in Zapier

 

Start A New Automated Email Sequence For Users That Book A Call

Lastly, I set up an new automated email sequence for users that have been tagged “booked-call” in MailChimp. I also added a secondary condition that users must also be tagged “case-study” to receive these emails just to make double sure this is going out to the right subscribers.

 

Sales funnel MailChimp tagged sequence

Your Action Plan Tasks For Part 10
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?

11
Part 11

Design A Logo For Your Sales Funnel Website

 

Create Your Logo Using Ucraft

To design your logo, we’re going to use a free logo creator called Ucraft. You’ll be able to create your logo using their drag-n-drop interface and download the finished logo for free.

Later, if you want to improve your logo, I recommend hiring somebody using 99designs.

I highly recommended watching our video tutorial to learn how to add Google Fonts to Ucraft, add icons, auto-align icons with text, and export your logo. Also, you will need to be logged into Ucraft in order to customize your colors.

I ended up created a logo using my Source Sans Pro heading font and a samurai looking icon inbetween my company name “Samurai Leads”.

 

Logo creator

 

When you export your PNG logo, I recommend exporting several different versions (white logo, colored logo, black logo). This way you can use your logo on both light and dark backgrounds. You’ll want to keep these logo files in a safe place so that you always have a master copy that can be customized. You can also pay to download the SVG version of your logo if you need something larger than 600 pixels.

 

Create Your Site Icon Using Ucraft

Next, we need to create a site icon for your sales funnel website. A site icon is the small icon people see in their browser tab when visiting your website. It’s also the icon that’s used when somebody bookmarks your website or creates a shortcut to your website on a mobile device.

I used the same icon in my logo for the site icon. I also changed the color to a blue gradient using the two blue background colors from my color scheme.

 

Site icon creator

 

Resize Your Logo And Upload It To The WordPress Customizer

Before you upload your logo to the WordPress Customizer, you will want to create two different sized versions of your logo. One regular-sized version and one retina-sized version (for high-density displays). You can use BeFunky to do this. You’ll also want to resize your site icon if necessary and compress all of these images.

Once you’ve completed these steps you can upload both your logo and your site icon to the WordPress Customizer. Our video tutorial below will walk you through this entire process.

 

Did you know? Each part of this guide includes a step-by-step Action Plan (shown below) where you can track your progress, watch our help videos, and read our FAQ.

Your Action Plan Tasks For Part 11
38.
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).
39.
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.
40.
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.)
41.
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.
42.
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.
43.
Click Publish to save your changes (if necessary).
You Earned A Badge!

Need Help?

12
Part 12

Design A Minimal Header And Footer For Your Landing Pages

 

Create Your Main Menu

Since my sales funnel is mostly landing pages, I wanted to create minimal headers that don’t distract from my website’s content. So in this guide, I won’t be creating any menus for my header.

If you know that you want to add menu links to your header (About, Contact, etc.), you will need to first create your menu in your WordPress menu. You can do this by going to Appearance > Menu and create your menu. Watch the video tutorial below to learn more about WordPress menus.

 

Design Your Header With Elementor

Now you can go ahead and design your header using Elementor’s theme builder functionality. To get started, choose one of the header designs in the “Header” category of our theme builder preview page. I used the LP-HEADER-01 template. I highly recommend watching our video tutorial below for this step.

 

Website header

 

Elementor allows you to assign different headers to different pages using their display condition settings so you could create multiple headers for your website if you wanted to.

 

Design Your Footer With Elementor

You can create a site-wide footer in the same way you created a header, using Elementor’s display conditions and theme builder functionality. To get started, choose one of the footer designs in the “Footer” category of our theme builder preview page. I chose LP-FOOTER-01. I highly recommend watching our video tutorial below for this step.

 

Website footer

 

Did you know? Each part of this guide includes a step-by-step Action Plan (shown below) where you can track your progress, watch our help videos, and read our FAQ.

Your Action Plan Tasks For Part 12
44.
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.
45.
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.
46.
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?

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.