Widget Background

We've recently introduced a new feature on our website: the Style Panel! Because of this new feature, these instructions have changed a bit. For the old, pre-Style Panel instructions (if you haven't updated yet), click here.

Changing the Background for a Specific Widget

With the Style Panel, now you have quite a bit more customization at your disposal when it comes to your Widget's background. Not only can you set an image as a background, but you can also choose a specific color, and also 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

1. Start by clicking the Widget you're wanting to alter in the Edit Widgets Panel - this will highlight the Widget to be edited.
   
   
   
   
2. If the Style Panel isn't open already, click the  icon up top to open it.
   
   
   
   
3. Click on the This [Widget Type] tab.
   
   
   
   
4. Click on the General section to open it.
   
   
   
   
5. The first option in the section is Widget Background Color. Click on the down arrow to the right of the field to get your color picker.
   
   
   
   
6. Pick your color here by either clicking a swatch at the top, or using the top slider bar and clicking in the 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.
   
   
   
   
   
   
7. If you double-check your Campaign, you should now see that your selected Widget is the color you selected!
   
   

Background Image

1. Follow steps 1 through 4 in the section above to get to the General section in the This [Widget Type] tab of the Style Panel.
   
   
2. The second option in this section is Widget Background Image. If there's already one assigned, you can click the X icon to remove it.
   
   
   
   
3. To add your own image as a background, click the  icon and the media selector will pop up.
   
   
   
   
4. In the Media Selector, there are a bunch of options. You can select an image already uploaded to your library (Media Library), select a stock image from our library (Stock Images), upload a file from your computer (Select Files), use a URL to pull an image from the web (Enter URL), or design an image from scratch using our Canva integration (Design A Graphic).
   
   
   
   
5. Once you have the image that you want, click on it (which will highlight it), then click the blue Select button in the bottom-right corner.
   
   
   
   
6. 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.
   
   
   
   By default, the 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.
   
   
7. 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).
   
   
   
   
8. 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.
   
   
   
   
9. Widget Background Position allows you to change where the 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. Click the X icon if you want to return to the default.
   
   

Pre-Style Panel Instructions:

Getting There

Add a new widget or edit an existing widget to open the Edit Widget dialog. Find and click on Background in list of menus at the left.

Note: The Background menu is not available to every widget. 

About

Use the Background menu to add an image behind the widget's content. You can choose an image you've uploaded previously or upload a new image. Once you have the image you'd like, click Select to close the Image Selector and edit additional options Image Widget. 

Background images are placed in the upper-left corner of the widget, but this can be overridden with CSS.

Make the Image Clickable

There are two ways to make an image clickable: by creating a link for the entire image, or by creating small clickable areas within the image called hotspots. 

To make the entire image clickable: 

1. Click the (not linked) button to open the Link dialog.
   
   
2. There are two options: Go to URL and Take Action. Go to URL sends the visitor to a website, and Take Action accesses another widget on the Campaign.
   
   
   • To set up Go to URL:
     
     a. Enter the URL in the URL field.
     
     b. Use the Open link in new window check box to choose whether the link opens in the same window, or in a new window.
     
     c. Click Save Link.
     
     
   • To set up Take Action:
     
     a. Use the Choose a widget... drop-down menu to select a widget to access.
     
     b. The Choose an action... drop-down menu will appear. Use it to select an action.
     
     c. Click Save Link.
     
     
3. Click Save & Exit.

To create a clickable hotspot:

1. Click the crosshairs icon.
   
   
2. With the crosshairs icon selected, place the hotspot by clicking on the preview of the image. The hotspot will appear as a semi-transparent gray box with edit and delete icons in the upper-right corner. Everything inside the gray box will be clickable. Users will not see the gray box when viewing your Campaign, but their pointer will change when mousing over the hotspot to signify that the area is clickable.
   
   
3. Click and drag the box to position it. Click and drag the right edge, bottom edge, or bottom-right corner to re-size it.
   
   
4. Mouse over the box and click the pencil icon to configure the hotspot.
   
   
5. There are two options: Go to URL and Take Action. Go to URL sends the visitor to a website, and Take Action accesses another widget on the Campaign.
   
   
   • To set up Go to URL:
     
     a. Enter the URL in the URL field.
     
     b. Use the Open link in new window check box to choose whether the link opens in the same window, or in a new window.
      
   • To set up Take Action:
     
     a. Use the Choose a widget... drop-down menu to select a widget to access.
     
     b. The Choose an action... drop-down menu will appear. Use it to select an action.
     
     
6. Use the Top, Height, Width, and Left fields to fine-tune the position of the hotspot within the image.
    
7. Click Save & Exit. 

Note: When accessed on a mobile device, images are scaled to fit their container, if necessary. When scaled, hotspots are also scaled.