{"id":47755,"date":"2022-03-01T09:54:32","date_gmt":"2022-03-01T14:54:32","guid":{"rendered":"https:\/\/www.boldgrid.com\/support\/?p=47755"},"modified":"2022-03-02T09:56:33","modified_gmt":"2022-03-02T14:56:33","slug":"shape-dividers","status":"publish","type":"post","link":"https:\/\/www.boldgrid.com\/support\/page-builder\/shape-dividers\/","title":{"rendered":"Working with Shape Dividers"},"content":{"rendered":"\n

The Post and Page Builder<\/a> includes Shape Dividers. Using design elements between sections helps users find the information they need easier.<\/p>\n

Each section, or BoldGrid Block, can have a design added to the top and\/or bottom. The color from the adjacent section is used in for blending in the divider, like shown below. The shapes use grays because the sections have a white background.<\/p>\n

Shape Divider Designs<\/h2>\n
There are over 20 unique styles to choose from. Each one can be further modified with width and height sliders to perfect the design.<\/p>\n
$\"Section$ <\/a><\/p>\n

How to Add Shape Dividers in WordPress<\/h2>\n
Please keep in mind that a design cannot<\/strong> be used between two image backgrounds – one background must be a solid color. Add the shape divider to the section with the background image to achieve the desired effect.<\/p>\n
\n
Click anywhere in the section where you want to add a Shape Divider<\/li>\n
In the DropTab, click Shape Dividers
\n $\"Shape$ <\/a><\/li>\n
At the top of the Section Dividers panel, click on Top or Bottom to choose where the shape will go
\n $\"Shape$ <\/a><\/li>\n
Choose your desired Shape from the list<\/li>\n
If you notice a gap between the section background and the shape, use the Flip Horizontally<\/strong> option
\n $\"Flip$ <\/a><\/li>\n
Use the Divider Width<\/strong> and Divider Height<\/strong> sliders to finalize the design<\/li>\n<\/ul>\n
Troubleshooting<\/h2>\n
I changed background colors but the shape divider didn’t update<\/h3>\n
If you change the background color of a section next to a Shape Divider, you will have to re-create the Shape Divider to pull the new color. In this example, we changed the orange background to blue but the swirls are still orange.<\/p>\n
$\"Changed$ <\/a><\/p>\n
\n
Click in the section with the Shape Divider<\/li>\n
In the DropTab, click Shape Dividers<\/li>\n
Choose the same design again and the color will update<\/li>\n<\/ul>\n
Click the image below to load a video to watch how it is done:<\/p>\n
$\"Recreate$ <\/a><\/p>\n
<\/p>\n<\/body><\/html>\n","protected":false},"excerpt":{"rendered":"
The Post and Page Builder includes Shape Dividers. Using design elements between sections helps users find the information they need easier. Each section, or BoldGrid Block, can have a design added to the top and\/or bottom. The color from the adjacent section is used in for blending in the divider, like shown below. The shapes […]<\/p>\n","protected":false},"author":215,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"bgseo_title":"","bgseo_description":"","bgseo_robots_index":"index","bgseo_robots_follow":"follow","footnotes":""},"categories":[148],"tags":[],"class_list":["post-47755","post","type-post","status-publish","format-standard","hentry","category-page-builder"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/47755","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/users\/215"}],"replies":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/comments?post=47755"}],"version-history":[{"count":14,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/47755\/revisions"}],"predecessor-version":[{"id":48010,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/47755\/revisions\/48010"}],"wp:attachment":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/media?parent=47755"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/categories?post=47755"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/tags?post=47755"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

Shape Divider Designs<\/h2>\nThere are over 20 unique styles to choose from. Each one can be further modified with width and height sliders to perfect the design.<\/p>\n<\/a><\/p>\n

Troubleshooting<\/h2>\n

Shape Divider Designs<\/h2>\n
There are over 20 unique styles to choose from. Each one can be further modified with width and height sliders to perfect the design.<\/p>\n
$\"Section$ <\/a><\/p>\n