> For the complete documentation index, see [llms.txt](https://ursus-ecom.gitbook.io/arctos-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ursus-ecom.gitbook.io/arctos-theme/blocks/layout/spacer-and-divider.md).

# Spacer and Divider

Use Spacers and Dividers to control layout pacing by adding invisible breathing room or clean, visible lines to structuralize page content.

### 1. How to add a Spacer or Divider block

You can add a Spacer or Divider block to any [custom section](/arctos-theme/section-templates/section.md) or any compatible block, with no limit on how many you use in a single section.

{% stepper %}
{% step %}
**Navigate to your page and section**

From your Shopify Theme Editor (Customize), navigate to the page and section where you want to adjust the layout.
{% endstep %}

{% step %}
**Add a block**

In the sidebar outline, click **Add block** under your target section.
{% endstep %}

{% step %}
**Select Spacer or Divider**

Select either **Spacer** or **Divider** from the block options list.
{% endstep %}

{% step %}
**Position the block**

Drag and drop the new block into your preferred position within the layout hierarchy.
{% endstep %}

{% step %}
**Configure the settings**

Click on the block to open its settings panel and configure its dimensions or styling.
{% endstep %}

{% step %}
**Save your changes**

Click **Save**.
{% endstep %}
{% endstepper %}

### 2. Spacer

The Spacer block adds a transparent, invisible gap between blocks. It pushes content apart vertically without adding any visible element, creating intentional breathing room within your layout.

#### 2.1. When to use this

* Add extra space between blocks when the default block spacing isn't enough.
* Create visual breathing room above a call-to-action button to draw customer focus.
* Push content down within a section to create unique or asymmetrical design layouts.
* Fine-tune spacing that cannot be achieved with default section padding alone.

#### 2.2. Block settings

The settings below control the dimensions and responsiveness of the Spacer.

<table><thead><tr><th width="110.125">Setting</th><th width="128.29296875">Options</th><th width="487.4921875">What it does</th></tr></thead><tbody><tr><td><strong>Unit</strong></td><td><ul><li>Percent</li><li>Pixel</li></ul></td><td><p>Determines how the height of the vertical gap is calculated.</p><ul><li>Set this to <strong>Percent</strong> to make the height scale fluidly relative to the parent container, which is ideal for responsive layouts that adapt automatically to different screen widths.</li><li>Choose <strong>Pixel</strong> to lock in a fixed height when you need precise, absolute control over spacing regardless of the visitor's screen size.</li></ul></td></tr><tr><td><strong>Size</strong></td><td><ul><li>0–100%</li><li>0–400px</li></ul></td><td>Defines the numerical value of the gap based on your selected unit mode.</td></tr><tr><td><strong>Custom on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Activates an independent size adjustment specifically for mobile devices.</td></tr></tbody></table>

### 3. Divider

The Divider block adds a visible line between content areas that helps organize your layout visually and signals a clear transition between different groups of information.

#### 3.1. When to use this

* Separate distinct content areas or topics within a single section.
* Create clear visual boundaries between groups of closely packed blocks.
* Add horizontal or vertical lines to give a decorative, polished structure to your layout.

#### 3.2. Block settings

These options define the orientation, size, and styling of the Divider.

<table data-search="false"><thead><tr><th width="107.59375">Setting</th><th width="131.65234375">Options</th><th width="486.87109375">What it does</th></tr></thead><tbody><tr><td><strong>Direction</strong></td><td><ul><li>Horizontal</li><li>Vertical</li></ul></td><td><p>Sets the orientation of the divider line.</p><ul><li>Choose <strong>Horizontal</strong> to draw a line running left-to-right to separate stacked content blocks vertically.</li><li>Choose <strong>Vertical</strong> to draw a line running top-to-bottom to separate side-by-side elements horizontally inside a row container (like a <a href="/arctos-theme/blocks/layout/group.md">Group</a> block).</li></ul></td></tr><tr><td><p><strong>Width</strong></p><p>or <strong>Height</strong></p></td><td><ul><li>Fill</li><li>Custom</li></ul></td><td>Controls the total span length of the line across its container axis.</td></tr><tr><td><strong>Thickness</strong></td><td>1–10px</td><td>Controls the baseline stroke weight of the divider line.</td></tr><tr><td><strong>Custom on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Turn this <strong>On</strong> to modify the width, thickness, or overall layout rules independently on mobile devices.</td></tr><tr><td><strong>Style</strong></td><td><ul><li>Line</li><li>Dotted</li></ul></td><td>Chooses the visual style of the divider stroke.</td></tr><tr><td><strong>Corner radius</strong></td><td><ul><li>Square</li><li>Rounded</li></ul></td><td>Sets the shape of the stroke endpoints.</td></tr><tr><td><strong>Custom color</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Enables a custom stroke color for the divider.</td></tr><tr><td><strong>Color code</strong></td><td>Color picker</td><td>Sets the custom color code for the divider stroke. <em>Available when <strong>Custom color</strong> is on.</em></td></tr><tr><td><strong>Margin</strong></td><td>0–200px</td><td>Adds space outside the Divider. Adjust top, bottom, left, and right margins independently.</td></tr></tbody></table>