Assembling pages

Pages are assembled by dragging and dropping components onto the page. Component templates, populated with dummy content, have been created for simplifying the addition of components on a page. Read further to learn how to assemble a channel page, how to add a page template, what template types are available and how to use component templates

How to add a Channel page

Templates

Templates define what and where, components and content, are displayed on the page.

Templates are made up of a number of regions. The regions differ from each other as follows:

Background colour - is either white or grey
Position of the components in the region - either full-width or padded with LH and RH margins

Multiple components can be added to a region. When this is done the detault layout will be to stack the components one below the other.

Types of templates

A number of templates are available for authors to assemble pages, ranging from generic or blank ones to product detail or article pages, where some default, common components are already added on the template. Pages that use these templates with default components, are known as content item pages. Authors can still add additional components to these pages, where required. For more information on the templates used for specific content items, view the CI pages section.

The table below depicts the various Generic templates available. They differ from each other in the number of regions on the page, the number and position of the full width regions and the order of the background colour, either alternating grey-white or white-grey.

Template name	Description	No of regions	Type of page	Example of a page
Generic 01	Full width region followed by alternating grey and white regions, with additional full width region in 4th position	10	Home	Personal; Business
Generic 02	Full width region followed by alternating grey and white regions	9/10	Section	Bank with us
Generic 03	Full width region followed by alternating grey and white regions - for use on smaller pages	5	Product listing	Credit cards landing, Product detail
Generic 04	Full width region followed by alternating white and grey regions	5	Article listing	Learn landing; News landing
Generic Campaign	3 alternating patterns of 'full width-white-grey' regions, ending with a full width region	10	Campaign	Win a car

Note:

Generic01 is used for the Home pages (as it contains the additional full width region in the body content). It also does NOT allow a breadcrumb to be added to the page
Generic02 or Generic03 differ only in the number of regions – for smaller and most pages use Generic03
Generic04 has alternating white regions followed by grey – used on Article pages
GenericCampaign is to be used on your individual campaign pages - it has more full width regions than other pages. Going forward, it will be able to cater for different stylinng

Component stacking

Editors must add as many components to ONE region as possible, only changing regions when a different background colour or full-width component must be added to the page. The components will be stacked and displayed across the entire row, ie one on top of the other, unless they are not full width components.

Background region colour

Most components have been designed to be placed on a region with a grey background and padding.
The following components are to be placed on a region with white background :

Cross sell
All Article Lists
Horizontal buttons
CTAWithButtonOrange
Campaigns pages - use template GenericCampaign

Component templates

The functionality used on the banks’ public websites has been designed in modular units called components.

The components are interchangeable between different sections of a page thereby adding flexibility to page layouts. The components are also re-usable and shared across all the group’s websites, thereby delivering a consistent user and brand experience across all our web properties. There are approx 200 components available in the library.

Components specify what content is used on the page and the look & feel of the content. Specifically, using WEM terminology:

The component type defines what will be displayed – eg whether a single content item or a list of content items will be used
The display view defines how it will look

This site and the component catalogue provide an overview of the different components used across the sites. A paper-based version of the component catalogue can be found on Sharepoint.

A component, once setup (ie has a specified component type; content item(s) and display view), is called a component template. This is what you will use to add the components and content to your page.

How to use Component Templates

A dummy content item(s) has been created for each component template. It has copy for each of the fields that need to be completed or not completed in the content item.

How to add a component template to a page

In Preview; click on PAGE mode
Click on INSERT from the tools bar
Click on Component Templates
Find the relevant component template you need to place on the page
Drag and drop the component template onto the required region on the page
IF it is a Content List component
- THEN REPLACE the content items in the list (you must first check what content items are needed and how they are populated before removing them (note removing them does not delete the content item, it just does not display them on this page)
IF it is a Content item component
- THEN CLONE the content item
- SAVE the content item – select the relevant folder in your country’s or business units folder structure
- Change the content in the content item – overwrite every field where there is dummy content with the content you need for your page
SAVE and CLOSE the component
REFRESH the management cache
Check that the content you just changed is displaying correctly

Making ongoing content changes

Once you have placed your component template on the page, to edit the content going forward, you just need to click on the pencil icon in the component tools palette.

How to assemble pages using component templates

Adding SEO content and social tags to:

channel Pages

You can add specific SEO Titles and Meta Descriptions as well as Social Tags to your channels/pages
- In Sites Workspace, Edit the Channel and
  - Add the SEO Meta Title and Meta Description under the 'Search Engine Optimisation' TAB
  - Add the Social og:title; og:description and og:image under the 'Metadata' TAB (scroll down to the bottom of the page to see the Social Title; Social Description and Social Image attributes)
If you have not populated the SEO and Social Tags, then the following content is used to populate these values in the HTML when the page is rendered:
- The SEO meta title, meta description AND the og:title and og:description default to the channel name
If you have populated the SEO data but not populated the Social Tags
- The og:title and og:description default to the SEO Meta Title and Meta Description of the channel
The Social og;image can be populated in various ways:
- By adding a unique og:image to the channel page - you can do this by adding a static image file to the Social image attribute under the Metadata tab of the channel - it must just be a static image file (ie not an image) and you should add the landscape size
- If the channel does not have an Social Image populated, then the og:image is populated using your site's fallback image:
  - It must be a landscape size image
  - It must be named social_media_og_image_landscape.jpg
  - It must be found in the following folder: SBG/Content shared/Image placeholders/<your sitename>
    - eg for Tanzania it would be named and found in the following folder: SBG/Content shared/Image placeholders/tanzania/social_media_og_image_landscape .jpg
- If your site does not have a placeholder image, then the og:image is populated from the default og:image for ALL our sites, which is found in the following folder: SBG/Content shared/Image placeholders. It is called social_media_og_image_landscape.jpg