SmartHub Builder - How to Open SmartHub Builder and Start Creating Layouts

About This Article

This guide introduces SmartHub Builder, SmartHub Layouts and Tiles. This information is intended for clients to gain an understanding of using SmartHub builder.

Tiles are the building blocks of any SmartHub Layout. SmartHub Layouts are pages, made up of different Tiles, and these are created within SmartHub Builder, (accessed from the Admin Portal / Reward Manager). 

Clients can choose from a variety of Tiles to create SmartHub Layouts (pages) based on which content they want to share with their members, allowing them to highlight the most important information depending on their organizational needs and preferences.

Prerequisites

In order to manage SmartHub Layouts you will need the Smart Hub Administrator role. Please reach out to the Permissions Manager within your organization, if you would like to get permissions to create and edit SmartHub Layouts. 

Access SmartHub Builder

To access SmartHub Builder, as a client:

1. Log in to the Admin Portal (Reward Manager) by clicking Account > Admin Portal:

2. Navigate to Smart Products > SmartHub from the left-hand menu:

You will be presented with your SmartHub Home page which should look something like this:

Create Your First Layout

One you are on the SmartHub Home page you can create a new Layout.

1. Click Create new layout:

2. Edit the Layout Title by clicking on the text that says Layout Title, then giving it your own name:

3. Click the Save button to save the new blank Layout:

At this point the Layout is saved and can be opened and edited.

Editing a Layout

Open the Layout to edit/configure it...

1. Click the Edit link on the Layout you want to work on:

This will load up the Layout: SmartHub Builder opens with the relevant Layout loaded.

You will see the name of the Layout in the You are now editing dropdown:

2. Clicking Enter Title or Enter Subtitle will allow you to edit them.

3. You can either keep the left menu hidden, or click and drag the green bar if you wish to show it:

Note: If you show the menu the rest of the space for Tiles is 3 Columns. If you keep the menu hidden the layout is 4 columns. See examples of these Layouts at the bottom of this guide.

For a full reference of different Tile types see: Tiles in SmartHub Layouts: Types, Sizes and Uses

Add Tiles to the Layout

You can add some Tiles to the Layout by selecting the Section (such as SIMPLE, RETAIL etc.) from the left-hand menu, then exploring the Tile types under each.

For example, under the SIMPLE Section, there are Tile types for TEXT, IMAGE or VIDEO:

1. Click other Sections to expand them and see the available Tile types:

2. Click and drag a Tile to add it to the Layout:

3. Resize a tile by hovering over the Tile you added, then clicking and dragging the bottom-right corner:

4. Continue to drag in the Tiles you want, rearrange and resize them, until you are happy with the Layout.

Note: Layouts will save automatically as you work, so there is no Save button to click while you are editing.

More About Tiles

Tile Classification and Dimensions

Use this as a guideline to build your layout or to properly size your tile designs. The image below can be used to help calculate pixels sizes for tiles. The white space between each tile is 60 pixels. These are the recommended pixels sizes to make sure your artwork is displayed at the best quality on all screen sizes and devices. 

When uploading an image, make sure the size and orientation are suitable for the tile size you want (e.g. avoid a horizontal image for a 1x2 tile). 

The maximum file size for images you upload to the site is 5MB. 

Image Sizes for Different Tile Sizes

The table below gives the recommended image sizes to be used for certain Tile sizes:

Tip: for the best results, upload images with the width 1000px (or higher).

3 Column Layout

A 3 column layout has space for three columns of Tiles, but also includes a left-hand menu. Chose this Layout if there's a set of links you want your employees to see at all times, regardless of how your Tiles change. 

4 Column Layout

A 4 column layout has four columns of tiles and does not include a left-hand menu. Choose this Layout if you'd like your Tiles to fill the homepage for added visual impact. This layout is more commonly used.