“The best way to learn a new skill is to practice it and then try explaining it to someone who knows nothing about it.” -Bryce Ward 5/22/2020

What Is ClickFunnels?

ClickFunnels is a website builder focused on creating funnels to sell products and generate leads. This tool is an excellent starting point for businesses to not only build sale funnels but also track the information collected from visitors to assist businessmen in planing new products and sale tactics.

How am I using it?

At Stupid Raisins, I am learning how to create funnels using Clickfunnels. I started off by trying to copy the Stupid Raisins product pages. It has taken me around two weeks to create an almost identical copy of Stupid Raisins’ Top Pop page. In those two weeks, I have come across a few challenges that stumped me at first, and I am going to share with you how I solved those issues.

1. Buttons

When it came to creating my first buttons, I got the basics correct. Place the button element into the section, then change the text, color, and add a link and your good to go. However, there was one problem.

My buttons were way too far apart! As you can see in the above picture, my buttons in the lower set were not spaced correctly. So after some tinkering and searching for answers, I found an advanced section in the editor tab after clicking on the button elements. For my left and right buttons, I found an alignment tab and changed it so that they were closer to the middle button. Then for my center button, I changed the Button Width from Fluid to Full Width.

Sounds like an easy fix, right? Well, you would be right. This is just an easy one to get you warmed up!

2. Background Gradient

Now for the Stupid Raisin page’s background went from light black to a darker black and restarted in different sections. Also, for some parts, the colors went from left to right in the background, as you can see in the picture below.

To create this type of background in ClickFunnels requires some very basic CSS Custom code. For this background, the code would look something like this.

#sectionID{

  background:linear-gradient(to right, #66bbff,#4353ff);}

What this code does is adds a gradient background from right to left. Feel free to use the code in your own ClickFunnel! Make sure when you place it in the CSS Custom area that you change out the line #sectionID and add in the CSS code for the section you want the colored background. You can also change around #66bbff and #4353ff with any color code to change the colors.

Here is the video I used to learn how to create this color code. I hope it helps!

3. Custom Fonts

Finding a way to input a custom font for my funnel was a bit tricky to figure out. However, once I placed the text I wanted in my Digital Asset section, I was able to code in my new font. Here is the video I used to find out how to input the custom font.

The code for custom fonts is a bit longer than the color code, but the same rules apply. You can change out the headline ID for the section you want the custom font in.

@font-face {

font-family: ‘Circular’;

src: url(URL);

font-weight: normal;}

#headline css ID * {

font-family: ‘Circular’, sans-serif !important;}

If you want different sections to have different fonts, then make sure to copy the code into a new line, change the headline ID, and the source URL. Once you do that, your good to go!

Thank You!

Hey, thank you for reading this week’s post! I hope you found this to be helpful in learning more about Clickfunnels. In the future, I hope to create a post or video going through each step of creating a funnel. If you found this helpful or have questions, please let me know in the comments below!

Thank you again for your time and for reading this post!

Have a fantastic day!

Sincerely,

-Bryce Ward