Simple Masonry Widget

To use the Simple Masonry widget, ensure it’s enabled in the Widgets Bundle dashboard at PluginsSiteOrigin Widgets. The Simple Masonry widget can be inserted into any theme widget area at AppearanceWidgets or any page or post using Page Builder.

Once the Simple Masonry widget has been inserted into your theme widget area or page/post using Page Builder, hover over it and click the Edit link to begin. You’ll find the following fields available:

Images

Here you’ll add your masonry images. Use the Add button to add as many items as you need in your masonry layout. On the right of each item you’ll find three icons. The down arrow opens the item, the page icon duplicates the item and the cross icon deletes the item.

Image Item Settings

Image
Use the Choose Media or Image Search button to add your image.

Column span
Drag the slider to select the number of columns this image should span. This setting is limited to the number of columns selected in the Layout section.

Row span
Drag the slider to select the number of rows this image should span. This setting is limited to the number of columns selected in the Layout section.

Title
Optionally, enter an image title.

Destination URL
To link the image, enter a destination URL.

Open in a new window
Enable to open the above URL in a new window.

Desktop Layout

Use these settings to define the masonry layout settings for desktop resolutions.

Number of columns
Drag the slider to select the number of masonry columns on desktop resolutions.

Row height
Optionally set a row height. Leave blank to match calculated column width.

Gutter
Optionally set the space between masonry items.

Tablet Layout

Use these settings to define the masonry layout settings for tablet resolutions.

Resolution
Set the pixel resolution at which you’d like the tablet layout to begin. The default is 768.

Number of columns
Drag the slider to select the number of masonry columns on tablet resolutions.

Row height
Optionally set a row height. Leave blank to match calculated column width.

Gutter
Optionally set the space between masonry items.

Mobile Layout

Use these settings to define the masonry layout settings for mobile resolutions.

Resolution
Set the pixel resolution at which you’d like the mobile layout to begin. The default is 480.

Number of columns
Drag the slider to select the number of masonry columns on mobile resolutions.

Row height
Optionally set a row height. Leave blank to match calculated column width.

Gutter
Optionally set the space between masonry items.

Lightbox Settings

Enable Lightbox
This will override the destination URL. The image will open in a lightbox when clicked on. The Lightbox Addon is available as part of SiteOrigin Premium.

Album name
If the Enable Lightbox setting is enabled, this setting will appear. Images with the same album name will be displayed together.

Disable caption for this lightbox
If the Enable Lightbox setting is enabled, this setting will appear. Enable to disable the lightbox image captions.