Quote panel component

Purpose

This document gives instructions for editing the quote panel component, and adding it to a page. It also gives the content author information about what pages this component can be added to, and gives examples of what pages this component is featured on.

Contents

About the quote panel component

Pages the quote panel component can be added to

Editing the data source of the component

Adding a new quote panel component to a page

About the quote panel component

The quote panel component is a horizontal component that spans the length of the page. It features a background image, and is split in half with a coloured overlay on one side of the component, and a quote on the side with the coloured overlay.

Pages the quote panel component can be added to:

  • Annual report section page
  • Marketing page
  • Top level section page

Editing the data source of the component

  1. In Experience Editor on the page you want to edit, select the quote panel component.
  2. Select ‘More’ on the menu that has appeared above the component.
  3. Select ‘Edit component properties’
  4. Select ‘Browse’ under the ‘General’ heading in the tree list and select the data source you’d like to use for the component.
  5. Select the data source you’d like to use and press OK.
  6. Press the save icon in the top navigation ribbon 
  7. Submit your changes for approval. Click here for instructions.

Adding a new quote panel component to a page

  1. For a list of pages the quote panel component can be added to, click here.
  2. In Experience Editor on the page you want to edit, select a component. You’ll know when you’ve selected a component because your mouse will change to a hand with a pointing finger.
  3. Select the ‘add a content’ button on the menu that has appeared above or below the component you have just selected.
  4. Choose where you want to add your new quote panel component by selecting any of the ‘Add here’ buttons above or below the existing components on the page.
  5. Select the ‘quote panel’ option from the ‘Select a Rendering’ menu that has appeared, and press the Select button.
  6. Choose the associated content that you would like this component to have by selecting an option from the list that has appeared. Press the OK button on the bottom right.
  7. Edit the visual aspects of the component by scrolling down to Panel settings in the Control Properties tree list. Edit the content position, background color and image focus. Press OK when you’ve finished.
  8. Press the save icon in the top navigation ribbon to save your work 
  9. Submit your work for approval. For instructions, click here.

Can't find what you're looking for?