Banner Masonry is a visually dynamic layout that arranges banners in a grid with varying sizes, creating a modern and engaging design. This section allows you to showcase multiple banners in an eye-catching way, making it ideal for highlighting promotions, featured products, or storytelling through images. In this guide, you'll learn how to customize and optimize the Banner Masonry section.
From Theme section sidebar -> Add section -> Banner Masonry Section
Each image represents one banner masonry. In this block, you can adjust your Banner masonry with many options below:
General options
Color: Select the color scheme for the banner.
Banner link: Enter the link for the banner when clicked.
Open this link in a new tab: Enable/disable opening the link in a new tab.
Content padding (top/bottom, left/right): Adjust the spacing between the content and the banner edges.
Desktop
Column width: Set the banner width as a percentage of the total width.
Row count: Define the number of banner rows in the Masonry layout.
Content position: Choose where the content appears (top, center, bottom,....).
Content alignment: Align the content (left, center, right).
Mobile
Column width: Set the banner width on mobile (50% or 100%).
Row count: Define the number of banner rows displayed on mobile.
Content position: Choose the content position on mobile.
Content alignment: Align the content on mobile.
In the Masonry Item, you can add various blocks such as Heading, Text, Button, Paragraph, and Spacer to enhance the layout and design.
To customize these blocks, follow the detailed guide here.
The Banner Masonry section offers various customization options to create a visually appealing and well-structured layout. Below are the key settings you can adjust to optimize the banner's appearance on different devices.
General
Make section full width: Enable/disable full-width display for the banner section.
Color scheme: Select a predefined color scheme for the banner.
Desktop
Item height: Set the height of each banner item on desktop.
Mobile
Item height: Set the height of each banner item on mobile devices.
Section padding
Top padding: Adjust the space above the banner section.
Bottom padding: Adjust the space below the banner section.
Rate padding (mobile): Set the percentage-based padding for the banner section on mobile devices.