Try ShortPoint nowWhen resizing the Tiles Design Element, you usually go to the Advanced tab and customize the size according to your liking. This method, however, resizes all the Tiles:
In some cases, like the example below, you may need to resize only a single Tile to keep your design balanced:
Here is how it looks when we resized one of the Tiles in the second row:
This tutorial will show you how to change the size of an individual Tile in the Tiles Design Element.
TABLE OF CONTENTS
Prerequisites
- You must have the latest version of ShortPoint SPFx installed on your SharePoint environment.
- You must be a ShortPoint Designer with an active license.
- You must already have the Tiles Design Element on your page.
Step-by-step Tutorial
There are two ways you can individually resize a Tile. Follow the option that best fits your needs:
Option 1: Non-connected Tiles
This option is for Tiles Design Elements not connected to a SharePoint List, Library, or other external sources. Click Get Started to learn how to resize individual Tiles:
Step 1: Edit the ShortPoint Web Part
- Go to the SharePoint page you want to use and click Edit:
- Click the close icon to exit the Toolbox:
- Click the ShortPoint tag.
- Select the Edit properties icon:
Step 2: Edit the Tiles Design Element
NOTEBefore proceeding make sure you already have a Tiles Design Element on your page. To learn how to add it, check out How to Customize the Tiles Design Element.
- Click the Tiles tag:
- Select the cogwheel icon:
Step 3: Resize a Tile
- Scroll down to the Tile you want to resize and click the cogwheel icon:
- Navigate to the Design tab:
- Scroll down until you see Custom Size and click it:
- Customize the size according to your preference.
Step 4: Save
- Once satisfied, click the green check mark.
- Click the eye icon to see your page in real time:
- Click Save to apply your changes:
That’s it! You have resized an individual non-connected Tile.
Option 2: Connected Tiles
This option is for connected Tiles Design Element. You’ll know if a Tiles Design Element is connected when you see a link icon on it. You will only see this icon if you’re in Grid Mode:
Part 1: Add a Size Column to your SharePoint List / Library
This part will show you how to add a size column to the SharePoint List / Library connected to your Tiles Design Element.
Step 1: Add Column
- Go to the SharePoint List / Library connected to your Tiles Design Element. In our case, we used this SharePoint List:
- Click + Add column:
- Select [1] Number then, click [2] Next:
- Name your column [1] “Size” and click [2] Save:
Step 2: Add the size
- Fill out the Size column according to your preference. ShortPoint will read these values as width in pixels. Make sure that one Tile has a different size:
Part 2: Reconnect the Tiles Design Element
This part will demonstrate how to reconnect the Tiles Design Element to reflect the changes in the edited SharePoint List / Library:
Step 1: Edit the ShortPoint Web Part
- Go to the SharePoint page you want to use and click Edit:
- Click the close icon to exit the Toolbox:
- Click the ShortPoint tag.
- Select the Edit properties icon:
Step 2: Switch to Grid Mode
NOTEThe ShortPoint Connect Feature is currently only available in Grid Mode.
- Click the Switch to Grid Mode icon:
Step 3: Edit the Tiles Design Element
NOTEBefore proceeding, make sure you have a connected Tiles Design Element. This must be connected to the SharePoint List / Library you edited earlier. To learn more about the Connect feature, check out ShortPoint Connect: Basic Tutorial.
- Hover over Tiles and click the cogwheel icon:
Step 4: Reconnect
- Navigate to the Connected tab:
- Click Disconnect :
- Then, click Connect:
Step 5: Map Items
- Navigate to the Tiles tab:
- Toggle on Enable Custom Settings:
- Scroll down until you see Width and click the Link icon:
- Select Size:
Step 6: Save
- Once done, click Update:
- Click the eye icon to see your page in real time:
- Click Save to apply your changes:
That’s it! You can now resize individual Tiles on a connected Tiles Design Element.
Related articles:
