The home page tiles are the first visuals a member sees when entering the site so it is important the links are relevant to the key pages of the site.

The example below is typical of a standard brand guidelines installation.

The home page tiles device allows you to include a heading and body copy/description text above the tiles themselves.

To learn how to add a heading above the tiles, click ‘Quick links tiles heading’.

Learn more about creating tiles below...

Tiles can link to an internal page, external URL or be a direct downloadable link to an asset or image.

There are three tile types available:

Type	Use
Simple Link Tile	Creates a tile that links to an internal page, external URL or a direct downloadable link to an asset or image in the Asset/Photo libraries.
Asset Library Tile	Creates a tile that links to the Asset library and (optionally) allows you to filter the library by Brand, Category, Colour, File Format, Orientation and by Search Term.
Image Library Tile	Creates a tile that links to the Photo library and (optionally) allows you to filter the library by Category and by Search Term.

To customise an existing home page tile:

1. Select the Home page (node) from the Content section tree.
2. Navigate to the Library/Guidelines links tab and select the link name or edit icon of the tile you would like to edit.
   
   
   
   
3. Depending on the tile chosen, you will be presented with a list of editable properties. Note that the tile name incorporates the name of the tile type. For example ‘- Simple Link Tile’, ‘- Image Library Tile’ etc:
   
   
   
   
4. The tile properties are further explained below.
    

The following table describes properties common to all tile types.

Property	Description
Title *	Headline that appears in the tile. Keep it short!
Text Colour, Background Colour, Hover Colour	Entering a colour value will override the default (global) tile colour settings. Leave blank to retain the global settings. Though it isn’t necessary to change the tile colour, using different tile colours highlights and differentiates the tiles.   After choosing a colour, remember to click ‘Choose’ before closing the colour picker.
Image *	Tiles must have a display icon or image. Click the Add [ + ] icon to select an image to sit within the tile, or click the Edit (pencil) or Delete (x) icon on the existing image thumbnail to select another image. Existing images are currently stored in the Guidelines tiles folder within the Media section (see file path below) and must be no larger than 204px wide x 140px high (and saved as a transparent PNG-24 if a contoured image is required).   ~/Media/Guideline display visuals/Home/Guidelines tiles
Link *	Click Edit next to an existing link (or Add if no link exists) to set the tile to link to an internal page, external URL or an asset or image in the Asset/Photo libraries.   To link to an internal page, select a page under the root ‘Home’ node and click Submit.   To link to an external page, enter the full URL including http:// or https://. Enter a Link title (e.g. a description of the link) and, as is best practice with external links, set the target to open in a new window/tab.   To link to an individual Photo library image or Asset library file^^, click the ‘Select media’ button and select the media file in the respective library.   ^^ Note that only an individual Asset library asset can be chosen. You cannot link to an asset folder or group of assets.   Remember to click Submit after a selection is made.

Asset Library Tile

The Asset Library Tile type allows the tile to link to the Asset library and (optionally) filter the library by Brand, Category, Colour, File Format, Orientation and by Search Term.

In addition to the tile properties outlined in Simple Link Tile above, it includes the following filters:

‘Tile’ tab	Description
Asset Brand, Asset Colour, Asset Group, Asset Orientation	Select a value from the dropdown menus available. The Asset library will filter by the entered values selected.
Asset Category	Click Add and navigate to the ‘Categories’ folder of the Home > Asset library folder in the Content tree. Select a category or subcategory.
Search Query	Enter a value in the text field provided. The Asset library will filter by the entered search term.

Remember to click Save and publish after making your choices.
 

Image Library Tile

The Image Library Tile type allows the tile to link to the Photo library and (optionally) filter the library by Category and by Search Term.

In addition to the tile properties outlined in Simple Link Tile above, it includes the following filters:

‘Tile’ tab	Description
Category	Click Add and navigate to the ‘Categories’ folder of the Home > Photo library folder in the Content tree. Select a category or subcategory.
Search Query	Enter a value in the text field provided. The Photo library will filter by the entered search term.

Remember to click Save and publish after making your choices.
 

Add tiles

You can have as many home page tiles as required. New tiles will be added to the next row. However, for aesthetic purposes, display in rows of 4 tiles.

To add a new tile, click the add ( + ) icon under the existing tiles.

Select a tile type...

Then, follow the guides above for formatting a Simple Link Tile or an Asset (or Image) Library Tile.

Sort tiles

Tiles can be sorted into any order. Simply hold the Move icon next to a tile name and drag the tile into the desired position.

Remember to Save and publish to make the change visible on the frontend.

Delete tiles

Once deleted, tiles can only be restored using the page node’s Rollback action.
 

The “Quick Links Description” rich-text editor property allows you to add a heading and body text above the ‘Quick link’ tiles on the Home page.

To add a heading above the tiles:

1. Select the Home page [node] from the Content section tree.
2. Navigate to the Library/Guidelines links tab and enter a heading in the ‘Quick Links Description’ property editor. You can also add additional body copy or description text, if needed.
    
   
    
3. Note that to horizontally align the baseline of the Quick links heading with the baseline of the ‘Home page left side menu’ heading, the new heading should be styled with the ‘Sub subheading’ style format (which is a <h3> style).
4. When complete, remember to ‘Save and publish’ the Home page.
    

Home page tiles text and notification block

Instead of adding a heading above the Quick links tiles, the text block can be used for other important notification information. For example, it can be used as a message block atop the page as per the following visual:

To enable a coloured background behind the text, just add the following hightlighted style="" information into the <p> tag within the source code of the text block:

<p style="background-color: #f5d815; border-radius: 2px; margin: 0 0 20px; padding: 20px 22px;"><strong>Notice:</strong> From 5pm Friday 2 September, our toolbox will be offline for maintenance and will not be available until Tuesday 6 September.<br />For any brand support during this period please email the Brand team - <a href="mailto:info@synrg.com.au" title="info@synrg.com.au">info@synrg.com.au</a></p>

 E.g.

 
Updated: 24 August 2022