Title: Separator block
Author: Sophie - a11n
Published: March 7, 2019
Last modified: April 17, 2025

---

# 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 “Advanced” tab lets you add HTML anchor and CSS class(es) to your block.

[⌊Advanced settings in the Separator block⌉⌊Advanced settings in the Separator block⌉[

The advanced section lets you add HTML anchor and a CSS class to your block.

“HTML anchor” allows you to [make a unique web address](https://wordpress.org/documentation/article/page-jumps/)
for a particular block. Then, you’ll be able to link directly to that block on your
page.

The “Additional CSS class(es)” lets you add CSS class(es) to your block, allowing
you to write custom CSS and style the block as you see fit.

When selecting one of the three styles available, this field is pre-populated with
the CSS class that targets the chosen style. For example,

 * The default separator adds `is-style-default` CSS class
 * The wide line separator adds `is-style-wide` CSS class
 * The dots separator adds `is-style-dots` CSS class

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

 * 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

April 17, 2025