Widget Background

These features available on All Plans

Overview

The Style Panel offers extensive customization options for your widgets' backgrounds. You can set a specific color, use an image, and adjust opacity/transparency to achieve the desired look.

Note:
Background images set in a widget using the Style Panel do not scale on smaller screens. The examples in this guide use a Rich Text Widget, but the steps are the same for all other widgets, including Container Widgets.

Background Customization Options

Background Color

1. Select the Widget:

   • Click the widget you want to customize in the Edit Widgets Panel. The widget will be highlighted for editing.

2. Open the Style Panel:

   • If the Style Panel isn’t open, click the Style Panel icon  on the left side of the Builder.

3. Access Widget Settings:

   • Navigate to the This [Widget Type] tab and open the Widget section.
   • Locate the Widget Background Color option.

4. Choose a Color:

   • Click the down arrow next to the color field to open the color picker.
   • You can:
     • Select a color swatch.
     • Adjust the top slider bar and click on the color field to choose a specific hue.
     • Adjust the bottom slider bar to change the opacity.
     • Enter a specific hex code or other color values.
     • Click the transparent box in the bottom right to remove the background color.

5. Save Your Changes:

   • Click the X in the top-right of the color picker.
   • Click Save in the Style Panel.

6. Verify the Changes:

   • Check your campaign to confirm the widget displays the selected background color.

Background Image

1. Follow Initial Steps:

   • Complete steps 1–3 from the Background Color section to access the This [Widget Type] tab.

2. Widget Background Image:

   • Locate the Widget Background Image option in the Widget Background subsection.
   • If a background image is already assigned, click the X icon to remove it.

3. Add a New Image:

   • Click the image icon  to open the Media Selector.
   • Choose an image by:
     • Dragging and dropping it into the Media Selector.
     • Selecting an existing image from your Media Library.
     • Choosing a stock image from Pixabay.
     • Uploading a file using the Select Files option.
     • Using the Enter URL option to link an online image.

4. Apply the Image:

   • Click the desired image to highlight it, then click Use Selected.
   • The widget background will now display the chosen image.

5. Adjust as Needed:

   • If the background looks good, you’re done. Otherwise, use the Background Image Sizing & Positioning options to refine it.

Background Image Sizing & Positioning

When a background image is added, it defaults to its original size and is anchored to the top-left corner of the widget. Use the following tools in the Style Panel to adjust its appearance:

Widget Background Repeat

• Options:
  • No Repeat: Displays the image once without tiling.
  • Repeat Horizontally: Tiles the image across the width of the widget.
  • Repeat Vertically: Tiles the image down the height of the widget.
  • Tiled: Repeats the image both horizontally and vertically.

Widget Background Size

• Scaling the Image:
  • Set the size of the background image using a width value in percentage, em, points, or pixels.
  • The image will automatically scale to the specified size.

Note:
The size of the widget itself is determined by its content, not the background image.

Widget Background Position

• Adjusting Position:
  • By default, the background image is anchored to the top-left corner of the widget.
  • Options include:
    • Inherit: Uses the position set in the All [Widget Type] section.
    • Custom: Center or align the image to the top, bottom, left, or right of the widget.