Flexi-tiles

Add Flexi-tiles Content Element

The "Flexi-tiles" content element can be added to the web pages (flexi-pages, product and product list pages) and system pages of the Sana web store.

The tables below provide description of the "Flexi-tiles" content element settings.

Use the option Display in full width either to center the flexi-tiles on a page or to expand them to the full width of a page.

Row settings

Select the number of images to show in a row and layout. Enter the row height in pixels. Up to four images can be added to a "Flexi-tiles" content element.

Field	Description
	4 tile grid - 4 images of the same width
	2 tile grid - 75% width column, 25% width column
	2 tile grid - 25% width column, 75% width column
	3 tile grid - 50% width column, 25% width column, 25% width column
	3 tile grid - 25% width column, 25% width column, 50% width column
	3 tile grid - 25% width column, 50% width column, 25% width column
	3 tile grid - 3 image of the same width
	2 tile grid - 33% width column, 66% width column
	2 tile grid - 66% width column, 33% width column
	2 tile grid - 2 images of the same width
	1 tile grid - full-width image
Row height	Enter the height of the row in pixels.
Adjust to content height in mobile	Adjust the height of the tile to fit its content in the mobile layout. The height of the tile does not exceed the row height.

Below you can see the image with the recommended sizes of the tiles.

Tile settings

Field	Description
Tile header	Use this field to add a tile header. It is shown on the image.     We don't recommend to add images to the tile header. Inline styles have priority over the default styles. When you add some HTML tags, the font styles will be taken from the webstore theme.
Tile header text color	Use this field to define the tile header text color.     You can change the tile header text color, if you don't use HTML tags in the tile header. You can use the inline styles in the tile header to change the font color. If you don't use the inline styles in the tile header, the styles of the webstore theme will be used.
Highlight tile header	Use this field to highlight the tile header. Enabling this option will make the font of the tile header bigger.
Tile header highlight color	If you enable the option "Highlight tile header", you can also define the highlight color. It is added as a background color to the tile header.     It might not work, if there are some HTML tags in the tile header.
Tile description	Use this field to add a tile description. It is shown on the image, under the tile header.    We don't recommend to add images to the tile description. Inline styles have priority over the default styles. When you add some HTML tags, the font styles will be taken from the webstore theme.
Tile description text color	Use this field to define the tile description text color.    You can change the tile description text color, if you don't use HTML tags in the tile description. You can use the inline styles in the tile description to change the font color. If you don't use the inline styles in the tile description, the styles of the webstore theme will be used.
Link text	Use this field to add a text of a link. You can apply styles to the link and use it as a button.
Link text color	Use this field to define the link text color.
Link border color	Use this field to define the border color for the link. In this case the link will look like a button.
Link border width (px)	Use this field to define the width of the link border in pixels.
Make link background transparent	Use this option to make the background of the link transparent.      If you disable this option, the Link background color option will be available.
Link background color	Use this field to define the background color of the link. You can define the link background color, if the option "Make background transparent" is disabled.
Navigation link	Add a link either to the internal web store page or to the external web site. Clicking on the link on the image will open the linked page. To add a link to the internal web store page, you can search for it by title or URL. You can also create a blank page that will be automatically linked to the image. You can manage this page later.
Text position	Use this field to define the position of the tile header, tile description and link text on the image.
Background image	Use this field to add a tile image.    Make sure to create images of a proper size. The images automatically resize to fill the height and width of the tile. Therefore, it can be cropped.
Use background color	You can define the background color of the tile instead of the image.
Background color

 NOTE

We recommend to use the "flexi-tiles" content element to add tiles with background images and colors instead of the HTML editor of the "text" content element.

Translations

When you translate the page that contains the "Flexi-tiles" content element to another language, the default settings of the "Flexi-tiles" content element will be used for other languages. Only the images and the text elements will be inherited from the default language. Thus, when webstore visitors change the language, they will be able to see the "Flexi-tiles" content element on a page. You can change any settings and content of the "Flexi-tiles" content element on a page for other languages.