Skip to main content

Grid view

What is the Grid view section?​

The "Grid view" section offers a neatly organized layout to present a series of images, products, or promotions. With its structured design, it provides a clear and consistent browsing experience for your customers.

Main Settings​

Heading​

  • Heading: Set the title for the grid view section to introduce the grid layout of products or content.

Enable Swipe on Mobile​

  • Enable swipe on mobile: Enable this setting to allow users to swipe through the grid view on mobile devices.

Make Section Full Width​

  • Make section full width: Enable this setting to make the grid view section span the full width of the container.

Image Ratio​

  • Image ratio: Select the image ratio for the grid view (e.g., Adapt to image).

Colors​

  • Text color: The 'Transparent' value is the default and subsequently inherits the value from the global settings.
  • Background color: The 'Transparent' value is the default and subsequently inherits the value from the global settings.

Section Spacing​

  • Distance from the top: Adjust the spacing from the top of the section.
  • Distance from the bottom: Adjust the spacing from the bottom of the section.

Customize column blocks​

  • Heading : Set a clear and concise title for the grid block that directs attention to the content.
  • Text : Provide descriptive text to give more context or details about the image.
  • Button : Include a call-to-action button, customizing the label and linking it to relevant pages or products.
  • Heading Scale : Adjust the heading size for large screens and mobile devices to balance prominence with design.
  • Image Selection : Upload an engaging image for both desktop and mobile versions that complements the block's content.
  • Text Alignment : Align your text to the top, center, or bottom, and to the left, center, or right to enhance the layout's visual appeal.
  • Custom Text Color : Select a color for the text to ensure it stands out against the background and the image.
  • Background Color : Choose a background color and adjust its opacity to suit the overall design theme of the block.
  • Disable on Mobile : If necessary, choose to disable the heading or text on mobile devices to streamline the presentation.

Mobile view example​