These features available on All Plans
Overview
With the Style Panel, you have quite a bit of customization at your disposal when it comes to your widgets' backgrounds. Not only can you set an image as a background, but you can also choose a specific color, and set the opacity/transparency.
Before starting, it's worth it to note that images set as a background in a widget using the Style Panel do not scale on smaller screens.
Note: The examples in this guide will show a Rich Text Widget. However, the steps are the same for all other widgets - including Container Widgets.
Background Color
- Start by clicking the widget you're wanting to alter in the Edit Widgets Panel - this will highlight the widget to be edited in blue.
- If the Style Panel isn't open already, click the
icon on the left side of the Builder to open it.
- Click on the This [Widget Type] tab, and then open the Widget section and you'll see all the options for that specific widget.
- In the Widget Background subsection, you'll find the Widget Background Color option. Click on the down arrow to the right of the field to get your color picker.
- Pick your color here by either clicking a swatch at the top, or using the top slider bar and then clicking in the color field above to select your exact hue. If you want the color to appear transparent, play with the bottom slider bar to adjust the opacity. If you know the exact hex code and values of the colors you want to use, you can enter those in the fields at the bottom. If you just want to eliminate the background color completely and make it transparent, click the box in the bottom-right.
Once you've selected your color, click the X at the top-right, then click Save in the Style Panel.
- If you double-check your campaign, you should now see that your selected widget is the color you selected!
Background Image
- Follow steps 1 through 3 in the section above to get to the This [Widget Type] tab of the Style Panel.
- The second option in the Widget Background subsection is Widget Background Image. If there's already one assigned, you can click the X icon to remove it.
- To add your own image as a background, click the
icon and the Media Selector will pop up.
- In the Media Selector, there are a bunch of options. To start, you can drag and drop an image from the desktop on your computer directly into the Media Selector to upload it that way.
Otherwise; you can select an image already uploaded to your library (Media Library), select a stock image from our library (Pixabay), upload a file from your computer (Select Files), or use a URL to pull an image from the web (Enter URL).
- Once you have the image that you want, click on it (which will highlight it), then click the blue Use Selected button in the bottom-right corner.
- You should now see that the background of your widget is the image you selected. If you're happy with how it looks, you're done! If you'd like to tweak it to fit your design, there are ways to do that.
Background Image Sizing & Positioning
By default, an added background image will show at its normal size, and be anchored to the top-left corner of the widget. There are some tools right there in the Style Panel to help you adjust this: Widget Background Repeat, Widget Background Size, and Widget Background Position.
- Widget Background Repeat will allow you to decide if you want to tile your background image. You can choose to not have it repeat at all, to repeat horizontally, to repeat vertically, or both (tiled).
- Widget Background Size is how you'll set the size of the background image. Enter a width value in percentage, em, points, or pixels, and the image will scale to that size automatically.
Note: The widget will not change size to match the image; the size of any given widget is determined by the content inside the widget. The background is considered part of the widget, not content inside the widget. - Widget Background Position allows you to change where the background image is anchored. By default, the image is anchored in the top-left. You can choose to have it inherit the position from the All [Widget Type] section; otherwise, you can have it centered or justified to the top, bottom, left or right of the widget.
