Mosaic Tile Block

What are Mosaic Tile blocks?

Mosaic Tiles are a unique element available on SiteMasonry. In order to create artistic but organized collections of text, buttons, and photos, the SiteMasonry team has designed the mosaic tile to serve as a multipurpose design element. Potential uses include:

  • displaying key facts
  • showcasing imagery
  • providing a large number of linked buttons
  • creating eye catching text
  • and many more.

Although these tiles may initially present a challenge to master, they offer a broad spectrum of applications once you become familiar with their functionality.

Related Content

Examples of Mosaic Tile Blocks

Please be aware that many of the layouts displayed below talk about the column layouts of SiteMasonry pages. On mobile, columns stack, and mosaic tiles in turn will stack together. Keep this in mind when designing your pages!

Text Mosaic Tiles

Text Mosaic Tiles have room for a headline, a caption, a URL, and an icon. You can select a color scheme from a set selection in order to better highlight your content.

Text Mosaic Tile
This could also be linked to other content.

Photo Mosaic Tiles

Photo Mosaic Tiles have room for a headline, a caption, a URL, and a photo. The photo zooms when you hover over it on desktop. You may notice that the heading is actually smaller than the caption text on this tile. As such, using just the caption field may function better for some of your mosaic tile uses.

Photo Mosaic Tile
The caption is larger than the headline!

Mosaic Tile Sections

Mosaic tiles can be used in the mosaic tile sections for creative formatting. In these sections, there are no gaps between the tiles, creating a clean visual style.

Mosaic tile at 100% width, short height
Mosaic row at 50% width, medium height
Image Tips
Formatting images for mosaic tiles can be tricky based on their sizing. Use images that are of a similar shape to the tile space you want to use.
Mosaic row at 33% width, tall height
Image Tips
Compare this image to the previous image tile. Same image, different size of space. As such, it looks completely different!
Consider this...
Tall mosaic tiles take up a lot of space, especially on mobile devices. Make sure the importance of the tile's purpose matches its size!
Mosaic row at 25% width, short height
Spacing above row selected
Did you notice how tiles of the same color blend in together?
This can be used to creative effect!

Mosaic Tiles in Normal Sections

It is entirely possible to use mosaic tiles next to the rest of your content without using the specific mosaic rows if you are aware of how mosaic tiles function.

Because mosaic tiles adjust in size to the height and width of the section they are in, a mosaic tile used incorrectly could result in a content overflow, blocking parts of your page! As such, it's important to think carefully and follow these basic rules.

  • Do not put anything inside a column space after the mosaic tile. The mosaic tile will cover the content put beneath it.
     
  • The mosaic tile's content will format based on the height of the content put next to it if there are two or more columns. This includes centering the text in the column's height on a text tile.
     
  • Mosaic tiles in 100% width sections will only be as tall as they need to be to hold the text. This can be a really nice way to highlight content on your page.
Did you know?
Mosaic tiles with white background can be an interesting way to highlight information in the middle of your page.
This is a great way to add emphasis to a piece of content!
Notice how these format!
Without the mosaic row, these tiles maintain white space between them.
The tiles will also adjust based on the height of the tallest block in the row.
These are great for links!