Customizing Funnel and Website Colors

Overview

You can customize colors at multiple levels inside the BizStackPro Site Builder—globally via Typography settings, locally on individual sections and elements, and with fully custom color values using hex codes or CSS. This guide walks through each method so your funnels and websites stay consistent with your brand.

Part 1 — Set consistent text colors with Typography

Typography is the fastest way to keep font colors consistent across your funnel or website. It’s ideal for setting default colors for headings, body text, and links.

1. At the top of the builder, click Settings.
2. Select Typography.
3. Choose your Headline and Content fonts (optional).
4. Set default colors for:
   • Headlines
   • Body text
   • Links (and hover states, when available)
5. Save and preview to confirm readability.

When you apply consistent defaults here, you reduce the need for one-off color fixes on each page.

Part 2 — Customize colors on a specific page

Each page is built from four main building blocks:

• Sections
• Rows
• Columns
• Elements (text, buttons, images, etc.)

Use the drag-and-drop builder to select any block and adjust its colors from the element/section settings panel.

Common color updates

• Buttons: background color, text color, hover color.
• Sections: background (solid, gradient, or image overlay).
• Text elements: font color and link color (per element).
• Navigation menus: dropdown/popup backgrounds, mobile menu colors, and search bar styling.

Part 3 — Create custom colors with hex codes

You can add custom colors by hex code so you can reuse them on the same page (helpful when the default palette doesn’t include your brand color).

Add a custom color in the builder

1. Select a text element (or any element that includes a color picker).
2. Open the color picker and choose Didn’t find your color? Add custom one!
3. Name the color (example: Brand Blue).
4. Paste the hex code (example: #123456).
5. Save, then apply the new color to the element.

The saved color becomes available in that page’s color picker for other elements.

Optional: keep brand colors in Custom Values

If your setup supports using Custom Values in your design workflow, you can store your brand hex values in Settings → Custom Values so you always have a single place to reference your official palette.

Part 4 — Use Custom CSS for advanced styling

Custom CSS gives you full control over colors, fonts, spacing, and layout beyond standard builder options. This is best used when you need design rules applied consistently across many elements or want styling the builder can’t do.

Add Custom CSS

1. Open the funnel or website page in the builder.
2. Click Settings at the top.
3. Select Custom CSS.
4. Paste your CSS rules (targeting elements by class or ID).
5. Click Save.

After changes, use Preview to confirm everything looks correct before publishing.