{"id":4607,"date":"2026-10-28T10:25:43","date_gmt":"2026-10-28T10:25:43","guid":{"rendered":"https:\/\/shapekode.com\/product\/shapeblock\/docs\/advanced-tab\/"},"modified":"2026-10-28T10:25:43","modified_gmt":"2026-10-28T10:25:43","password":"","slug":"advanced-tab","status":"publish","type":"docs","link":"https:\/\/shapekode.com\/product\/shapeblock\/docs\/advanced-tab\/","title":{"rendered":"Advanced Tab: Spacing, Position and Background"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Every ShapeBlock block, free and Pro, has an Advanced tab as the last tab in its sidebar. It holds the same three panels everywhere: <strong>Spacing<\/strong>, <strong>Position<\/strong>, and <strong>Background<\/strong>. Once you know them on one block, you know them on all of them.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The Menu and Mega Menu blocks are the exception: they do not have this tab.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Open the Advanced Tab<\/h2>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li>Select a ShapeBlock block in the editor.<\/li>\n\n\n\n<li>In the right-hand sidebar, click <strong>Advanced<\/strong>.<\/li>\n\n\n\n<li>Click a panel title to open it.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"313\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-advanced-tab-1.webp\" alt=\"Advanced tab of a Button block with the Spacing, Position, and Background panels\" class=\"wp-image-4579\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-advanced-tab-1.webp 280w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-advanced-tab-1-268x300.webp 268w\" sizes=\"auto, (max-width: 280px) 100vw, 280px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">With ShapeBlock Pro, more panels can follow these three, such as Display Conditions and Motion Effects. They have their own docs.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Spacing<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Padding:<\/strong> The space inside the block, between its edge and its content. Set top, right, bottom, and left together, or click the link icon to set each side.<\/li>\n\n\n\n<li><strong>Margin:<\/strong> The space outside the block, between it and the blocks around it.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Both have device icons: desktop, tablet, and phone. The tablet value applies at 1024px wide and below, the phone value at 767px and below. Leave a device empty to keep the value of the larger screen.<\/p>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#f3edec;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px\"><strong>Note:<\/strong> The Row and Column also have Padding and Margin in their Style tab. If you set both, the Advanced tab value is the one used.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"659\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-advanced-tab-2.webp\" alt=\"Spacing panel with Padding and Margin and the device icons\" class=\"wp-image-4580\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-advanced-tab-2.webp 280w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-advanced-tab-2-127x300.webp 127w\" sizes=\"auto, (max-width: 280px) 100vw, 280px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Position<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Position takes a block out of the normal flow of the page and places it where you want: over an image, in a corner of a Column, or fixed on the screen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Position<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Default:<\/strong> The block sits in the page like any other block. The other Position options are hidden.<\/li>\n\n\n\n<li><strong>Absolute:<\/strong> The block is placed inside the Column that holds it. The blocks around it close up the space it leaves.<\/li>\n\n\n\n<li><strong>Fixed:<\/strong> The block is placed in the browser window and stays there while the visitor scrolls, for example a &#8220;Chat with us&#8221; button in the bottom corner.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Horizontal Align and Vertical Align<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">With Absolute or Fixed, two rows of buttons appear. They pick the edge the block sticks to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Horizontal Align:<\/strong> <strong>Left<\/strong> or <strong>Right<\/strong> puts the block against that edge. <strong>Center<\/strong> centers it from left to right.<\/li>\n\n\n\n<li><strong>Vertical Align:<\/strong> <strong>Top<\/strong> or <strong>Bottom<\/strong> puts the block against that edge. <strong>Middle<\/strong> centers it from top to bottom.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">The chosen button is filled in. Click it again to clear it. With no alignment chosen, the block stays where it would have been, only lifted out of the flow.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Offset &#038; Width<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">This group has one set of device icons for all its lines, so you can give desktop, tablet, and phone their own values. Each line has a slider and a number field with a unit: <strong>px<\/strong>, <strong>%<\/strong>, <strong>vw<\/strong>, or <strong>vh<\/strong>.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Top, Right, Bottom, Left:<\/strong> Move the block away from that edge. Negative values are allowed and push the block past the edge, for example a badge that hangs over the corner of a card.<\/li>\n\n\n\n<li><strong>Width:<\/strong> Set the width of the block. Leave it empty to keep its natural width.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">An empty field leaves that side unset. Horizontal and Vertical Align are the same on every device; only the offsets and width change per device.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Z-Index<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Set which block is in front when blocks overlap. A higher number sits on top. The Row has no Z-Index here: it keeps its own in Layout &gt; Position &amp; Z-Index, next to its Sticky setting.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"1015\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-advanced-tab-3.webp\" alt=\"Position panel set to Absolute, aligned right and top, with Top 30px and Right 50px\" class=\"wp-image-4581\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-advanced-tab-3.webp 280w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-advanced-tab-3-83x300.webp 83w\" sizes=\"auto, (max-width: 280px) 100vw, 280px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Example: a Button in the Top-Right Corner of a Column<\/h3>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li>Select the Button inside the Column.<\/li>\n\n\n\n<li>In Advanced &gt; Position, set <strong>Position<\/strong> to <strong>Absolute<\/strong>.<\/li>\n\n\n\n<li>Click <strong>Right<\/strong> under Horizontal Align and <strong>Top<\/strong> under Vertical Align.<\/li>\n\n\n\n<li>Type <strong>50<\/strong> in the Right field and <strong>30<\/strong> in the Top field, with the unit px.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">The button now sits 50px in from the right edge of the Column and 30px down from its top. The Column padding does not count: the offsets are measured from the Column edge itself. Without an offset, Right alone would put the button flush against the edge.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1132\" height=\"316\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-advanced-tab-4.webp\" alt=\"The published result: the Book a table button 30px from the top and 50px from the right edge of the Column\" class=\"wp-image-4582\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-advanced-tab-4.webp 1132w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-advanced-tab-4-600x167.webp 600w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-advanced-tab-4-300x84.webp 300w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-advanced-tab-4-1024x286.webp 1024w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-advanced-tab-4-768x214.webp 768w\" sizes=\"auto, (max-width: 1132px) 100vw, 1132px\" \/><\/figure>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#f3edec;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px\"><strong>Note:<\/strong> The editor wraps every block in extra markup, so a positioned block can sit a few pixels differently on the editing canvas. Use <strong>Preview<\/strong> to check the exact spot, and check the phone view: a block placed over other content can cover text on a narrow screen. Phone values in Offset &amp; Width fix that.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Background<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Set a background color, a gradient, or both, behind the whole block. A gradient is painted over the color, so a gradient with transparent parts lets the color show through.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"389\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-advanced-tab-5.webp\" alt=\"Background panel in the Advanced tab\" class=\"wp-image-4583\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-advanced-tab-5.webp 280w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-advanced-tab-5-216x300.webp 216w\" sizes=\"auto, (max-width: 280px) 100vw, 280px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">For background images, use the Background panel in the Style tab of the <a href=\"https:\/\/shapekode.com\/product\/shapeblock\/docs\/row\/\">Row<\/a> or <a href=\"https:\/\/shapekode.com\/product\/shapeblock\/docs\/column\/\">Column<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Every ShapeBlock block, free and Pro, has an Advanced tab as the last tab in its sidebar. It holds the same three panels everywhere: Spacing, Position, and Background. Once you know them on one block, you know them on all of them. The Menu and Mega Menu blocks are the exception: they do not have [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[15],"doc_tag":[],"class_list":["post-4607","docs","type-docs","status-publish","hentry","doc_category-layout-docs"],"year_month":"2026-11","word_count":745,"total_views":"8","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"Sojib","author_nicename":"shapekode-admin","author_url":"https:\/\/shapekode.com\/product\/shapeblock\/author\/shapekode-admin\/"},"doc_category_info":[{"term_name":"Layout Docs","term_url":"https:\/\/shapekode.com\/product\/shapeblock\/docs-category\/layout-docs\/"}],"doc_tag_info":[],"_links":{"self":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/4607","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/comments?post=4607"}],"version-history":[{"count":0,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/4607\/revisions"}],"wp:attachment":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/media?parent=4607"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/doc_category?post=4607"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/doc_tag?post=4607"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}