Customizing Funnel and Website Colors

You can customize each step within the funnel or website builder, including colors, fonts, and more. Follow these steps to learn how to customize the colors of your funnel or website using several different methods.

You can create overall Funnel/Website Settings by utilizing the Typography Settings to ensure consistency throughout your page. You can also customize individual funnels or website pages for the builder. If you are familiar with code, you can also use custom CSS.

Please Note: For guidance on customizing fonts, refer to the article “Custom Fonts in the Site Builder.”

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 on Typography.

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

Part 2: Making Individual Page Edits

Each funnel/website page comprises 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 various 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 piece you’ve added to customize it to your liking.

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

• Background and text color of a button

• The background color of a section
• Text colors for a headline or other text elements

• Navigation Menu Popup background Colours (such as the mobile hamburger menu and search bar.)

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 to which they were added. Setting up custom colors for every page would be necessary.

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

• Add the name of the color directly and 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, custom CSS allows you to customize the funnel/website beyond standard options completely. CSS, or Cascading Style Sheets, is the technology used by most websites to create visually engaging web pages, including layout, colors, and fonts.

Please Note: If you lack the expertise, you may need to contact a developer for assistance.

• Navigate to the button at the top of the builder.
• Click on 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.

FAQ

1. How do I apply consistent font colors across all pages in my funnel or website?
Use the Typography settings under the “Settings” button at the builder's top. This allows you to set uniform font colors for headlines, content, links, and more across all pages.

2. Can I customize colors for individual sections or elements on specific pages?
You can edit colors for individual sections, rows, columns, and elements directly within the drag-and-drop builder using the left-hand edit menu.

3. How can I set up custom colors using hex codes?
You can add custom colors by selecting a text element and using the “Didn’t find your color? Add custom one!” option. Enter the hex code and name the color; it will be available on that page.

4. Is it possible to apply CSS for advanced customization?
Yes, if you have coding expertise, you can use Custom CSS by navigating to “Settings” > “Custom CSS.” Insert your CSS code to customize your design fully.

5. Can I create a unified color palette for consistent page design?
You can access the color palette from the right sidebar or inline toolbar while editing text. This allows you to manage default and custom colors, ensuring consistency across all elements.

6. Will custom colors be saved across all pages in my funnel or website?
No, custom colors are saved only within the specific page they are set up on. You would need to replicate the setup for each page.

7. How do I preview my changes before saving?
You can preview your page using the “Preview” option in the builder before saving and exiting to ensure your changes look as expected.

8. Do I need coding knowledge to customize colors?
Basic color customization can only be done with coding. However, Custom CSS can be used for advanced design, and you may need assistance from a developer.