{"id":11285864,"date":"2019-03-07T12:32:15","date_gmt":"2019-03-07T12:32:15","guid":{"rendered":"https:\/\/wordpress.org\/support\/?post_type=helphub_article&p=11285864"},"modified":"2024-06-08T18:43:26","modified_gmt":"2024-06-08T18:43:26","slug":"separator-block","status":"publish","type":"helphub_article","link":"https:\/\/wordpress.org\/documentation\/article\/separator-block\/","title":{"rendered":"Separator block"},"content":{"rendered":"\n

Go back to the list of Blocks<\/strong><\/a><\/p>\n\n\n\n

The separator block<\/em> 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.<\/p>\n\n\n\n

In order to add a separator block<\/em>, click on the Block Inserter<\/strong> icon.<\/p>\n\n\n\n

A video showing the process of adding a separator block using the block inserter and changing styles and settings.<\/figcaption><\/figure>\n\n\n\n

You can also type \/separator<\/kbd> and hit enter in a new paragraph block<\/em> to add one quickly.<\/p>\n\n\n\n

\"How<\/a><\/figure>\n\n\n\n

Detailed instructions on adding blocks<\/a><\/p>\n\n\n\n

Block toolbar<\/h2>\n\n\n\n

Each block has its own block-specific controls that allow you to manipulate the block right in the editor. The separator block<\/em> has the following options in the Block toolbar. <\/p>\n\n\n\n

\"Block<\/a><\/figure>\n\n\n\n

Transform to<\/h3>\n\n\n\n

You can transform a Separator block<\/em> into a Columns, or a Group block. You can also switch the styles from Default<\/em> to Wide Line<\/em> or Dots<\/em>.<\/p>\n\n\n\n

\"Transform<\/figure>\n\n\n\n

Block-moving tools<\/h3>\n\n\n\n
\"Block<\/figure>\n\n\n\n

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<\/em> and reposition it anywhere on the editor. Alternatively, click on the up and down arrows to move the block up or down the editor.<\/p>\n\n\n\n

Get more information about moving a block within the editor.<\/a><\/p>\n\n\n\n

\n

Change alignment<\/h3>\n\n\n\n

The change alignment<\/em> tool lets you align the Separator block<\/em> within the content. You can choose one of the following alignment options:<\/p>\n\n\n\n

\"Change<\/figure>\n\n\n\n

None<\/strong>: Leaves the block alignment as is.<\/p>\n\n\n\n

Wide width<\/strong>: Increase the width of the block beyond the content size.<\/p>\n\n\n\n

Full width<\/strong>: Extend the block to cover the full width of the screen (if supported by your site\u2019s theme).<\/p>\n\n\n\n

Align center<\/strong>: Align the block to the center of the content.<\/p>\n\n\n\n

More options<\/h3>\n\n\n\n

These controls give you the option to copy, duplicate, and edit your block as HTML.<\/p>\n<\/div>\n\n\n\n

Read about these and other settings.<\/a><\/p>\n\n\n\n

Block settings<\/h2>\n\n\n\n

Every block has specific options in the editor sidebar in addition to the options found in the block toolbar.\u00a0If you do not see the sidebar, simply click the ‘sidebar’ icon.<\/em><\/p>\n\n\n\n

\"A
Use the sidebar icon to toggle the settings pane on or off.<\/figcaption><\/figure>\n\n\n\n

Styles<\/h3>\n\n\n\n

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\u00a0Styles<\/strong>. You can either hover or focus click on each of the style buttons (e.g. \u2018Default\u2019, ‘Wide Line’ or \u2018Dots\u2019) to get a preview of the styles.<\/p>\n\n\n\n

Note:<\/strong> The style options may vary based on your theme!<\/p>\n\n\n\n

\"Style<\/figure>\n\n\n\n

Color<\/h3>\n\n\n\n
\"Images
Color settings allow you to change the color of the separator<\/figcaption><\/figure>\n\n\n\n

The color settings let you customize the color for the Separator block<\/em>. Pick a color from the suggestions, or add a custom color using the color picker or by adding a color code.<\/p>\n\n\n\n

See this guide for more information about changing colors.<\/a><\/p>\n\n\n\n

Dimensions<\/h3>\n\n\n\n

The separator block provides the ability to add margin values via the Dimensions <\/em>settings option, giving you more control over content separation.<\/p>\n\n\n\n

\"Screenshot
The ‘margin’ dimension setting allows you to add space above or below your separator.<\/figcaption><\/figure>\n\n\n\n

See this guide for more information about dimensions settings.<\/a><\/p>\n\n\n\n

Advanced settings<\/h3>\n\n\n\n

The \u201cAdvanced\u201d tab lets you add HTML anchor and CSS class(es) to your block.
<\/p>\n\n\n\n

\"Advanced<\/a>
The advanced section lets you add HTML anchor and a CSS class to your block.<\/figcaption><\/figure>\n\n\n\n

\u201cHTML anchor\u201d allows you to make a unique web address<\/a> for a particular block. Then, you\u2019ll be able to link directly to that block on your page.<\/p>\n\n\n\n

The \u201cAdditional CSS class(es)\u201d lets you add CSS class(es) to your block, allowing you to write custom CSS and style the block as you see fit.<\/p>\n\n\n\n

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