Separator

The Separator block is a versatile tool designed to create visual separation between different sections of a page. It enhances the overall layout and readability by providing a customizable line that can be adjusted in terms of height and style. This block is available in various sections, including Featured product, Footer navigation, Product information, and Hero.

With the Separator block, you can control the height of the separator line for both desktop and mobile views, ensuring a consistent look across devices. The line style can be customized with options such as dashed, dotted, line, or none, allowing you to match the design to your theme's aesthetic.

Practical usage of the Separator block includes creating a visual break between content sections, which helps organize information and improve readability. Additionally, you can adjust the height and style to align with your design preferences, ensuring a cohesive and engaging page layout.

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.