Collapsible with image
Overview:
The Collapsible with Image section combines visual storytelling with expandable content areas. It allows you to display an image alongside a list of collapsible rows, ideal for FAQs, product details, or feature explanations. This section supports image positioning, text alignment, and flexible content organization.
Section Configuration:
Image Settings
| Setting | Description |
|---|---|
| Image | Upload an image to display alongside the collapsible content. |
| Media Size | Choose how the image is scaled. Options include: Adapt, Square, Portrait, or Landscape. |
| Image Order | Choose the layout order: display image before or after the collapsible content. |
Heading & Description
| Setting | Description |
|---|---|
| Heading | Enter a main heading for the section. |
| Heading Size | Select the visual size of the section heading. |
| Description | Add supporting text to display below the heading. |
| Text Size | Choose the font size for the section description. |
Collapsible Row Settings
| Setting | Description |
|---|---|
| Row Heading Size | Select the heading size for each collapsible row. |
Layout & Alignment
| Setting | Description |
|---|---|
| Content Alignment | Vertically align the content (Top, Middle, or Bottom). |
| Text Alignment | Set the alignment of text content within the section (Left, Center, or Right). |
Color & Spacing
| Setting | Description |
|---|---|
| Color Scheme | Choose a color scheme for the section’s background and text. |
| Top Padding | Adjust the space above the section. |
| Bottom Padding | Adjust the space below the section. |
Blocks Configuration:
Block: Collapsible Row
Each block represents a collapsible content row that can be expanded or collapsed by the user.
| Setting | Description |
|---|---|
| Heading | The clickable title of the collapsible row. |
| Description | The hidden content revealed when the row is expanded. |
| Open by Default | Toggle to keep the row expanded when the section initially loads. |