Blocks

Blocks » Separator Block

If you would like to separate two blocks of content by a line, the Separator block is what you are looking for. 

Table of Contents

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

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

Separator Block Add Typing

Detailed instructions on adding blocks can be found here.

Block Interface

Each block has its own block-specific controls that allow you to manipulate the block right in the editor. The separator block toolbar has the options for changing block type, moving the block and the More elipses found in all block toolbars. The Separator block also has an alignment option.

the separator block with the toolbar activated.

↑ Table of Contents ↑

Block Settings Panel

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, click the ‘cog’ icon next to the Publish button.

The block settings can be found in the sidebar.
The block settings can be found in the sidebar.

↑ Table of Contents ↑

Styles

On this tab, you can select one of the three separator styles: short line, wide line (take the full content width) and dots.  

Separator Block Styles
Separator styles

↑ Table of Contents ↑

Colors

Colors allow you to choose a color for your separator line. Select from one of the default color options, or click Custom color to add your own color.

Click Clear to reset the separator to the default color, set by the theme.


↑ Table of Contents ↑

Advanced

The advanced tab lets you add an HTML anchor and Additional CSS class(es).

The HTML anchor lets you create jump links in your page, which can be helpful for longer pages where visitors might want to click on a link to go directly to a specific section. Learn more here.

The Additional CSS class(es) allows 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. Learn more.


Not quite what you're looking for?

Get Help