Title: Separator block
Author: Sophie - a11n
Published: March 7, 2019
Last modified: May 25, 2026

---

# Separator block

## In this article

 * [Block toolbar](https://wordpress.org/documentation/article/separator-block/?output_format=md#block-toolbar)
    - [Transform to](https://wordpress.org/documentation/article/separator-block/?output_format=md#transform-to)
    - [Block-moving tools](https://wordpress.org/documentation/article/separator-block/?output_format=md#block-moving-tools)
    - [Change alignment](https://wordpress.org/documentation/article/separator-block/?output_format=md#change-alignment)
    - [More options](https://wordpress.org/documentation/article/separator-block/?output_format=md#more-options)
 * [Block settings](https://wordpress.org/documentation/article/separator-block/?output_format=md#block-settings)
    - [Styles](https://wordpress.org/documentation/article/separator-block/?output_format=md#styles)
    - [Color](https://wordpress.org/documentation/article/separator-block/?output_format=md#color)
    - [Dimensions](https://wordpress.org/documentation/article/separator-block/?output_format=md#dimensions)
    - [Advanced settings](https://wordpress.org/documentation/article/separator-block/?output_format=md#advanced-settings)
 * [Changelog](https://wordpress.org/documentation/article/separator-block/?output_format=md#changelog)

[ Back to top](https://wordpress.org/documentation/article/separator-block/?output_format=md#wp--skip-link--target)

[Go back to the list of **Blocks**](https://wordpress.org/documentation/article/blocks/)

The _separator block_ creates a break between two blocks of content with a horizontal
line. This helps to create a separation between ideas or sections on your post or
page.

In order to add a Separator block, click on the **Block Inserter** icon.

A video showing the process of adding a separator block using the block inserter
and changing styles and settings.

You can also type /separator and hit enter in a new Paragraph block to add one quickly.

[⌊How to quickly add a separator block⌉⌊How to quickly add a separator block⌉[

[Detailed instructions on adding blocks](https://wordpress.org/documentation/article/adding-a-new-block/)

## 󠀁[Block toolbar](https://wordpress.org/documentation/article/separator-block/?output_format=md#block-toolbar)󠁿

Each block has its own block-specific controls that allow you to manipulate the 
block right in the editor. The Separator block has the following options in the 
Block toolbar. 

[⌊Block toolbar in the Separator block⌉⌊Block toolbar in the Separator block⌉[

### 󠀁[Transform to](https://wordpress.org/documentation/article/separator-block/?output_format=md#transform-to)󠁿

When you click on the “Transform” button, you can convert the Separator block into
Spacer, Columns, Details, or Group blocks.

![Transform option in the Separator block](https://wordpress.org/documentation/files/
2019/03/separator-transform.png)

 * **Group**: Wraps the Separator inside a Group block, allowing background color,
   spacing, and border customization.
 * **Spacer**: Transforms the visual line into empty vertical space, useful for 
   adding space between blocks without a visible divider.
 * **Columns**: Wraps the content into a multi-column layout, ideal for displaying
   blocks side-by-side.
 * **Details**: Converts the Separator into a collapsible block for toggling additional
   content, providing interactive and space-saving content organization.

### 󠀁[Block-moving tools](https://wordpress.org/documentation/article/separator-block/?output_format=md#block-moving-tools)󠁿

![Block moving tools in the Separator block](https://wordpress.org/documentation/
files/2022/08/Screen-Shot-2022-08-03-at-1.29.37-PM-1.png)

Use the block-moving tools to move the block up and down inside the editor. Use 
the six dots icon to drag and drop the _Separator Block_ and reposition it anywhere
on the editor. Alternatively, click on the up and down arrows to move the block 
up or down the editor.

[Get more information about moving a block within the editor.](https://wordpress.org/documentation/article/moving-blocks/)

### 󠀁[Change alignment](https://wordpress.org/documentation/article/separator-block/?output_format=md#change-alignment)󠁿

The change alignment tool lets you align the _Separator block_ within the content.
You can choose one of the following alignment options:

![Change alignment in the Separator block](https://wordpress.org/documentation/files/
2019/03/separator-alignment.png)

**None**: Leaves the block alignment as is.

**Wide width**: Increase the width of the block beyond the content size.

**Full width**: Extend the block to cover the full width of the screen (if supported
by your site’s theme).

**Align center**: Align the block to the center of the content.

### 󠀁[More options](https://wordpress.org/documentation/article/separator-block/?output_format=md#more-options)󠁿

These controls give you the option to copy, duplicate, and edit your block as HTML.

[Read about these and other settings.](https://wordpress.org/documentation/article/more-options/)

## 󠀁[Block settings](https://wordpress.org/documentation/article/separator-block/?output_format=md#block-settings)󠁿

Every block has specific options in the editor sidebar in addition to the options
found in the block toolbar. _If you do not see the sidebar, simply click the ‘sidebar’
icon._

![A screenshot of the sidebar icon used to toggle the settings pane.](https://wordpress.
org/documentation/files/2023/05/Screenshot-2023-05-23-at-8.41.56-AM.png)

Use the sidebar icon to toggle the settings pane on or off.

### 󠀁[Styles](https://wordpress.org/documentation/article/separator-block/?output_format=md#styles)󠁿

You can modify the Separator block’s look by choosing one of the styles available
in the block’s settings on right-hand side under **Styles**. You can either hover
or focus click on each of the style buttons (e.g. ‘Default’, ‘Wide Line’ or ‘Dots’)
to get a preview of the styles.

**Note:** The style options may vary based on your theme!

![Style settings in the Separator block](https://wordpress.org/documentation/files/
2022/08/171654332-5ee10afb-ce3d-4bb3-9ae9-ba8a3a14f67e.png)

### 󠀁[Color](https://wordpress.org/documentation/article/separator-block/?output_format=md#color)󠁿

![Images showing the color settings available ](https://wordpress.org/documentation/
files/2022/11/seperator-1-952x1024.png)

Color settings allow you to change the color of the separator

The color settings let you customize the color for the Separator block. Pick a color
from the suggestions, or add a custom color using the color picker or by adding 
a color code.

[See this guide for more information about changing colors.](https://wordpress.org/documentation/article/colors-settings-overview/)

### 󠀁[Dimensions](https://wordpress.org/documentation/article/separator-block/?output_format=md#dimensions)󠁿

The separator block provides the ability to add margin values via the Dimensions
settings option, giving you more control over content separation.

![Screenshot of the Dimensions settings on the Separator block sidebar](https://
wordpress.org/documentation/files/2023/06/219549381-77382744-a69d-4a0e-bcec-98a8a5fba95e.
png)

The ‘margin’ dimension setting allows you to add space above or below your separator.

[See this guide for more information about dimensions settings.](https://wordpress.org/documentation/article/dimension-controls-overview/)

### 󠀁[Advanced settings](https://wordpress.org/documentation/article/separator-block/?output_format=md#advanced-settings)󠁿

The Separator block provides the following Advanced settings options: HTML Anchor,
Additional CSS Class(es), and Styles. You may see the Additional CSS Class(es) field
populated with a CSS class already if the Separator block has [Styles](https://wordpress.org/documentation/article/separator-block/?output_format=md#styles)
applied.

[Learn more about advanced settings](https://wordpress.org/documentation/article/advanced-settings-overview/)

## 󠀁[Changelog](https://wordpress.org/documentation/article/separator-block/?output_format=md#changelog)󠁿

 * Updated 2026-05-25 (props @kjoyner @awetz583)
    - Updated “Advanced” section to refer to new overview page
 * 2025-04-17 (props to [@karthickmurugan](https://profiles.wordpress.org/karthickmurugan/))
    - Update screenshots to 6.8.
    - Update **Transform to** section with new options.
 * Updated 2023-06-28
    - Updated video & screenshots for 6.2
    - Added dimensions settings section
    - Tweaked wording for Styles section to include preview on hover/focus click
 * Updated 2022-11-22
    - Removed redundant content
    - Aligned images for mobile view
 * Updated 2022-08-03
    - Screenshot, content, and video updated for 6.0
    - Added ALT tags for the images
 * Updated 2020-08-23
    - Updated images to WP 5.5
 * Updated 2020-08-10
    - Added link to the list of blocks
    - Added changlog box
 * Created 2019-03-07

## Was this article helpful? How could it be improved? 󠀁[Cancel reply](https://wordpress.org/documentation/article/separator-block/?output_format=md#respond)󠁿

[Log in to submit feedback](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fdocumentation%2Farticle%2Fseparator-block%2F&locale=en_US).
If you need support with something that wasn't covered by this article, please post
your question in the [support forums](https://wordpress.org/support/forums/).

First published

March 7, 2019

Last updated

May 25, 2026