Customizing Funnel and Website Colors

ABOUT THIS LESSON

Within the funnel or website builder, you can completely customize each step, including colors, fonts, and more. Follow these steps to learn how to customize the colors of your funnel or website, using a few different methods.

You can make overall Funnel/Website Settings by utilizing the Typography Settings to have consistency throughout your page. Or, you can customize individual funnel or website pages within the builder. You can also use Custom CSS if you are familiar with code.

Part 1: Updating the Overall Font Colors Using Typography Settings

Using the Typography tab allows you to ensure that all fonts are consistent throughout the funnel/website pages. When customizing the fonts, you can choose the specific color for text, links, and more.

• Navigate to the “Settings” button at the top of the builder.
• Click into Typography.

• Choose the native Headline and Content fonts that will be used throughout the funnel.

Part 2: Making Individual Page Edits

Each funnel/website page is composed of the following pieces: Sections, Rows, Columns and Elements. They need to be created in that order. Sections can house multiple rows, rows can house multiple columns and columns can house multiple elements.

Using the drag-and-drop builder, you can add sections, rows, columns and elements to the builder. Then, use the edit menu on the left hand side for each specific piece you’ve added to customize it to your exact liking.

Here are some examples of specific elements that colors can be customized within:

• Background and text color of a button

• Background color of a section

• Text colors for a headline or other text elements

Part 3: Using Custom CSS

If you have the expertise, using custom CSS allows you to completely customize the funnel/website beyond standard options. CSS, or Cascading Style Sheets, is the technology used by most websites to create visually engaging web pages, including aspects such as the layout, colors and fonts.

• Navigate to the “Settings” button at the top of the builder.
• Click into Custom CSS.

• Insert your custom CSS.

• Save to confirm your changes.

With any changes you make, using any option, you can preview the page to view it before you save and exit the builder.

Make sure to save any changes before you leave the builder to confirm the updates you've made.