How can we help you today?

How to Customize the Tiles Design Element in Live Mode

In this article, we will walk you through how to insert and customize the Tiles Design Element in Live Mode.


Sample Tiles Element


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


Get Started on the interactive video below to learn how to insert the Tiles Design Element using Live Mode:



NOTE: Check out ShortPoint Basics: How to Insert a Design Element in Live Mode for more details.



Step 2: Add Content to your Tiles


Go to the Items tab and click the cogwheel icon.


cogwheel button


Add a Title.


Title


Add a Description.


Description


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


Link and Linking Option


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


Icon and Image


Use the back icon to go back to the other tiles and repeat the same steps.


back icon


(Optional) Click Add New if you want to add more tiles. 


Add New


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


Trash


(Optional) Drag and Drop a Tile to change its position.


Drag and Drop



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 the green check mark.


green check mark


Click Save.


Save


Then, click Republish.


Republish


ShortPoint's Three steps to a custom intranet site
Copy. Paste. Design.

Try it for free

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
Sizecustomize the size of your tile. You can choose from Small, Medium, Large, and Huge.
Color

Color
specifies the color of the tile. All ShortPoint Colors are supported.
Color transparency
Color Transparencyadjust the transparency of the tile color.
Text Horizontal Alignment
Text Horizontal Alignmentspecifies the alignment of text. You can choose from Default, Left, Center, and Right.
Shape
Shapechange the shape of the tile. You can choose from Default, Wide, Square, and Tall.
Style
Stylechange the style of the tile. You can choose from Sarah, Flat, Bordered, and Flip.


  • IMAGE SETTINGS
Image Placement
Image Placementcustomize 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).
Enable Advanced image settings
Enable advanced image settingsenables advanced image settings.
Image Horizontal Position
Image Horizontal Positionadjusts the horizontal position of the image (Default, Center, Left, and Right).
Image Vertical Position
Image Vertical Positionadjusts the vertical position of the image (Default, Top, Center, and Bottom).
Image Repeat
Image Repeatrepeats the image (Default, Repeat,  Don’t Repeat, Repeat Horizontally, and Repeat Vertically).



B. Items Tab


The Items tab allows you to duplicate, delete, configure the content, and add new tiles. Each tile has the following action items:


Items tab


  • TILES ACTION ICONS

Duplicate icon
Duplicateduplicates the tile selected.
Cogwheel icon
Cogwheelopens a new window that allows you to edit the content of each tile. See the table below for the cogwheel icon settings.

Trash icon
Trash
deletes the tile selected.
Add New
Add New 
adds new tile.

Drag and Drop
allows you to re-arrange the position of the tiles.


  • COGWHEEL ICON SETTINGS
Title
Title
specify the title of your tile.
Description
Description
add a description to your tile.
Link
Link specify the URL where you want to redirect users.
Linking Option
Linking Option
specify 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).
Icon
Icon
choose from a list of icons. You can check out all supported icons here.
Image
Imageadd a background image for the tile.



C. 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 lines
Spacing between tiles

adjusts the spacing between each tile.
Tiles Layout
Tiles layout

choose the layout of the tile (Default, Grid, and Masonry).


  • TILE TEXT
text color
Text Color

specifies the color of your text.
Text size
Text Size

specifies the size of your text.


  • CUSTOM SIZE
Height
Height
adjusts the height of your tile.
Width
Width
adjusts the width of your tile.


  • SPECIAL EFFECTS
Blur effect
Blur effect

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

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


NOTE: The Connect and Visibility tabs are not available in Live Mode.



Congratulations, you now know how to customize the Tiles Design Element in Live Mode! Enjoy customizing the Tiles Design Element on your SharePoint sites.


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 63 topics

TABLE OF CONTENTS

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