Separator Block

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.

Add a block

• Click on the Add block icon.

• Type "/separator" then hit enter to add the separator block.

There is also another way to add a separator block.

• In a new paragraph block, type "/separator" then hit enter to add one quickly.

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. 

Transform to

You can transform a separator block into a Columns or a Group block. You can also switch the styles from Default to Wide Line or Dots.

Move

Use the block-moving tools to move the block up and down on the page. Use the six dots icon to drag and drop the separator block and reposition it anywhere within the page. Alternatively, click on the up and down arrows to move the block up or down on the page.

Get more information about moving a block within the editor here.

Change alignment

The change alignment tool lets you align the separator block within the content.

You can choose one of the following alignment options:

• 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.
• Align center - Align the block to the center of the content.

More options

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

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 Settings sidebar, simply click the "cog" icon in the upper right corner.

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.

Color

The color settings let you customize the color for the separator block. Either select a color using the color picker or by adding a color code; using the dropdown, you can select to use a Hex, RGB, or HSL value.