How to Set Background Colors, Images, and Videos in ClickFunnels 2.0
Channel: Dan Havey
Date: 2022-11-03

For More Training on ClickFunnels 1.0 and 2.0, Membership Sites, Courses and Custom Code Hacks - Go To https://CFninjas.com

Check out the One Funnel Away Challenge here… https://funneldesignmastery.com/ofa-challenge

Hey there, it's Dan Havey with CF Ninja Hacks, and today we’re diving deeper into ClickFunnels 2.0. We’re going to explore how to set up all your background settings, from colors to images, videos, gradients, and foregrounds. This is essential for making your pages look exactly how you want, whether it’s the entire page body or specific sections, rows, columns, and elements. Let’s get started.

First, let’s look at setting a background for the entire page body. When you come into the settings, it’s usually turned off, but I’ve already enabled it. You’ll see an option for a background image. I’ve got a folder with some pre-made backgrounds, and I’ll choose one from Flat Icon. Once you add your image, you can decide how it should appear—full center, parallax, 100% width, and height, or no repeat. Play around with these settings. For instance, if your image doesn’t cover the entire area, you can use image fit to position it as needed. It’s all about experimenting to get the look you want.

Now, let’s talk about background colors. If your image has a transparent background, you can change the color behind it. For example, I set a dark reddish color behind a transparent image, and it looks great. You can also add a foreground color on top of your image. This can help fade out the picture and give a subtle texture to your background. Remember, the background color is furthest away, your image is in the middle, and the foreground color is closest to the viewer.

Next up, background videos. You can add a YouTube or Vimeo video as a background. Just paste the video URL, and it’ll appear. You have various settings here, like looping the video or setting a background style. While you don’t often see background videos, it’s a cool option to have. You can also hide the video on mobile for better performance. Again, it’s about trying different settings to see what works best for your page.

We also have the option to set gradients as backgrounds. ClickFunnels’ gradient tool isn’t the best, but it works. For more advanced gradients, I recommend using CSS Gradient.io, which offers more flexibility and customization. With ClickFunnels, you can do simple up-and-down, left-and-right, or diagonal gradients. You can add extra colors and adjust as needed, although it can be a bit tricky.

Moving on to sections, rows, and columns, each has similar background settings. For sections, you can use your style guide backgrounds or override them with custom images, colors, or gradients. Rows and columns don’t use the style guide but have the same background options. You can also add background videos here. It’s all about layering—background color, image, and foreground color to achieve the desired effect.

Lastly, let’s look at elements like paragraphs. You can set background colors for individual elements, making them stand out. For instance, increasing the font size of a paragraph and adding a red background color can make it more noticeable. There are endless possibilities, so experiment with these settings to see what works best for your design.

So, there you have it—a comprehensive look at setting up background colors, images, videos, gradients, and foregrounds in ClickFunnels 2.0. If you have any questions, feel free to reach out. Happy funnel building!