Banner grid

 

The Banner Grid section is specifically designed to enhance the promotion of products and campaigns in your online store. It allows for versatile configurations of content within a grid layout, supporting different media types to create a dynamic and engaging user experience. This section is highly adaptable for both desktop and mobile views, allowing you to set the optimal number of columns through intuitive range sliders to organize your content effectively.

Edit Section Settings:

Banner Aspect Ratio: Choose from Portrait (2:3, 3:4), Square (1:1), or Landscape (16:9) to ensure your banners are visually appealing and appropriate for the content displayed. All banners can extend beyond the minimum height set by the chosen aspect ratio if necessary.
Color Scheme: Customize the color scheme to match your brand’s aesthetic.

 

Desktop Layout:

Columns: Adjust the number of columns from 1 to 8 to suit the layout of your content.
Full Width: Option to have the banners stretch across the full width of the screen.
Rounded Corners: Apply rounded corners to the grid cards for a softer look.
Display Type: Choose between a Grid or Slideshow format.
Grid Gap, Margin Top, and Bottom: Manage spacing to ensure each element is displayed cleanly and distinctly.

 

Tablet Layout:

Columns: Select from 1 to 6 columns, with margin values consistent with the desktop layout.

 

Mobile Layout:

Columns: Choose from 1 to 4 columns.
Display Type: Opt for either grid or slideshow
Edge to Edge: Option to have the banners stretch across the full width of the screen.
Rounded Corners: Apply rounded corners to the grid cards for a softer look.
Grid Gap, Margin Top, and Bottom: Fine-tune spacing to optimize appearance on mobile devices.

Slideshow Settings (can be applied if Display Type is set to "Slideshow"):

Autoplay: Enable automatic sliding with options to set the interval and determine the sliding behavior (one by one or all visible), enhancing the interactive aspect of the slideshow.

Block Settings:

Image Block:

Color Scheme and Overlay Opacity: Tailor the visual backdrop and text visibility by adjusting the color settings and the transparency of the text overlay.
Image Picker: Select images that resonate with your campaign or product feature.  
Banner Link: Optionally, set the entire image area to act as a link to direct users to detailed content or landing pages.
Content Positioning: Adjust where on the image the text and buttons will appear (e.g., Top Left, Middle Center, Bottom Right).
Padding: Choose the padding range from 0 to 80 pixels to ensure content within the image block is spaced effectively and remains visually appealing.

Text Block:

Content: Incorporate a combination of SVG images (optional), subheadings, headings, and body text to convey your message clearly.
Button: Add a button, set up the label, link, and choose a button style (primary, secondary, or link) to prompt user actions. Button settings become inactive if the banner link is used.
Style and Layout:
Color Scheme: Adjust to match or contrast with the overall design.
Padding Slider: Control padding to create sufficient space around the text, enhancing readability.
Text Position: Position your text at the top, middle, or bottom of the block.
Text Alignment: Align your text left, center, or right based on the layout and design preference.

Product Block:

Select Product: Choose which product to highlight within the banner, ensuring it aligns with the overall theme or focus of the section.
Color Scheme: Customize the color settings to differentiate the product block from other content.
Card Text Content Options: Decide whether to show just the name, the name and price, or no text at all.
Text Alignment: Adjust how text is displayed within the product card to maintain consistency or highlight specific elements.

Video Block:

Video URL: Insert a link to a video that complements or enhances the banner grid content. Supported platforms include YouTube, Vimeo, and direct MP4 files. Banner Link: Like the image block, the entire video area can serve as a clickable link, useful for campaigns where the video itself is the main call to action.
Content Styles: Choose from predefined text styles for headings, subheadings, and body text. Buttons within the video block can also be styled to match the overall design.
Heading Position: Place headings within specific areas of the video block to ensure they are clearly visible and effectively convey your message.
Padding: Adjust from 0 to 80 pixels to ensure all elements within the video block are spaced appropriately.