This support article will discuss how to insert and customize the Tiles Design Element in Grid Mode. Follow the steps below to get started.
TABLE OF CONTENTS
- Step-by-step Tutorial
- Tiles Features
- You have the latest ShortPoint public version installed for your environment
- You are a ShortPoint designer with an active license
Follow the steps below to learn how to customize the Tiles Design Element:
Step 1: Insert the Tiles Design Element
Watch the video below to learn how to insert the Tiles Design Element using Grid Mode.
NOTE: Check out ShortPoint Basics: How to Insert a ShortPoint Design Element in Grid Mode for more details.
Step 2: Add Content to your Tiles
Go to the Tiles tab. Add a Title (1) and a Description (2).
Add a Link (1) and specify the Linking Option (2).
Then, choose an Icon (1) and/or an Image (2).
Repeat the same steps for your other tiles.
(Optional) Click the plus icon if you want to add more tiles.
(Optional) Click the remove icon if you want to delete a tile.
(Optional) Click the up or down arrow to arrange the order of the Tiles.
Step 3: Customize your Tiles
On the Design tab, customize the Tiles’ size, color, and color transparency.
Then, customize the Text Horizontal Alignment, Shape, and Style of your tiles.
NOTE: Learn more about the customization options mentioned above in the Tiles Features section.
Step 4: Insert and Save
Once you are satisfied, click Preview (1) to see how it will look on your site. Then, click Insert (2).
Then, click Republish.
There are many ways to customize the features of the Tiles Design Element. In the settings window, you will find the following tabs:
A. Design Tab
You can modify the default design of the element in the Design Tab. Below are the settings you can configure:
|customize the size of your tile. You can choose from Small, Medium, Large, and Huge.|
|specify the color of the tile. All ShortPoint Colors are supported.|
|Color Transparency||adjust the transparency of the tile color.|
|Text Horizontal Alignment||specifies the alignment of text. You can choose from Default, Left, Center, and Right.|
|Shape||change the shape of the tile. You can choose from Default, Wide, Square, and Tall.|
|Style ||change the style of the tile. You can choose from Sarah, Flat, Bordered, and Flip.|
- IMAGE SETTINGS
|Image Placement||customize the placement of the background image. You can choose from Default, Cover the area, Show entire image, and Actual Size.|
|Enable advanced image settings||enables advanced image settings.|
|Image Horizontal Position||adjusts the horizontal position of the image (Default, Center, Left, and Right).|
|Image Vertical Position||adjusts the vertical position of the image (Default, Top, Center, and Bottom).|
|Image Repeat||repeats the image (Default, Repeat, Don’t Repeat, Repeat Horizontally, and Repeat Vertically).|
B. Tiles Tab
The Tiles tab allows you to configure the content and design of each tile. It contains the following options:
- TILES CONTENT
|Title||specify the title of your Tile.|
|Description||adds a description to your Tile.|
|Link||specify the URL where you want to redirect users.|
|Linking Option||specify the behavior of the link including:|
|Icon||choose from a list of icons. You can check out all supported icons.|
|Image||add a background image for the Tile.|
|Color||by default, the tile will use the color specified in the Design tab. Set a color here only if you want this Tile to have a different color.|
|Color Transparency||adjust the transparency of the color.|
|Enable Visibility Settings||allows you to specify the people and devices the Tile will be visible to.|
|Image Placement||customizes the placement of the background image. You can choose from:|
- TILES ACTION ICONS
|Plus icon||add new Tile.|
|Duplicate icon||duplicates the selected Tile.|
|Remove icon||deletes the selected Tile.|
|Up and Down arrows||allows you to arrange the order of your Tiles.|
C. Connect Tab
The Connect tab allows you to connect the Tiles Design Element to another list in your site collection or to other data sources outside of SharePoint.
NOTE: Check out our article about the Connect feature to learn more.
D. Visibility Tab
The Visibility Tab allows you to configure who can view the page and what types of devices can be used to access it.
NOTE: Check out Managing Visibility of ShortPoint Design Elements to learn more about the Visibility feature.
E. Advanced Tab
This tab allows you to further customize the Tiles Design Element. Below are the options available:
|Icon Color||customizes the color of the icon.|
|Spacing between tiles||adjusts the spacing between each tile.|
|Tiles layout||choose the layout of the tile (Default, Grid, and Masonry).|
|Make Tiles Responsive|
enabling this will automatically resize all tiles to fit the container
- TILE TEXT
|Text Color||specifies the color of your text.|
|Text Size ||specifies the size of your text.|
- CUSTOM SIZE
|Height||adjusts the height of your tile.|
|Width||adjusts the width of your tile.|
- SPECIAL EFFECTS
add a blurred effect to your tile (Default, None, Light, Medium, Strong).
F. Custom CSS Tab
NOTE: Check out our support article on How to Insert Custom CSS into a Page Builder Element? (Basic Tutorial) to know more about Custom CSS.
That’s it! You now know how to customize the Tiles Design Element using Grid Mode. Enjoy creating amazing designs using Tiles.
- Introduction to the Tiles Design Element
- How to Customize the Tiles Design Element in Live Mode
- How to Insert a Design Element in Grid Mode