Guide page

A stepped set of content blocks, divided by headings

Overview

The guide page displays a formatted list of content blocks that is primarily used for a related flow or sequence. Each block has its own heading with either a number or letter. There is a third option to remove these if there is no sequence.

The guide page has an inline navigation menu that lets users jump to specific sections on the page.

Example

WCMS use

From the Content tree, navigate to the place you want to add the new guide page. Right-click and choose Insert > Insert from template.

Inserting a guide page from a template

Choose Page templates > HCC_GuidePage.

HCC_GuidePage is an updated template of the old HCC_Guide template.

The main difference for the new template is that you need to add each step in Experience Editor.

This guidance will cover both methods as many of our current pages still use the old template.

Give the page a name, following our standards for page names.

Selecting the guide page template

Not all places (for example News and Consultations) allow creation of guide pages. Think about what is the right content for that section of the site.

Update the Page title, summary, metadata, in this guide text and other standard fields as described under general page authoring.

The guide page has three main sections:

Introductory text

This field and placeholder allows you to introduce the page. Not all guide pages need an introduction, often the Page title and Page Summary are enough.

The introductory text placeholder allows these renderings:

  • Well
  • Keyfigure
  • Media unit
  • Youtube embed
  • Button - Primary call to action
  • Button - Secondary call to action
  • Alert - Information
  • Alert - Warning
  • Alert - Error
  • Alert - Success

Guide steps

The guide itself is made of guide steps. Guide steps aren't written directly in the page but are made up of a set of HeaderedText content items under Common Content > Text > Guide Steps. Locate a suitable folder to put your HeaderedText items in.

Adding new guide steps to page (Guide_StepPage)

When finished in Common Content, edit the page in Experience Editor and add the guide steps by selecting the rendering guide_page. Choose GuideStep and then Select.

Selecting the correct guide step rendering

Select an existing content item which you've prepared earlier and choose OK.

Each guide step has an associated rendering slot by choosing Add here. If you move the step elsewhere on the page, the rendering slot will move with it.

Selecting add step

Guide placeholders allow these renderings:

  • Well
  • Chart
  • Alert - Error
  • Alert - Information
  • Alert - Success
  • Alert - Warning
  • VideoEmbed
  • Media unit
  • Audio player
  • Details (accordion)
  • Key figure
  • Text block
  • Button - Primary call to action
  • Button - Secondary call to action

The Numbering style can be changed from numbers to letters by selecting the drop down field.

Selecting guide step lettering

Add another guide step by selecting Add here. Select the

  • top Add here button to add the step above the current step or
  • bottom Add here button to add the step below the current step

Guide step - next step

Personalisation can also be applied to each step.

Adding old guide steps to page (Guide_Step)

Navigate to the guide page.

In the Guide steps field inside content editor, choose Edit and choose the content items that make up your guide (by double clicking on each item), and set the order they appear on the right hand side. Your guide can have up to 14 steps.

Once done, you can edit the page in Experience Editor and add extra renderings to the placeholder for each guide step.

Guide placeholders allow these renderings:

  • Well
  • Keyfigure
  • Media unit
  • Youtube embed
  • Button - Primary call to action
  • Button - Secondary call to action
  • Alert - Information
  • Alert - Warning
  • Alert - Error
  • Alert - Success

End text or call to action

This field and placeholder allows you to point the user to a follow-on action that they should be encouraged to take. Guide pages should always try to finish with a call to action.

The end text placeholder allows these renderings:

  • Well
  • Keyfigure
  • Media unit
  • Youtube embed
  • Button - Primary call to action
  • Button - Secondary call to action
  • Alert - Information
  • Alert - Warning
  • Alert - Error
  • Alert - Success
MVC.net use
Code
Version and status
  • current version
  • Concept