Contents

• Page Builder
• Permissions
• Accessing the page builder
• Page structure
• Page(s)
• Sub-page
• Strips
• Columns
• Block Elements
• Callout gallery
• Background Image
• Hero Image
• Video
• Audio
• Buttons
• Interactive Training Templates
• Flash cards
• Sorting cards
• Image popovers
• Interactive Brand Templates
• Colour palette
• Colour wheel
• Font explorer
• Font leading
• Font tracking
• Image slider
• Recently added
• Showcasing imagery
• Create a page
• Create a sub-page
• Page settings
• Homepage
• Add & edit page content
• Add content
• Edit columns
• Menu Builder
• Permissions
• Accessing the menu builder
• Header navigation
• Footer navigation
• Menu builder controls
• Adding a menu item
• Deleting a menu item

Our CMS was designed to be easy to use as it utilises a 'no-code', 'drag & drop' methodology which allows you to update anything from the homepage to brand guidelines or even menu items.

Admin users can now, easily (without writing a single line of code) edit content, colours, containers, paddings, margins, layout, etc. Thus, enabling much more creativity in design and making your content work - producing higher engagement from users.

The CMS consists of two primary parts that let you manage different parts of the site:

• Page builder
• Menu builder

Page Builder

Admin users can edit text, imagery and video that sit on any homepage, landing page, Brand Guidelines or content page within the Brand Hub. This can be done in real time, via the Brand Hub itself, allowing the admins to keep the site up to date and refreshed easily.

Permissions

To access the page builder, a user must have the ‘Admin’ role within the Brand Hub. Guest, standard and privileged users will not be able to access the page builder nor change homepages, landing pages, or content pages within the Brand Hub.

Accessing the page builder

The page builder can be found within the 'Apps' menu. Please note, this menu item will not show within the apps menu if the user does not have the appropriate permissions to view it.

Page structure

The overall page structure and hierarchy is as follows:

Page(s) > Sub-page > Strips > Columns > Elements

Page(s)

You may wish to create either a single page (e.g. homepage, contact) or a group of pages to intelligently group content. For example, you may need brand guidelines covering an overarching topic such as; 'Video'. But this has far too many elements and too much content to cover in a single page. So, to combat this you can create sub-pages comprising of, for example; ‘Technical Standards’, ‘Digital Accessibility’, ‘Lighting’ etc. all under the 'Video' umbrella which creates a more logical and intuitive navigational process for users.

Sub-page

This is optional and can be controlled via the left-hand nav menu on a page. Here you can add, edit, re-order or delete sub-pages. If you wish to create only a single static page (e.g. homepage) you don't need to do anything. The system will know your intent due to only have one sub-page and automatically hide the left-hand nav for users when the page goes live creating a clean and elegant user experience.

Strips

Strips are often referred to as 'rows' in web development and are comprised of columns.

Strip settings available to admins are:

• Background colour - this can be controlled with hexcodes, RBGA, brand colours and even a colour picker.
• Strip width - options are; contained (content & background not full-width), full-width (means content & background will be full-width), full-width background (content will not be full-width, but background will be full-width → useful if you have a colour background)
• Top inner spacing - (this is strip padding) measured in pixels (px) default value is 6
• Bottom inner spacing - (this is strip padding) measured in pixels (px) default value is 6
• Top outer spacing - (this is strip marign) measured in pixels (px) default value is 6
• Bottom outer spacing - (this is strip margin) measured in pixels (px) default value is 6

Columns

You can have up to and including four columns in a strip.

When editing a column within the 'edit draw' you will see the selected column that you're working on highlighted blue.

Column settings available to users are:

• Add, re-order or remove columns - you can have up to four columns
• Full control over which elements are allocated to each column from the extensive element options
• Control transparency of the column
• Top inner spacing - (this is column padding) measured in pixels (px) default value is 6
• Bottom inner spacing - (this is column padding) measured in pixels (px) default value is 6
• Left inner spacing - (this is column padding) measured in pixels (px) default value is 6
• Right inner spacing - (this is column padding) measured in pixels (px) default value is 6
• Top outer spacing - (this is column marign) measured in pixels (px) default value is 6
• Bottom outer spacing - (this is column margin) measured in pixels (px) default value is 6
• Left inner spacing - (this is column margin) measured in pixels (px) default value is 6
• Right inner spacing - (this is column margin) measured in pixels (px) default value is 6

Block Elements

Block elements are standard elements contained within a web page from text to headings and video to audio. Mix-and-match from our seven pre-built drag & drop elements and the maximum number of columns (4) to create a total of 2401 unique combinations.

Callout gallery

The callout gallery is a template for users to play with image layouts and aesthetics.

To edit the callout gallery is the same process as any other element, with some restrictions (to balance good UX and asset layout requirements).

The callout gallery is fixed with 2 columns, this cannot be changed.

Each column has the following editable options.

• Number of images you would like to show in column — this is a minimum of one image which will fill the column entirely and a maximum of 4 images which will wrap to create a 2x2 layout in that column.
• Text to display under each image
• Left alignment option
• Center alignment option
• Right alignment option
• Image upload option
• Outbound link from the image
• Checkbox to open in new tab — default is to open in new tab

Background Image

Hero Image

This is a pre-built element based upon the background image block to give you an easy way to build an engaging landing page for your users.

By design, the Hero element is available when adding a strip, but not when modifying a column.

Edit options available to admin users are as follows:

Image

• Background image height (in px) — this is default set to 500px, but can be edited by user
• Background image scaling — scale to fill is default
• scale to fill — image will fill the column space
• scale to fit — image will fit inside column
• Background image position — default center
• Center
• Top
• Right
• Bottom
• Left

Text

• Text-box with free text format (same as standard font controls)
• Text width (in %) — default is 100%
• Text vertical alignment - default is center
• Top
• Center
• Bottom
• Text horizontal alignment — default is left
• Left
• Center
• Right

Overlay

• Colour picker (inclusive of brand colour palette)
• Overlay left and right inner spacing (in %) — default is 10%
• Overlay transparency (0 is transparent - 1 is opaque)
• Full height overlay checkbox
• Custom height of overlay (in %) — default is 100%

Background image link

• Background image input text box
• Open in new tab checkbox

Video

Videos can be controlled within two settings.

• File upload - recommended files; mp4, flv, f4v, ogv, or avi.
• Upload to your pages from a local location - current upload file size limit to facilitate speed is 5mb
• Video settings
• URL embed - text field which accepts URLs from YouTube & Vimeo only
• Caption - text field to add context to your video
• Caption location - choose from left, center, right

Audio

Audio media can be controlled within two settings. Currently audio embeding is not possible, but is on the roadmap.

• File upload - recommended files are OGG, WebM, AAC, and WAV
• Upload to your pages from a local location - current upload file size limit to facilitate speed is 5mb
• Audio settings
• Caption - text field to add context to your audio
• Caption location - choose from left, center, right

Buttons

Creating engaging call-to-actions that are stylish, functional, and adhere to your brand guidelines are crucial to the look and feel of your Brand Hub.

Button settings available to edit:

• Button text
• Button URL
• Style - choose between your primary, secondary or tertiary
• Width - text width or full width
• Button alignment - left, middle, right
• Open link in new tab checkbox

Interactive Training Templates

To engage your audience when trying to convey either a lot of information or a complex topic, we created several interactive components built into the CMS.

Flash cards

Overall settings:

• Number of cards - create between 3 to 5 (inclusive) cards
• Card pattern - choose between 3 set card patterns

Card settings

• Back face text - text that appears on the unflipped card face
• Front face text - text that appears on the flipped card face
• Image upload - upload an image to the flipped card face

Sorting cards

Sorting cards are split between 'cards' and 'landing pads'. Cards are the elements that you can drag & drop onto landing pads.

Landing pad settings

• Number of landing pads - default is set at 3, however you can choose from between 2 and 4 (inclusive)
• Individual landing pad settings
• Landing pad text - edit the text to display on the landing pad

Card settings

• Number of cards - default is set at 4, however you can choose from between 3 and 5 (inclusive)
• Individual card settings
• Card text - edit the text to display on the card
• Landing pad pairing - choose which landing pad is the 'correct' option for the card
• Image upload - upload an image to the card face

General settings

• Icon used for when you've cycled through the cards - choose between four options; grimace emoji, happy emoji, club suit, empty symbol

Image popovers

General settings

• Number of Beacons - These are the highlighted elements over the image. The default value is 3 but you have the option to choose between 3 and 5 (inclusive) beacons. - Each beacon has one 'popover'. Popovers provide the opportunity to convey more information at a certain aspect of an image.
• Background image - upload an image to the background of the section

Popover settings

• Popover Heading
• Popover Text
• Horizontal Position of Beacon - calculated in % width, the position is calculated using a slider controlled by the user.
• Vertical Position of Beacon - calculated in % width, the position is calculated using a slider controlled by the user.
• Placement - where the popover will appear (relative to the beacon) once clicked, default is bottom. Options are; top, right, bottom, left

Interactive Brand Templates

Interactive Brand Templates provide your users with a fully immersive interactive experience when reviewing or referencing your brand guidelines and pages.

Adding interactive brand templates is an identical process to all other block elements. Only clients who have purchased the interactive brand guidelines will see these options in their CMS page builder module.

To edit the interactive templates is the same process as any other element, with some restrictions (to balance good UX and asset layout requirements).

Colour palette

The colour palette template can be used to display a range of brand colours for users to view on screen. On hovering over any colour, the section will grow and display the HEX code and optionally, the colour name.

The colour palette has a fixed number of columns of either one or two, which is dependant upon the users choice whether to show text.

The editable settings exposed to admin users are as followed:

• Supporting content
• Single choice selection between 'no text' and 'show text'
• Text content input (input disabled when 'no text' is selected)— Please note; there is a maximum limit of 1024 characters for text content. Please be aware that styling text can use up more of this character count.
• Content background colour
• Palette colours choice
• Choose between 2 (inclusive) and 20 (inclusive) segments
• Colour picker for each colour segment

Colour wheel

The colour wheel template can be used to display a range of colours for users to view on the screen. On hovering over any colour, the ring will grow and display the HEX code of all colours on that ring.

The colour wheel has a fixed number of columns, these cannot be changed.

The editable settings exposed to admin users are as followed:

• Supporting content text block — Please note; there is a maximum limit of 1024 characters for text content. Please be aware that styling text can use up more of this character count.
• Number of segments — single choice option
• 4 segments
• 6 segments
• 8 segments
• Number of rings — single choice option
• 1 ring
• 2 rings
• 3 rings
• Colour picker for all segment/ring combinations

Font explorer

This allows users to experiment with the font in different weights and sizes, live without leaving the page.

The font explorer is fixed at one of column, this cannot be changed.

The editable settings exposed to admin users are as followed:

• Supporting content
• Title — text box
• Title colour — using the standard CMS colour picker
• Demo text — text box
• Demo text colour — using the standard CMS colour picker
• Fonts
• Font family
• Font fields colour (i.e. font size & weight values) — using the standard CMS colour picker
• Font size options — text box (choose between (and including) 1 font size and 10 font sizes)
📢
Please note: 1. The font family is determined through the brand's font 2. The font weight is predetermined by the font family (e.g. you can't add a font weight to the font explorer if it doesn't exist in the brand's library. 3. You can only have one font family option per template. (E.g. if you want to show off two fonts, you need to use 2 font explorers.

Font leading

The font leading template allows the user to preview how leading affects the brand fonts and educates them on how to use this.

The font leading has a fixed number of columns, these cannot be changed.

The editable settings exposed to admin users are as followed:

• Supporting content text block — Please note; there is a maximum limit of 1024 characters for text content. Please be aware that styling text can use up more of this character count.
• Font leading text block
• 3 leading options each with the following *by default, the middle option is set as correct.
• Label — text box
• Value — input value of line height/leading (unitless value)
• Recommendation — check for correct, cross for incorrect

Font tracking

The font tracking template allows the user to preview how tracking affects the brand fonts and educates them on how to use this.

The font tracking has a fixed number of columns, these cannot be changed.

The editable settings exposed to admin users are as followed:

• Supporting content text block— Please note; there is a maximum limit of 1024 characters for text content. Please be aware that styling text can use up more of this character count.
• Number of options you would like to track. Choose between (and including) 3, 5, to (and including) 7
• 3 tracking options each with the following *by default, the middle option is set as correct.
• Label — text box
• Value — input numerical value (unitless value)
• Heading — single selection (check for correct, cross for incorrect)
• Text — single selection (check for correct, cross for incorrect)

Image slider

The image slider template allows the admin to place two different images on top of one another, allowing the user to use the slider to reveal one or the other. This is a great way of showing visual differences in a comparison view.

The image slider strip has a fixed number of columns, these cannot be changed.

The editable settings exposed to admin users are as followed:

• Supporting content text box — Please note; there is a maximum limit of 1024 characters for text content. Please be aware that styling text can use up more of this character count.
• Left image uploader
• Right image uploader
• Left caption text
• Left caption image
• Right caption text
• Right caption image

Recently added

This will automatically show users the last 20 assets that have been added to the Brand Hub (that they can access). The admin users can choose the text shown at the top and it’ll auto-advance through the new assets.

The recently added assets strip has a fixed number of columns, these cannot be changed.

The editable settings exposed to admin users are as followed:

• Header — textbox input
• Sub header — textbox input

Showcasing imagery

The showcasing imagery template makes for a great way to display content to users in an intuitive whilst allowing the imagery to breathe.

The image slider strip has a fixed number of columns, these cannot be changed.

The number of thumbnails per column is set at 3, this cannot be changed.

The editable settings exposed to admin users are as followed:

• Supporting content
• Single choice selection between 'no text' and 'show text'
• Text content input (input disabled when 'no text' is selected)— Please note; there is a maximum limit of 1024 characters for text content. Please be aware that styling text can use up more of this character count.
• Imagery
• Colour picker to set the content background colour
• Single select option for the number of columns (for the thumbnail views) choose from 1, 2 or 3
• Input text for each thumbnail column heading with text alignment options (left, center, right)
• Thumbnail image uploader
• Showcase image uploader

Create a page

Now you know more about page structure and elements, it's time to build a page.

Please note, by default, pages are created with the ‘unapproved’ status, this means only admins have visibility of this page.

You can either create a group of pages or a single page - through the same user journey. This is a way to intelligently, intuitively and automatically group content on a page (as explained above).

Enter the title of your new pages, followed by the name of the first page - if you want to create just a single page, for example the homepage, then the name of your 'first page' isn't relevant - but still mandatory as this enables you to add sub-pages in future should you wish to.

Please note, if you only have one sub-page, the left-hand menu showing after you create your first page is only for admin users and will not be shown to standard users once the page is made public - the page will appear full-width.

Create a sub-page

As described above, you may need to create a group of pages to intelligently group content. For example, Brand Guidelines around an overarching topic of, for example; 'Video'.

To create a sub-page, simply use the left-hand navigation menu.

Please note, because you now have more than one sub-page (in the above case, two) the left-hand menu will be shown to users once the pages are made public. This makes for easier navigation between relevant content. - This can be seen via 'preview mode' as shown above, this can be found in the page builder 'top' menu.

Page settings

There are two ways to edit page settings - either from the dashboard, or within the page itself. Control the page structure, page sub-menu, page name and the protection group. We’ve also enabled a ’preview’ mode from within the page to give you a feel for how the page will look and perform for your users.

Please note; because the page only had one sub-page, on preview mode the left-hand menu dissapears as it replicated the view of a standard user.

Homepage

To set a page as your homepage, simply go to the 'Pages Hub' and select the Page you wish to set for your homepage via the house icon - please note, the option to set as homepage only becomes availbale when the page group is set to 'Public'.

Add & edit page content

Adding content within our drag & drop page builder. Columns, strips and elements can all be edited individually live, by admin users. From background colour to container style and column layout to padding & margins – all in a few clicks with no code!

Add content

To add content, simply follow the call to action to add page elements. You can select from a variety of our base elements; from headings to text, and audio to video.

Edit columns

We went a step further than allowing just simple padding and margin settings within columns. With just a few clicks you can control content positioning, colours, font settings, content ordering – even adding, editing or deleting elements.

Menu Builder

The Menu Builder in the Brand Hub allows any admin user to easily add, remove or update items within the Brand Hub header and footer navigation.

Admins can add up to three levels of menu items within the header navigation in order to direct users to site content. When new content is added, new menu items can easily be created as appropriate. Admins can add a single level of footer navigation items, which are often used for links such as ‘Terms and Conditions’ etc.

Both the header navigation and footer navigation menus are shown on every page within the Brand Hub.

Permissions

To access the menu builder, a user must have the ‘Admin’ role within the Brand Hub. Guest, standard and privileged users will not be able to access the menu builder nor change any menu items within the Brand Hub.

Accessing the menu builder

The menu builder can be found within the 'Apps' menu. Please note, this menu item will not show within the apps menu if the user does not have the appropriate permissions to view it.

Header navigation

The header navigation is located at the top of every page, below the logo and the search bar. Admins can add up to three levels of header navigation items in order to direct users to site content. When new content is added, new menu items can easily be created as appropriate.\

Above, three levels of header navigation can be seen.

• Level 1: Guidelines
• Level 2: View our guidelines
• Level 3: Logo, Colours, Typography etc.

Footer navigation

The footer navigation is located at the bottom of every page. Admins can add one level of footer navigation items. When new content is added, new menu items can easily be created as appropriate. Below, the menu shows three single-level menu items; 'Get in touch', 'Terms & Conditions' and 'Contact Us'.

Menu builder controls

• Header navigation
• Footer navigation

To edit the header navigation, the admin will select the first tab. The admin can view all current level 1 items in a list view. Those that have level 2 menu items are shown with an arrow next to them. By default, all items are collapsed, and can be expanded by clicking the arrow to reveal level 2 (and level 3) menu items.

Above: the header navigation tab shows all existing level 1 header navigation items

Through this control view, admins are able to edit, add, reorder or delete menu items.

Adding a menu item

To add a level 1 menu item the admin will click ‘Add main menu item’. They must specify:

• Name – the menu item that will appear within the navigation
• Link – the URL the menu item will link to. The user can choose a page from within the Brand Hub or an external URL

The name and description fields have a generous maximum character limit of 80.

Once complete, the admin will click ‘Create’ to add the new menu item. This will be added to the end of the header navigation list by default.

To add a level 2 or 3 menu item the admin will click ‘+’ against the menu item they wish to be the parent of the child item they are creating. Menus can have a maximum of 3 levels, therefore the '+' will be disabled on level 3 menu items.

• Name – the menu item that will appear within the navigation
• Link – the URL the menu item will link to. The user can choose a page from within the Brand Hub or an external URL

Once complete, the admin will click ‘Create’ to add the new menu item.

Deleting a menu item

To delete a menu item, the admin can click on the ‘Delete’ (bin) icon next to the menu item they wish to remove. They will receive a confirmation message to mitigate any accidental deletion.

Please note, deleting a level 1 or level 2 item will also delete any child menu items that sit beneath it.