This article describes how to create Tile Navigation to your site with Vitextra Smart Tiles App.
Vitextra Smart Tiles allows building custom tiles navigation panel. Each tile has Title, Icon, and Navigation URL properties to suit your needs.
This article describes how to add Smart Tiles Web Part to the page and configure it.
Smart Tiles does not support the classic page. Use it only with new Modern UI.
Add Smart Tiles to the Page
Open the page where you want to add Tiles Navigation pane in edit mode.
Smart Tiles can be placed on the full-width section. Use this feature to make the most of the browser area on a wide display.
Add a Section (Optional)
To use Smart Tiles in full-width mode make sure you have added a full-width column on the page.
Add the Web Part
In case of you use full-width column all available Web Parts presented on the section. Go to Smart Tiles to add the web part:
If you need to add the web part to the regular section click the plus icon, type in smart or tiles to filter the list and select Smart Tiles:
Configure the Web Part
Once the web part added to the page you can configure it with the configuration pane.
Smart Tiles web part provides a set of parameters for configuring the appearance of tiles:
- Font Size. Size of tile caption. Can be in the range from 13px to 42px.
- Icon Size. Size of tile icon. Minimum value is 2em, maximum - 5em.
- Internal Indent - tile padding in pixels.
- Icon Ident - icon bottom margin in pixels.
- External Indent - tile margin in pixels.
To manage tiles go to Configure under Tiles heading in the web part configuration pane.
Tile properties described in the following table
|Caption||Title of the tile. Always displayed in one line.|
|URL||Hyperlink of the tile.|
|Color||Color of the tile. May be set to current theme accent color or one of predefined colors.|
|Size||Vertical size of the tile. Based on 12-column responsive grid.|
|Icon||Fluent Icon. List of all available icons: Fluent UI Icons|
|Open||What happens when a tile is clicked. The available options are: in the same window, in a new window|
Additionally, you can select the color of the text and icon. Text may always black or white. If none of these parameters is selected the color depends on the tile color.