{"id":2680,"date":"2019-03-31T07:19:06","date_gmt":"2019-03-31T07:19:06","guid":{"rendered":"https:\/\/wpstackable.com\/?p=2680"},"modified":"2021-06-03T20:56:18","modified_gmt":"2021-06-04T01:56:18","slug":"separators-are-here","status":"publish","type":"post","link":"https:\/\/wpstackable.com\/blog\/separators-are-here\/","title":{"rendered":"Separators Are Here"},"content":{"rendered":"\n<p data-block-type=\"core\">We&#8217;re giving you additional thrilling design capabilities with <a href=\"https:\/\/wpstackable.com\/separator-block\/\">Separator Blocks<\/a>. Choose from 10 different waves, curves and slant designs and make sure your site visitors enjoy their scrolling experience.<\/p>\n\n\n\n<!--more-->\n\n\n\n<div class=\"wp-block-ugb-separator alignfull ugb-separator ugb-96ab182 ugb-separator--v2 ugb-separator--design-wave-3\" aria-hidden=\"true\"><style>.ugb-96ab182.ugb-separator{margin-top:-1px !important;margin-bottom:-1px !important}.ugb-96ab182 .ugb-separator__bottom-pad{background:#ffffff}.ugb-96ab182 .ugb-separator__shadow,.ugb-96ab182 .ugb-separator__layer-1{fill:#ffffff;transform:scaleX(1.2)}@media screen and (min-width:768px){.ugb-96ab182 .ugb-separator__svg-wrapper{height:200px !important}}@media screen and (max-width:1025px){.ugb-96ab182.ugb-separator{margin-top:-1px !important;margin-bottom:-1px !important}}@media screen and (max-width:768px){.ugb-96ab182.ugb-separator{margin-top:-1px !important;margin-bottom:-1px !important}}<\/style><div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><div class=\"ugb-separator__top-pad\"><\/div><div class=\"ugb-separator__svg-wrapper\"><div class=\"ugb-separator__svg-inner ugb-separator-wrapper\"><svg viewbox=\"0 0 1600 200\" filter=\"url(#wave-3-shadow_svg__a)\" enablebackground=\"new 0 0 1600 200\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"ugb-separator__shadow\" preserveaspectratio=\"none\" aria-hidden=\"true\"><filter id=\"wave-3-shadow_svg__a\"><feGaussianBlur in=\"SourceAlpha\" stddeviation=\"4\"><\/feGaussianBlur><feComponentTransfer><feFuncA type=\"linear\" slope=\"0.4\"><\/feFuncA><\/feComponentTransfer><feMerge><feMergeNode><\/feMergeNode><feMergeNode in=\"SourceGraphic\"><\/feMergeNode><\/feMerge><\/filter><path class=\"wave-3-shadow_svg__st2\" d=\"M1413.6 161.4c-157.9 0-338.2-37.7-495.1-67.4-215.6-40.8-328.1-44.6-418.2-41.1S317 73.4 188.5 102-10 136.2-10 136.2v10s69.9-5.7 198.5-34.3 221.7-45.7 311.8-49.1 202.6.3 418.2 41.1c156.9 29.7 337.2 67.4 495.1 67.4 127.6 0 196.4-19.4 196.4-19.4v-10s-68.8 19.5-196.4 19.5z\"><\/path><\/svg><svg viewbox=\"0 0 1600 200\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"ugb-separator__layer-1\" preserveaspectratio=\"none\" aria-hidden=\"true\"><path class=\"wave-3_svg__st2\" d=\"M1413.6 161.4c-157.9 0-338.2-37.7-495.1-67.4-215.6-40.8-328.1-44.6-418.2-41.1S317 73.4 188.4 102-10 136.2-10 136.2v74.2h1620v-68.5s-68.8 19.5-196.4 19.5z\"><\/path><\/svg><\/div><\/div><div class=\"ugb-separator__bottom-pad\"><\/div><\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-ugb-spacer ugb-spacer ugb-bd88437 ugb-spacer--v2 ugb-main-block\"><style>@media screen and (min-width:768px){.ugb-bd88437.ugb-spacer{height:100px}}<\/style><div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><div class=\"ugb-spacer--inner\"><\/div><\/div><\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" data-block-type=\"core\"><div>Separator Block<\/div><\/h2>\n\n\n\n<p data-block-type=\"core\">Introduced in version 1.15.0, the separator&#8217;s main purpose is to provide a decorative transition between the different sections of your site. If you have two different areas with different backgrounds,  something fancier than a straight horizontal line is better.<\/p>\n\n\n\n<div class=\"wp-block-image\" data-block-type=\"core\"><figure class=\"aligncenter is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2019\/03\/Screen-Shot-2019-03-28-at-2.02.12-AM.jpg\" alt=\"\" class=\"wp-image-2685\" width=\"1668\" height=\"1420\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2019\/03\/Screen-Shot-2019-03-28-at-2.02.12-AM.jpg 1668w, https:\/\/wpstackable.com\/wp-content\/uploads\/2019\/03\/Screen-Shot-2019-03-28-at-2.02.12-AM-300x255.jpg 300w, https:\/\/wpstackable.com\/wp-content\/uploads\/2019\/03\/Screen-Shot-2019-03-28-at-2.02.12-AM-1024x872.jpg 1024w, https:\/\/wpstackable.com\/wp-content\/uploads\/2019\/03\/Screen-Shot-2019-03-28-at-2.02.12-AM-768x654.jpg 768w\" sizes=\"auto, (max-width: 1668px) 100vw, 1668px\" \/><figcaption><br><\/figcaption><\/figure><\/div>\n\n\n\n<p data-block-type=\"core\">You can stretch your separators horizontally or vertically to mold it into the shape that you need. <\/p>\n\n\n\n<p data-block-type=\"core\">Adding <a href=\"https:\/\/wpstackable.com\/separator-block\/\">Separator Blocks<\/a> between Container blocks work great since you can adjust the top and bottom margins of the separator to hide your image or video background behind the decorative separator.<\/p>\n\n\n\n<div class=\"wp-block-ugb-spacer ugb-spacer ugb-cd25b7e ugb-spacer--v2 ugb-main-block\"><div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><div class=\"ugb-spacer--inner\"><\/div><\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-ugb-spacer ugb-spacer ugb-1943167 ugb-spacer--v2 ugb-main-block\"><style>@media screen and (min-width:768px){.ugb-1943167.ugb-spacer{height:100px}}<\/style><div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><div class=\"ugb-spacer--inner\"><\/div><\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-ugb-separator alignfull ugb-separator ugb-e7a7367 ugb-separator--v2 ugb-separator--design-wave-1\" aria-hidden=\"true\"><style>.ugb-e7a7367.ugb-separator{margin-top:-1px !important;margin-bottom:-1px !important}.ugb-e7a7367 .ugb-separator__bottom-pad{background:#ffffff}.ugb-e7a7367 .ugb-separator__shadow,.ugb-e7a7367 .ugb-separator__layer-1{fill:#ffffff;transform:scaleX(1)}.ugb-e7a7367 .ugb-separator__layer-2{transform:scaleX(1) scaleY(1);opacity:0.5}.ugb-e7a7367 .ugb-separator__layer-3{transform:scaleX(1) scaleY(1);opacity:0.5}@media screen and (min-width:768px){.ugb-e7a7367 .ugb-separator__svg-wrapper{height:142px !important}}@media screen and (max-width:1025px){.ugb-e7a7367.ugb-separator{margin-top:-1px !important;margin-bottom:-1px !important}}@media screen and (max-width:768px){.ugb-e7a7367.ugb-separator{margin-top:-1px !important;margin-bottom:-1px !important}}<\/style><div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><div class=\"ugb-separator__top-pad\"><\/div><div class=\"ugb-separator__svg-wrapper\"><div class=\"ugb-separator__svg-inner ugb-separator-wrapper\"><svg viewbox=\"0 0 1600 200\" filter=\"url(#wave-1-shadow_svg__a)\" enablebackground=\"new 0 0 1600 200\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"ugb-separator__shadow\" preserveaspectratio=\"none\" aria-hidden=\"true\"><filter id=\"wave-1-shadow_svg__a\"><feGaussianBlur in=\"SourceAlpha\" stddeviation=\"4\"><\/feGaussianBlur><feComponentTransfer><feFuncA type=\"linear\" slope=\"0.4\"><\/feFuncA><\/feComponentTransfer><feMerge><feMergeNode><\/feMergeNode><feMergeNode in=\"SourceGraphic\"><\/feMergeNode><\/feMerge><\/filter><path class=\"wave-1-shadow_svg__st2\" d=\"M1341.4 48.9c-182.4 0-254.2 80.4-429.4 80.4-117.8 0-209.7-67.5-393.5-67.5-142.2 0-212.6 38.8-324.6 38.8S-10 64.7-10 64.7v10s91.9 35.9 203.9 35.9 182.4-38.8 324.6-38.8c183.8 0 275.7 67.5 393.5 67.5 175.2 0 247-80.4 429.4-80.4 87.6 0 158 12.9 268.6 53.1v-10c-110.6-40.2-181-53.1-268.6-53.1z\"><\/path><\/svg><svg viewbox=\"0 0 1600 200\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"ugb-separator__layer-1\" preserveaspectratio=\"none\" aria-hidden=\"true\"><path class=\"wave-1_svg__st2\" d=\"M1341.4 48.9c-182.4 0-254.2 80.4-429.4 80.4-117.8 0-209.7-67.5-393.5-67.5-142.2 0-212.6 38.8-324.6 38.8S-10 64.7-10 64.7V210h1620V102c-110.6-40.2-181-53.1-268.6-53.1z\"><\/path><\/svg><svg viewbox=\"0 0 1600 200\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" preserveaspectratio=\"none\" class=\"ugb-separator__layer-2\" aria-hidden=\"true\"><path d=\"M1361.5 65.9c-63.2 0-93.4-27.3-186.7-27.3-83.3 0-127.8 44.5-238.4 44.5-116.3 0-127.8-51.7-234.1-51.7S542.9 84.6 471.1 84.6c-129.3 0-178.1-79-337.5-83.3C60.2-.7-10 14.2-10 14.2l-.9 185.8h1620l.9-162.8c-57.5 0-137.9 28.7-248.5 28.7z\"><\/path><\/svg><svg viewbox=\"0 0 1600 200\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" preserveaspectratio=\"none\" class=\"ugb-separator__layer-3\" aria-hidden=\"true\"><path d=\"M1476.4 15.9c-146.5 0-146.5 64.6-285.8 64.6-119.2 0-106.3-53.1-271.4-53.1-93.4 0-125 41.6-231.3 41.6-93.3 0-114.9-43.1-248.4-43.1S183.8 129.3 96.2 129.3H-10V206h1620V37.4s-43.1-21.5-133.6-21.5z\"><\/path><\/svg><\/div><\/div><div class=\"ugb-separator__bottom-pad\"><\/div><\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-ugb-spacer ugb-spacer ugb-ec6b2fa ugb-spacer--v2 ugb-main-block\"><style>@media screen and (min-width:768px){.ugb-ec6b2fa.ugb-spacer{height:100px}}<\/style><div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><div class=\"ugb-spacer--inner\"><\/div><\/div><\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" data-block-type=\"core\">Premium Layer Effects<\/h2>\n\n\n\n<p data-block-type=\"core\">All separator designs are available in Stackable free. For our Premium users, we give you 2 additional layers for each separator design.<\/p>\n\n\n\n<p data-block-type=\"core\">As with the main separator design, you can colorize these new layers, stretch them and fade them out. What you can do with these new additional layers are pretty amazing.<\/p>\n\n\n\n<div class=\"wp-block-ugb-spacer ugb-spacer ugb-d33a144 ugb-spacer--v2 ugb-main-block\" id=\"\"><style>.ugb-d33a144.ugb-spacer{height:100px}<\/style><div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><div class=\"ugb-spacer--inner\"><\/div><\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-ugb-separator alignfull ugb-separator ugb-9ecaf8b ugb-separator--v2 ugb-separator--design-rounded-1 ugb-separator--flip-vertical\" aria-hidden=\"true\" id=\"\"><style>.ugb-9ecaf8b.ugb-separator{margin-top:-1px !important;margin-bottom:-1px !important}.ugb-9ecaf8b .ugb-separator__bottom-pad{background:#ffffff}.ugb-9ecaf8b .ugb-separator__svg-wrapper{height:141px !important}.ugb-9ecaf8b .ugb-separator__shadow,.ugb-9ecaf8b .ugb-separator__layer-1{fill:#ffffff;transform:scaleX(1.4)}.ugb-9ecaf8b .ugb-separator__layer-2{transform:scaleX(1) scaleY(1);fill:#0693e3;opacity:0.5}.ugb-9ecaf8b .ugb-separator__layer-3{transform:scaleX(1) scaleY(1);fill:#fff713;opacity:0.5}@media screen and (max-width:1025px){.ugb-9ecaf8b.ugb-separator{margin-top:-1px !important;margin-bottom:-1px !important}}@media screen and (max-width:768px){.ugb-9ecaf8b.ugb-separator{margin-top:-1px !important;margin-bottom:-1px !important}}<\/style><div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><div class=\"ugb-separator__top-pad\"><\/div><div class=\"ugb-separator__svg-wrapper\"><div class=\"ugb-separator__svg-inner ugb-separator-wrapper\"><svg viewbox=\"0 0 1600 200\" filter=\"url(#rounded-1-shadow_svg__a)\" enablebackground=\"new 0 0 1600 200\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"ugb-separator__shadow\" preserveaspectratio=\"none\" aria-hidden=\"true\"><filter id=\"rounded-1-shadow_svg__a\"><feGaussianBlur in=\"SourceAlpha\" stddeviation=\"4\"><\/feGaussianBlur><feComponentTransfer><feFuncA type=\"linear\" slope=\"0.4\"><\/feFuncA><\/feComponentTransfer><feMerge><feMergeNode><\/feMergeNode><feMergeNode in=\"SourceGraphic\"><\/feMergeNode><\/feMerge><\/filter><path class=\"rounded-1-shadow_svg__st1\" d=\"M1491.2 20.7c48.1-3.8 90.6 32.5 94.4 80.6l8.5 107.7h8.8l-9.3-117.7c-3.8-48.1-46.3-84.4-94.4-80.6L-8 131.2v9.4L1491.2 20.7z\"><\/path><\/svg><svg viewbox=\"0 0 1600 200\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"ugb-separator__layer-1\" preserveaspectratio=\"none\" aria-hidden=\"true\"><path class=\"rounded-1_svg__st1\" d=\"M1602.9 209l-9.3-117.7c-3.8-48.1-46.3-84.4-94.4-80.6L-8 131.2V209h1610.9z\"><\/path><\/svg><svg viewbox=\"0 0 1600 200\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" preserveaspectratio=\"none\" class=\"ugb-separator__layer-2\" aria-hidden=\"true\"><path class=\"rounded-1-layer-2_svg__st0\" d=\"M-8 209h1302.4l-10.1-128.4c-3.8-48.1-46.3-84.4-94.4-80.6L-8 95.8V209z\"><\/path><\/svg><svg viewbox=\"0 0 1600 200\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" preserveaspectratio=\"none\" class=\"ugb-separator__layer-3\" aria-hidden=\"true\"><path class=\"rounded-1-layer-3_svg__st0\" d=\"M899.5 80.6C895.7 32.5 853.2-3.8 805.1 0L-8 65v144h917.6L899.5 80.6z\"><\/path><\/svg><\/div><\/div><div class=\"ugb-separator__bottom-pad\"><\/div><\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-ugb-spacer ugb-spacer ugb-b6a186f ugb-spacer--v2 ugb-main-block\" id=\"\"><style>.ugb-b6a186f.ugb-spacer{height:100px}<\/style><div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><div class=\"ugb-spacer--inner\"><\/div><\/div><\/div><\/div>\n\n\n\n<div class=\"aligncenter wp-block-ugb-cta ugb-cta ugb-de2a73a ugb-cta ugb-cta--v2 ugb-main-block\" data-block-type=\"core\" data-block-type=\"core\"><style>.ugb-de2a73a .ugb-cta__title,.ugb-de2a73a .ugb-cta__description,.ugb-de2a73a .ugb-button-container{text-align:left !important}.ugb-de2a73a .ugb-cta__item{background-image:url(https:\/\/wpstackable.com\/wp-content\/uploads\/2021\/04\/Learn-CTA.png)}.ugb-de2a73a .ugb-cta__item:before{opacity:0.5}.ugb-de2a73a .ugb-cta__title{font-size:48px !important;font-weight:500 !important;color:#ffffff}.ugb-de2a73a .ugb-cta__description{margin-bottom:32px !important;color:#ffffff}.ugb-de2a73a .ugb-button .ugb-button--inner{font-family:\"DM Sans\",Sans-serif !important;font-weight:400 !important}.ugb-de2a73a .ugb-button{background-color:#ffffff;border-radius:0px !important}.ugb-de2a73a .ugb-button .ugb-button--inner,.ugb-de2a73a .ugb-button svg:not(.ugb-custom-icon){color:var(--stk-global-color-43441,#111111) !important}.ugb-de2a73a .ugb-button:before{border-radius:0px !important}.ugb-de2a73a .ugb-inner-block{text-align:left}<\/style><div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><div class=\"ugb-cta__item ugb--has-background-overlay\"><h3 class=\"ugb-cta__title\">Want to learn more <br>about Stackable?<\/h3><p class=\"ugb-cta__description\">Your very own Learning Hub for all things WordPress and Stackable. Find the right resources to help get you started as you begin building your online presence with Stackable.<\/p><div class=\"ugb-button-container\"><a class=\"ugb-button ugb-button--size-normal ugb--shadow-3 ugb-button--has-icon ugb-button--icon-position-right\" href=\"\" rel=\"\" title=\"\"><div class=\"ugb-icon-inner-svg\"><svg data-prefix=\"fas\" data-icon=\"arrow-right\" class=\"svg-inline--fa fa-arrow-right fa-w-14\" role=\"img\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 448 512\"><path fill=\"currentColor\" d=\"M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z\"><\/path><\/svg><\/div><span class=\"ugb-button--inner\">Go to Stackable Learn<\/span><\/a><\/div><\/div><\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;re giving you additional thrilling design capabilities with Separator Blocks. Choose from 10 different waves, curves and slant designs and make sure your site visitors enjoy their scrolling experience.<\/p>\n","protected":false},"author":1,"featured_media":2681,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"_lmt_disableupdate":"","_lmt_disable":"","footnotes":""},"categories":[5,3],"tags":[],"class_list":{"0":"post-2680","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"hentry","7":"category-block-features","8":"category-updates"},"featured_image_urls_v2":{"full":["https:\/\/wpstackable.com\/wp-content\/uploads\/2019\/03\/190327_Stackable_Feature-Image-Header_Separators-are-here_V01-01.jpg",1200,624,false]},"post_excerpt_stackable_v2":"<p>We&#8217;re giving you additional thrilling design capabilities with Separator Blocks. Choose from 10 different waves, curves and slant designs and make sure your site visitors enjoy their scrolling experience. Separator Block Introduced in version 1.15.0, the separator&#8217;s main purpose is to provide a decorative transition between the different sections of your site. If you have two different areas with different backgrounds, something fancier than a straight horizontal line is better. You can stretch your separators horizontally or vertically to mold it into the shape that you need. Adding Separator Blocks between Container blocks work great since you can adjust the&hellip;<\/p>\n","category_list_v2":"<a href=\"https:\/\/wpstackable.com\/blog\/category\/block-features\/\" rel=\"category tag\">Block Features<\/a>, <a href=\"https:\/\/wpstackable.com\/blog\/category\/updates\/\" rel=\"category tag\">Updates<\/a>","author_info_v2":{"name":"Benjamin Intal","url":"https:\/\/wpstackable.com\/blog\/author\/gambit\/"},"comments_num_v2":"0 comments","acf":[],"modified_by":"Liana","_links":{"self":[{"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/posts\/2680","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/comments?post=2680"}],"version-history":[{"count":0,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/posts\/2680\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/media\/2681"}],"wp:attachment":[{"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/media?parent=2680"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/categories?post=2680"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/tags?post=2680"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}