Select Tile Type: The first thing to do when creating a new tile from scratch is to choose a ‘type’ for it. There are several tile types to choose from, and each has a unique html/css structure and most sport different animations. For convenience, these types are categorized on the basis of their most likely ‘purpose’ such as ‘image’, ‘button’ etc. Browse through the tile types and pick one that suits your requirement. For example, if you’re looking for an ‘image’ based tile where the primary focus is on the image element of the tile, so that the text should only be revealed on hover, then choose the ‘image’ type. Another example is ‘notification’ type where the focus is mostly on text, and the image is just incidental, can even be skipped altogether. It’s convenient to experiment with tile types as they’re just a single click away and can be changed at any time, so just cycle through various options and get a feel for which you prefer for the occasion.
Fill-in Content: Next up is the ‘Content’ panel. While this one is mostly self-explanatory, there are a few things to take note of – Firstly, for the ‘image’ element, you can choose to use a font awesome icon instead of the image. This feature can be very handy thanks to the bevy of free and lovely FA icons available. As compared to images, they load fast and scale brilliantly. You can switch to FA icons by checking the option right under the image section. An input box will now appear where you can type the FA code for the icon. To browse through FA icons and get their code, click on the link icon next to this option and you’ll be taken you to the FA icons’ index page where you can view all the icons and their codes.
Secondly, tiles can be linked to google maps, YouTube, Vimeo or DailyMotion videos, for which you just need to type in their link in the media input and the media pop open up in a lightbox. But if you want a regular image to open up in the lightbox, then check the ‘Enable lightbox image instead’ option for that instead. This option opens up the input for setting up the lightbox image. If no image is selected, then the tile’s main image itself is used by the lightbox as well.
Styling the Tiles: Now, in order to style these content elements move on to the ‘Other’ section of the tile panel. Here you’ll find various options for customizing the visual look of your tiles, with many properties allowing a ‘hover’ style beside the regular style. In the case of the ‘link’ element, you can choose to add additional links beside the main link element and provide them with customs styling. You can also choose to have ‘text’ for the links and/or a font awesome icon of your choice. There is also an option to hide all links and instead have the entire tile link to the main link directly. In the ‘lightbox’ customization section you can select which elements to display in the lightbox content on hover.
Correspondingly, every text element has the option for being hidden from view, and if you so choose, being revealed only on lightbox hover. Last but not least, there’s an ‘overall’ section where you can apply customs setting for the entire tile. This section also holds a ‘color presets’ option for one click application of colors across your tile. Another feature for greater convenience is the option to ‘import or export’ the tile’s settings. You’ll find this option as well in the ‘Overall’ section. This feature is very handy when you are working with several tiles and want to copy customizations between them, Or when you wish to import settings from a tile that you wish to use as the base for your new tile.