Using Gradients and Background Blur in the Site Builder
Creating Modern Backgrounds with Gradients and Blur
You can design sophisticated, professional-looking pages directly within the CRM's Site Builder by using background gradients and blur effects. These tools allow you to create visual depth, improve readability, and achieve modern design styles like glassmorphism without needing external software.
Where to Apply These Backgrounds
Background effects are applied to container elements. You can add them to:
- Sections: For full-width areas like hero banners.
- Rows: To create distinct bands of color across multiple columns.
- Columns: To highlight a specific content block or improve text contrast.
How to Add a Background Gradient
Step 1: Open the Site Builder
Navigate to Sites and select Funnels or Websites. Open the desired site and then select the page you wish to edit.
Step 2: Access Color Settings
Click on the Section, Row, or Column where you want the gradient. In the right-hand sidebar, scroll to the Background settings and select the Color tab.
Step 3: Enable and Configure the Gradient
Within the Color settings, turn on the Gradient toggle. Use the Type dropdown menu to select a gradient style: Linear, Radial, or Angular.
Step 4: Customize Your Gradient
- Add colors by clicking + Add Color or by clicking directly on the gradient slider. You can use up to 10 color stops.
- Click on a color stop to open the color picker and choose a specific hue.
- Drag the color stops along the slider to adjust the blend.
- For Linear and Angular gradients, use the Angle slider to control the direction of the color transition.
How to Add a Background Blur
Step 1: Open the Site Builder
Navigate to Sites and select Funnels or Websites. Open the desired site and then select the page you wish to edit.
Step 2: Enable Background Blur
Click on the Section, Row, or Column where you want the effect. In the right-hand sidebar, scroll to the Background settings and select the Color tab. Within the Color settings, turn on the Background Blur toggle.
Step 3: Adjust the Blur Intensity
Use the Blur Intensity slider to set the desired level of softness. This effect works particularly well when applied over a semi-transparent background color.
Frequently Asked Questions
How many colors can I use in a single gradient?
You can add up to 10 color stops to create complex, multi-color blends.
Will adding a gradient or blur remove my existing background image or video?
No. Gradients and blur are additional options. You can switch between the Color, Image, and Video background tabs without losing your previous settings.
Does the blur effect make the text inside my element fuzzy?
No. The background blur only softens the content behind the selected element. Any content, like text or buttons, placed inside the element remains sharp and clear.
Why does my gradient look striped or banded?
This can happen with certain color combinations. To fix it, try adding an intermediate color stop near the harsh transition, choose colors with similar lightness values, or slightly adjust the gradient angle.
How do I remove a gradient or go back to a solid color?
To delete a specific color, click the X next to its stop on the gradient slider. To revert entirely to a solid color, simply turn off the Gradient toggle and select a single color from the color picker.