Collage with Text

The Collage with Text section allows you to showcase multiple stacked images combined with text, creating a visually engaging storytelling or promotional layout. It’s ideal for brand storytelling, product showcases, or campaign highlights.

🎨 Color Scheme

• Choose or edit a color scheme to define the styles for all section elements, including background colors, text colors, and more.

• Adjust according to your brand’s visual identity for a consistent look and feel.

---

🖼 Image Settings

• Image Width: Options include Small / Medium / Large.

  • When using multiple stacked images, Small is recommended for balance and aesthetics. (Default: Small)

• Image First: Check this option to display images on the left side and text content on the right side on desktop. By default, images are displayed first.

• Angle Style:

  • Clean: Straight vertical angles.

  • Scattered: Images tilt toward the center for a dynamic effect. (Default)

  • Tilt Left: Images lean to the left.

  • Tilt Right: Images lean to the right.

• Show Image Frame: Enable frames to add depth and a 3D feel to the images. (Default: Enabled)

---

✍️ Content Settings

• Content Alignment (Desktop): Choose from Left, Center, or Right alignment for text and content on desktop. (Default: Center)

• Content Alignment (Mobile): Choose from Left, Center, or Right alignment for text and content on mobile devices. (Default: Center)

---

📏 Layout Settings

• Padding Top: Adjust the spacing above the section content. (Default: 36px)

• Padding Bottom: Adjust the spacing below the section content. (Default: 36px)

• Margin Top: Adjust the outer spacing above the entire section. (Default: 0px)

• Margin Bottom: Adjust the outer spacing below the entire section. (Default: 80px)

---

📦 Section Blocks

The section supports the following blocks:

• Image: Upload up to 5 images. The collage automatically adapts to the number of images for different stacking layouts.

  • Image Ratio: Select the aspect ratio for the image: Adapt to image, Square (1:1), Portrait (2:3), or Landscape (3:2). (Default: Square)

• Caption: Short supporting text or label.

• Heading: Highlight the main message.

  • Heading Size: Choose the size of the heading: Small, Medium, or Large. (Default: Medium)

  • Decorative Heading: Enable a decorative style for the heading.

  • Enable Italic Gradient: Apply a gradient effect to italicized text within the heading.

  • Italic Gradient: Choose the gradient colors for italicized text.

• Text: Add product details, brand stories, or campaign descriptions.

  • Text Light: Enable to display the text in a lighter color, which can be useful for contrast against certain backgrounds. (Default: Disabled)

  • Limit Description Height: Enable to limit the height of the text content, adding a scrollbar if content exceeds the limit.

• Button: Insert up to two call-to-action buttons with links.

  • Button Label: Enter the text for the primary button.

  • Button Link: Set the URL for the primary button.

  • Button Style: Choose between Primary or Secondary button styles. (Default: Primary)

  • Show Arrow: Display an arrow icon next to the primary button.

  • Secondary Button Label: Enter the text for the secondary button.

  • Secondary Button Link: Set the URL for the secondary button.

  • Secondary Button Style: Choose between Primary or Secondary button styles for the secondary button. (Default: Secondary)

  • Show Secondary Button Arrow: Display an arrow icon next to the secondary button.

• Social Media List: Showcase links to social platforms for brand engagement.

  • Style: Choose the display style for social media icons: Icon, Border, or Wrapper. (Default: Wrapper)

---

💡 Best Practices

1. Image Selection: Use images with a consistent style or theme to ensure harmony.

2. Optimize Width: For multi-image collages, use the Small size for better balance.

3. Add Depth: Turn on image frames to create a layered, 3D-like effect.

4. Balance Visuals & Text: Keep text concise and focused to complement the strong visuals.

5. Mobile Experience: Utilize the separate mobile content alignment setting to ensure your text is well-presented on smaller screens.

6. Call to Action: Leverage the option for two buttons to guide customers through different stages of their journey or offer multiple options.