Customizing Funnel and Website Colors

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.

 

Please Note: Refer to the article “Custom Fonts in the Site Builder” for guidance on customizing fonts.

 

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: Custom Colors

You can implement custom colors directly from the Site Builder. If you were to set up Custom Values with Hex code you could create a color template that you can change within Settings > Custom Values.

 

Please Note: The saved colors will only appear within the funnel page it was added to.This means it would require setting up custom colors for every page.

• Add a color by clicking on the text element and clicking on the “Didn't find your color? Add custom one!” option in the text elements settings.

 

 

 

• Add the name of the color directly enter the hex code.

 

 

 

• Or, select the color from the visual color editor.

 

 

 

• Add a custom value and put the hex code into the value.

 

 

• Place the custom value into the custom color option.

 

 

Change the hex values in the custom values area to change the colors automatically for the pages this is set up within!

 

Part 4: 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.

 

Please Note: You may need to reach out to a developer for assistance if you don’t have the expertise.

• 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.