{"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&#038;p=11285864"},"modified":"2026-05-25T07:09:07","modified_gmt":"2026-05-25T07:09:07","slug":"separator-block","status":"publish","type":"helphub_article","link":"https:\/\/wordpress.org\/documentation\/article\/separator-block\/","title":{"rendered":"Separator block"},"content":{"rendered":"\n<p class=\"has-text-align-right has-small-font-size wp-block-paragraph\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/blocks\/\">Go back to the list of <strong>Blocks<\/strong><\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The <em>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<p class=\"wp-block-paragraph\">In order to add a Separator block, click on the <strong>Block Inserter<\/strong> icon.<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video height=\"864\" style=\"aspect-ratio: 1156 \/ 864;\" width=\"1156\" autoplay controls loop muted src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/06\/separator-block-demo.mp4\"><\/video><figcaption class=\"wp-element-caption\">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<p class=\"wp-block-paragraph\">You can also type<kbd> \/separator<\/kbd> and hit enter in a new Paragraph block to add one quickly.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><a href=\"https:\/\/wordpress.org\/documentation\/files\/2022\/08\/171654172-0eb91e47-4276-4e0e-86cc-c7a9c572b4f1.png\"><img loading=\"lazy\" decoding=\"async\" width=\"838\" height=\"294\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/08\/171654172-0eb91e47-4276-4e0e-86cc-c7a9c572b4f1.png\" alt=\"How to quickly add a separator block\" class=\"wp-image-15886129\" style=\"width:393px;height:138px\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/08\/171654172-0eb91e47-4276-4e0e-86cc-c7a9c572b4f1.png 838w, https:\/\/wordpress.org\/documentation\/files\/2022\/08\/171654172-0eb91e47-4276-4e0e-86cc-c7a9c572b4f1-300x105.png 300w, https:\/\/wordpress.org\/documentation\/files\/2022\/08\/171654172-0eb91e47-4276-4e0e-86cc-c7a9c572b4f1-768x269.png 768w\" sizes=\"auto, (max-width: 838px) 100vw, 838px\" \/><\/a><\/figure>\n\n\n\n<p class=\"has-text-align-left has-background wp-block-paragraph\" style=\"background-color:#e5f4fa\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/adding-a-new-block\/\">Detailed instructions on adding blocks<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Block toolbar<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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.\u00a0<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><a href=\"https:\/\/wordpress.org\/documentation\/files\/2022\/08\/171654325-3831afa2-c782-428f-884c-1ae7fab164ca.png\"><img loading=\"lazy\" decoding=\"async\" width=\"508\" height=\"210\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/08\/171654325-3831afa2-c782-428f-884c-1ae7fab164ca.png\" alt=\"Block toolbar in the Separator block\" class=\"wp-image-15886131\" style=\"width:254px;height:105px\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/08\/171654325-3831afa2-c782-428f-884c-1ae7fab164ca.png 508w, https:\/\/wordpress.org\/documentation\/files\/2022\/08\/171654325-3831afa2-c782-428f-884c-1ae7fab164ca-300x124.png 300w\" sizes=\"auto, (max-width: 508px) 100vw, 508px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Transform to<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">When you click on the \u201cTransform\u201d button, you can convert the Separator block into Spacer, Columns, Details, or Group blocks.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"321\" height=\"448\" src=\"https:\/\/wordpress.org\/documentation\/files\/2019\/03\/separator-transform.png\" alt=\"Transform option in the Separator block\" class=\"wp-image-16365599\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2019\/03\/separator-transform.png 321w, https:\/\/wordpress.org\/documentation\/files\/2019\/03\/separator-transform-215x300.png 215w\" sizes=\"auto, (max-width: 321px) 100vw, 321px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Group<\/strong>: Wraps the Separator inside a Group block, allowing background color, spacing, and border customization.<\/li>\n\n\n\n<li><strong>Spacer<\/strong>: Transforms the visual line into empty vertical space, useful for adding space between blocks without a visible divider.<\/li>\n\n\n\n<li><strong>Columns<\/strong>: Wraps the content into a multi-column layout, ideal for displaying blocks side-by-side.<\/li>\n\n\n\n<li><strong>Details<\/strong>: Converts the Separator into a collapsible block for toggling additional content, providing interactive and space-saving content organization.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Block-moving tools<\/h3>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/08\/Screen-Shot-2022-08-03-at-1.29.37-PM-1.png\" alt=\"Block moving tools in the Separator block\" class=\"wp-image-15886146\" style=\"width:336px;height:92px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">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&nbsp;<em>Separator Block<\/em>&nbsp;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<p class=\"has-text-align-left has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\"><a rel=\"noreferrer noopener\" href=\"https:\/\/wordpress.org\/documentation\/article\/moving-blocks\/\" target=\"_blank\">Get more information about moving a block within the editor.<\/a><\/p>\n\n\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Change alignment<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The\u00a0change alignment\u00a0tool lets you align the <em>Separator block<\/em> within the content. You can choose one of the following alignment options:<\/p>\n\n\n\n<figure class=\"wp-block-image alignright size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"350\" height=\"257\" src=\"https:\/\/wordpress.org\/documentation\/files\/2019\/03\/separator-alignment.png\" alt=\"Change alignment in the Separator block\" class=\"wp-image-16365601\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2019\/03\/separator-alignment.png 350w, https:\/\/wordpress.org\/documentation\/files\/2019\/03\/separator-alignment-300x220.png 300w\" sizes=\"auto, (max-width: 350px) 100vw, 350px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>None<\/strong>: Leaves the block alignment as is.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Wide width<\/strong>: Increase the width of the block beyond the content size.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>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<p class=\"wp-block-paragraph\"><strong>Align center<\/strong>: Align the block to the center of the content.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">More options<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">These controls give you the option to copy, duplicate, and edit your block as HTML.<\/p>\n<\/div>\n\n\n\n<p class=\"has-text-align-left has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/more-options\/\">Read about these and other settings.<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Block settings<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Every block has specific options in the editor sidebar in addition to the options found in the block toolbar.&nbsp;<em>If you do not see the sidebar, simply click the &#8216;sidebar&#8217; icon.<\/em><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"222\" height=\"56\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/05\/Screenshot-2023-05-23-at-8.41.56-AM.png\" alt=\"A screenshot of the sidebar icon used to toggle the settings pane.\" class=\"wp-image-16357084\" \/><figcaption class=\"wp-element-caption\">Use the sidebar icon to toggle the settings pane on or off.<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Styles<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">You can modify the Separator block&#8217;s look by choosing one of the styles available in the block&#8217;s settings on right-hand side under&nbsp;<strong>Styles<\/strong>. You can either hover or focus click on each of the style buttons (e.g. \u2018Default\u2019, &#8216;Wide Line&#8217; or \u2018Dots\u2019) to get a preview of the styles.<\/p>\n\n\n\n<p class=\"has-text-align-left has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\"><strong>Note:<\/strong> The style options may vary based on your theme!<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"558\" height=\"302\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/08\/171654332-5ee10afb-ce3d-4bb3-9ae9-ba8a3a14f67e.png\" alt=\"Style settings in the Separator block\" class=\"wp-image-15886205\" style=\"width:279px;height:151px\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/08\/171654332-5ee10afb-ce3d-4bb3-9ae9-ba8a3a14f67e.png 558w, https:\/\/wordpress.org\/documentation\/files\/2022\/08\/171654332-5ee10afb-ce3d-4bb3-9ae9-ba8a3a14f67e-300x162.png 300w\" sizes=\"auto, (max-width: 558px) 100vw, 558px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Color<\/h3>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/11\/seperator-1-952x1024.png\" alt=\"Images showing the color settings available \" class=\"wp-image-16245072\" style=\"width:353px;height:379px\" \/><figcaption class=\"wp-element-caption\">Color settings allow you to change the color of the separator<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"has-text-align-left has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/colors-settings-overview\/\">See this guide for more information about changing colors.<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Dimensions<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The separator block provides the ability to add margin values via the Dimensions settings option, giving you more control over content separation.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"444\" height=\"628\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/06\/219549381-77382744-a69d-4a0e-bcec-98a8a5fba95e.png\" alt=\"Screenshot of the Dimensions settings on the Separator block sidebar\" class=\"wp-image-16357540\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/06\/219549381-77382744-a69d-4a0e-bcec-98a8a5fba95e.png 444w, https:\/\/wordpress.org\/documentation\/files\/2023\/06\/219549381-77382744-a69d-4a0e-bcec-98a8a5fba95e-212x300.png 212w\" sizes=\"auto, (max-width: 444px) 100vw, 444px\" \/><figcaption class=\"wp-element-caption\">The &#8216;margin&#8217; dimension setting allows you to add space above or below your separator.<\/figcaption><\/figure>\n\n\n\n<p class=\"has-text-align-left has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/dimension-controls-overview\/\">See this guide for more information about dimensions settings.<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Advanced settings<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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 <a href=\"#styles\" data-type=\"internal\" data-id=\"#styles\">Styles<\/a> applied. <\/p>\n\n\n\n<p class=\"has-text-align-left has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/advanced-settings-overview\/\">Learn more about advanced settings<\/a><\/p>\n\n\n\n<div class=\"wp-block-group changelog has-very-dark-gray-color has-very-light-gray-background-color has-text-color has-background is-layout-flow wp-block-group-is-layout-flow\">\n<h2 id=\"changelog\" class=\"wp-block-heading has-extra-large-font-size\">Changelog<strong> <\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Updated 2026-05-25 (props @kjoyner @awetz583)\n<ul class=\"wp-block-list\">\n<li>Updated &#8220;Advanced&#8221; section to refer to new overview page<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>2025-04-17 (props to <a href=\"https:\/\/profiles.wordpress.org\/karthickmurugan\/\">@karthickmurugan<\/a>)\n<ul class=\"wp-block-list\">\n<li>Update screenshots to 6.8.<\/li>\n\n\n\n<li>Update <strong>Transform to<\/strong> section with new options.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Updated 2023-06-28\n<ul class=\"wp-block-list\">\n<li>Updated video &amp; screenshots for 6.2<\/li>\n\n\n\n<li>Added dimensions settings section<\/li>\n\n\n\n<li>Tweaked wording for Styles section to include preview on hover\/focus click<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Updated 2022-11-22\n<ul class=\"wp-block-list\">\n<li>Removed redundant content <\/li>\n\n\n\n<li>Aligned images for mobile view <\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Updated 2022-08-03\n<ul class=\"wp-block-list\">\n<li>Screenshot, content, and video updated for 6.0<\/li>\n\n\n\n<li>Added ALT tags for the images<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Updated 2020-08-23\n<ul class=\"wp-block-list\">\n<li>Updated images to WP 5.5<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Updated 2020-08-10\n<ul class=\"wp-block-list\">\n<li>Added link to the list of blocks<\/li>\n\n\n\n<li>Added changlog box<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Created 2019-03-07<\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Go back to the list of 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. You can also type \/separator [&hellip;]<\/p>\n","protected":false},"author":16127499,"featured_media":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false},"category":[80,88],"class_list":["post-11285864","helphub_article","type-helphub_article","status-publish","hentry","category-customization","category-design-blocks"],"revision_note":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/11285864","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles"}],"about":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/types\/helphub_article"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/comments?post=11285864"}],"version-history":[{"count":11,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/11285864\/revisions"}],"predecessor-version":[{"id":16368485,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/11285864\/revisions\/16368485"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wporg\/v1\/users\/sophiegy"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/media?parent=11285864"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/category?post=11285864"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}