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: 

Example of the background widget using solid gold background with 3 content black widgets

 

Image as a background with three standard content blocks: 

Example of the background widget using an image of CU Denver campus with 3 content black widgets

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. 

Layout tab - background grid widgets

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

5. Drag and drop the widget on to the page

Drag and drop any background grid widget on 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".

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". 

Drag and drop the

 

3. Click Edit to select your background.

Click edit on Add a background widget

 

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. 

 

Background widget customization options

 

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.  

Preview of background widget settings

 

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.

CMS Login