How can we help you today?

How to Customize the Tiles Design Element in Grid Mode

This support article will discuss how to insert and customize the Tiles Design Element in Grid Mode. Follow the steps below to get started.



Sample Tiles template



TABLE OF CONTENTS


Prerequisites


Step-by-step Tutorial


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).


Title and Description


Add a Link (1) and specify the Linking Option (2).


Link and Linking Options


Then, choose an Icon (1) and/or an Image (2). 


Icon and Image


Repeat the same steps for your other tiles.


Repeat for other tiles


(Optional) Click the plus icon if you want to add more tiles. 


plus icon


(Optional) Click the remove icon if you want to delete a tile. 


Remove icon


(Optional) Click the up or down arrow to arrange the order of the Tiles. 


up and down arrow


Step 3: Customize your Tiles


On the Design tab, customize the Tiles’ size, color, and color transparency.


Size, color, and color transparency


Then, customize the Text Horizontal Alignment, Shape, and Style of your tiles.


Text Horizontal alignment, shape, and style


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).


Preview and insert button


Click Save.


Save button

Then, click Republish.


Republish button



Tiles Features

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:


Design tab


  • SETTINGS
Size

Size

customize the size of your tile. You can choose from Small, Medium, Large, and Huge.
Color
Color
specify the color of the tile. All ShortPoint Colors are supported.
Color TransparencyColor Transparency
adjust the transparency of the tile color.
Text Horizontal alignmentText Horizontal Alignment

specifies the alignment of text. You can choose from Default, Left, Center, and Right.
ShapeShape
change the shape of the tile. You can choose from Default, Wide, Square, and Tall.
StyleStyle 
change the style of the tile. You can choose from Sarah, Flat, Bordered, and Flip.


  • IMAGE SETTINGS
Image PlacementImage 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 settingsEnable advanced image settings
enables advanced image settings.
Image Horizontal PositionImage Horizontal Position
adjusts the horizontal position of the image (Default, Center, Left, and Right).
Image Vertical PositionImage Vertical Position
adjusts the vertical position of the image (Default, Top, Center, and Bottom).
Image RepeatImage 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 tab


  • TILES CONTENT
TitleTitlespecify the title of your Tile.
DescriptionDescriptionadds a description to your Tile.
LinkLink specify the URL where you want to redirect users.
Linking OptionLinking Optionspecify the behavior of the link including:
  • Default (link will be opened in the same window), 
  • LightBox (link will be opened in the lightbox), 
  • New window (link will be opened in the new tab), and 
  • Dialog (link will be opened in the dialog window).
IconIconchoose from a list of icons. You can check out all supported icons.
ImageImageadd a background image for the Tile.
ColorColor 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 TransparencyColor Transparencyadjust the transparency of the color.
Enable Visibility SettingsEnable Visibility Settingsallows you to specify the people and devices the Tile will be visible to.
Image PlacementImage Placementcustomizes the placement of the background image. You can choose from:
  • Default
  • Cover the area (will resize the image to fill the whole container from all edges),
  • Show entire image (will resize the image to make the whole image fill the container while maintaining the image aspect ratio), and 
  • Actual size (will show the exact image size without any resizing while maintaining the image aspect ratio).


  • TILES ACTION ICONS
plus iconPlus iconadd new Tile.
Duplicate iconDuplicate icon duplicates the selected Tile.
Remove iconRemove icondeletes the selected Tile.
up and down arrowUp 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. 


Connect tab


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. 

Visibility tab


E. Advanced Tab


This tab allows you to further customize the Tiles Design Element. Below are the options available:


Advanced tab


  • MISCELLANEOUS

Icon Color

Icon Color
customizes the color of the icon.
Spacing between tiles
Spacing between tilesadjusts the spacing between each tile.
Tiles Layout
Tiles layout
choose the layout of the tile (Default, Grid, and Masonry).

Makes Tiles response
Make Tiles Responsive

enabling this will automatically resize all tiles to fit the container


  • TILE TEXT
Text ColorText Colorspecifies the color of your text.
Text SizeText Size
specifies the size of your text.


  • CUSTOM SIZE
HeightHeightadjusts the height of your tile.
WidthWidthadjusts the width of your tile.


  • SPECIAL EFFECTS
Blur EffectBlur effect

add a blurred effect to your tile (Default, None, Light, Medium, Strong).


F. Custom CSS Tab


This tab allows you to use your own CSS, HTML, and Javascript code to customize the Tiles Design Element.


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.


Custom CSS tab


That’s it! You now know how to customize the Tiles Design Element using Grid Mode. Enjoy creating amazing designs using Tiles.


Related Articles:












Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 56 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more