{"id":7058,"date":"2025-01-25T13:32:54","date_gmt":"2025-01-25T13:32:54","guid":{"rendered":"https:\/\/tableberg.com\/?p=7058"},"modified":"2025-01-25T13:32:54","modified_gmt":"2025-01-25T13:32:54","slug":"%e3%83%af%e3%83%bc%e3%83%89%e3%83%97%e3%83%ac%e3%82%b9%e3%81%ae%e3%82%bb%e3%83%91%e3%83%ac%e3%83%bc%e3%82%bf%e3%83%bc%e3%83%bb%e3%83%96%e3%83%ad%e3%83%83%e3%82%af%e3%81%ae%e4%bd%bf%e3%81%84%e6%96%b9","status":"publish","type":"post","link":"https:\/\/tableberg.com\/ja\/how-to-use-the-separator-block-in-wordpress\/","title":{"rendered":"\u30bb\u30d1\u30ec\u30fc\u30bf\u30fc\u30fb\u30d6\u30ed\u30c3\u30af - \u4f7f\u3044\u65b9\u30ac\u30a4\u30c9\uff06\u6982\u8981"},"content":{"rendered":"\n<p>Adding a visual break between two content sections is imminent to improve the readability of a website and its design. <strong><a href=\"https:\/\/wordpress.org\/documentation\/article\/separator-block\/\" target=\"_blank\" rel=\"noreferrer noopener\">The Separator Block<\/a><\/strong> in WordPress is a simple block that lets you achieve this. <\/p>\n\n\n\n<p>It is also a great way to divide content for better content structure or add a stylistic element to your page. It is a go-to tool for all types of users to visually display their content in a more organized way. <\/p>\n\n\n<div data-is_sticky=\"false\" data-sticky_toc_position=\"left\" data-hide_sticky_on_mobile=\"false\" data-sticky_button_icon='&lt;svg style=\"color:#000000;\" class=\"ub_sticky-toc-open-button-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" height=\"34px\" width=\"34px\" viewBox=\"0, 0, 448, 512\"&gt;&lt;path fill=\"currentColor\" d=\"M0 96C0 78.33 14.33 64 32 64H416C433.7 64 448 78.33 448 96C448 113.7 433.7 128 416 128H32C14.33 128 0 113.7 0 96zM0 256C0 238.3 14.33 224 32 224H416C433.7 224 448 238.3 448 256C448 273.7 433.7 288 416 288H32C14.33 288 0 273.7 0 256zM416 448H32C14.33 448 0 433.7 0 416C0 398.3 14.33 384 32 384H416C433.7 384 448 398.3 448 416C448 433.7 433.7 448 416 448z\"&gt;&lt;\/svg&gt;' data-sticky_button_color=\"#000000\" data-sticky_toc_width=\"320px\" style=\"max-width: -moz-fit-content; \" class=\"wp-block-ub-table-of-contents-block ub_table-of-contents ub_table-of-contents-collapsed\" id=\"ub_table-of-contents-16c2a337-06bf-4a68-9e28-53c3940fef1a\" data-linktodivider=\"false\" data-showtext=\"show\" data-hidetext=\"hide\" data-scrolltype=\"auto\" data-enablesmoothscroll=\"false\" data-initiallyhideonmobile=\"true\" data-initiallyshow=\"false\"><div class=\"ub_table-of-contents-header-container\" style=\"\">\n\t\t\t<div class=\"ub_table-of-contents-header\" style=\"text-align: left; \">\n\t\t\t\t<div class=\"ub_table-of-contents-title\">How to Use the Separator Block in WordPress?<\/div>\n\t\t\t\t<div class=\"ub_table-of-contents-header-toggle\">\n\t\t\t<div class=\"ub_table-of-contents-toggle\" style=\"\">\n\t\t\t\u00a0[<a class=\"ub_table-of-contents-toggle-link\" href=\"#\" style=\"\">show<\/a>]\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div><div class=\"ub_table-of-contents-extra-container\" style=\"\">\n\t\t\t<div class=\"ub_table-of-contents-container ub_table-of-contents-1-column ub-hide\">\n\t\t\t\t<ul style=\"\"><li style=\"\"><a href=\"https:\/\/tableberg.com\/ja\/how-to-use-the-separator-block-in-wordpress\/#0-how-to-use-the-separator-block-in-wordpress\" style=\"\">How to Use the Separator Block in WordPress?<\/a><ul><li style=\"\"><a href=\"https:\/\/tableberg.com\/ja\/how-to-use-the-separator-block-in-wordpress\/#1-step-1-insert-the-separator-block\" style=\"\">Step 1: Insert the Separator Block<\/a><\/li><li style=\"\"><a href=\"https:\/\/tableberg.com\/ja\/how-to-use-the-separator-block-in-wordpress\/#2-step-2-style-the-separator\" style=\"\">Step 2: Style the Separator<\/a><\/li><\/ul><\/li><li style=\"\"><a href=\"https:\/\/tableberg.com\/ja\/how-to-use-the-separator-block-in-wordpress\/#3-learn-more-about-the-wordpress-separator-block\" style=\"\">Learn More about the WordPress Separator Block<\/a><\/li><li style=\"\"><a href=\"https:\/\/tableberg.com\/ja\/how-to-use-the-separator-block-in-wordpress\/#4-final-thoughts\" style=\"\">Final Thoughts<\/a><\/li><\/ul>\n\t\t\t<\/div>\n\t\t<\/div><\/div>\n\n\n<div class=\"wp-block-group has-border-color has-global-padding is-layout-constrained wp-container-core-group-is-layout-8db5ca72 wp-block-group-is-layout-constrained\" style=\"border-color:#671feb;border-style:solid;border-width:1px;border-radius:4px;padding-top:var(--wp--preset--spacing--medium);padding-right:var(--wp--preset--spacing--small);padding-bottom:var(--wp--preset--spacing--medium);padding-left:var(--wp--preset--spacing--small)\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-505d3e6d wp-block-group-is-layout-flex\" style=\"padding-top:var(--wp--preset--spacing--small);padding-bottom:var(--wp--preset--spacing--small)\">\n<p style=\"font-size:clamp(18.959px, 1.185rem + ((1vw - 3.2px) * 1.175), 30px);\"><strong>Create Beautiful Tables <\/strong><br><strong>With Block Editor<\/strong><\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-f2baa792 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-background wp-element-button\" href=\"https:\/\/wordpress.org\/plugins\/tableberg\/\" style=\"background-color:#671feb\" target=\"_blank\" rel=\"noreferrer noopener\">Try Free<\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-outline is-style-outline--1\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/tableberg.com\/pricing\/\" target=\"_blank\" rel=\"noreferrer noopener\">Get Pro<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"540\" height=\"540\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Tableberg.png\" alt=\"\" class=\"wp-image-1545\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Tableberg.png 540w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Tableberg-300x300.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Tableberg-150x150.png 150w\" sizes=\"auto, (max-width: 540px) 100vw, 540px\" \/><\/figure>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-main-accent-color has-alpha-channel-opacity has-main-accent-background-color has-background\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"0-how-to-use-the-separator-block-in-wordpress\">How to Use the Separator Block in WordPress?<\/h2>\n\n\n\n<p>Like every other core WordPress block, the Separator Block is easy to use. Follow the tutorial and master using this block. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"1-step-1-insert-the-separator-block\">Step 1: Insert the Separator Block<\/h3>\n\n\n\n<p>Select and edit the post where you want to insert the separator block. Now, click the &#8220;<strong>+<\/strong>&#8221; (<strong>Add Block<\/strong>) icon <strong>(1)<\/strong>, type &#8220;<strong>Separator<\/strong>&#8221; in the search box <strong>(2)<\/strong>, and click the &#8220;Separator&#8221; <strong>(3)<\/strong>. <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"554\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/01\/2025-01-25_18-14-30.png\" alt=\"How to use the separator block in WordPress\" class=\"has-border-color has-main-accent-border-color wp-image-7063\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/01\/2025-01-25_18-14-30.png 880w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/01\/2025-01-25_18-14-30-300x189.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/01\/2025-01-25_18-14-30-768x483.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/01\/2025-01-25_18-14-30-18x12.png 18w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/figure>\n\n\n\n<p>After clicking the separator, it will be inserted into the editor. <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"554\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/01\/2025-01-25_18-14-30-1.png\" alt=\"\" class=\"has-border-color has-main-accent-border-color wp-image-7064\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/01\/2025-01-25_18-14-30-1.png 880w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/01\/2025-01-25_18-14-30-1-300x189.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/01\/2025-01-25_18-14-30-1-768x483.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/01\/2025-01-25_18-14-30-1-18x12.png 18w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"2-step-2-style-the-separator\">Step 2: Style the Separator<\/h3>\n\n\n\n<p>Based on your website&#8217;s theme, the Separator block can appear as a small straight line or as wide. <\/p>\n\n\n\n<p>If it is a small line, you can make it wide simply by choosing the wide line. To do so, you must select the block and navigate to <strong>Settings (1 ) > Block (2) > Style (3) > Wide Line (4).<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"888\" height=\"718\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/01\/2025-01-25_18-36-39.png\" alt=\"\" class=\"has-border-color has-main-accent-border-color wp-image-7065\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/01\/2025-01-25_18-36-39.png 888w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/01\/2025-01-25_18-36-39-300x243.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/01\/2025-01-25_18-36-39-768x621.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/01\/2025-01-25_18-36-39-15x12.png 15w\" sizes=\"auto, (max-width: 888px) 100vw, 888px\" \/><\/figure>\n\n\n\n<p>You can make your separator appear like dots, too. In that case, you have to select the Dots option. <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"698\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/01\/2025-01-25_18-40-09.png\" alt=\"\" class=\"has-border-color has-main-accent-border-color wp-image-7066\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/01\/2025-01-25_18-40-09.png 880w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/01\/2025-01-25_18-40-09-300x238.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/01\/2025-01-25_18-40-09-768x609.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/01\/2025-01-25_18-40-09-15x12.png 15w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/figure>\n\n\n\n<p>The Separator block also allows you to change the background color of the separator. <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"890\" height=\"724\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/01\/2025-01-25_18-42-09.png\" alt=\"\" class=\"has-border-color has-main-accent-border-color wp-image-7067\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/01\/2025-01-25_18-42-09.png 890w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/01\/2025-01-25_18-42-09-300x244.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/01\/2025-01-25_18-42-09-768x625.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/01\/2025-01-25_18-42-09-15x12.png 15w\" sizes=\"auto, (max-width: 890px) 100vw, 890px\" \/><\/figure>\n\n\n\n<p>Finally, you can add margins to your separator. <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"884\" height=\"750\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/01\/2025-01-25_18-45-37.gif\" alt=\"\" class=\"has-border-color has-main-accent-border-color wp-image-7068\" style=\"border-width:1px;border-radius:3px\"\/><\/figure>\n\n\n\n<p>The Styling option is optional; it is up to you to customize the separator block. <\/p>\n\n\n\n<p>Remember that you must publish or save the post or page before exiting to save your changes. <\/p>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-main-accent-color has-alpha-channel-opacity has-main-accent-background-color has-background\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"3-learn-more-about-the-wordpress-separator-block\">Learn More about the WordPress Separator Block<\/h2>\n\n\n\n<p>Want to learn details about the Separator block? Surf through the accordions below. It contains all the details about the block. <\/p>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-ub-content-toggle wp-block-ub-content-toggle-block\" id=\"ub-content-toggle-block-f41aedf7-c379-48d7-b02c-ce9ad6442be8\" data-mobilecollapse=\"true\" data-desktopcollapse=\"true\" data-preventcollapse=\"false\" data-showonlyone=\"false\">\n<div class=\"wp-block-ub-content-toggle-accordion\" style=\"border-color: #f1f1f1; \" id=\"ub-content-toggle-panel-block-\">\n\t\t\t<div class=\"wp-block-ub-content-toggle-accordion-title-wrap\" style=\"background-color: #f1f1f1;\" aria-controls=\"ub-content-toggle-panel-0-f41aedf7-c379-48d7-b02c-ce9ad6442be8\" tabindex=\"0\">\n\t\t\t<p class=\"wp-block-ub-content-toggle-accordion-title ub-content-toggle-title-f41aedf7-c379-48d7-b02c-ce9ad6442be8\" style=\"color: #671feb; \"><strong>What is the Separator Block?<\/strong><\/p>\n\t\t\t<div class=\"wp-block-ub-content-toggle-accordion-toggle-wrap right\" style=\"color: #000000;\"><span class=\"wp-block-ub-content-toggle-accordion-state-indicator wp-block-ub-chevron-down\"><\/span><\/div>\n\t\t<\/div>\n\t\t\t<div role=\"region\" aria-expanded=\"false\" class=\"wp-block-ub-content-toggle-accordion-content-wrap ub-hide\" id=\"ub-content-toggle-panel-0-f41aedf7-c379-48d7-b02c-ce9ad6442be8\">\n\n<p>The Separator block is a core WordPress block that lets you add a solid or dotted horizontal line between sections of your content. <\/p>\n\n\n\n<p>It acts as a visual cue to indicate a shift in topics or sections, helping readers easily navigate your content.<\/p>\n\n<\/div>\n\t\t<\/div>\n\n<div class=\"wp-block-ub-content-toggle-accordion\" style=\"border-color: #f1f1f1; \" id=\"ub-content-toggle-panel-block-\">\n\t\t\t<div class=\"wp-block-ub-content-toggle-accordion-title-wrap\" style=\"background-color: #f1f1f1;\" aria-controls=\"ub-content-toggle-panel-1-f41aedf7-c379-48d7-b02c-ce9ad6442be8\" tabindex=\"0\">\n\t\t\t<p class=\"wp-block-ub-content-toggle-accordion-title ub-content-toggle-title-f41aedf7-c379-48d7-b02c-ce9ad6442be8\" style=\"color: #671feb; \"><strong>What are the Key Features of the Separator Block?<\/strong><\/p>\n\t\t\t<div class=\"wp-block-ub-content-toggle-accordion-toggle-wrap right\" style=\"color: #000000;\"><span class=\"wp-block-ub-content-toggle-accordion-state-indicator wp-block-ub-chevron-down\"><\/span><\/div>\n\t\t<\/div>\n\t\t\t<div role=\"region\" aria-expanded=\"false\" class=\"wp-block-ub-content-toggle-accordion-content-wrap ub-hide\" id=\"ub-content-toggle-panel-1-f41aedf7-c379-48d7-b02c-ce9ad6442be8\">\n<ul style=\"padding-left: 1.1em; text-align: left; --ub-list-item-icon-top: 3px;; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); --ub-list-item-fa-li-top: 3px; --ub-list-item-spacing: 15px; \" class=\"wp-block-ub-styled-list ub_styled_list\" id=\"ub_styled_list-c665d22b-73f8-44fe-b11a-9e6f0d7c8d02\"><div class=\"ub-block-list__layout\" style=\"text-align: left; column-count: 1; --ub-list-mobile-column-count: 1; \">\n<li class=\"ub_styled_list_item\" style=\"--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); \" id=\"ub-styled-list-item-fb1edb4b-8913-40ce-8911-7f3edc8cbd6b\">\n\t\t\t<div class=\"ub_list_item_content\">\n\t\t\t\t<span class=\"ub_list_item_icon\">\n\t\t\t\t\t<svg width=\"0.9em\" height=\"0.9em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 512 512\"><path fill=\"#000000\" d=\"M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"><\/path><\/svg>\n\t\t\t\t<\/span>\n\t\t\t\t<span class=\"ub_list_item_text\"><strong>Predefined Styles<\/strong>: Choose between three styles\u2014default, wide line, and dots\u2014to suit your design needs.<\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/li>\n\n<li class=\"ub_styled_list_item\" style=\"--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); \" id=\"ub-styled-list-item-6f5708c2-7eea-4326-9459-9726ab6703cc\">\n\t\t\t<div class=\"ub_list_item_content\">\n\t\t\t\t<span class=\"ub_list_item_icon\">\n\t\t\t\t\t<svg width=\"0.9em\" height=\"0.9em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 512 512\"><path fill=\"#000000\" d=\"M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"><\/path><\/svg>\n\t\t\t\t<\/span>\n\t\t\t\t<span class=\"ub_list_item_text\"><strong>Customizable Width<\/strong>: Adjust the width of the separator to create subtle or bold visual effects.<\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/li>\n\n<li class=\"ub_styled_list_item\" style=\"--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); \" id=\"ub-styled-list-item-a1b8821e-722a-4dcf-9f2f-30f74477a40d\">\n\t\t\t<div class=\"ub_list_item_content\">\n\t\t\t\t<span class=\"ub_list_item_icon\">\n\t\t\t\t\t<svg width=\"0.9em\" height=\"0.9em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 512 512\"><path fill=\"#000000\" d=\"M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"><\/path><\/svg>\n\t\t\t\t<\/span>\n\t\t\t\t<span class=\"ub_list_item_text\"><strong>Color Options<\/strong>: Pick custom colors for the separator line to match your site&#8217;s branding.<\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/li>\n\n<li class=\"ub_styled_list_item\" style=\"--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); \" id=\"ub-styled-list-item-bd691383-1d3c-441d-b390-a1a7f58ca653\">\n\t\t\t<div class=\"ub_list_item_content\">\n\t\t\t\t<span class=\"ub_list_item_icon\">\n\t\t\t\t\t<svg width=\"0.9em\" height=\"0.9em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 512 512\"><path fill=\"#000000\" d=\"M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"><\/path><\/svg>\n\t\t\t\t<\/span>\n\t\t\t\t<span class=\"ub_list_item_text\"><strong>Responsive Design<\/strong>: Works seamlessly across devices to maintain a consistent user experience.<\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/li>\n<\/div><\/ul>\n<\/div>\n\t\t<\/div>\n\n<div class=\"wp-block-ub-content-toggle-accordion\" style=\"border-color: #f1f1f1; \" id=\"ub-content-toggle-panel-block-\">\n\t\t\t<div class=\"wp-block-ub-content-toggle-accordion-title-wrap\" style=\"background-color: #f1f1f1;\" aria-controls=\"ub-content-toggle-panel-2-f41aedf7-c379-48d7-b02c-ce9ad6442be8\" tabindex=\"0\">\n\t\t\t<p class=\"wp-block-ub-content-toggle-accordion-title ub-content-toggle-title-f41aedf7-c379-48d7-b02c-ce9ad6442be8\" style=\"color: #671feb; \"><strong>What are the Toolbar Features of the Separator Block?<\/strong><\/p>\n\t\t\t<div class=\"wp-block-ub-content-toggle-accordion-toggle-wrap right\" style=\"color: #000000;\"><span class=\"wp-block-ub-content-toggle-accordion-state-indicator wp-block-ub-chevron-down\"><\/span><\/div>\n\t\t<\/div>\n\t\t\t<div role=\"region\" aria-expanded=\"false\" class=\"wp-block-ub-content-toggle-accordion-content-wrap ub-hide\" id=\"ub-content-toggle-panel-2-f41aedf7-c379-48d7-b02c-ce9ad6442be8\">\n\n<p>The Separator Block&#8217;s toolbar provides essential tools to fine-tune its appearance:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"888\" height=\"572\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/01\/2025-01-25_19-03-50.png\" alt=\"\" class=\"has-border-color has-main-accent-border-color wp-image-7069\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/01\/2025-01-25_19-03-50.png 888w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/01\/2025-01-25_19-03-50-300x193.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/01\/2025-01-25_19-03-50-768x495.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/01\/2025-01-25_19-03-50-18x12.png 18w\" sizes=\"auto, (max-width: 888px) 100vw, 888px\" \/><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Transform To: <\/strong>You can transform the separator block into the Columns, Divider, Details, and Group. <\/li>\n\n\n\n<li><strong>Drag: <\/strong>You can drag and drop the particular block anywhere in the editor.<\/li>\n\n\n\n<li><strong>Moving Handles: <\/strong>Let you move your block up and down.<\/li>\n\n\n\n<li><strong>Align: <\/strong>Align allows you to set the alignment to the none, left, center, or right of the page for better layout integration.<\/li>\n\n\n\n<li><strong>Options: <\/strong>It holds block options such as the Copy, Duplicate, Add before, Copy Styles, etc.<\/li>\n<\/ol>\n\n\n\n<p><\/p>\n\n<\/div>\n\t\t<\/div>\n<\/div><\/div>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-main-accent-color has-alpha-channel-opacity has-main-accent-background-color has-background\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"4-final-thoughts\">Final Thoughts!<\/h2>\n\n\n\n<p>The Separator block is a straightforward and robust tool to make your content layout appealing. You can experiment with its styles and settings to find what works best for your site\u2019s aesthetic.<\/p>\n\n\n\n<p>I hope the tutorial is easy to follow. If you&#8217;ve faced any issues following the tutorial, let me know in the comment section below. I would love to help you. <\/p>\n\n\n\n<p>Also, share this post on your social media and let others know about it. <\/p>\n\n\n\n<p><strong>Read More!<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/tableberg.com\/how-to-use-the-search-block-in-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Use the Search Block in WordPress (3 Easy Steps)<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/tableberg.com\/how-to-use-the-spacer-block-in-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Use the Spacer Block in WordPress in 2 Easy Steps<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/tableberg.com\/how-to-use-the-cover-block-in-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Use the Cover Block in WordPress (3 Easy Steps)<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/tableberg.com\/how-to-add-buy-on-amazon-button-in-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Add &#8216;Buy On Amazon&#8217; Buttons in WordPress (3 Ways)<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/tableberg.com\/best-product-review-wordpress-plugins\/\" target=\"_blank\" rel=\"noreferrer noopener\">9 Best Product Review Plugins for WordPress<\/a><\/li>\n<\/ul>\n\n\n<div class=\"wp-block-ub-social-share\" id=\"ub-social-share-44aa2631-02ba-4697-bc45-9e64f9ccec4d\">\n\t\t\t<div class=\"social-share-icons align-icons-center orientation-icons-row\"><a aria-label=\"facebook-logo\" target=\"_blank\" rel=\"nofollow\" href=\"https:\/\/www.facebook.com\/sharer\/sharer.php?u=https%3A%2F%2Ftableberg.com%2Fja%2Fhow-to-use-the-separator-block-in-wordpress%2F&amp;title=Separator%20Block%20%26%238211%3B%20How%20to%20Use%20Guide%20%26amp%3B%20Overview\" class=\"ub-social-share-facebook-container\" style=\"border-color: #1877f2; background-color: transparent; box-shadow: none; \">\n\t\t\t\t<span class=\"social-share-icon ub-social-share-facebook\" style=\"width: 30px; height: 30px; \"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"fill:#1877f2\" fill=\"#1877f2\" width=\"20\" height=\"20\" viewbox=\"0 0 264 512\"><path d=\"M76.7 512V283H0v-91h76.7v-71.7C76.7 42.4 124.3 0 193.8 0c33.3 0 61.9 2.5 70.2 3.6V85h-48.2c-37.8 0-45.1 18-45.1 44.3V192H256l-11.7 91h-73.6v229\"><\/path><\/svg><\/span><span style=\"\">share<\/span>\n\t\t\t<\/a><a aria-label=\"twitter-logo\" target=\"_blank\" rel=\"nofollow\" href=\"http:\/\/twitter.com\/intent\/tweet?url=https%3A%2F%2Ftableberg.com%2Fja%2Fhow-to-use-the-separator-block-in-wordpress%2F&amp;text=Separator%20Block%20%26%238211%3B%20How%20to%20Use%20Guide%20%26amp%3B%20Overview\" class=\"ub-social-share-twitter-container\" style=\"border-color: #1d9bf0; background-color: transparent; box-shadow: none; \">\n\t\t\t\t<span class=\"social-share-icon ub-social-share-twitter\" style=\"width: 30px; height: 30px; \"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"color:#1d9BF0\" fill=\"#1d9BF0\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\"><path d=\"M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584l-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z\"><\/path><\/svg><\/span><span style=\"\">tweet<\/span>\n\t\t\t<\/a><a aria-label=\"linkedin-logo\" target=\"_blank\" rel=\"nofollow\" href=\"https:\/\/www.linkedin.com\/sharing\/share-offsite\/?url=https%3A%2F%2Ftableberg.com%2Fja%2Fhow-to-use-the-separator-block-in-wordpress%2F\" class=\"ub-social-share-linkedin-container\" style=\"border-color: #2867b2; background-color: transparent; box-shadow: none; \">\n\t\t\t\t<span class=\"social-share-icon ub-social-share-linkedin\" style=\"width: 30px; height: 30px; \"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"fill:#2867b2\" fill=\"#2867b2\" width=\"20\" height=\"20\" viewbox=\"0 0 448 512\"><path d=\"M100.3 480H7.4V180.9h92.9V480zM53.8 140.1C24.1 140.1 0 115.5 0 85.8 0 56.1 24.1 32 53.8 32c29.7 0 53.8 24.1 53.8 53.8 0 29.7-24.1 54.3-53.8 54.3zM448 480h-92.7V334.4c0-34.7-.7-79.2-48.3-79.2-48.3 0-55.7 37.7-55.7 76.7V480h-92.8V180.9h89.1v40.8h1.3c12.4-23.5 42.7-48.3 87.9-48.3 94 0 111.3 61.9 111.3 142.3V480z\"><\/path><\/svg><\/span><span style=\"\">share<\/span>\n\t\t\t<\/a><\/div>\n\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Adding a visual break between two content sections is imminent to improve the readability of a website and its design. The Separator Block in WordPress is a simple block that lets you achieve this. It is also a great way to divide content for better content structure or add a stylistic element to your page. It is a go-to tool for all types of users to visually display their content in a more organized way. How to Use the Separator Block in WordPress? Like every other core WordPress block, the Separator Block is easy to use. Follow the tutorial and master using this block. Step 1: Insert the Separator Block [&hellip;]<\/p>\n","protected":false},"author":10,"featured_media":7073,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[7],"tags":[],"class_list":["post-7058","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to"],"featured_image_src":"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/01\/How-to-Use-the-Spacer-Block-in-WordPress-1140-x-450-px-1-1.png","author_info":{"display_name":"Ankur Raj Bongshi","author_link":"https:\/\/tableberg.com\/ja\/author\/rajankur003\/"},"_links":{"self":[{"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/posts\/7058","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/comments?post=7058"}],"version-history":[{"count":5,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/posts\/7058\/revisions"}],"predecessor-version":[{"id":7072,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/posts\/7058\/revisions\/7072"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/media\/7073"}],"wp:attachment":[{"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/media?parent=7058"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/categories?post=7058"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/tags?post=7058"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}