[2.0] Background Colors

[2.0] Background Colors


Containers, text boxes, and buttons within the editable pages in a funnel, such as the Pre-Quiz page, Thank You page, Lead Capture, etc., can receive a general background color regardless of the size of this element. Follow the steps below to add a background color to an element.

Step 1: Selecting the Container

Click the element that will have the background color




Note: The element is correctly selected when a blue border is highlighting the element clicked.

Step 2: Properties Section

Once the element is selected, click the Properties button (tools icon), and scroll down to the Background Color option.



Step 3: Selection Color

  1. Selecting a color from the color palette:

Below the background color, click the small square showing the current color of the element to pick a color from the palette. If there isn’t a color selected for the selected element, it will show as “None” with a grayish square.


Once the small square is clicked, it will immediately display a color palette. Four different sections will populate - the most recent colors used, and the currently selected color will display with a check icon located at the top, a right sidebar (right vertical bar) to select the color, a big square that can be used to select a specific color tone, and a bottom bar (horizontal bar), that can be used to add transparency or opacity to the selected color.



  1. Using Hex Code

A Hex color code can be entered in the Background color field, and it is specifically useful when using very specific colors to align with your brand’s identity. The Hex color format will be as follows: #000000




Note: Do not forget to enter the # symbol before the code.

  1. Using RGBA Code

An RGBA color code can be entered in the Background color field, and it is specifically useful to add transparency or opacity to color, the RGBA color format will be as follows: rgba(255,255,255,0.9)



  1. Using the Name of the Color

The background color field also allows you to add the name of a specific color, such as typing the word “black”, “white”, “red”, etc.





    • Related Articles

    • [2.0] Change Button Colors

      You can change colors of buttons in your Pre-Quiz, Post-Quiz, and Webinar pages. The procedure for changing button colors is the same for all of these various page types. Step # 1 Click the component where the button you want to edit is located, then ...
    • [2.0] Change Pre-Quiz Page Background

      STEP # 1 From the Canvas, click the Pre-Quiz Page to edit it. Make sure you click the one on the Canvas page and not the one under the Components menu. Click Builder - this action will automatically open the Builder menu with three sections:      ...
    • [2.0] Editing Pages of the HTBC Templates

      After cloning from a template, you will be able to modify images, text, and background colors. IMPORTANT: These instructions work on Sales Pages, Pre-Quiz Pages, Lead Capture pages, and Thank You Pages. To edit questions, please refer to the article ...
    • [2.0] Making the Background Color on a Pre or Post-Quiz Page Transparent

    • [2.0] Masterclass Frequently Asked Questions

      1.  How do I make changes to the mobile and tablet versions of my funnel?  Please click this link to access our Knowledge Base article for assistance on this topic: Editing the Mobile View 2.  How do I create merge fields in bucket.io to use in a ...