Background Widget

About

Want to add a background image or color behind any existing widget in Sitefinity? The background widget is perfect for enhancing webpage designs. 

Design

Solid gold background and black text with three standard content blocks: 

Image as a background with three standard content blocks: 

Accessibility  

When using text and background images, be sure that your color combinations meet accessibility requirements. Use this guide to check your color contrast! 

How to

Setting a background can be done in three parts. The first is to use a background grid widget; this gives the page the ability to display the background. The second is to use the background widget. This allows site builders to choose what their background will be. The third is to use any of the standard widgets on top to add your content and complete your design.

The following sections will break down each component step by step.

Please note that access to the background widget is limited. To request access, submit a ticket to the Web Services team or email websitehelp@ucdenver.edu. 

Use background grids 

Background grid widgets have to be used in conjunction with the background widget in order for the background to apply. The first step to using this feature is to choose a background grid widget that suits your design needs. To select a background widget, please do the following:   

1. Open your page in edit mode.

2. Click the layout tab in the top right hand corner.

3. Scroll down towards the bottom where you will find the background grid widgets. 

4. Choose any "background" grid widget, e.g. "Background 12 grid".

5. Drag and drop the widget on to the page

6. Click Content in the top right hand corner to go back to the content widgets

Use background widget

Once you have your background grid widget on the page you can now add a background widget on to the page. To do this please complete the following steps:

1. In the area where you placed the background grid widget, you will see a note "Use with Add a Background widget".

2. Drag and drop the "Add a Background" widget in that area, The default background is "Black text with a solid white background". 

3. Click Edit to select your background.

4. Choose your background. You have two choices: a text and background color combination or an image of your choice. Also, decide if the background should apply to the full row or only the column. 

5. Save your changes. You will now see a preview of the background on the page. PLEASE NOTE: The "Add a Background" widget shows up in this view but will not show when you preview or publish a page.  

Use a standard widget

Now that you have your background setup, you can start placing standard content widgets on the page. To do this, choose a widget of your choice and do the following:

1. Drag and drop any widget into any of the available columns, including the column with the original "Add a Background widget". 

2. Click Edit on the widget

3. if it's a single use widget, add in your content. If it's a reusable widget, select the content and display.