Setting Up Your UI (previous version)

Getting Started

To start setting up your UI, select My Account then select the Manage UI option.

Note: To access this page, you need to have the Manage UI permission set.

Color Scheme

This opens a new window with further menu options on the left and the Color Scheme options on the right:

1. The Color Scheme window allows you to choose the UI color schemes for the Primary, Secondary, Highlight, Preview Element, Menu, Footer, Cart and Layout. To change the color choice from the default, click on the color palette next to the relevant option, then select your new color, as shown below:

Section	Color	Purpose
Primary Colors	Primary Background Color Primary Border Color Primary Text Color	These affect the primary action button e.g. Save button on every page.
Secondary Colors	Secondary Background Color Secondary Border Color Secondary Text Color	These affect the secondary action button e.g. Cancel button on every page.
Highlight Colors	Highlight Color Highlight Text Color	These are used for display for a selected option e.g. selected item in a kit, or selected tile/ list view icons.
Preview Element	Selected Element	These all apply to the editing of a template so only Template Authors will see the impact of these changes. Please see the separate Template Author document, available from Elateral.
Colors	Color, Deselected Element, Color, Rollover Element, Color, Locked Element Color, Margins, Bleed, Page, Pasteboard Color, Element Name Color
	Information Icon Color	Color of the validation message icon.
Menu	Menu Bar Color	Color of the top bar.
	Menu Text Color	Color of the text on the top bar.
Footer	Footer Bar Color	Color of the footer bar.
	Footer Text Color	Color of the text on the footer bar.
Cart	Cart Count Color	When an item is added
		to the cart, the
	Cart Count Text	counter icon is
	Color	displayed. The color of the icon and its text are based on these settings. You need to add an item to your cart to see these in use.
Layout	Page Background Color	This sets the background color of every page.

2. Click Save to save your changes (you will be prompted to do so before leaving this page if you have not done so already). Changes will be shown when you return to the Home page (or any of the other pages in the system).

Home Page

Returning to the menu on the left, the next option to configure is the Home Page. This has been designed so that everything is configurable, from the links on the toolbar, to the colour of the Search box. Remember that you can edit the configuration at any time.

1. In the Images section, for both the Background Image and the Home Page Logo, you can either drop files or click to upload them.

Note: Brandgility accepts both JPG or PNG images for the background and logo. Although the file size is not restricted, Elateral recommends the use of an optimized image with the properties described below. | Image | Description | |-----------|-----------------| | Background Image | Appears in the background on the home page. Choose an image with the following properties: - A landscape orientation - An aspect ratio of 1.5. - A minimum size of (w) 1500px and (h) 1000px. For best results, we recommend a larger image, such as (w) 5400px and (h) 3600px | | Home Page Logo | A logo which appears only on the home page and is shown instead of a title. Any size of image can be used. The image will be placed into the area specified in the Height and Width settings in the Positions section. |

2. In the Titles, Positions and Title Colours sections, enter the text for the Home Page Title, and use the configuration options to amend its Positions and Title Colors:

Note: In the Positions section, select Show Title or Show Logo to toggle between configuring the Home Page title and the Home Page logo.

The position settings for Title Height and Title Width define the area in which the title or logo are displayed.

The padding settings are used to add/remove padding around the title text or Logo.

3. In the Page Content and Navigation Links section, there is a Content Background rectangle displayed around the Title/Logo plus any Home page tiles. The colour of this rectangle is set using the Content Background Colour parameter, which also allows it to be set as transparent, if required:

4. Select the Display Links option if you want to see the following links at the bottom of your Home page:

   • My Orders

   • My Saved Items

   • My Reports

Home Page Tiles

The Home Page Tiles section allows you to configure dynamic Grid tiles on your Home page. You can also create your own static custom tiles.

1. In the Page Content section, using the drop-down lists, select the type, subtype and attribute of the content that you wish to use to generate dynamic Grid tiles on the home page. In Logo Grid Per Line Count, select the maximum number of tiles to be displayed on each row.

2. In the Grid Positions section, set the padding around your Home page tiles. Select the Display Grid Names option if you wish to display the name of each tile.

3. In the Grid Colours section, set the background and text colour of the tile names.

4. In the Tile Grid Positions section, set the position of your static custom tiles on the Home page. The higher the number of pixels (px) in Tile Grid Top Padding, the bigger the gap between standard tiles and the custom tiles on the Home page.

5. Select Display Tile Names to display the names of the static custom tiles.

6. In the Tiles section, you can add your own custom tiles:

   a. Select

   to add a new tile.

   b. Enter the name of the tile.

   c. Enter the tile's target URL. This is where users will get

   redirected to when they click on the tile.

   d. Upload a Thumbnail image for the tile.

   e. In the upper right corner, select Add.

Tiles are shown is the order that they are listed. These can be maintained as follows:

Select to edit an existing tile. Select

Select and hold to change the order of the tiles.

General

Select the General option from the left side menu. This allows you to add an image as your own UI logo. The logo is visible on every page in the top left corner of the UI. Again, you can either drop files or click to upload them.

The image you choose should have a minimum size of (w) 350px and (h) 80px. The image's aspect ratio should be 4.375.

Wizard Setup

The Wizard helps you to filter information in your system and can be used to manage a user's navigation steps directly to content of interest to them (instead of going directly to the search and having to filter through content). You need to both enable and configure the Wizard option.

Select the Wizard Setup option from the left side menu. The Wizard Setup window opens.

1. Select the option: Turn Wizard On.

2. To include a Wizard image, either drag and drop an image or click to upload.

3. Enter the Wizard Name.

4. Select Show Wizard Tile Names to display the name of each tile in the wizard. Tile names can help to clarify the meaning of your tile images.

5. Select the Content Type from the drop-down list: All, Campaign or Asset. Note: The Content Type selected determines the type of content (assets, campaigns or all) that the wizard is to be based on, allowing the user to filter the search results that are presented at the end of the wizard selections.

6. If appropriate, select a Content Subtype from the drop-down list.

Note: The Content Subtype drop-down list is populated with the names of the types (asset types or campaign types) associated with your chosen content type. Depending on what is selected affects which attributes are shown in the attributes list configuration.

The available wizard steps are taken from the list or country attributes assigned to the chosen content type and content subtype.

7. To continue setting up your wizard, you need to have previously created some [Attributes](Managing Attributes), [Asset Types](Managing Assets) and Campaign Types. Once these are in your system, you can then complete the Wizard Steps option.

Note: The administrator can choose which attributes are to be used for the wizard steps and the order in which they should appear. The result is that the end user is presented with a series of steps, which show the available content for each of the selected attributes. This guides them to a filtered set of results on the search page.

8. Click Save to create your Wizard. The completed Wizard tile appears on your home page.

Messaging

The Messaging section allows you to set a browser error message, include legal information with order emails or order summaries, and define the welcome message.

1. From the left-side menu, select Messaging.

2. Enter the Invalid Browser Message, and Legal Disclaimers as appropriate. Note: The Invalid Browser Message appears if your browser is more than two versions out of date or is an unsupported browser. Currently Firefox, Safari and Chrome are supported.

3. In the Welcome Message section, define the message that new users will see when they log in for the first time.

4. In the Profile Update Message section, define a message encouraging users to complete their profile information.** **

5. In the Timeout Warning section, define the warning message that users see when they are to be logged out due to inactivity.

Footer Links

In the Footer Links section, you can add links to the page footer.

1. From the left-side menu, select Footer Links.

2. Select to add a new footer link.

3. Add the link's display name.

4. Add the link's target URL or an email address. You need to add the full URL. For example, include "<https://www> (opens in a new tab)" when necessary. Examples of footer links are:

   • A link to an external website.

   • A link to any subpage you created in the Text Subpages section.

   • An email address.

Text Subpages

In the Text Subpages section, you can create pages with your own content. You can then link to these subpages from a footer link or from a link or tile on your Home page or another subpage.

6. From the left-side menu, select Text Subpages.

7. Select to add a new text subpage.

8. Enter the new text subpage's name.

9. Enter the new text subpage's URL suffix e.g./your-text-sub-page-url-suffix

The text-subpage's URL address follows this pattern: https://[your-domain.brandgility.com]/text-sub-pages/[your-text-subpage-URL-suffix

10. Enter the new text-subpage's content. Use the rich text formatting toolbar to change the page content's look.

11. In the upper right corner, select Add.

To link to your text subpage from the Home page:

1. Copy the external link from the Text Subpages list.

2. Go to the Home Page Tiles section.

3. Create a Home page tile.

4. Use the copied text subpage link as the URL of the tile.