Separator

Overview #

The Separator block is designed to create visual separation between different sections of a page. It provides a clean and customizable line that can be adjusted in terms of height and style, enhancing the overall layout and readability of the page.

Key components and functionality #

Separator

The Separator block allows you to add a line or space between sections, which can be customized in terms of height and style. This block is available in the Featured product, Footer navigation, Product information, and Hero sections.

Desktop height

This setting controls the height of the separator line when viewed on a desktop. You can adjust the height from 0 to 160 pixels, in increments of 4 pixels. The default height is 64 pixels.

Mobile height

This setting adjusts the height of the separator line for mobile devices. The height can be set between 0 and 160 pixels, with increments of 4 pixels. The default height is 32 pixels.

Line style

Choose the style of the separator line from the following options:

• Dashed
• Dotted
• Line
• None

The default style is Line.

Available in sections #

• Featured product
• Footer navigation
• Product information
• Hero

Usage examples #

1. Creating a visual break between sections: Use the Separator block to add a subtle line between different content sections on your page, helping to organize information and improve readability.

2. Customizing the look and feel: Adjust the height and style of the separator to match your design preferences, ensuring consistency with your overall theme.

By utilizing the Separator block, you can enhance the visual structure of your pages, making them more engaging and easier to navigate.