Masonry banner
A Masonry Banner is a grid-based design with varying content sizes, creating a dynamic, staggered layout. It's ideal for showcasing multiple items in a visually engaging way, especially on websites and digital ads.
How to Set Up a Masonry Banner Section:
Step 1 : Open the Theme Editor. Navigate to your Shopify dashboard and open the Theme Editor for your store.
Step 2 : Add the Banner Section. Click on 'Add section' and select 'Masonry banner' to integrate this section into your page layout.
Step 3 : Save your changes. After customizing the Masonry banner section, click 'Save' to implement your adjustments.
Content
Use the provided text fields to add a suitable heading, subheading, or description. Leave any of them blank if you do not want to display them.
You can change the heading size
You can provide links to button labels.
You can also change the button outline style
Column alignment: You can also change column alignment to left and center
Color scheme: Set text color and background color with preset scheme
Content for block
Use the provided text fields to add a suitable heading/subheading/description. Leave any of them blank if you do not want to display them.
Main banner alignment: You can also change column alignment to left and center
Content Position: You can change the position of the content within a section. The following options are available:
Top Left
Top Centre
Top Right
Centre Left
Centre
Centre Right
Bottom Left
Bottom Centre
Bottom Right
Banner settings
Main Banner Style & Additional Banner Style: Change the style for the block. There are two available options(Overlay, Grid)
Content Width: Define the width of the content for various screen sizes
Device width: Set a specific width for content displayed on desktop and laptop screens.And it adaptable for the tablet and mobile devices.
Content Color: Set the color of the content text and elements in the layout. This includes options for headings, paragraphs, and links to ensure consistent branding and readability.
Additional Block
Additional Banners Block Style: You can change the Additional Banners Block Style. There are 10 different types of block styles available, offering a variety of visual layouts to suit your design needs.
Overlay Height: You can change the overlay height for different devices such as desktop, laptop,tablet and mobile
Add the block and Required details for the additional blocks as same as main block
Last updated