Spacer

General settings

Setting
Description

Link

Open link in new tab

Use this option to keep users on your store while allowing them to explore external or additional content.

Direction

Determines the arrangement of content elements.

  • Horizontal – Places items side by side in a row.

  • Vertical – Stacks items on top of each other in a column.

This setting helps adapt the layout to match design requirements and available space.

Alignment

Determines the horizontal positioning of the content. Available options:

  • Left: align content to the left

  • Center: center content horizontal

  • Right: align content to the right

Column gap

Defines the spacing between individual components inside a group.

This setting ensures that the content has adequate space between each item, preventing overcrowding and enhancing the overall visual flow.

Width

Specifies the overall width of the group container, which holds all the grouped components or blocks.

This setting controls how wide the group will span within its parent section.

Inherit color scheme

When enabled, the element adopts the color scheme of its parent section to maintain consistent styling.

Color scheme

When the Inherit color scheme option is disabled, you can manually select a color scheme for the group or component.

This allows you to customize the colors independently from the parent section’s scheme

Background media

Determines the type of media used as the background for the section or element.

  • None – No background media is applied.

  • Video – Sets a video as the background, which can auto-play, providing dynamic visual interest.

  • Image – Sets a static image as the background, offering a consistent, non-animated design.

Image

This option is only available when the Image media type is selected.

Allows you to choose an image from your media library to be used as the background.

Local video

This option is only available when the Video media type is selected.

Allows you to choose a video file from your media library to be used as the background.

Border

Determines the appearance of the element’s border.

  • None – No border is applied.

  • Solid – A continuous solid line border is applied

Corner radius

Adjust this value to create sharp or rounded edges, enhancing the visual style of the component.

Background overlay

In addition to using an image or video as the background, you can apply a color overlay to enhance the visual effect or improve readability by enabling this setting.

Overlay color

Defines the color applied to the background overlay. This color can be solid or part of a gradient, and it helps enhance the visibility of text or other elements placed over the background.

Overlay style

Determines the type of overlay applied to the background media.

  • Solid – Applies a single, uniform color across the entire background.

  • Gradient – Applies a smooth transition between two or more colors, creating a layered effect on top of the background.

Gradient direction

Specifies the direction of the gradient overlay.

  • Up – The gradient starts from the bottom and fades upwards.

  • Down – The gradient starts from the top and fades downwards.

Top / Bottom padding

Adjust these values to control the amount of space between the section’s content and its outer edges.

Last updated