How to Change a ClickFunnels Membership Section Color

Out of the box, a ClickFunnels Full Disclosure: This is an affiliate link, which means if you purchase through this link, we'll receive a small compensation at no additional cost to you. This is how we keep the site free. Thanks! membership site is very…gray. Let’s jazz up the section names a bit with custom colors.

In this post, I’ll explain step-by-step how to adjust the ClickFunnels membership section colors individually for a more on-brand look.

Adding a bit of color isn’t only for branding, it helps organize the sections in an easy-to-follow way. It’s also a nice way to highlight linked sections or allow a separate section in the membership to stand out.

Let’s add a little personality to your learning area!

Step 1 – Create an Image Background

To begin, we aren’t simply adjusting the page’s CSS coding. We’re actually creating background images for each section’s title. This example uses solid colors, but feel free to let your imagination run with patterns and even different shapes like arrows and flags.

Start with a base size of 337px by 42px.

I typically save the image as a .jpg, but if you’re doing any sort of special shape that’s not a rectangle, consider saving as a .png for a transparent background.

Step 2 – Upload Your Image

Upload the new image to your ClickFunnels Media Library.

To do this, you can add an image placeholder to your membership area, upload the image, save the image link, and delete the image from the membership area.

Add a little personality to your ClickFunnels membership sections with custom colorsClick To Tweet

Step 3 – Adjust the Code

Adjust the CSS coding template with your information.

Be sure to edit both the section number and the image link.

Here’s the code from the example:

[data-target='.section7'] div.title {
background-image: url('https://images.clickfunnels.com/7f/9500305ab211e8ba4229d5264ed799/tealcolor.jpg');
}

[data-target='.section8'] div.title {
background-image: url('https://images.clickfunnels.com/7f/248b205ab211e8affaf5681e3e5761/graycolor.jpg');
}

Step 4 – Save and Admire

Save your page and admire the new section colors!

For the complete step-by-step walkthrough, watch the video below.

And if you’re looking for more tips on how to use ClickFunnels, be sure to check out my free 5-lesson ClickFunnels Crash Course.