Group
The Group block acts as a flexible container that allows you to nest multiple other blocks inside it. This is essential for applying layout rules (Horizontal/Vertical) and dedicated styling (Color Scheme, Background Image, Padding) to a specific cluster of content.
.png)
General settings
| Setting | Description |
|---|---|
| Link | The URL that the entire Group block container links to when clicked. |
| Open link in new tab | A checkbox that, when enabled, ensures the linked URL opens in a new browser tab. |
| Inherit Color Scheme | A checkbox that, when enabled (Default), uses the color scheme from the parent section. |
| Color scheme | Only visible when Inherit Color Scheme is disabled. Allows you to manually select a specific Color Scheme for the group block. |
Layout
| Settings | Description |
|---|---|
| Direction | Controls how the nested blocks are arranged: Vertical (Staked, default) or Horizontal (Side-by-side). |
| Vertical on Mobile | Only visible when Direction is Horizontal. Check this box to force nested blocks to stack vertically on mobile devices. |
| Content Wrap | Only visible when Direction is Horizontal. Check this box to allow nested blocks to wrap to the next line if they exceed the group's width. |
| Horizontal Position | Only visible when Direction is Horizontal. Controls the vertical alignment (cross-axis):
|
| Vertical Position | Only visible when Direction is Vertical. Controls the vertical alignment (main axis):
|
| Vertical Alignment | Only visible when Direction is Vertical. Controls the horizontal alignment (cross-axis):
|
| Horizontal Alignment | Only visible when Direction is Horizontal. Controls the horizontal arrangement (main axis):
|
| Gap | Sets the spacing (gutter) between the nested blocks, measured in pixels (px) (Range: 0px to 100px). |
Size
| Setting | Applies To | Description |
|---|---|---|
| Width | Desktop | Defines the block's width:
|
| Custom Width | Desktop | Only visible when Width is Custom. Sets the specific block width in percentage (%) (Range: 0% to 100%). |
| Mobile Width | Mobile | Defines the block's width on mobile: Fit, Fill (Default), or Custom. |
| Custom Mobile Width | Mobile | Only visible when Mobile Width is Custom. Sets the specific block width on mobile in percentage (%) (Range: 0% to 100%). |
| Height | Both | Defines the height:
|
| Custom Height | Both | Only visible when Height is Custom. Sets the specific block height in percentage (%) (Range: 0% to 100%). |
Appearance
| Setting | Description |
|---|---|
| Background Media | Selects the background media:
|
| Image | Only visible when Background Media is Image. Allows image upload for the background. |
| Local Video | Only visible when Background Media is Video. Allows video upload for the background. |
| Corner Radius | Controls rounding:
|
| Custom Radius | Only visible when Corner Radius is Custom. Sets the custom radius in pixels (px) (Range: 0px to 100px). |
| Enable Background Overlay | Only visible when Background Media is not None. Check to add a colored layer over the background media for contrast. |
| Overlay Color | Only visible when Overlay is enabled. Sets the color and transparency (alpha) of the overlay. |
| Overlay Style | Only visible when Overlay is enabled. Defines the style:
|
| Gradient Direction | Only visible when Overlay Style is Gradient. Sets the direction:
|
| Border Style | Adds a border:
|
Spacing
These settings control the external spacing (padding) applied directly above and below this specific block.
| Setting | Description |
|---|---|
| Top | Sets the amount of empty space (padding) above this button block. Measured in pixels (px) (Range: 0px to 100px). |
| Bottom | Sets the amount of empty space (padding) below this button block. Measured in pixels (px) (Range: 0px to 100px). |
No comments yet