Photo fade panel component

Purpose

This document gives instructions for editing the photo fade 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 photo fade panel component

Pages the photo fade panel component can be added to

Editing the title and headings

Editing the body content

Editing the button

Editing the data source of the component

Editing the visual attributes of the component

Adding a new photo fade panel component to a page

About the photo fade panel component

The photo fade panel component is a horizontal component that spans the length of the page. It has an image as half of the background horizontally, and the other half of the background is a colored overlay that fades into the image in the centre. The component features 3 columns of text and icons and a centred heading.

The content panel data-source provides content to both the photo fade panel component and the 50-50 content panel component.

Photo fade panel component with panel points:

Photo fade panel component with body and call to action:

Pages the photo fade panel component can be added to

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

Find it on this page.

Editing the title and headings

  1. Find the page you want to edit in the content editor. For instructions, click here.
  2. Select Publish in the top navigation ribbon, and then select Experience Editor.
  3. Select the news and updates component that you would like to edit. You will know you have selected a photo fade panel component when you select a component and the grey menu that appears above/below the component has ‘photo fade panel’ at the top.
  4. Select the title or heading that you’d like to edit.
  5. You should now be able to edit the title or heading.
  6. When you have finished editing, press the save icon in the top navigation ribbon .
  7. Submit your changes for approval. For instructions, click here.

Editing the body content

  1. Find the page you want to edit in the content editor. For instructions, click here.
  2. Select Publish in the top navigation ribbon, and then select Experience Editor.
  3. Select the photo fade panel component that you would like to edit. You will know you have selected a photo fade panel component when you select a component and the grey menu that appears above the component has ‘photo fade panel’ at the top.
  4. Select the body content that you’d like to edit.
  5. You can edit the content directly in the WYSIWYG, or you can select the pencil icon to edit it in a Rich Text Editor.
  6. If you’d like to edit the component using HTML, you can do so by selecting the HTML button at the bottom of the Rich Text Editor.
  7. For a list of basic HTML tags, click here.
  8. When you have finished editing in the Rich Text Editor, click the Accept button at the bottom right.
  9. Press the save icon.
  10. Submit your changes for approval. Click here for instructions.

Editing the button

  1. Find the page you want to edit in the content editor. For instructions, click here.
  2. Select Publish in the top navigation ribbon, and then select Experience Editor.
  3. Select the photo fade panel component that you would like to edit. You will know you have selected a photo fade panel component when you select a component and the grey menu that appears above the component has ‘photo fade panel’ at the top.
  4. Select the button.
  5. If you want to edit the link, click the edit link button on the left.
  6. You can update the text that appears on the button by editing the text in the box next to ‘Link Description’.
  7. You can also edit the URL that the button is linking to by selecting the page that you want it to link to under Internal Link.
  8. When you have finished editing either of these, press the OK button on the bottom right.
  9. If you want to remove the link, select the remove link button in the Link menu.
  10. Press the save icon in the top navigation ribbon 
  11. Submit your changes for approval. Click here for instructions.

Editing the data source of the component

  1. In Experience Editor on the page you want to edit, select the photo fade panel component.
  2. Select ‘More’ on the menu that has appeared above/below 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.

Editing the visual attributes of the component

  1. In Experience Editor on the page you want to edit, select the photo fade panel component.
  2. Select ‘More’ on the menu that has appeared above the component.
  3. Select ‘Edit component properties’.
  4. Here you can update the image focus under ‘Panel settings’ in the tree list.
  5. Press the OK button on the bottom right.
  6. Press the save icon in the top navigation ribbon .
  7. Submit your changes for approval. Click here for instructions.

Adding a new photo fade panel component to a page

  1. For a list of pages the news and updates 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 fact panel component by selecting any of the ‘Add here’ buttons above or below the existing components on the page.
  5. Select the ‘news and updates 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. You can edit the 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?