Skip to content
  • There are no suggestions because the search field is empty.

How to use involv Tiles component

How to create Tile groups, How to configure the tiles webpart, How to style the tiles

The Tiles web part is perfect for organizing links, tools, or resources into a clean, visual grid. With multiple levels of navigation, you can guide users intuitively through sections of your intranet. Group tiles into parent-child sets, customize their appearance, and define navigation styles.

▶️ Follow the interactive tutorial below to create your tile structure.

What You’ll Learn

  • How to create tile groups and assign IDs

  • How to structure parent and child tiles

  • How to add titles, links, and visuals

  • How to configure layout and display options

  • How to customize colors or use images per tile

 

Overview

Involv Tiles are designed to support multi-level navigation. You start by creating a Tile Group, which acts as the container for your tile structure. Each tile can be assigned to a parent tile to create child-level navigation.

Instructions

Step 1: Create a Tile Group

  1. Click on Involv Tiles from your component list.

  2. Click the “+ Add” button to create a new tile group.

  3. Enter a title for your tile group (e.g., “Demo Set”, “HR Resources”).

  4. Click Save to generate an ID.

    ⚠️ Saving is required to create a unique ID. This ID is used to assign parent-child relationships later.

Step 2: Create Level 1 Tiles

  1. Now that your tile group has an ID (e.g., ID 13), start creating first-level tiles.

  2. Each tile must be assigned to the Parent ID of your main tile group.

  3. Add as many level 1 tiles as you need. Don’t forget to save each one to generate their own IDs.

Step 3: Add Child Tiles (Level 2)

  1. Open any existing tile set from your list to view or add child tiles.

  2. Use the checkbox to auto-assign the correct parent, or manually select the parent ID.

  3. Add the child tiles by clicking Add, giving them a title and URL.

  4. Repeat for other parent tiles to structure multiple branches.

Step 4: Customize Tile Content

  1. Enter HTML for headings, links, or descriptions inside each tile.

  2. You can overwrite the default tile color by adding a custom image.

  3. Select a fitting image and click Insert.

  4. Reorder tiles by dragging and dropping—tile ID order determines display order (e.g., ID17 first, then ID16, then ID18).

  5. Customize each tile's visual style as needed.

Step 5: Display Your Tile Group

  1. Navigate to the web part properties panel on your page.

  2. Under the settings, select the tile group you just created.

  3. Click Display to preview the tiles.

Display Options

You can further fine-tune the appearance via the web part’s property panel:

Option Description
Template style Choose the layout style (grid, list, compact)
Navigation mode Set interaction behavior for child levels
Alignment Choose left, center, or right alignment of tiles
 

Save & Publish

Once your tile group is configured and previewed:

  • Click Save in the tile builder

  • Click Republish your SharePoint page

Your dynamic tile structure is now live and ready for your users.

Step-by-Step Summary

  1. Start tutorial

  2. Add the Involv Tiles web part

  3. Create a new tile group

  4. Save to generate a group ID

  5. Add level 1 tiles and assign to parent ID

  6. Save to generate IDs for level 1 tiles

  7. Add child tiles and assign to their respective parents

  8. Customize content, layout, and visuals

  9. Set display and navigation settings

  10. 🎉 All done! Your tile-based navigation is now active

  11. Enjoyed the guided demo?