Masonry

Author: An Do 3883 views

The Masonry Layout is one of the basic elements and plays an important role in your sales page. It is used to display multiple images and usually show in the Landing page or Home page to redirect visitor to another promote pages in your store. Let’s go through all the settings you can control for this element.

Note: You can’t set an explicit, rigid image size with height option in the Masonry element because masonry relies on dynamic columns and aspect ratios.

1. Add Masonry Layout

From the Advanced tab, you can drag and drop the Masonry Layout element to wherever you want it to stay.

2. Configure Masonry Layout

2.1. Content

Banner Items

Banner Name: Enter the name for banner. This name will be shown in the name option only to let you control the banner easier. It won’t be shown inside the banner itself on the website.
Banner Width: Choose the width for the banner here. It will help you change the layout of the whole masonry element. You can adjust it separately on all the devices

Responsive Tip: If you set a banner item to 50% width on Desktop to place two items side-by-side, EComposer automatically scales it to 100% on Mobile to ensure readability. If you want to force a dual-column 50% look on Mobile, you must manually toggle to the Mobile viewport view in the top bar and assign 50% there.

Content Alignment: This option will arrange the content of the element. Example: Align left, Align center, Align right.
Horizontal Alignment: This option will arrange the content block of the element in horizontal. You can align left, center and right.
Vertical Position: Allows you to align the position of the content block into the Banner. You can align it to the top, middle or bottom.

Image: You can upload your image or use an image from the library. And input the image link for the banner.

Content: It includes Heading, Sub heading and Content fields that are applicable to content.
Button: It includes Button Label, Button Link and Button ID fields that are applicable to button.

This is a result after you added the content to all the Banner Item:

Settings

Disable lazyload: refers to turning off the mechanism that defers the loading of images until they are needed, ensuring all content loads immediately when the page is rendered.

Display content when hover image: Instead of always displaying content on the image, now you can hover over the image to view content.

View in lightbox: When clicked, instead of redirecting to a link, the full-res image expands into a clean pop-up modal. This option will only work on live site

Enable Overlay: Tick on this checkbox to enable overlay for the banner. It will help the text show clearly and can be readable. Configured via the Design tab.

Hover Animation: Choose animation for the banner when hovering here. We have more than 10 animation styles.
Transition: Allows you to set the transition duration of the border when hovering.

You can add, duplicate, move, and delete the items if you want. Please follow this video below to understand its details:

2.2. Design

General

Spacing: Manually adjust the Margin and Padding utilities. Use this specifically to control the “gutters” (the whitespace gaps) between your masonry grid pictures to keep them looking clean.

Image

Width / Max Width / Height: Set absolute thresholds per device profile.
Image Fit: Choose how the file fills its box canvas. Use Cover to prevent stretching distortion, or Contain if your layout requires viewing the exact raw edges of an asset.
Normal vs Hover States: You can distinctively alter styles between static viewing and mouse-hover states:
* Opacity: Dim the graphic slightly on hover to draw attention.
* CSS Filters: Fine-tune visual aesthetic balances directly in-app like adding a stylistic Blur, intensifying saturation, or shifting brightness values.
* Border / Border Radius: Soften sharp layouts by adding rounded corners (px or %).

Heading, Sub Heading and Content

You can set Alignment, Typography, Text Color, Text Gradient, Text Shadow, Spacing for Heading, Sub Heading and Content.

Button

With the Button Design, you can adjust Typography, Text Shadow, Box Shadow

Also, you can set effect for button when Hover over it: You can set up Width, Text color, Background, Border, Border Radius, Spacing. These settings are only applied when hovering: Hover Animation and also Transition Duration

Icon

Icon Position: Dictates whether your selected vector graphic renders to the Left or Right side of your text label string.

Icon Customization: Seamlessly scale Size, map dedicated element Color, set custom structural margins (Spacing), or apply geometric Rotation attributes to create modern, polished action buttons.