> For the complete documentation index, see [llms.txt](https://docs.jollyany.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.jollyany.co/templates/alex/gallery-masonry.md).

# Gallery Masonry

### 1. Create the page "Gallery Masonry" in sp page builder

The page is built with SP Page Builder, so please make sure this component has been already installed. 

* Go to Admin > Components > SP Page builder > Pages > Add new
* Click to add new row > add new addons > A list of add-ons appear > open the tab "**Jollyany**" on the left, you'll see all Jollyany addons
* This page is used with the following addons: **UK Text, and UK Gallery.** Look for these 2 addons in the list and add them to the page and start configurations.

![](/files/LOyKSwWWrQwXaWGNGNWe)

![](/files/ybrwqWyu3n5fd6JEt3DG)

{% hint style="info" %}

* **UK Text:** edit the addon, enter a title and add its content, as well as configure other options
* **UK Gallery:** edit the addon, click "**Add item**", with each item, you can upload an image, give it a title, link, and so on. **Remember to enable the Masonry effect** -> then click Apply changes
  {% endhint %}

![](/files/YbBPwgcVECAv3AXA7wsf)

### 2. Add a new menu item

This step is to add a new menu item for the page "Gallery Masonry" so that it can display properly in the main menu

* Go to **Admin > Menus > Main menu > Add new**
* Menu item type: **SP Page Builder > Pages**
* Select page: **Gallery Masonry**
* Template style: **tz\_alex - default**

![](/files/yT3Ge314cxb6mYYhAraD)

<br>