×

Site & Funnels : Editor : Background Color Gradient

Modified on Mon, 27 Nov, 2023 at 1:39 PM

In this article, we will discuss adding a Color Gradient. Color gradient, also known as a color ramp or a color progression, is a gradual transition from one color to another. This technique allows you to add contrast to your background colors.

 

Important reminder. The background color gradient is available in most elements where this option is visible.

 



Prior to getting started, you will need to have the following:

  • A ClickFunnels account.
  • An existing page with sections, rows, or elements.

Step by Step Walk Through:

  1. Access the Background settings of the item for which you wish to use a Background Gradient.

  2. Ensure the Background Toggle is enabled (or the 'on' position).
    2._Background_Toggle.png

  3. Click the Color Bar under Background.
    3._Background_Color_Bar.png

  4. Click the Drop-Down at the top of the pop-up menu (under Style Guide and Custom).
    4._Pop-up_Menu_Drop-down.png

  5. Select Gradient from the drop-down menu.
    5._Gradient_Option.png

  6. Customize your background Color, Direction, and Opacity according to your preferences.
    6._Customize_Options.png

  7. Click the Save button at the top-right corner of the page to save your changes.
    7._Save_Button.png

Please follow the same steps to add a background color gradient in other areas where the background gradient option is available:

  • Page Settings
  • Sections
  • Rows
  • Columns
  • Flex Containers
  • Headline Elements
  • Etc.

 

Congratulations. You have reached the end of this article. You should now know how to add a background color gradient to your page, section, row, or element. Please take a moment to review our related help article below about background settings.


More Information 

For further information related to this topic, please click on this some of the links below:

  1. How to Set a Color Background or Foreground on a Page

If you have any questions about this, please contact our Support Team by clicking on the Support Widget at the bottom right-hand corner of this page and start a conversation with our Team or click the Help button at the bottom left of the ClickFunnels Page to access the Product Documentation and more.

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article