--- title: "How to Add and Configure the Smart Tiles Web Part" description: "Step-by-step guide to adding the Vitextra Smart Tiles web part to a SharePoint Online page: deploying the package, finding the web part in the toolbox, the sample tiles, the web part title, every setting of the Appearance group, the About group and placing the panel in a full-width section." url: https://vitextra.com/en/support/kb/10042 language: en published: 2024-11-23 modified: 2026-10-10 products: - "Smart Tiles" author: "Jānis Bērziņš" tags: ["add Smart Tiles web part", "configure Smart Tiles", "SharePoint Online tile navigation setup", "web part property pane", "Appearance settings", "full-width section web part", "Vitextra Smart Tiles installation", "SharePoint page tiles", "Smart Tiles settings", "tile navigation panel"] --- # How to Add and Configure the Smart Tiles Web Part Step-by-step guide to adding the Vitextra Smart Tiles web part to a SharePoint Online page: deploying the package, finding the web part in the toolbox, the sample tiles, the web part title, every setting of the Appearance group, the About group and placing the panel in a full-width section. ## Introduction This article walks through the first steps with [Smart Tiles](https://vitextra.com/en/products/smart-tiles): deploying the web part, adding it to a modern ::SharePoint Online:: page, and the settings of the property pane that apply to the whole panel. The properties of individual tiles — texts, links, colors, icons — are covered in [KB10242. How to Add and Edit a Tile in Smart Tiles](https://vitextra.com/en/support/kb/10242). ## Before you begin Smart Tiles is deployed to the tenant once, by a SharePoint administrator, from the tenant ::app catalog::. The package is deployed tenant-wide, so the web part becomes available on every site without being added to each site separately. The procedure is described in [KB10035. Installing Cloud-based Product](https://vitextra.com/en/support/kb/10035). To add the web part to a page you need permission to edit that page — the **Edit** permission level or membership in the Members group of the site is sufficient. 📝 **Note** Smart Tiles works on modern pages only. On a site that still uses classic pages, create a modern site page first. ## Adding the web part to a page 1. Open the page and click **Edit** in the top-right corner. 2. Hover over the place where the panel should go until a line with a **+** sign appears between the sections or web parts, and click it to open the ::web part gallery::. 3. Type *Smart Tiles* in the search box and click the web part. ![Smart Tiles in the web part toolbox](https://static.vitextra.com/articles/10042/web-part-toolbox-en.png) *Smart Tiles in the web part toolbox* The web part appears on the page with three sample tiles that link to Vitextra product pages. They show what a tile looks like and can be edited into your own links or removed. ![The web part with the sample tiles](https://static.vitextra.com/articles/10042/sample-tiles-en.png) *The web part with the sample tiles* ## The web part title Above the tiles there is a title field. Click it and type a heading for the panel, for example *Quick Links* or *HR Services*. The title is optional: leave it empty and no heading is shown on the published page. ## Appearance settings Click the pencil icon (**Edit web part**) on the left of the web part to open the property pane. The **Appearance** group holds the settings that apply to every tile. ![The Appearance group of the property pane](https://static.vitextra.com/articles/10042/appearance-group-en.png) *The Appearance group of the property pane* |::Setting::|::Description::| |:---|:---| |**Font Size**|Size of the tile title, in seven steps from 14 px to 32 px. The description, when shown, is scaled down proportionally.| |**Icon size**|Size of the icon, in six steps from 20 px to 64 px. Custom icon images use the same sizes.| |**Internal Indent**|Space above and below the content of a tile, 0–30 px. Larger values make the tiles taller.| |**Icon Indent**|Space between the icon and the title, 0–30 px.| |**External Indent**|Space between neighboring tiles, 0–30 px. At 0 the tiles touch each other and form a solid mosaic.| |**Shadow**|Draws a soft drop shadow under the icons.| |**Show Titles**|Shows or hides the titles of all tiles. With titles hidden the icons are centered in the tiles.| |**Show Descriptions**|Shows or hides the descriptions of all tiles. Descriptions remain available in the tooltips.| |**Hover Effect**|Enables a visual effect when the pointer rests on a tile. The **Effect** list, the strength slider and **Duration** appear below the toggle.| The sliders and toggles are applied to the page immediately, so the result can be judged while changing them. 💡 **Tip** The sizes, indents and texts are described in detail in [KB10247. Tile Sizes and Layout in Smart Tiles](https://vitextra.com/en/support/kb/10247) and [KB10249. Showing Titles and Descriptions on Tiles](https://vitextra.com/en/support/kb/10249); the hover effects in [KB10248. Configuring the Hover Effect for Tiles](https://vitextra.com/en/support/kb/10248). ## The About group The **About** group of the property pane shows the license of the web part: the **Status** (trial, active, expired or suspended), the **Version** of the web part, the **Start Date** of the subscription and the **Tenant** it is assigned to. During the trial the number of remaining days is shown here as well. The group also links to the product page where a subscription can be purchased. 📝 **Note** When a newer version of Smart Tiles is available, a notice appears above the tiles in edit mode. The update is installed by uploading the new package to the app catalog; the pages and their tiles are not affected. ## Placing the panel in a full-width section Tiles make the strongest impression when they span the whole screen. To achieve this, put the web part into a ::full-width section::: 1. In edit mode, hover over the left edge of the page and click the **+** that appears between sections. 2. Choose **Full-width section** from the list of layouts. 3. Drag the Smart Tiles web part from its current section into the new one, or add a new Smart Tiles web part into the full-width section. ![Adding a full-width section](https://static.vitextra.com/articles/10042/full-width-section-en.png) *Adding a full-width section* Smart Tiles also fits a one-column or two-column section, and several Smart Tiles web parts can share a page — for example one panel per department. Each web part keeps its own settings and hover effect. ❗ **Important** Full-width sections are available on communication sites and on team sites with the modern home page layout. On a page without full-width sections the tiles fill the width of the section they are in. ## Saving the page Tiles and settings are stored in the page. Click **Save as draft** to keep working later, or **Republish** to make the panel visible to visitors. Until the page is republished, visitors see its previous version. Learn more about the product: