Stacked photo panel component

Purpose

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

Pages the stacked panel component can be added to

Editing the title

Editing the body content

Editing the button

Editing the data source of the component

Editing the visual attributes of the component

Adding a new stacked photo panel component to a page

About the stacked photo panel component

The stacked photo panel component is a horizontal component that spans the length of the page. It is slightly larger vertically than most other components on the YVR website. It features an image on the top half of the component, with the bottom half of the component featuring a solid color background and a centred title, body text and button.

Pages the stacked photo panel component can be added to

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

The stacked photo panel component isn’t currently being used on any live pages.

Editing the title

  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 stacked photo panel component that you would like to edit. You will know you have selected a stacked photo panel component when you select a component and the grey menu that appears above the component has ‘stacked photo panel’ at the top.
  4. Select the title that you’d like to edit.
  5. You should now be able to edit the title.
  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 stacked photo panel component that you would like to edit. You will know you have selected a point grid panel component when you select a component and the grey menu that appears above the component has ‘stacked photo 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 stacked photo panel component that you would like to edit. You will know you have selected a stacked photo panel component when you select a component and the grey menu that appears above the component has ‘stacked photo 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 page that the button is linking to by editing the page in the Internal Link tree list:
  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 50-50 content 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.

Editing the visual attributes of the component

  1. In Experience Editor on the page you want to edit, select the point grid 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 animate setting of the component 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 stacked photo panel component to a page

  1. For a list of pages the point grid panel component can be added to, .
  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 stacked photo panel component by selecting any of the ‘Add here’ buttons above or below the existing components on the page.
  5. Select the ‘stacked photo 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 apply the animate option. 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?