Change the Background or Theme

You can specify the background color and image for the page, for individual slots on the page, and for section layouts within a slot. You can also change the entire theme for a site.

A slot is a region that spans the width of the page and can contain one or more types of content. The background you specify for a slot applies to the entire slot and all the components in the slot.

Change the Background

Backgrounds layer on top of each other. If you specify a background for a slot, it sits “on top” of the background specified for the page. For most images and colors, the upper layer effectively overrides the lower layer. If you use a degree of transparency either in a background color or in images, the colors in lower layers can show through or blend with the colors used in upper layers.

Some components, like paragraphs and titles, can provide a background color as part of a predefined style or as a customized style. If you specify a background color for a component, it also layers on top of any section layout, slot, or page background. See Use Styles and Formatting.

The background options are similar for pages, slots, and section layouts, though you access them in slightly differently ways:

1. Open a site for editing.

2. Navigate to the page you want to edit and make sure that is set to Edit.

3. To change the background for a page or slot:

   • Click in the sidebar and then click .

   • To specify the background for the entire page, click Complete Page and click . To specify the background for a slot on the page, select the slot and click .

4. To change the background for a section layout:

   • Click the menu icon for the section layout and choose Settings.

   • Click Background. The background options are the same for pages, slots, and section layouts.

5. Click to open the File Picker panel and navigate to the content item you want to use. You can use images from any location you can access. You can also use images that were shared with you or that you upload from a local or network file location. The window displays all available files. Choose the file type appropriate for the context. For example, if you’re choosing an image file, select a file with a valid image format (GIF, JPG, JPEG, PNG, or SVG).

6. Select an image and click OK.

7. To adjust the image settings:

   • Use Position to place the image on the page or in the slot.

   • Select a Scale option to adjust the presentation of the image:

     • Fit: The image is scaled so the entire image fits in the available space without distorting the image.

     • Stretch: The larger of the two dimensions (width or height) is scaled to fit the available space and the smaller dimension is stretched to fill the available space.
     • None: The image is used at its full pixel resolution and is cropped uniformly if it doesn’t fit in the available space.

   • Select a Repeat option to tile an image that’s too small to fill the available space. This option doesn’t apply if you select Stretch as the Scale option.

   • Select Do not scroll with page to keep the image stationary while the user scrolls the page.

8. To select a color for the background, choose a color from the Color menu or click More to select a color from the complete range of colors.

   • Click in the spectrum bar on the right to choose a color and to display variations of the color in the color range display. The display shows the selected color in the upper right corner and shades of the selected color with increasing amounts of white toward the left and increasing amounts of black toward the bottom.

   • To select a variation of the color, click within the color range display or click and drag the selection point to a new color position. The current color box and the 6-digit color code show the selected color.

   • To adjust the transparency (alpha channel), click and drag the transparency slider to the left to increase transparency. An alpha value of 0% makes the color transparent, allowing color and content from lower layers to show through completely. An alpha value of 100% makes the color completely opaque, blocking out all color and content from lower layers. Other values allow images and colors from lower layers to show through and their colors to blend with those of upper layers to different degrees.

   • To apply the current color selection, click Choose.

Change the Theme

The change to the theme is recorded as part of an update when you click Save. The theme change isn’t applied to the site until you publish the update.

Note:

Not all themes are compatible with each other. Different themes can contain different navigation, style name, or page layout information. For example, if you choose a theme with different layout names, existing pages may use layouts that aren’t available in the theme. Those pages appear blank. The page content isn’t deleted, it just can’t be displayed unless the theme you choose has a layout and slots with the same names. If you choose an incompatible theme, you can change the theme back to the original theme to restore the page content.

Be certain you switch to a compatible theme. If you aren’t sure, check with the theme developer.

To change the theme used for the site:

1. Open a site for editing.

2. Click in the sidebar and then click .

3. Select a theme from the list of available themes and click OK. The theme is applied in the current update. To save all pending changes in the current update, click Save.