The Collage section is a versatile layout option designed to create a visually appealing two-column display. It allows for flexible content arrangement, making it ideal for showcasing images, videos, and other media in a dynamic and engaging manner. Users can choose between different collage styles, such as having a large block on the left or right, to influence the visual balance and focus of the content.

Key features include the ability to stretch content vertically, ensuring a uniform appearance across the section. This enhances the overall aesthetic by matching the height of the largest block in each row. The Collage section is optimized for responsive design, performance, and accessibility, ensuring a seamless user experience across devices.

Practical usage examples include showcasing products with images and promotional videos, presenting a portfolio for artists or photographers, and promoting events with eye-catching visuals and details. These examples highlight the Collage section's flexibility and effectiveness in various contexts.

Overview #

The Collage section is designed to create a visually appealing two-column layout with a collage style. This section allows for flexible content arrangement, making it ideal for showcasing images, videos, and other media in a dynamic and engaging manner.

Key components and functionality #

Collage style

The collage style setting allows you to choose the layout style for the Collage section. You can select between having a large block on the left or the right side of the section. This choice impacts the visual balance and focus of the content within the collage.

  • Options:
    • Large block on left
    • Large block on right

Stretch content vertically

This setting ensures that the blocks within the Collage section stretch to match the height of the largest block in the corresponding row. This feature helps maintain a uniform appearance across the section, enhancing the overall aesthetic.

  • Default: Enabled

Usage notes #

  • Responsive Design: Ensure that images and videos used in the Collage section are optimized for different screen sizes to maintain visual appeal across devices.
  • Performance: Use compressed images and videos to reduce loading times and improve user experience.
  • Accessibility: Include alt text for images and captions for videos to enhance accessibility for all users.

Usage examples #

  1. Showcasing Products: Use the Collage section to display product images alongside promotional videos. Select the "large block on left" style to highlight a featured product image, while the right side can display a video or additional product details.

  2. Portfolio Display: For artists or photographers, the Collage section can be used to present a portfolio. Choose the "large block on right" style to emphasize a key piece of artwork, with supporting images or text on the left.

  3. Event Promotion: Utilize the Collage section to promote an event by placing a large, eye-catching image on one side and event details or a countdown timer on the other.