Blog

Mosaic is a Plone add-on which allows you to easily build custom layouts for your Plone pages without having to do any custom development.

Once the add-on is installed in your site, you can follow the step-by-step instructions below to set up a page with images in a grid. Below you will also find a video showing you how to configure a layout by moving around the Mosaic tiles.

Step by Step Instructions:

1. Add a new Page.
2. Give the Page a title, Save.
3. From the Display menu, select 'Mosaic layout'. Note that this won't visibly change anything yet.
4. Click Edit, wait for the Mosaic editor to load.
5. You will be given a choice of layouts to display. Select Basic.
6. Click Layout in the top blue bar, and select Customize. Two new buttons will appear on the right side of that bar.
7. Click on Insert to open the tile menu.
8. Click "Rich Text" on the left and move your cursor around. This tile expects you to place it before adding content.
9. As you move your cursor around, you will notice a solid blue line show up as a guide for where the tile will be placed. The tile can be placed as a new row, or directly next to an existing tile. Click to place the tile once the blue line shows up where you want it.
10. Now you can click inside the rich text tile to change its content.
11. Repeat this process with various tiles until you get the desired layout. Tiles you have already entered can be dragged and dropped into different locations.

Additional Tips:

• Up to four tiles can be displayed horizontally in a row by default (this can be changed with layout customizations).
• Column width can be adjusted by dragging the dashed line that appears between tiles within a row.
• The layouts you create are responsive, and will work on mobile. It will display tiles left to right, top to bottom.
• Some formatting can be applied to the tiles and rows. Click on a tile, then open the "Format" menu in the upper right. There are tile formats that will apply to the selected tile, and row formats that will apply to the entire row the tile is in.
• To move a rich text tile, drag it without clicking on it first. A click in the tile will expect you to be changing the text.

How to Build a Mosaic Page (Video):