squeeze page and download page with elementor pro

How to build a Squeeze page and Download page with Elementor Pro

Elementor Pro now has Mailchimp integration, and that’s fantastic because now you can build a squeeze page and download page with Elementor Pro. Elementor Pro allows you to build our email list, and as page builders go for your online business, Elementor is now a serious contender among the other page builders. In this tutorial I’ll show you how to build a Squeeze Page and Download page with Elementor Pro, all from scratch.

How to Build a Squeeze Page with Elementor Pro

In this tutorial I’ll show you how to build a squeeze page from scratch, starting with a blank canvas.

You can use the awesome Elementor Templates as a start, and delete or change what you want, but this way you learn how to use the plugin much quicker, and you can create something unique while learning.

Create a blank Download Page

We’ll start with creating the download page as we’ll need this url, but we’ll design it after we’ve designed the Squeeze page.

After you’ve logged in to your WordPress website, go to Pages > Add New, and give your new page a title.

For download pages you want to exclude them from all search results.

I use Yoast SEO and the Search Exclude plugin. You may want to read this article on protecting your download pages.

Once you’ve protected your download page and published it. Copy the url, we’ll use this later.

Moving on to the Squeeze Page with Elementor Pro.

In this example we’ll be offering a cheat sheet on product creation called: 6 Steps Product Creation Cheat Sheet.

As before, create a new page. Here you want to name it according to the product you’re offering, in my case 6 Step Product Creation Cheat Sheet.add a new page

You’ll also want to select the template ‘Elementor Canvas’. This gives us a completely blank page to create our squeeze page.

This is a new feature which is awesome. Before I had to install a plugin for this, not it’s not necessary anymore.

Less plugins is always a good thing.

You’ll also want to give your page a focus keyword and write a little snippet for Google.

seo focus keyword and snippet

You can now publish or save the page as a draft.

Now that we’ve taken care of the seo setup, let’s create our awesome looking squeeze page!

Click the ‘Edit with Elementor’ button, where you’ll be presented with a blank page, see the example below.

Step 1 is to create a new section. Click the ‘Add New Section’ button and select the option with two columns.

We’ll be putting text on the left and our ebook image on the right.

Under this section add a new section, but this time select a single column layout.

You should be presented with something like the image below.

Now let’s work on the colour of our squeeze page.

Move your mouse over the top left column and click on the ‘section’ tab that appears. You’ll notice the settings panel on the left now shows options we’ll look at now.

Let’s change the background to a blue colour by clicking on the ‘Style’ tab, then select the paintbrush or ‘Classic’ option, and select any colour you want.

In this example I’m going to use a blue colour.

Back to the top left column, click on the ‘plus’ sign, this will show the elements available that you can insert into this column.

We’ll insert the ‘Heading’ element. Drag and drop this into the box.

elementor heading element

Now add a catchy headline, something along the lines of what I have: Discover How To Create Your Own Digital Product in 6 Easy-To-Follow Steps!

Click on the ‘Style’ tab and click on the Typography slider, set it on.

Drag the ‘Size’ slider to something quite large. I used 50px.

Set the following options:

  • Family to ‘Roboto’,
  • Weight to 100.

This gives a nice effect, you may play around with these settings until you get something you like.

Now we want to add some text below this header.

On the settings panel, click on the 9 squares, this will bring back the elements. As before, drag the ‘text editor’ element directly beneath the header element.

Replace the text with something further and equally enticing, to give your visitor more info on what benefit they’ll receive from your offer.

I used the following, feel free to use this as inspiration for your own offer:

Our free cheat sheet reveals the simple 6-step system you can use to create your own digital product.

Sign up today to learn how you can create your own product, to profit from over and over again.

 

On the style tab I set the font colour to white.

On typography, I set the font to Roboto, the size to 24 and the weight to 100. I also increased the line height to 1.5.

Now, moving on to the right column. Here we’re going to add our ebook image to give your reader a visual representation of the ebook.

Even though the book is digital, it’s always nice to show your visitor a well-designed mockup of the ebook in physical format.

You can get ebook designs done for you for $5 on Fiverr.

On the right column, click on the plus icon and drag the image element to this column in a similar fashion as you’ve done before.

I’m sure by now you’re getting the hang of this drag and drop visual editor. It’s super easy don’t you agree?

Now in the settings panel, click on the ‘Choose Image’ place holder and select the ebook image you’d like to use.

Pro Tip

You’ll want to use a png file rather than a jpg file. A png file allows you to have a transparent background, which is perfect for what we want.

A downside to a png vs a jpg is the file size is larger, so you’ll want to reduce the size of the file. I usually use dimensions of 450 x 600, or similar.

You can also reduce the file size even further by using tinypng. https://tinypng.com/

ShortPixel Image Optimization

The folks over at ShortPixel introduced me to their plugin which does some serious magic in image size reduction. I had a look, and even for this very article, I saved 25% in image size simply by using their plugin. I went even further and did my entire site, and this is the results!

image size reduction shortpixel plugin

The ShortPixel plugin reduced my image sizes by 33%! Really good stuff, I’m very pleased!

You might be wondering why image reduction is a big thing. Think of it this way, everything you see in your browser has to be downloaded to your computer, and all that takes bandwidth. If you have a slow connection you’ll know exactly what I’m talking about.

When it comes to squeeze pages, the speed of your page gets even more important, so by reducing the size of your images is a huge plus.

If you’d like to learn more about their solutions, check them out at: ShortPixel.

 

You should now have something looking like the start of an awesome squeeze page. Don’t worry, we’re going to make this look even better with some cool Elementor features!

elementor squeeze page setupRemember to save your work often.

You can see a preview of your page by clicking on the bottom left ‘x’ of the settings panel, then ‘View Page’.

Preview elementor page

Hold on, this next part is going to get cool!

Adding a Shape Divider to your Elementor Squeeze Page.

This is probably the coolest thing the Elementor team have added to their page builder, just take a look at all the options you have and you’ll realise how quickly you can make your page really stand out among all the rest with the shape divider feature.

On your page, move your mouse to any column, and click on the ‘Section’ tab.

Now head over to the ‘Style’ tab on the settings panel and select the ‘Gradient’ background type.

Choose two colours that will suit your offer, I chose a blue for the first and a dark purple for the second.

I changed the angle a bit to 220.

The Elementor Shape Divider Feature is an Amazing Feature!

Now expand the ‘Shape Divider’ feature box.

Here we have the option to add a shape divider to the top of the page or the bottom (or both). We’ll only add a bottom shape divider.

In my example, I’m going to select the ‘Pyramids’ option for the bottom.

I set the colour to black, moved the width a little and increased the height to almost full.

I inverted it too.

Save your work and preview your page now, and be prepared to be amazed!

Elementor Squeeze Page with Shape Divider

We’re almost done, all we need to do now is to add the lead capture element to our page.

Let’s make the background of this section black, to match the section above.

As before, click on the section tab, then on the style tab of the settings panel add a black background.

Here you can change the content width of to 700. This will ensure the email input field and button aren’t too large.

Get a free Mailchimp account

Next, you’ll need to get a free mailchimp account.

Once you’ve signed up, keep the account page open, but head back to your squeeze page.

Drop the ‘Form’ element to the section beneath the section we’ve just worked on, i.e. the white single column section.

You’ll be presented with new options that we’ll update now.

Form Fields

Keep only the ‘Email’ form field, delete the ‘name’ and ‘message’ elements.

Click on the ‘email’ element and update the placeholder to: Please enter your email address…

Keep required to ‘Yes’.

Give your form a name, applicable to the offer.

I set the input size to medium, and switch ‘label’ off.

email input form field

Submit Button

Update the button text to: SEND MY FREE REPORT

Set size to large.

You can add an icon if you want, I added the ‘cloud-download’ icon, to illustrate they’ll get a download for opting in.

submit button elementor

Here comes the mailchimp settings that you’ll need to add to the form.

Actions After Submit

Delete the ‘email’ tab in the ‘Add Action’ input box. Instead you want to add ‘Mailchimp’ and ‘Redirect’

Adding these will create two new setting boxes that we’ll update.

actions after submit

Mailchimp

Here you want to insert your mailchimp api key.  You can watch the short video below on how to do this.

Redirect

Here you want to insert your download page url you created earlier.

We can make the button look a little better, so on the ‘Style’ tab, on the ‘Button’ section, change the background colour to green and increase the border radius to around 55.

This will give us a green button with rounded edges.

Save your work and take a look at the awesome looking squeeze page you just build with Elementor Pro.

Final Touches to your Squeeze Page

Last Things we should add to our squeeze page is the homepage, privacy policy, cookie policy, disclaimer links, i.e. the legal pages you should have on your site.

To do this, add a new section and drag the text element to the section and update the text as required.

You can also drag the spacer element above this, so that these links are shown at the bottom of the screen.

To design is the download page, it’s really easy now that you’ve built your squeeze page.

Build a Download Page with Elementor.

Your download page is going to look almost identical to the squeeze page.

You want to keep the same visual for both pages, only on this page, instead of the email form, you’ll have a button with a link to the pdf you uploaded to Dropbox for example.

A very easy way to keep the pages looking the same is to save your squeeze page as an Elementor Template.

To do this, next to the Save button on the bottom left, click the folder icon, and then ‘Save Template’.

Save template with Elementor

Give your template a name applicable to the offer.

Now head back to your download page, open it with the Elementor Editor and load the template you just saved by clicking on your Templates Library.

Under the ‘My Templates’ tab, you’ll see your template. Load it and update it by only keeping the eBook image, a download button and perhaps say something like: Congratulations, Download your Cheat Sheet below.

Elementor Download Page

Congratulations, you’ve created a Squeeze Page and Download Page with Elementor Pro!

I know this was a lengthy article, but if you’ve reached this far, then you should be very proud.

You are done, you’ve build your very own highly attractive squeeze page with Elementor Pro and Mailchimp.

Your Free Elementor Squeeze Page Download

Since you’ve stuck around to the very end, I’d like to reward you with getting this far.

I saved the template I created in this tutorial for you to download.

It’s free for you to download. Download this squeeze page created with Elementor Pro.

You may also want to check out the best Page Builders that I use on a daily basis, and that’s Thrive Content Builder and Divi Builder: 3 Reasons I chose Thrive Content Builder over Divi Builder, and other alternatives

 

Download the 6 Step Product Creation Cheat Sheet.

You may be wondering where you can download the cheat sheet I’ve been using as my example. You’ll be pleased to know that I won’t keep this from you, you can download it below, as long as you take action and create your own product!

The Squeeze page is different because I don’t have Elementor Pro installed on my other site, but I think it’s striking nonetheless.

Click for the 6 Step Product Creation Cheat Sheet

 

Enjoy!

Oh and of course, if you have any questions, or something isn’t clear, please leave a comment below and I’ll do my best to help you out.

 

Please note: Some of the above links are my affiliate links. Should you decide to make a purchase through my link, I will get a commission with no cost to you. By doing so, I get to keep doing what I love, so I thank you for your support.

 

Leave a Comment: