What is Clickfunnels?

Clickfunnels is an innovative tool used to help business owners earn more money by creating easily customizable funnels. A funnel refers to the buying process potential customers go through from the time they first interacted with you and your content up until they become a paying customer.
Clickfunnels is a drag-and-drop editor specifically created for landing pages (aka squeeze pages). In other words, it’s a cheap and efficient tool for creating funnels (including landing pages, webinar pages, upsell pages, thank you pages, and everything else in between) that you can use to start building elegant funnels without calling a coding team.
Clickfunnels is one of the most popular software tools for creating funnels of all kinds. Clickfunnels has 7 different funnel template types you can choose from so you can make a number of funnels for whatever goal you’re trying to achieve.
The 7 different kinds of Clickfunnels funnels you can create are:

1. Optin Funnel – Goal: to create leads by capturing their email address
2. Sales Funnel – Goal: to make sales for your physical or digital product
3. Webinar Funnel – Goal: to get registrants for your webinar
4. Membership Funnel – Goal: to make sales for your membership site and create your membership site
5. Affiliate Funnel – Goal: to find affiliate marketers who will promote your product to their lists and make a commission from each sale and to create your affiliate members site
6. Clickpop Funnel – Goal: to capture email addresses by embedding the popup form on your website
7. Miscellaneous – Goal: Varies by each template (some templates include: a 404 error page, a coming soon page, a blog page, etc.)

Each funnel you create can contain multiple steps and you can mix and match the funnel templates, and thus, the goals for each step to match your business goals.
For example, if you have a product (digital or physical) that you want to sell you don’t necessarily have to start with a Sales Funnel. Instead, you can start with a basic Optin Funnel (to capture leads’ email addresses without necessarily needing them to finish the purchase). Then, in the next stage of your funnel you can have your Sales Funnel where they will make the purchase, then you can choose to send them to a Thank You page or a One-Time-Offer page to thank them for their purchase or ask if they’re interested in buying any other products from you.
Clickfunnels has become extremely popular in the past few years because their drag-and-drop editor specifically created for landing pages makes it easy for any business person to use to build elegant funnels (aka no coding work required!).
Unlike other sales funnel software, Clickfunnels is easy to use to gather leads and make sales (and any of the other goals you might be trying to accomplish in a given campaign).
Each set of funnel types comes with pre-made forms specific to the goal you are trying to accomplish. For example, your sales pages are equipped with forms that contain all the information needed to process a sale (physical or digital), i.e. email address, full name, credit card information, shipping address, etc. Clickfunnels features several types of integrations into popular payment processing software, so it takes minimal time and energy to set up your first funnel and start making money.

If you’re not using a funnel software or you’re using one where you routinely need to dish out hundreds of dollars to have a coding team code it for you, they have a 14-day free trial to try their service.
You can also trigger automated emails on each individual funnel step depending on if they took a certain action or not. For example, if your funnel started with an optin page in exchange for, say, an ebook, then you can trigger the email containing the ebook to be sent to everyone who fills out your form. You can even store your ebook file inside of Clickfunnels’ Digital Assets tab instead of on your website since big files such as an ebook slow down your site speed.
Or let’s say that someone opted in, went to your sales page, and decided not to buy. You can trigger an email to send to everyone who viewed the page but didn’t purchase to remind them that your offer exists.
You can even use your own registered domain to create your funnel! Click here for a guide on how to do this for a variety of domain hosts.
The best part about Clickfunnels is their templated funnel structures. Each template is pre-made with different sections for headlines, sub-headlines, media (images and videos), forms, text, etc. And you can add or delete any elements you wish from the template. This is great for quickly creating a funnel and driving traffic to it, however, as Clickfunnels grows it’s only going to get harder to make your funnel stand out from all the other people using the same template as you.
This is where graphic design services such as Design Pickle will help you customize your graphics on your funnel while leaving the main template in tact. It will give you the opportunity to not only quickly create a funnel, but will also help you stand out from all the other Clickfunnels members using the same funnel template as you.
In this guide, I will walk you through the process of creating a funnel, from start-to-finish, using our founder’s book, The Sober Entrepreneur, to show you how easy it is to use Clickfunnels in accordance with Design Pickle to make your next funnel the most profitable one yet.

How to use Design Pickle to take your Clickfunnels funnel to the next level

Step One – Define your goal

Before you can pick which template you want to use to start your funnel, you need to define a goal for your campaign.
Are you trying to increase your number of leads? If so, go with the Optin Funnel or the Clickpop Funnel. Do you want to sell more of your awesome product or service? Then pick the Sales Funnel. Maybe you’re doing webinar marketing to bring more awareness to your business so you’ll want to pick the Webinar Funnel.
Once you have your goal defined, you can move on to step two and pick your template.
Real-World Application: Our goal was to sell Russ Perry’s book, The Sober Entrepreneur. We used the Sales Funnel and decided to go straight to the order page (instead of starting with an optin page) because Russ had already created an optin page where you could get the first chapter from his book for free before it was officially released.

Step Two – Pick your template

This might be the hardest step in the entire process! But Clickfunnels makes it easy to decide which template best suits your needs.
You can filter the templates in a variety of ways depending on which template type you are using and what your goal is. For example, if you are selling physical products and want to be sure that your page form accounts for visitors’ shipping addresses, you can filter the templates to only show pages where forms account for the address.
You can also change the form and corresponding form fields when you’re editing the page, so don’t worry if a template style you like doesn’t already account for a shipping address.
You can see in the image below all the ways you can filter the Sales page templates (in the orange box).

After selecting your template, you need to name it. Pick something that won’t confuse you months down the road when you need to make tweaks to your funnel. Usually, describing the intended action you want visitors to take and the name of the product will be all you need.
The title you give to your template will become the site title that you see in your browser, so name it something relevant! (You can also adjust the name of your title in the SEO Meta Data tab.)
Then, click the “Create Page Now!” button to begin customizing your page.
Real-World Application: We decided to pick the Order Recap 2-Step template for a few reasons. The first reason we wanted a 2-Step form is so we can capture visitors’ email addresses even if they didn’t complete the first step of the funnel. Gaining their email address allows us to remind them via email to finish signing up for the book.
The second reason we chose this template is that it gives us more flexibility to elaborate on what’s possible inside of Clickfunnels for this guide. The Order Recap 2-Step template doesn’t have any pre-existing elements to help sell the book (copy, images, headlines, etc.). It’s pretty bare compared to other templates so we’ll have more wiggle room to customize this step of the funnel.
We named this step in the funnel Order The Sober Entrepreneur.
Onward!

Step Three – Customize your first step in the funnel

This step will look very different for each funnel hacker depending on your goals, the template you selected, and your business’s branding guide.
The template is preloaded with mock logos, headlines, subheadlines, benefits copy, money-back guarantees, title pages, etc. Each template will have everything you need for your visitors to take the desired action, but you might want to add more customization as you see fit.
Real-World Application: We want to add way more customization to our template because we picked one that didn’t account for more room to sell The Sober Entrepreneur to new visitors.

If you want to add more elements to your template, the first thing you need to do is select the elements tab from the menu at the top right-hand side then click “Add Element”.

Clicking on the Add Element button will load up all the different elements that you can add to your page. You can rearrange your elements at any time so if you know what elements you’ll need you can add them and then worry about the placement after you’ve added your copy and media.
Our page will need customization for adding:

• A video
• A section about the author, Russ Perry
• A section for testimonials from others who read the book
• A section to dive deeper into what’s inside the book and why visitors need it
• A section for the final call-to-action (CTA) headline and button
• A footer to add the copyright

First things first, let’s add a video.

You will have two different options to add your video:

1. embed it directly into the page (video)
2. have it appear as a thumbnail image that will link to the video in the video hosting platform you used (video popup).

For this example, we don’t want users getting distracted by the video and leaving the page to watch it, so we’re going to embed it directly into the post.
The two most popular options for video hosting are YouTube (obviously) and Wistia. We hosted our video in Wistia because it allows for more customization (such as adding CTAs, changing the color of the video playback, etc.).
Next, you need to find the video element from the lists of elements and drag-and-drop it where you want it to be.

After you add the video element, click on video element to load up the settings where you can link to your video.
First, you want to select where your video is hosted from in the Video Type box in the video settings.

Then, you’ll just need to add the link to your video from whichever video hosting platform you used. Clickfunnels makes it super simple for you because you don’t need to know how to find the embed code for whichever platform you’re using. Just copy the link of the video and your video is ready to go!

You can double check your efforts at any time by clicking on the Preview button at the top of the page.

Customization: Adding a section for copy about the author

Next, our template needs an entirely new section to add copy about the author. You won’t likely need to add a section for copy about the author of your product (unless you’re selling a book or an information product) but this will help you add a completely new section to any page template in Clickfunnels.
First, click on the Rows tab in the menu, and click on Add Row. You will have a few options on what kind of Row you want to add. Your Row can have anywhere from one to six columns as well as a left or right sidebar.
We will need a right sidebar column so we can add some copy about the book and a short biography about the author.

Now, we need to pick two elements to add to the new row. The left side will be dedicated to copy about the book and will contain these elements:

• Headline #1
• Paragraph copy
• Headline #2
• Paragraph copy #2 (bullet points)

You have a couple of different ways to add new elements to your new row. You can either follow the same method I described earlier in this post or you can click on the + button inside of your newly created row.

Then select the elements you’ll need from the elements menu. If you need additional elements in that column or row, you can click on the + button under your element.

Here’s what our version looked like before adding the copy:

And after:

As you’ll be able to tell, we need to change our font color so it’s easier to read. Another cool thing about Clickfunnels is that you can make bold text a different color. I am going to update our text to be white, but I’m going to have all bolded text appear as the same orange color you’ll find in the Wistia video and on the actual book cover.
To do this, you need to click on an individual element of text (headline #1, paragraph copy #1, etc.), then click on the gear icon to load up the settings.

You can adjust your font size, font color, bold font color, and more inside the settings!

Now I want to change the paragraph copy #2 element to have bullet points instead of dash symbols. Here’s how to create bullet points on a Mac and PC.
Alternatively, you can add bullet points with Clickfunnels Bullet List element, which I will use later in this post. It is slightly different than just adding bullet points.
Then, I want to have all the text in this section left-justified rather than center-justified.
Here’s how to do this:

Now, onward to the right sidebar!
I followed the same steps to add a new element, but this time the elements I need are:

• An image of Russ
• One line of text
• A subheadline
• Paragraph copy

Here’s what this section looked like before I added the images and copy:

And after:

Now let’s break this down step-by-step.

Adding an image to Clickfunnels

The first thing we want to do is add an image of the author.
To do so, click on the demo image element.

This will load up the image settings where you can choose an image, adjust the width and height, add the SEO alt text, pick a theme for how your image will look, and much more. Here’s what it looks like:

The first thing we want to do is upload the image then we’ll play around with the styling of the image. In your image settings, click on the image icon.

This will take you to a screen where you can upload new images or find all of your previously uploaded images. Upload your image by clicking the upload button at the top of the screen, then choose your image.
Then, select the image you uploaded and click the Add Image button. Voilà!
Now I need to add the copy:

How to add spice to your copy

So the copy is pretty ugly as is. I want the author’s name to really stick out. First thing I’m going to do is increase the text size of Russ Perry.

Now I want to add a border around Russ’s name to help it stick out from the rest of the text.
The first step was choosing a border color. Another awesome feature about Clickfunnels is how they store your recently used colors. I chose the same orange color I used for the left side of this section.

Next, I have to adjust my advanced border settings so we can see the border. Switch to the advanced tab in the settings and then set your border settings.
I needed to adjust a border radius settings, the border settings, the border style settings, and the border size settings.

I set the border radius to 10px, set the border to only appear at the top and bottom, selected the solid border style, and finally, set the border size to 3px.
The last thing I want to customize in this section is the background of the section. Here’s how you can do this:

On to the testimonial section!

Customization: Adding a section for testimonials

I’m going to follow the same process of adding elements as before. I won’t go into as much detail as I have above for brevity’s sake.
I need another headline, a left sidebar section, and finally, a CTA to wrap this section up. It’s important to have multiple CTAs on a page to make it as painless as possible for people to buy.
And adding a CTA to an order page is another way to show off Clickfunnels. Since we are shipping physical books, we need to have our customers’ addresses. They can only do this by filling out the form at the top of the page. However, each CTA we add to this page will scroll up to the form when clicked. No coding, no stress, no problem!
I decided to use a left sidebar for this section so I can showcase real Amazon reviews as well as more personal testimonials. And to break up the styling of the page and keep readers engaged! Follow the same process for adding the left sidebar as you did for the right sidebar above.
I added a simple headline to the left side of the testimonial section and I reduced the font size to 16.

Now I want to add the instantly recognizable Amazon logo. I’m going to use Clickfunnels’s integration with iconfinder.com to do this.

Customization: Adding an icon from iconfinder.com

First, I need to add an image element below the headline I added. Then I want to click the same image button I used to upload the photo of Russ. However, instead of uploading an image, I’m going to search Clickfunnels’s iconfinder database.
Here’s how to do this:

However, Iconfinder didn’t have the all-white Amazon logo I was looking for. So I downloaded the logo from Amazon and uploaded it into Clickfunnels.
You may need to resize images depending on how big or small they are. All Amazon logos, for example, are scalable in Adobe Illustrator. If you don’t have access to Adobe Illustrator (or you’d rather worry about creating an awesome funnel) you can send in the logo files to your Design Pickle designer with the dimensions you need and they’ll be happy to resize it for you!
I added a divider line after I added the Amazon logo. I set the width to 50%, aligned it center, increased the height to 3px, and added the same orange color as in the previous section.

Now time to add in the reviews!
I’m going to add two reviews in this left side section. Each review will need:

• Headline text for the headline of the review
• Text to add the name of the reviewer
• An image section to add in the 5 stars
• Text to add the review
• Divider lines

Clickfunnels doesn’t have any images of a 5-star review as you would see it on Amazon. To make sure you’re not infringing on any copyrights, you can send in a request to your Design Pickle designer.
Simply take a screenshot of a 5-star review on Amazon and send it to your designer!
Here’s what my screenshot looks like:

And what my design request looks like:

*Note: I picked the .png file type because .png files have transparent backgrounds and will look more professional when it’s added to Clickfunnels.
Now that I have all the assets I need I’m ready to build out the left side of this section.
I won’t go into as much detail because by now you should be a pro at adding text, images, and divider lines into Clickfunnels. If you’re having trouble, click here.
This is what the final version looks like:

Customization: Adding an Image Feature element

Now it’s time to add the testimonials to the right side!
Each testimonial will need a few elements:

• Paragraph text
• Text for name and position
• Headshot

For this section, I will use the Image Feature element rather than just the Image element. The Image Feature element contains a place to add text and an image on the same line. You can have your images appear on either on the right or left side of the text. And you’ll also adjust the column size percentages.
The cool thing about the Image Feature element is that it tells you exactly what dimensions you need for your headshot images. Don’t be afraid to send these into your Design Pickle designer to add some further customization to it (like adding a circle border color to your headshots!).
Here’s what the four Image Feature elements looked like before I added the headshots and text:

Now it’s time to add my copy, customize the color of the text, and add in the headshots for each testimonial. You can add images, adjust the text settings, and add more customization by clicking the gear icon for each Image Feature element.
Again, I won’t go into too much detail here since everything I’m doing was described above.
Here’s what this section looked like after I added the copy:

I had to use the headline box in the Feature Image element for the testimonial so I could add the name below the quote. But Clickfunnels makes it incredibly easy on you to update the text size in either the headline or the paragraph text section.
You just need to click each element’s settings button and slide the headline and text elements until they fit the template better.

Then, adjusting the color of the text is the same process as with any other element!
Here’s what it looked like after I changed the text size and color:

It looks much better but there are still some styling edits I want to make.
I want to make the images bigger, alternate which side the images appear on, and make them appear as circles rather than the squares with rounded corners. You can adjust each of these settings in the Advanced tab for the Feature Image section:

Then, I adjusted the spacing of each testimonial and the Amazon review section as a whole so they aligned better. Here’s what it looked like after I updated the spacing:

Next, I updated the headline (which still had the placeholder text) and I added a divider line between the headline and the reviews and testimonials. You should already be a Clickfunnels pro at updating headline text and adding divider lines if you’ve made it this far in the post! So, for brevity’s sake, I won’t go into all the details about how to do this.
Here’s what the final version looked like:

Now, to top this section off, I’m going to add a CTA at the bottom. And this is another area where Clickfunnels shines.

Customization: Adding a CTA (that scrolls back to the form)

Clickfunnels will know which kind of CTA you need depending on your template type. For example, our template requires visitors to provide their name, email shipping address, etc. so we can ship them a book when they’ve completed this step of the funnel.
Here’s where Clickfunnels’s brilliance comes in. You can adjust a CTA section to scroll the visitor back up to the form where they can enter their information.
If you haven’t created funnels in other software, you might not understand how crucial this is. Adding a CTA that scrolls back up to a form (as opposed to loading a new page) would likely require calling on your dev team and several rounds of trial and error before it worked perfectly. But with Clickfunnels, you just need to click a few buttons to set this up.
Here’s how you add a CTA to your template.
First, select the Button element from the list of elements:

You can adjust the action of your CTA once you add it. Here’s a GIF of me setting it up to scroll up to the form:

Next, I’m going to change the CTA color, increase its size, and add copy to it.
To change the color I went into the CTA’s settings and clicked the themes tab. From there, I selected the orange button theme.

Then I added the CTA copy and increased its size. You can increase the size by increasing the font size. I increased the font size to 27 and increased the subtext size
to 18. Here was the end result:

You can add more customization effects to your CTA under the advanced tab under settings. I’ll keep this simple and I’ll only show you one of my favorite options: Using the CTA icon picker.
I want to add an arrow that points to the main text in the CTA. So I went to the advanced settings tab and selected an arrow from the icon picker field. Here’s a GIF of me walking through the process:

There are plenty of other ways to spice up your CTAs so I would encourage you to test them out too!
The last thing I want to add to this section before it’s officially finished is some subtext below the CTA to help ease possible objections.

And done! On to the next one!

Customization: Adding a section about the book

I want to add a little more information about The Sober Entrepreneur and add some pictures from the book. I have four pictures that I know I want to add, so I decided to pick a 3 column section.
I will dedicate the left side (and one of the columns) to copy for the book and the remaining two columns on the right side will be used to add pictures of the book.
Here’s a GIF on how I spaced the three different columns:

I will need a two column section to live above this section so I can add headlines for the copy about the book as well as the images from inside the book.
Since I didn’t add this section before I added the three column section, I will show you just how easy Clickfunnels makes it to swap sections of your page. Here’s a GIF:

It’s really that easy!
Then I will just follow the same process as above to fill out this section with headlines, copy, and images.
I need the following elements on the left side:

• Paragraph
• Headline
• Bullet list
• Image

And on the right side:

• 4 images
• 4 subheadlines

I’ll refrain from going into detail about the elements we’ve already covered in this post. However, we haven’t used the bullet list element yet so I will discuss that element in detail.

Customization: Adding the bullet list element

The bullet list element is valuable because you can add icons to a standard bulleted list and you can also easily change the color of the icons. Again, this is another reason why Clickfunnels will simplify your funnel creation process.
Click on the setting gear for the bullet list element to change the color of the bullet icons. You will see this when you open the settings:

And you can change what kind of icon you want under the advanced settings tab.
Pro-tip: Search for the icon type you’re looking for to load all the available options.

Also, note that increasing the text size will also increase the icon size.
And I’m sure you noticed the white background for this section – I went with white to break up the monotony of a dark background section. I will update the entire background for this page before I publish it and set it live.
Onward!

Customization: Adding a final CTA headline and button

The page is now almost finished! We have forms, a video, a section explaining who Russ Perry is and why he’s authorized to talk about sobriety, a section of Amazon reviews and testimonials, and a section about the book itself.
The only remaining parts we need to add are the final CTA headline and button and the footer (where we will put copyright information).
This next section will only need one column and two elements:

• A headline
• A CTA button
• Subheadline below the CTA

We’ve already discussed all the elements needed in this section so I’ll spare you from the details.
Pro-tip: Make sure if you have multiples of the same element (e.g. CTA button) that they are the same size! To ensure your element are the same size, you can clone any element and then use the arrows to relocate the cloned element to go where you need it.
I cloned the CTA button and the subheadline text (that I placed under the button) from the testimonial section.
Here’s how you can clone an element:

And here’s a GIF showing how I moved the elements:

Boom! Now you know for certain that the buttons have the same color, size, and copy. And you saved time from rebuilding the same element again. Another score for Clickfunnels!
Then, I added the copyright information at the very bottom of the page. Here’s what the final two sections look like:

The page is almost done! I didn’t update the placeholder text and images at the very top of the page. After that’s done, I’ll pick a background and then we’ll move on to the second step of the funnel.
Replacing filler elements is as easy as it sounds. So I’ll do this “behind-the-scenes” then we can discuss changing the background images.
Here’s what the top of the page after I switched out placeholder text and images:

Customization: Making sections full-width

I noticed an issue with some of the sections I have created but I decided to wait to address them until I redesigned the background. When I entered preview mode, my sections weren’t filling the entire width of the page.

Notice how the grey section doesn’t cover the entire width of the page? This turned out to be a super simple fix but it did require one line of code.
The template I selected wasn’t correctly rendering full-width sections, but this is easy to change with this piece of code:
#container–97159 .containerInner {
        width: 100%;
}
You can copy and paste that code into your Custom CSS to fix this issue. However, you will need to update your container number as it will be different from mine.
Here’s how you find a container number for a specific section:
First, you need to load up your section’s settings. You can load your section settings by floating your mouse over the specific section. You will see a green line with the settings gear icon (among a few other options).

Don’t confuse this with the row or columns settings which will show blue lines and won’t span across the entirety of the page.

Then click the # icon (get CSS info) at the bottom of the section settings.

This will load up your container number for that section:

Next, open up your Custom CSS settings. Click settings at the top of the page, then select Custom CSS from the drop-down menu.

Then paste your container code:

Then add the rest of the code after your container code. Here’s the full code again:
#container–97159 .containerInner {
        width: 100%;
}
So just copy everything after the container id and paste it into your Custom CSS settings.
Pro-tip: Capitalization and spacing matters! For best results copy the code above.

It’s hard to see, but if you look closely, you can see how this section now covers the entire width of the page.
Here’s a GIF of me pasting the code so you can see the changes in real-time:

This caused an error in the styling of this section. So I’m just going to drag the right column until it fits the new section better.

I also did this same process for the white section that didn’t expand across the whole width of the page.
Now we’re ready to customize backgrounds!

Customization: Backgrounds

The grey background for the section I just adjusted is pretty… ugly. So let’s change that!
You have a few options when it comes to adding custom backgrounds for specific sections or the whole page. I’ve decided that I like the template’s original background, but I want to change the ugly grey background into something better.
In the column settings, you can add a background image. Clickfunnels has different backgrounds you can use. Simply click the image icon in the column settings to look for a new background.

Then click the Background tab from the menu inside of Clickfunnels to load up all the backgrounds they have in their library:

Then just select the background you like and click add image.
If you don’t like the background you selected, you can either select a new one or delete the image URL from the column settings. Here’s how you delete the image altogether:

I’m not in love with any of these backgrounds, so I’m going to call on my Design Pickle designer to create one for me.
Just send in a design request through your Design Pickle account and you’ll be on your way! You can also use your Design Pickle account to find stock images with Getty Images. I decided that a nice stock image of Arizona mountains would be most fitting for this section.
Here’s what my design request looks like before I found a stock photo:

And here’s a GIF of me using Jar to find a stock photo I like:

Pro-tip: Your Design Pickle designer can also find stock images for you if you’re pressed for time!
And then I’ll just add the image to Clickfunnels and insert it into the section. Here’s what the final section looks like:

Customization: Don’t forget to check the mobile size!

It’s important to double check that your site looks good on mobile screens as the use of mobile actually beats the use of desktop in 2018:

You can switch to mobile size by clicking the mobile button at the top-left of the menu:

I noticed that the testimonial images were being flip-flopped with the testimonial text on mobile screens because of the way I originally formatted it. So I decided to have all the text appear first and the images second for the testimonial section.

Everything else looked great on mobile, so the design for this page is complete!

Customization: Adding SEO info

The last step for the first step of the funnel is to add SEO data to your page. The SEO Meta Data tab under your settings is where you can update this information.
Clickfunnels will also let you know that you haven’t updated this section yet if you try to save your page.
The SEO Meta Data is where you’ll give your page a name, add a description, add some keywords to it (so your page can be found via Google), and add an image for social sharing.
Here’s what this page’s SEO Meta Data looks like:

Adding your product and a method for delivery

Next, you need to do is add your product and if it’s a physical product then a method for your product to be delivered.
We’re shipping a physical copy of Russ’s book, The Sober Entrepreneur, so I’ll walk you through setting up a product and a method of delivery.
First, save your page then click on the exit button in the top menu.

This will take you back to the funnel settings where you can set up products, automated emails, and more. Then, you need to click on the Products tab:

Note: I’ve been developing this page as a B test to the live A version. So the products have already been added. So I will use a test funnel to show you how easy setting up a product and method for delivery is.
Once you’re on the Products page, you need to click on the + Add Product button:

You will add the name of your product, the billing integration you have (Infusionsoft, Ontraport, Stripe, or Braintree), enter the price, and the price displayed on your order forms under the Settings tab. If you’re using a Stripe integration to process payments, you will need to give your product a description and check the box of whether it is a subscription or a one-time payment.
Here’s what the page looks like when the product info is added:

Pro-tip: Add different products if you’re selling domestically and internationally as it will cost you more to ship physical items internationally.
Then you can add a fulfillment email. If you add an email integration, your messages will be sent from that service. If not, Clickfunnels will send them for you. Click here to see Clickfunnels’s help docs about integrating an email.
Also, if you’re selling a membership you can also add this under the Membership settings. You’ll need to add your integration to your membership service before you can update this section. Click here to see Clickfunnels’s help docs about integrating other services.  I’ll walk you through setting up a Membership in the next step of the funnel.
Back to the example! We can select a delivery method for the physical book we are selling under the Shipping settings. Clickfunnels is integrated with Kunaki, Disc Delivered, and Shipstation.
Pick whichever delivery method you would like to use. We used Shipstation to deliver the physical copies of The Sober Entrepreneur.

The final step before creating your product is updating the Affiliate settings. Currently, you can only make your product commissionable if you’re using Stripe to process your payments.
Check the box if you want to be able to reward affiliates for selling your product. If not, make sure it’s unchecked. Then select the create product button.

Now you’re ready to go! Click here if you have any questions about this aspect of creating your funnel.

Automation: Set up automated emails

The last piece of this funnel puzzle is to set up automated emails. It’s important to wait to do this until after you’ve added your product because you can trigger different emails to send based on the actions that were (or weren’t) taken on the page.
This is another area where Clickfunnels’s value is unmatched. You have three options for email automation on pages where a purchase is involved. These options are:

• Sending an email to everyone who viewed the page
• Sending an email to everyone who saw the page, but didn’t purchase
• Sending an email to everyone who purchased

Click on the Automation tab In your funnel settings.

Then you can add emails or SMS texts based off of the individual triggers. If you want to send SMS texts, you will need to create a Twilio SMS Integration.
You need to select the + Add New Email button to create an email.

Then, you will fill in the email details, select the targeting, and select an email template.

Most of the email templates you can choose come with placeholder images that specify the dimensions of the image needed. This makes it super simple to send your graphic idea to your Design Pickle designer and specify the dimensions in Jar. This will ensure that your graphic fits perfectly and won’t be subject to any weird stretching that commonly occurs when adding graphics to an email.
You can even preview different email templates to get a better idea of how they’ll look. Then, click the Create Email button at the bottom once you have your template selected.

You will see your email under whichever targeting option you selected once your email is created. Click on the Open Editor button to craft your message.

For this example, I selected an email template that didn’t have the dimensions pre-loaded in the placeholder image so I could show you how to find this out.
Simply click on an image to load up the dimensions and other settings:

Now you can see the dimensions you’ll need to submit a design request to your Design Pickle designer:

As you can see, the dimensions are 540 x 655 px. Just label this in Jar on your design request and your image will be a perfect fit.
Now you’re ready to craft a perfect message (with graphics that fit!) to either thank your customers for their purchase or remind them that they haven’t finished their purchase!
The following two pages (the one-time offer page and the thank you page) won’t need nearly as much customizing and I won’t go into as much detail as I have for this section. I’ll explain new elements I haven’t used as I come across them, but fully customizing this page for you should’ve given you a comprehensive review on how to use Clickfunnels (and Design Pickle!) to beautify your funnel.
Onward to the OTO (one-time offer) page!

Step Four – Customize your second step in the funnel

This is where the magic from Clickfunnels really comes into play. If you’re unfamiliar with Russell Brunson’s story (the founder of Clickfunnels) this step in the funnel helped him save his college business and he used this methodology as a catalyst for his Clickfunnels tool.
The second step in your funnel should be a one-time-offer, also referred to as an upsell. The idea behind this step in your funnel is to incorporate the six most profitable words in history and use them to make more money.
So what exactly are these six words that are more profitable than any other collection of words in history? I guarantee you’ve heard them before…
“Would you like fries with that?”
So simple, yet so profitable! And so, this step in your funnel is basically you asking your customers if they would like to add fries to their order.
Obviously, you won’t actually be selling fries but that is the framework in which you should use to create this page.
Think about it – whoever comes to this page just had a positive interaction with you (otherwise they wouldn’t have bought whatever it is that you’re selling). And now is your best chance to put another product in front of them that will bring value to their life and that they would be happy to buy.
If you’ve selected the Sales Funnel at the beginning on creating your funnel, then you should already have a step for the OTO page. If not, you can simply add an OTO page by selecting the Add New Step button, naming your page, then picking an OTO template from One Click Upsell tab under the Sales menu.
You’re ready to begin customization once you have selected a template.
I used the OTO Video Page template to upsell Russ’s bonus content videos and action gudies for each chapter from his book for this example.
The OTO page should be considerably less involved than the first page in your funnel. Remember: if they’re seeing this page they’ve already become your customer. Now is the time to measure just how interested they are in other, related products you’re selling.
Pro-tip: Use urgency and scarcity on your OTO pages to inspire the desired actions of your customers. Emphasize that this product is truly a one-time-offer and if they don’t commit now, they’ll forever lose the deal. You can even enter a countdown clock!
With that in mind, there are only a few changes I need to make to this template:

1. Update all the copy
2. Add a Wistia video Russ recorded talking about the bonuses
3. Add a progress bar
4. Add a countdown clock
5. Add a small section about the bonus video content and action guides
6. Add a relevant background image

I will refrain from going into excessive detail about steps that we’ve covered above, but I will show you how to add elements we haven’t discussed yet.

Customization: Adding a progress bar

I knew I wanted to add a progress bar after I added the video of Russ talking about the bonus content. I thought that it would help create urgency for all the customers who came to this page.
Adding a progress bar is really simple.
First I went up to the Elements menu in Clickfunnels and opened it. Then I scrolled down to the progress bar element:

Side Note: If your video isn’t showing up in the template editor, just save the page and preview it in a new tab. If you added the video correctly it will show up in preview mode!
Then, I dragged the progress bar element under the video.

Now, I want to move this element so that it appears on top of the video. I wasn’t able to do this when adding the element, so I’ll simply move it now that it has been added to the template.

Now I’m ready to update the colors and the copy in this element. Editing the progress bar element is no different than editing any other element. You just need to click on the gear icon in the orange element settings and it will open the settings.

Which will open the setting where you can update the copy and the color:

I’m going to stick with the same orange color we’ve used throughout this funnel, update the copy to say “Get The Bonus Videos and Action Guides…”, and reduce the top margin for this element to 0.

Then, I’m going to change the theme and some of the advanced settings for the progress bar.
Under themes, I’m going to select the Animated Stripes theme. This theme will turn the progress bar into an animated element that will add a little more flair and hopefully encourage the visitors to watch the video and buy the bonus content.

As you can see, selecting this theme actually made the progress bar go to 75% filled instead of 50% filled. You can update this under the advanced settings.
Under advanced settings, I changed the progress bar to fill up 66%, changed the size to medium, changed the text to be bold and italicized, and added a corner of 10px to so the progress bar would be slightly rounder (20px is completely round and 0px is completely square).

Then, I’m just going to double check the color of the progress bar matches the color I set for my video in Wistia.
First, I need to save the page:

Then, I need to open it in Preview Mode:

And here’s what it looks like in Preview Mode:

And it’s a match!
If you’re having trouble matching the exact color, you can always send in any assets to your Design Pickle designer and they can check the hex code of the color in question for you!
Now let’s add a countdown clock!

Customization: Adding a countdown clock to your page

In order to build this, I’ll need to create a new section containing two one-column rows for a headline and the countdown clock.
I won’t go into detail on this since you should already be a Clickfunnels pro at adding this.
You have a few different options in terms of what kind of countdown clock you can add. There are three different countdown clock options and each of them varies in their purpose. The countdown clock options are:

1. Countdown – this countdown clock will count down to a specific future date and time.
2. Day Timer – this countdown clock will count down to a specific time today. You can pick the time and the time zone.
3. Minute Timer – this countdown clock will count down from X minutes and will start over on each pageview. You also have some options for configuring this timer for visitors who see this page multiple times.

I selected the Minute Timer for this page because I want to create a sense of urgency and scarcity for visitors so they hopefully take this offer.
You can configure how many minutes this timer will count down from in the settings. I set this timer to count down from 15 minutes.
You can also change what happens when the clock hits zero. You can either redirect the page to go somewhere else or hide and show specific elements when the clock hits zero.
When you redirect the URL – it will automatically load up the destination link when the clock hits zero. This will likely create real urgency but it could also confuse visitors who were going to convert but didn’t have the chance.
Here’s an example:

I set the timer to only 10 seconds for this example.
If you go with the latter option, then you should create some additional elements and hide them and then show them when the clock hits zero. For example, your original offer could be for 50% off, then when the clock hits zero, the offer becomes only 20% off.
I went with the redirection option and linked it the full price Kajabi page. But I’m also going to set the re-visit action to Auto Reset Timer so visitors who miss out on the 50% offer can come back and access it.

The reason is that I want them to know the true value of the bonus content and so that they can continue to the thank you page if they’re not interested.
Next, I updated the theme of the countdown clock and made it bigger. To update the theme, just select the themes menu and select the option you like the best.

And you can update the size of the timer in the advanced settings.

Next, I’m going to add some copy about the bonus content under the countdown clock.
Here’s what the final version looks like:

Customization: Adding a background image

The last thing I need to do to this page is to add a relevant background image. I’m going to use my Design Pickle subscription to Getty Images to find a cool background image again.
I selected a background image that had focal points on either side as the middle will be blocked by content. Here’s what the final version looks like:

Then, I changed the top two sections background color (the video and the countdown clock) to grey and added some transparency.

Then you need to update the SEO information. I won’t go through this process again since I described it above.
Time to add the OTO product!

Adding your OTO product

I don’t need to change anything with the CTA button on this page. This is yet another area where Clickfunnels is easier than the competition. Clicking the CTA button will automatically add the charge to their credit card (since they added it on the previous funnel step) and the course will be automatically delivered via Kajabi.
Setting up a Clickfunnels-Kajabi integration is super easy. First, make sure you save your page and then click the Exit button in the top menu.
Now that you’re back on the funnel settings page, click the product tab and make sure you’re adding a product to the correct page!
You will add the pricing information, billing information, and email automation the same way as described above. However, pay attention if your OTO is a membership subscription as the bonus content for The Sober Entrepreneur is.
We are going to deliver the bonus content via Kajabi. Click here for information on how to set up a Kajabi integration. And here for other integrations.
I set up the pricing and billing information the same way I did above.
Then, I went to the Membership tab since the bonus information requires a membership to Kajabi. Here’s what it looks like:

Then I just need to select the create product button, create some automated emails, and this page is ready to go!
Onward!

Step Five – Customize your final step in the funnel

We’re finally ready to wrap up this funnel with a bow by creating a thank you page. Your thank you page is a great opportunity to further engage your new customers.
The thank you page is valuable real estate! Make sure you thank them and let them know their purchase will be delivered shortly. But don’t just thank them – give them another (less painful) action to take.
You could have a CTA to have them check out other products you have, your website, or your social media.
For the Sober Entrepreneur funnel, I’m just going to have them follow Russ on social media.
Pro-tip: You can create different thank you pages for each action of the funnel. For example, you can have a thank you page for those who purchased your OTO as well as one for those who didn’t purchase your OTO but purchased your main product. You might want to craft different messages and different actions based on how well they engaged with your products.
You can create your thank you page following the same steps above on how to create a new page in your funnel.
Here’s what I’ll need for the thank you page:

• A headline and subheadline
• A Wistia video of Russ thanking everyone who purchased his product(s)
• A confirmation of the total price they paid for his book and bonus content
• A money back guarantee
• Two CTA buttons to follow Russ on social media

I won’t go into too much detail for this section as we’ve discussed nearly all of these elements above.
I am going to use a two column row and put the Wistia video on the left and the purchase information and CTAs on the right side. In the subheadline, I specified that I want the new customers to follow 3 steps – confirm their purchase details, follow Russ on Instagram, and follow him on Facebook.
So I’m going to add a small blue headline of each of the steps. Here’s what the final version looks like:

Pro-tip: If you have text or CTA buttons that are going to be the same color and size just clone the original text or button so you can save time and ensure everything is exactly the same!

Customization: Adding an external link to a CTA button

We haven’t needed to add an external link on a CTA button until now. But it’s super easy.
First, click on the CTA button to load up the settings. Then click on the Set Action button in the settings:

Then copy and paste the external link where the hashtag is under the Set Action settings:

Pro-tip: After you add your link, set it to open in a new tab/window below. This is especially important if you want your customers to take more than one action. Opening links in a new tab or window makes it easier for them to get back to your thank you page and complete the rest of the actions.

The red box under the CTA will turn grey and show the link if you updated the CTA properly.

Customization: Add a money back guarantee

The next thing we need is to add a money back guarantee under the video. I’m going to use the Featured Image element for this.
We already added an Image Feature element before, but I want to show you how to find the stock badges provided by Clickfunnels.
And you can always use your Design Pickle designer to make you a badge if you don’t want to use the ones provided by Clickfunnels.
First, you need to click on the settings of the Image Feature element.

Then you need to click on the image button to load up Clickfunnels’s image database.

You will want to search either Pixabay.com (under the Search tab) or search the badges tab (under the Stock tab) once you’ve loaded the image database.
Here’s Pixabay:

And Stock:

Then just double-click on an image you like to add it to the Image Feature element.

Customization: Finishing touches

I noticed my video was too small when I saved my page and previewed it in preview mode.

In order to make it appear bigger, I just need to adjust the columns feature. Here’s how you can do this:

And here’s how it looks when I save it again and open it in preview mode:

Next, I need to add footer copy and enter the SEO information. I already showed you how to do this above, so I’ll do this behind-the-scenes and the funnel will be ready officially ready for traffic!

Conclusion

I hope this article has given you a better understanding of not only how to navigate through Clickfunnels and setting up a funnel but also how you can use Design Pickle to make your funnels stand out and sell more.
There are a few other extremely helpful features that didn’t quite fit in anywhere else. They are:

1. If you get logged out without saving, Clickfunnels will allow you sign back in (in a new tab) so you don’t lose all of your hard work
2. Clickfunnels will remind you to update your SEO information each time that you try to save

If you made it this far, you should know just how valuable Clickfunnels is to help non-techy people thrive in the digital landscape we find ourselves in. Not only will you be able to add any elements you need (and know they’re working properly) but using Clickfunnels will save you money and your sanity trying to figure out the coding problems you will encounter on other platforms.
Even though we walked through this process for a Sales Funnel, just about everything you learned in this article can be applied to all the other funnels as well (you just need to redefine your goal).
We’d love to hear from you if this has helped you or if you have found other ways to use Design Pickle to help beautify your funnels.
Don’t ever stop putting the fun in ClickFUNnels 🙂
Clickfunnels has a free 14-day trial so you can try Clickfunnels for yourself. Click here to get started.