Point - Tiles navigation component

Introduction

The tiles component is a visual and customisable way to highlight and publish pages for your users. It allows you to create visually pleasing navigation buttons which supports enhanced styling and design.

The tiles have a high level of flexibility and offer a large array of options from behavior, layout, decoration and design options, allowing you to tailor your users journey just the way they need.

How to set up

You need a page template with the "Tiles" component on it.

Create a page in page admin. Make sure this page uses a page template with this component on it.

Go to the page and begin editing.

In Edit mode you gain access to the tiles options by clicking the cog underneath it.

General settings

General settings applies to all the tiles at the same time. Under the "general" tab we have the following settings.

• Styles: Select between several different layout options. In our above example, we use the "one and two" setting.
• Display: This setting allows you to select the overall visual presentation of the tiles.

Normal		Full width		Card
The tiles are centered on the page and have space between them.		Tiles covers the full width of the page and have no space between them.		Card layout with the text underneath them. Also allows you to add a small descriptive text.

• Title: Heading title above the tiles.
• Subtitle: Additional text above the tiles.
• Background: background behind the whole tile section. (note that each tile background is controlled on the tiles section. (See below)
• Inverse: Inverts the title, subtitle (and card style tile texts if used) text color.
• Group permissions: Allows you to decide which user groups may see each tile. Note that if group permissions are enabled, any tile NOT having a user group selected will become invisible. Group permission does not show any tiles to "public access" viewers. See below for how to edit "group permissions" on each tile.
• Load more: Set a number of tiles which will be displayed. Additional tiles will be hidden behind a "show more" button.
• Save: Saves and publishes your changes immediately.

Settings for each tile:

Each time have individual settings which makes them unique from each other. Remember that tiles MUST be linked up to work.

• Add tile: Clicking Add tile in the top right corner will create a new tile element. This tile will be clean and unconfigured, meaning you need to fill in the following fields to ready.
• BG (Background): You can select background color, image or video to display for each tile. Remember to use web optimized imagery so loading times do not increase. You may also combine image/video and background color by using the fade slider.
  
• Icon: You may select an icon to be displayed on the tile. Icons available are the ones provided by the system. You may also order an update to add your own icons to this list.
• Focus: If you use an image or a video, you can then decide “focus”. If for example someone views the page on a phone, the tile might be cropped and you can decide where the “focus point” is on the image.
• Heading: The headline text on (or under) the tile
• More - Change description: On "card" type tiles, you may add an additional text
• More - Link: All tiles must be linked. Decide what clicking this tile will do.
• Inverse: Inverts the color of the text (not used for "card" type tiles)
• Actions - Duplicate: Duplicates the tile so you can quickly make an alternate version
• Delete: Deletes the tile (only this one tile)
• Copy from: If you have a multi language solution, you may copy the setup from other languages.
• Save: Remember to save your changes.
• Group permissions: Enabling group permissions (see above in general settings) will add a new button to the tile.

This new button will allow you to configure which user groups may see this tile. It is important to note the following:

• If you enable group permissions. Not enabling user groups on each tile will cause them to become invisible to users.
• If this page is public, the whole section will be hidden for public access users. This feature can be beneficial in some cases as public users will be prohibited to seeing tiles meant for internal logged in users.
• The chosen order of your tiles may differ depending on who sees them. If a user don't have access to a tile, then this tile disappears and the next tile in line will take its place.
• Turning off access to a tile does NOT mean the page is inaccessible. It is important to set page access to match the tile access.

Fill in one or more user group on each of the tiles and then click save to confirm your changes.

Animation settings

Going over to the "Animations" tab, you get access to general visual behavior for all the tiles.

Appearing

What happens when you first load the page with these tiles on it. How do they tiles load in.

Hover effects

When users move their mouse pointer over a tile, you have the tile alter appearance.

• Hover style: Set an animation style.
• Overlay colour: Tile changes colour.
• Text hover colour: The text on the tile changes colour.
• Icon hover colour: The icon on the tile changes colour.