The morphing tile

How to Use

In order to use the Morphing Tiles, you will need to determine whether the content that you are linking to is able to be iframed. If the content is unable to be iframed, then the morphing tile will overlay a gray screen. In order to close a morphing tile, you will be able to click the close icon which will be located in the top right corner of the screen.

Settings

Tile

Width – Adjusts the width of the tile, in pixels.
Height
– Adjusts the height of the tile, in pixels.
Background Color
– Changes the background color of the tile using the color picker.
Highlight on Mouse over
– Toggle whether the tile changes color when it is hovered on.
Mouse Over Color
– Changes the background color when the tile is hovered on. Only available when Highlight on Mouse Over is checked.

Text

Text – Changes the title of the tile.
Vertical Align –
Sets the vertical location of the text within the tile, either Top, Middle or Bottom.
Horizontal Align
– Sets the horizontal location of the text within the tile, either Left, Center or Right.
Text Padding
– Adjusts the padding (the gap between the text and the edge of the tile) to the left, right, top or bottom of the tile, in pixels.
Override Page Font
- This allows you to override the font family that has been selected if the checkbox is checked.
Font Family
– Changes the font family of the items text. Selectable via a dropdown list. (Note: This is only available if Override Page Font has been selected)
Font Size
– Changes the size (in pixels) of the text within the Text field.
Font Color
– Changes the color of the text within the Text field. Selectable via the colour picker.
Font Style
– Changes the style of the text within the Text field. Either Italic and/or Underlined.
Font Weight
– Changes the weight of the text within the Text field. Selectable via dropdown list.

Image

Image Path – Sets the location of the image for the tile.
Image Layout Style
– Changes how the image is displayed, either Tile, Stretch, Fit, Fill or Center.
Image Padding
- Adjusts the padding (the gap between the image and the edge of the tile) to the left, right, top or bottom of the tile, in pixels.
Edit Image - Opens up the Image cropper.

Links

Path – Sets the location of the link.

Layout

Layer – Changes the depth of the tiles within the page. Selectable via dropdown either Foreground, Background or Custom.
Reorder Within Layer
- Changes the depth of the tiles within the layer. Selectable via dropdown either ‘No Change’, ‘Bring to Front’ or ‘Send to Back’.

Advanced

Tile Visibility – Changes which groups can or cannot view the tile. Selectable via dropdown either Everyone, ‘Only for’ or ‘For everyone except’. When ‘Only for’ or ‘For everyone except’ is selected, a dropdown menu will appear where you can assign groups to the category that was selected.
Lock Tile for Non-owners
– Toggles whether only tile can be only modified by an owner.

Did this answer your question?