Layout
Grid
The Grid block helps you arrange your content into clean columns and rows. You can use it to group images, text, buttons, or other nested blocks — creating a structured layout that automatically adjusts across devices.
⚙️ Block settings
Desktop columns
Choose how many columns to display on desktop (1–12).
Horizontal gap
Adjust the space between columns in pixels. Only visible when more than one column is set.
Vertical gap
Adjust the space between rows in pixels.
Width
Choose how the grid fits its container on desktop and mobile view separately: Fit content, Fill, or Custom width.
Inherit color scheme
Toggle to use the same color scheme as the parent section.
Color scheme
Select a different color scheme if you disable “Inherit color scheme.”
Border style
Add a border around the grid (None or Solid).
Border width
Control the thickness of the border (in px). Visible when border is enabled.
Border opacity
Adjust the transparency of the border (0–100%).
Border radius
Round the corners of the grid container (in px).
Enable swipe on mobile
Turn on horizontal swipe for mobile devices (useful for wide grids).
Mobile columns
Choose how many columns display on mobile (1–3).
Horizontal gap (mobile)
Adjust column spacing on mobile (in px).
Vertical gap (mobile)
Adjust row spacing on mobile (in px). Visible if swipe is disabled.
Padding
Control the spacing around the grid container (in px).
Custom columns
Define custom column rules using CSS grid syntax (advanced).
Group
The Group block lets you combine different blocks — such as headings, text, buttons, or badges — into a single structured group. You can arrange them horizontally or vertically and control spacing, alignment, and padding for a polished layout.
Use case examples:
Stack text and buttons together as a cohesive content group.
Create a horizontal header layout with a title on the left and a button on the right.
Build multi-line feature cards with icons, text, and links aligned neatly.
⚙️ Block settings
Layout direction
Choose how blocks are arranged: Vertical (stacked) or Horizontal (side by side).
Alignment (horizontal layout)
Adjust horizontal alignment: Left, Center, Right, or Space between.
Position (horizontal layout)
Control how content is aligned vertically: Top, Center, or Bottom.
Alignment (vertical layout)
Adjust horizontal alignment when using a vertical layout: Left, Center, or Right.
Horizontal gap
Space between columns (in px).
Vertical gap
Space between rows (in px).
Width
Control how wide the group appears: Fit content, Fill, or Custom.
Custom width
Define a specific width (%) when “Custom” is selected.
Mobile width
Control how wide the group appears on mobile.
Inherit color scheme
Use the same color scheme as the parent section.
Color scheme
Select a custom color scheme if you disable inheritance.
Border style
Add a border around the group (None or Solid).
Border width
Control border thickness (px). Visible only when border is enabled.
Border opacity
Adjust border transparency (0–100%).
Border radius
Round the group’s corners (px).
Horizontal gap (mobile)
Adjust column spacing for mobile devices.
Vertical gap (mobile)
Adjust row spacing for mobile devices.
Padding
Control spacing around the group (top, bottom, left, right).
Device view
Toggle between Desktop and Mobile padding controls.
Accordion
The Accordion block lets you group multiple content rows that expand or collapse when clicked. It’s ideal for FAQs, shipping or return details, product information, and other text-heavy content where you want to save space and keep the page tidy.
Use case examples:
Create an FAQ section with collapsible questions and answers.
Add product details like Material, Care instructions, or Shipping & Returns under product pages.
Use in storytelling or info-heavy sections to organize content in a clean, interactive layout.
⚙️ Block settings
Open behavior
Choose how the accordion behaves:
• Multiple — allows several rows to stay open.
• Single — only one row opens at a time.
Heading preset
Select the font style for each accordion title (H1–H6, paragraph, or default).
Style
Choose the accordion look:
• Standard — simple text layout.
• Card — boxed layout with a background color.
Card color scheme
Pick a color scheme for card-style accordions (visible only when using “Card” style).
Arrow icon
Select the icon that appears beside each heading (Caret or Plus).
Icon style
Choose icon weight — Default or Solid.
Inherit color scheme
Use the same color scheme as the parent section. Disable to pick a custom color scheme.
Color scheme
Choose a custom color palette if not inherited.
Border style
Add borders to the accordion container (None or Solid).
Border radius
Round the corners of the accordion container (px).
Padding
Control the spacing around the accordion block (in px).
🧩 Accordion row
The Accordion row is only available within the Accordion block. It can’t be added independently to other sections.
Each Accordion contains one or more Accordion row blocks.
Every row includes:
A Heading (the clickable question or title).
Nested content blocks (usually Text, but can include other blocks).
Open row by default
Keeps this row expanded by default when the page loads.
Icon
Choose an icon to appear beside the row title. You can select from various options (e.g., Caret, Plus, Truck, Heart, etc.).
Image icon
Upload a custom image instead of using a preset icon. Useful for brand-specific icons or badges.
Icon size
Adjust the icon size.
Custom width
Define a custom icon width in pixels (visible only when “Custom size” is selected).
Last updated