Skip to main content

Widget Background

Pro.svgALL 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 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 Screen_Shot_2017-10-11_at_9.29.55_AM.png on the left side of the Builder.

3. Access Widget Settings.

  1. Navigate to the This [Widget Type] tab and open the Widget section.
  2. 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.

  1. Click the X in the top-right of the color picker.
  2. 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. Complete steps 1–3 from above.

  1. Select the Widget. 
  2. Open the Style Panel. 
  3. Access Widget Settings in the Style Panel.

2. Widget Background Image.

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

3. Add a New Image.

Click the image icon mceclip9.png to open the Media Selector.

Choose an image by:

  • Dragging and dropping it into the Media Selector.
  • Select 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.

    1. Click the desired image to highlight it, then click Use Selected.
    2. 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

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

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.
    •  
Was this article helpful?