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 newly updated post for 2021, I’ll explain step-by-step how to adjust the ClickFunnels membership section colors individually for a more on-brand look.

Prefer to watch? Check out the full tutorial over on YouTube or at the bottom of this post.

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 – Select a Color or Create an Image Background

To begin, you need to decide if you’re going to use solid colors or if you want a more textured look with a custom image. You can even get a little wild and let your imagination run with patterns or different shapes like arrows and flags.

If you decide to use a solid color – skip to STEP 3. If you’re moving forward with a custom image, keep reading.

For your custom graphic, start with a base size of 337px by 42px. You can do this inside a program like Photoshop, or online with Canva.

You can save the image as a .jpg or .png, 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

Inside the ClickFunnels editor for your members area, head up to Settings > Custom CSS to adjust the CSS coding template with your information.

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

Here’s the code from the example if you want to adjust a solid background color:

[data-target='.section3'] div.title {
background-color: #ffa286 !important;
}

Here’s the code from the example if you want to adjust the background image:

[data-target='.section2'] div.title {
background-image: url('IMAGELINK');
}

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 (updated in 2021!)

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.