Page Title Image Background

Page title image background solid boxed example

Add color to your site by placing a photo or graphic behind a page title. The image should be at least 2000 pixels wide.

Note: you must enable the Advanced Design bundle to use this feature.

Tip: To add a taller image behind the page title, add your image to the Title Image Region. 

Demo: Page Title Image Background

1

Upload an Image

  1. Go to the Shortcuts toolbar and select Add Content. 
  2. Select File from the list of options.
  3. Enter a Title and Description.
  4. In the File Attachment section, click Choose File. 
  5. Click Upload to upload an image.
  6. Click Save.
  7. You’ll see a selection of Image URLs to choose from: Backstretch, Large, Medium and Small. Choose either the Backstretch or Large URL and copy the link to your clipboard.

Copy large file url

2

Create New Context to Assign Image to Page(s)

You will use Context to place the image on a page, section or sitewide.

For Placement on a Specific Page:

  1. Add a new context for that page (if one is not yet created). 
  2. Go to the Express toolbar and select Structure.
  3. Select Context from the list of options.
  4. Click + Add to create a new context.

Add context

Add a Condition:

  1. Scroll to the Conditions section.
  2. Select Path from the <Add a condition> drop-down. 
  3. Enter the node/# (i.e. node/3) of the page that you would like the page title image to appear into the Path field.

Related: Find Content Node Number

Add a Reaction:

  1. Scroll to the Reactions section.
  2. Select Page Title Image from the <Add a reaction> drop-down. 
  3. Paste the image file URL (from Step 1) into the Title Image File field.
  4. Click Save.

Note: You'll need to create a separate context for each unique image you would like to place as a Page Titile Image. Use the sitewide context to place the same image on all the pages of your site or on sections of your site.

3

Theme Settings

Change the theme settings to set Page Title Image Style or Page Title Image Width. 

Page Title Image Style: the two design choices are transparent or solid. Default

  1. Go to the Express toolbar and select Design.
  2. Click on the Configure button in the Active Theme (this is the first theme that appears in the list).
  3. Expand the Page Title Image section, under the Page Title Image Style drop-down, select solid or transparent (default). The theme that you're using will determine whether the solid style background color is black or white.
  4. Some themes also have the option to set the Page Title Image Width to either wide or boxed. The effect is more dramatic when the theme layout option is also set to wide.

Related: See the Configure Theme Settings tutorial to learn how to further configure themes.

Page title image style and width

Related Articles