Masonry layout and Special menu

How-to guide Pro Navigation 3 min read

In a normal mega menu each block has its own column, so a short link list leaves a gap under it. Masonry groups several blocks into one column so they stack — for example two short brand lists sharing the first column.

Templates

Both are in the Special menu group of Select template.

Masonry layout

Four columns (Group of items blocks) with link lists stacked inside each column.

Special menu

A category list on the left; each category has its own panel of link lists and images on the right, like large marketplace menus.

Start from the Masonry layout template

1. Add the template

   In the editor’s Elements tree, click Add submenu under a top-level item. Point to Special menu (1), then click Select on Masonry layout (2).

   

   (1) Point to the Special menu group, (2) choose Masonry layout

2. Edit the sample content

   The template adds 4 Group of items blocks at 25% width, with link lists inside. Hover over each heading or link, click Edit Item, and change its Title and Link.

3. Add or remove blocks in a column

   Inside a group, click Add block to stack another block, such as a link list or an image. To remove one, hover over it and click Delete Item.

4. Save and publish

   Click Save, then Publish.

Build masonry from a blank mega menu

1. Add a blank mega menu

   Click Add submenu, point to Mega menu and click Select on Blank. An existing mega menu works too.

2. Add a Group of items per column

   Click Add block, choose Multi block and select Group of items; each group is one column. In the Elements tree it shows as Group of items (Masonry grid layout).

   

   (1) Choose a tab, (2) hover over a layout and click Select.

3. Set the group widths

   A new group is 50% wide. Set each group’s Width so the columns fit one row, for example 25% for 4 columns or 33.33% for 3.

4. Fill each group

   Inside each group, click Add block and add that column’s blocks. Set each inner block’s Width to 100% so they stack instead of sitting side by side.

5. Save and publish

   Click Save, then Publish.

Use the Special menu template

1. Add the template

   Click Add submenu, point to Special menu and click Select on the Special menu template.

   

   (1) Point to the Special menu group, (2) choose Masonry layout

2. Edit the categories and panels

   Each category on the left is a tab: rename it, then fill its panel using Add block. See Tabbed menu.

3. Save and publish

   Click Save, then Publish.

Both templates open in a mega menu panel, so the parent item’s Submenu section sets the panel’s width, alignment and background. See Mega menu panel layout.

Troubleshooting

Blocks sit side by side instead of stacking

Check in the Elements tree that the inner blocks are inside a Group of items, and that their Width is 100%.

Groups wrap onto a second row

The group widths add up to more than 100%. Lower them so they fit one row.

Related pages

• Mega menuBuild a wide submenu panel from blocks such as link lists, images, products and a contact form.
• Tabbed menuLet shoppers switch between groups of content, such as Men, Women and Kids, inside one submenu.
• Blocks overviewAdd blocks such as links, images, products and countdowns to a mega menu or tab.

Was this helpful?

Report an issue