1. Home
  2. Modules
  3. Templated Experiences
  4. How to Add Background Colors and Images to Landing Page Sections in Templated Experiences

How to Add Background Colors and Images to Landing Page Sections in Templated Experiences

You may add a background image for sections in the Landing Page template to enhance visual appeal and brand consistency. Using an image picker and transparency configuration options, you may customize backgrounds across different sections and experiences to create high-quality brand experiences.

To see and use this feature, follow these steps. 

  1. Open a Templated Experience to edit and then select its Landing Page Setup tab. 
  2. Click Customize.

Note: In this example, we will edit the background for the Header section, but this process can be done for any section on the Landing Page. 

  1. Expand the Header section. On the Background Mode menu, select one of the following options.
  • Color – This option displays a solid color as the background for the section. You may also add padding to the section to make it larger on the Landing Page.
  • Gradient – The term Gradient refers to a gradual transition between colors, where one color smoothly blends into another. It creates a visual effect where colors shift smoothly from one to another, adding depth and dimension to the background. 
Background Mode menus

If you select the Gradient option, you may then select the color for up to two gradients. Having two gradients allows for more intricate color transitions and visual effects. It provides greater flexibility in designing the background, allowing for a more nuanced and dynamic appearance.

The gradient’s angle refers to the direction in which the gradient is applied on the background. It determines the orientation of the color transition, affecting how the colors blend and appear on the screen. Adjusting the gradient angle can create different visual effects, such as horizontal, vertical, diagonal, or radial color transitions, enhancing the overall aesthetics of the background.

  • Image – This option lets you choose an image to display in the background of the section. Once you have added an image, you may also specify its percentage of transparency and add padding for the section to achieve the size of the section you desire. 
Background Image menu

Updated on February 8, 2024

Was this article helpful?

Need Support?
Can't find the answer you're looking for? Don't worry we're here to help!