{"id":2030,"date":"2026-10-14T04:22:21","date_gmt":"2026-10-14T04:22:21","guid":{"rendered":"https:\/\/shapekode.com\/product\/shapeblock\/?post_type=docs&#038;p=2030"},"modified":"2026-10-18T08:30:13","modified_gmt":"2026-10-18T08:30:13","password":"","slug":"row","status":"publish","type":"docs","link":"https:\/\/shapekode.com\/product\/shapeblock\/docs\/row\/","title":{"rendered":"Row"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">The ShapeBlock Row Block helps you create flexible, multi-column layouts in the WordPress Gutenberg editor. You can add columns, choose from predefined column layouts, control content width, adjust spacing, customize backgrounds and borders, and manage responsive behavior for desktop, tablet, and mobile devices.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Use the Row Block to build website sections such as hero areas, feature sections, service layouts, content grids, and other multi-column designs.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Use the Row Block<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Follow these steps to add and configure the Row Block in the Gutenberg editor.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Add the Row Block<\/h3>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li>Open a page or post in the WordPress Gutenberg editor.<\/li>\n\n\n\n<li>Click the <strong>+ (Add Block)<\/strong> button.<\/li>\n\n\n\n<li>Search for <strong>Row<\/strong>.<\/li>\n\n\n\n<li>Select the Row Block from ShapeBlock to insert it into your page.<\/li>\n\n\n\n<li>Choose a predefined column layout from the layout picker.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1587\" height=\"625\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image.png\" alt=\"\" class=\"wp-image-2109\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image.png 1587w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-300x118.png 300w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-767x302.png 767w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-1024x403.png 1024w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-1536x605.png 1536w\" sizes=\"auto, (max-width: 1587px) 100vw, 1587px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Choose a Column Layout<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">When you add a new Row Block, the layout picker allows you to select a predefined column structure.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Available layouts include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>1 Column:<\/strong> A single full-width column.<\/li>\n\n\n\n<li><strong>50 \/ 50:<\/strong> Two equal-width columns.<\/li>\n\n\n\n<li><strong>33 \/ 33 \/ 33:<\/strong> Three equal-width columns.<\/li>\n\n\n\n<li><strong>25 \/ 25 \/ 25 \/ 25:<\/strong> Four equal-width columns.<\/li>\n\n\n\n<li><strong>30 \/ 70:<\/strong> Two columns with different widths.<\/li>\n\n\n\n<li><strong>70 \/ 30:<\/strong> Two columns with different widths.<\/li>\n\n\n\n<li><strong>25 \/ 75:<\/strong> A narrow column followed by a wider column.<\/li>\n\n\n\n<li><strong>75 \/ 25:<\/strong> A wider column followed by a narrow column.<\/li>\n\n\n\n<li><strong>20 \/ 80:<\/strong> A narrow first column and a wider second column.<\/li>\n\n\n\n<li><strong>80 \/ 20:<\/strong> A wider first column and a narrow second column.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Select the layout that best matches your design. You can also change the layout later from the <strong>Layout \u2192 Container<\/strong> settings.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1882\" height=\"748\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-1.png\" alt=\"\" class=\"wp-image-2111\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-1.png 1882w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-1-300x119.png 300w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-1-767x305.png 767w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-1-1024x407.png 1024w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-1-1536x610.png 1536w\" sizes=\"auto, (max-width: 1882px) 100vw, 1882px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Add and Manage Columns<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The Row Block includes toolbar controls for managing its columns.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Add Column:<\/strong> Adds another column to the row.<\/li>\n\n\n\n<li><strong>Remove Column:<\/strong> Removes the last column from the row. This control is disabled when only one column remains.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">You can insert supported ShapeBlock Column blocks inside the Row Block and configure their content separately.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 4: Configure the Row Block<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Select the Row Block and open its settings in the right-hand sidebar. The available tabs are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Settings:<\/strong> Configure the HTML tag, custom CSS class, sticky behavior, and responsive visibility.<\/li>\n\n\n\n<li><strong>Layout:<\/strong> Configure column presets, content width, responsive columns, Flexbox alignment, positioning, and other layout options.<\/li>\n\n\n\n<li><strong>Style:<\/strong> Customize spacing, background, border, border radius, and box shadow.<\/li>\n\n\n\n<li><strong>Advanced:<\/strong> Configure additional spacing and background settings for the block.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Settings Tab<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Settings tab contains general HTML settings, sticky behavior, and responsive visibility options.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. General<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">HTML Tag<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Choose the HTML element used to render the Row Block.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Available options:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>div<\/code><\/li>\n\n\n\n<li><code>section<\/code><\/li>\n\n\n\n<li><code>article<\/code><\/li>\n\n\n\n<li><code>main<\/code><\/li>\n\n\n\n<li><code>header<\/code><\/li>\n\n\n\n<li><code>footer<\/code><\/li>\n\n\n\n<li><code>aside<\/code><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Choose a semantic HTML element when appropriate for your page structure.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Custom CSS Class<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Add a custom CSS class to the Row Block. You can use this class to apply additional styling through your theme or custom CSS.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">ARIA Label<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Add a descriptive label for the Row section so screen readers can identify its purpose. For example, use \u201cOur Services\u201d for a row containing service information.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Sticky<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Use the Sticky settings to keep the Row Block positioned at the top of the viewport while scrolling.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Make Sticky<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Enable this option to activate sticky behavior for the row.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Sticky Top Offset<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Set the distance between the top of the viewport and the sticky row.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This option appears when <strong>Make Sticky<\/strong> is enabled.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. Responsive<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Control the visibility of the Row Block on different device types.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Hide on Desktop:<\/strong> Hides the row on desktop devices.<\/li>\n\n\n\n<li><strong>Hide on Tablet:<\/strong> Hides the row on tablet devices.<\/li>\n\n\n\n<li><strong>Hide on Mobile:<\/strong> Hides the row on mobile devices.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Enable the appropriate option to hide the row on the selected device type.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1474\" height=\"535\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-2.png\" alt=\"\" class=\"wp-image-2112\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-2.png 1474w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-2-300x109.png 300w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-2-766x278.png 766w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-2-1024x372.png 1024w\" sizes=\"auto, (max-width: 1474px) 100vw, 1474px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Layout Tab<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Layout tab provides controls for the row structure, content width, responsive columns, positioning, Flexbox alignment, and column behavior.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Container<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Layout Presets<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Choose a predefined column structure for the row. The available presets are:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><th>Layout<\/th><th>Column Structure<\/th><\/tr><tr><td>1<\/td><td>One full-width column<\/td><\/tr><tr><td>50 \/ 50<\/td><td>Two equal columns<\/td><\/tr><tr><td>33 \/ 33 \/ 33<\/td><td>Three equal columns<\/td><\/tr><tr><td>25 \/ 25 \/ 25 \/ 25<\/td><td>Four equal columns<\/td><\/tr><tr><td>30 \/ 70<\/td><td>30% and 70%<\/td><\/tr><tr><td>70 \/ 30<\/td><td>70% and 30%<\/td><\/tr><tr><td>25 \/ 75<\/td><td>25% and 75%<\/td><\/tr><tr><td>75 \/ 25<\/td><td>75% and 25%<\/td><\/tr><tr><td>20 \/ 80<\/td><td>20% and 80%<\/td><\/tr><tr><td>80 \/ 20<\/td><td>80% and 20%<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Select a preset to apply the corresponding column structure.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Columns per row<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Columns per row (Desktop):<\/strong> Set how many columns appear in each row on desktop screens.\n<ul class=\"wp-block-list\">\n<li><strong>0:<\/strong> Keep each column&#8217;s own width.<\/li>\n\n\n\n<li><strong>1:<\/strong> Stack columns at full width.<\/li>\n\n\n\n<li><strong>2 or more:<\/strong> Display an equal-column grid that wraps onto the next line.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Columns per row (Tablet):<\/strong> Set the number of columns per row on tablet screens. Use <code>0<\/code> to keep the desktop layout.<\/li>\n\n\n\n<li><strong>Columns per row (Mobile):<\/strong> Set the number of columns per row on mobile screens. Use <code>0<\/code> to stack columns one per row.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Content Width<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Choose how the row&#8217;s content and background are sized.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Boxed<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The background can span the row while the content stays within a defined maximum width.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">When selected, the <strong>Max Width<\/strong> control appears.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Full Width<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The content fills the entire row width.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The Max Width control is not displayed in this mode.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Custom<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Set a custom width for the entire row, including its background, and center it within the available layout area.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">When selected, the responsive <strong>Width<\/strong> control appears.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Available width units:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>px<\/code> \u2014 Pixels<\/li>\n\n\n\n<li><code>%<\/code> \u2014 Percentage<\/li>\n\n\n\n<li><code>vw<\/code> \u2014 Viewport width<\/li>\n\n\n\n<li><code>rem<\/code> \u2014 Root em units<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">The row&#8217;s alignment and the surrounding theme layout can affect the final visible width.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Max Width<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Set the maximum width of the row&#8217;s content when <strong>Content Width<\/strong> is set to <strong>Boxed<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The control supports responsive values for desktop, tablet, and mobile devices.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Min Height<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Set the minimum height of the row. The row can grow beyond this value when its content requires more space.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The control supports responsive values for desktop, tablet, and mobile devices.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1882\" height=\"748\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-1.png\" alt=\"\" class=\"wp-image-2111\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-1.png 1882w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-1-300x119.png 300w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-1-767x305.png 767w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-1-1024x407.png 1024w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-1-1536x610.png 1536w\" sizes=\"auto, (max-width: 1882px) 100vw, 1882px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">2. Position &amp; Z-Index<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Use these options to control the row&#8217;s positioning, overflow behavior, and stacking order.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Position<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Choose the CSS positioning mode for the row.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Available options:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Default:<\/strong> Uses the default positioning behavior.<\/li>\n\n\n\n<li><strong>static:<\/strong> Places the element in the normal document flow.<\/li>\n\n\n\n<li><strong>relative:<\/strong> Positions the element relative to its normal position.<\/li>\n\n\n\n<li><strong>absolute:<\/strong> Positions the element relative to its positioning context.<\/li>\n\n\n\n<li><strong>fixed:<\/strong> Positions the element relative to the viewport.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Overflow<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Control how content extending beyond the row&#8217;s boundaries is handled.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Available options:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Default:<\/strong> Uses the default overflow behavior.<\/li>\n\n\n\n<li><strong>visible:<\/strong> Allows overflowing content to remain visible.<\/li>\n\n\n\n<li><strong>hidden:<\/strong> Clips overflowing content.<\/li>\n\n\n\n<li><strong>auto:<\/strong> Adds scrolling when necessary.<\/li>\n\n\n\n<li><strong>scroll:<\/strong> Enables scrolling for overflowing content.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Z-Index<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Set the row&#8217;s stacking order using a numeric value. This can help control which elements appear in front of or behind other elements when their positioning and stacking contexts allow it.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. Flexbox<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Use the Flexbox settings to control the direction, alignment, wrapping, and spacing of columns within the row.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">These controls support responsive settings for desktop, tablet, and mobile devices.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Direction<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Choose the direction in which the columns are arranged.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Available options:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Row:<\/strong> Arranges columns horizontally from left to right.<\/li>\n\n\n\n<li><strong>Row reverse:<\/strong> Reverses the horizontal direction.<\/li>\n\n\n\n<li><strong>Column:<\/strong> Arranges columns vertically.<\/li>\n\n\n\n<li><strong>Column reverse:<\/strong> Reverses the vertical direction.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Justify Content<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Control how columns are distributed along the main axis.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Available options:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Start:<\/strong> Aligns columns at the beginning.<\/li>\n\n\n\n<li><strong>Center:<\/strong> Centers columns.<\/li>\n\n\n\n<li><strong>End:<\/strong> Aligns columns at the end.<\/li>\n\n\n\n<li><strong>Space between:<\/strong> Distributes space between columns.<\/li>\n\n\n\n<li><strong>Space around:<\/strong> Adds space around columns.<\/li>\n\n\n\n<li><strong>Space evenly:<\/strong> Distributes equal spacing between columns and at the edges.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Align Items<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Control how columns align along the cross axis.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Available options:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Stretch:<\/strong> Stretches columns along the cross axis.<\/li>\n\n\n\n<li><strong>Top:<\/strong> Aligns columns to the top.<\/li>\n\n\n\n<li><strong>Middle:<\/strong> Aligns columns to the center.<\/li>\n\n\n\n<li><strong>Bottom:<\/strong> Aligns columns to the bottom.<\/li>\n\n\n\n<li><strong>Baseline:<\/strong> Aligns columns along their text baselines.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Align Content<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Control the distribution of multiple rows of content along the cross axis when the layout wraps.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Available options:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Stretch<\/strong><\/li>\n\n\n\n<li><strong>Top<\/strong><\/li>\n\n\n\n<li><strong>Middle<\/strong><\/li>\n\n\n\n<li><strong>Bottom<\/strong><\/li>\n\n\n\n<li><strong>Space between<\/strong><\/li>\n\n\n\n<li><strong>Space around<\/strong><\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Wrap<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Choose how columns behave when they cannot fit on a single line.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Available options:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>No wrap:<\/strong> Keeps columns on one line.<\/li>\n\n\n\n<li><strong>Wrap:<\/strong> Allows columns to move onto additional lines.<\/li>\n\n\n\n<li><strong>Wrap reverse:<\/strong> Allows wrapping in the reverse cross-axis direction.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Gap<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Set the general spacing between columns or items in the row.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Row Gap<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Set the spacing between rows when content wraps onto multiple lines.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Column Gap<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Set the spacing between columns.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The Gap, Row Gap, and Column Gap controls support responsive values.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1418\" height=\"745\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-3.png\" alt=\"\" class=\"wp-image-2113\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-3.png 1418w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-3-300x158.png 300w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-3-767x403.png 767w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-3-1024x538.png 1024w\" sizes=\"auto, (max-width: 1418px) 100vw, 1418px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">4. Advanced Layout<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Vertical Align<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Choose the vertical alignment of the columns.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Available options:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Default<\/strong><\/li>\n\n\n\n<li><strong>Top<\/strong><\/li>\n\n\n\n<li><strong>Middle<\/strong><\/li>\n\n\n\n<li><strong>Bottom<\/strong><\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Equal Height Columns<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Enable this option to make the columns equal in height.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Stretch Columns<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Enable this option to stretch the columns within the available row space.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Style Tab<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Style tab contains the row&#8217;s spacing, background, and border customization options.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Spacing<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Padding<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Control the inner spacing of the row.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can set separate values for:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Top<\/li>\n\n\n\n<li>Right<\/li>\n\n\n\n<li>Bottom<\/li>\n\n\n\n<li>Left<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Responsive controls are available for desktop, tablet, and mobile devices.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Margin<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Control the outer spacing around the row.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can set separate values for:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Top<\/li>\n\n\n\n<li>Right<\/li>\n\n\n\n<li>Bottom<\/li>\n\n\n\n<li>Left<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Responsive controls are available for desktop, tablet, and mobile devices.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Background<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Customize the background of the Row Block.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Background<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Choose a background color or gradient using the Background control.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Background Image URL<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Enter the URL of the image you want to use as the row background.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">After entering an image URL, additional background options become available.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Size<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Choose how the background image fits within the row.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Available options:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>auto:<\/strong> Uses the image&#8217;s natural sizing behavior.<\/li>\n\n\n\n<li><strong>cover:<\/strong> Scales the image to cover the background area.<\/li>\n\n\n\n<li><strong>contain:<\/strong> Scales the image to fit within the background area.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Repeat<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Choose whether the background image repeats.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Available options:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>no-repeat:<\/strong> Displays the image without repeating.<\/li>\n\n\n\n<li><strong>repeat:<\/strong> Repeats the image horizontally and vertically.<\/li>\n\n\n\n<li><strong>repeat-x:<\/strong> Repeats the image horizontally.<\/li>\n\n\n\n<li><strong>repeat-y:<\/strong> Repeats the image vertically.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Position<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Choose where the background image is positioned.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Available options:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>center center<\/strong><\/li>\n\n\n\n<li><strong>top left<\/strong><\/li>\n\n\n\n<li><strong>top center<\/strong><\/li>\n\n\n\n<li><strong>top right<\/strong><\/li>\n\n\n\n<li><strong>center left<\/strong><\/li>\n\n\n\n<li><strong>center right<\/strong><\/li>\n\n\n\n<li><strong>bottom left<\/strong><\/li>\n\n\n\n<li><strong>bottom center<\/strong><\/li>\n\n\n\n<li><strong>bottom right<\/strong><\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Attachment<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Choose how the background image behaves while scrolling.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Available options:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>scroll:<\/strong> The background image scrolls with the element.<\/li>\n\n\n\n<li>f<strong>ixed:<\/strong> The background image uses fixed attachment behavior, subject to browser and device support.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">3.Background Overlay<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Overlay:<\/strong> Choose an overlay color or gradient to display over the background.<\/li>\n\n\n\n<li><strong>Overlay Opacity (%):<\/strong> Adjust the overlay opacity from 0% to 100%. This control appears when an overlay color or gradient is set.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">4.Colors<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Text:<\/strong> Set the text color for content inside the Row.<\/li>\n\n\n\n<li><strong>Link:<\/strong> Set the color of links inside the Row.<\/li>\n\n\n\n<li><strong>Link Hover:<\/strong> Set the link color when a visitor hovers over a link.<\/li>\n\n\n\n<li><strong>Heading:<\/strong> Set the heading color inside the Row.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">5.Typography<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Typography:<\/strong> Configure typography for the Row&#8217;s content using the available responsive controls.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">6. Border<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Border:<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Customize the row&#8217;s border using the Border control.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Border Radius:<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Adjust the corner radius of the row. You can configure the top, right, bottom, and left corners separately.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Box Shadow:<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Customize the shadow around the row using the Box Shadow control.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"478\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-4-1024x478.png\" alt=\"\" class=\"wp-image-2495\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-4-1024x478.png 1024w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-4-300x140.png 300w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-4-767x358.png 767w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-4.png 1483w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Advanced Tab<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Advanced tab provides additional spacing and background controls for the Row Block.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Spacing<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Padding<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Set the additional inner spacing applied through the Advanced tab.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can configure the top, right, bottom, and left values separately.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Margin<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Set the additional outer spacing applied through the Advanced tab.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can configure the top, right, bottom, and left values separately.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Both controls support responsive settings for desktop, tablet, and mobile devices.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Note:<\/strong> The Advanced tab has its own spacing controls, separate from the Padding and Margin options in the Style tab.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Background<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Background<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Customize the additional background of the Row Block using the Background control.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The control supports background color and gradient settings.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Tips for Using the Row Block<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Choose a column preset that matches your intended layout before adding content.<\/li>\n\n\n\n<li>Use responsive column settings to adjust the layout for tablet and mobile screens.<\/li>\n\n\n\n<li>Use Flexbox controls to manage column direction, alignment, and spacing.<\/li>\n\n\n\n<li>Use Content Width to control how the row&#8217;s content fits within the page.<\/li>\n\n\n\n<li>Use the Style and Advanced tabs to manage their respective spacing and background settings.<\/li>\n\n\n\n<li>Use semantic HTML tags when appropriate for the structure of your page.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">The ShapeBlock Row Block provides flexible controls for building responsive, multi-column layouts directly in the WordPress Gutenberg editor.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The ShapeBlock Row Block helps you create flexible, multi-column layouts in the WordPress Gutenberg editor. You can add columns, choose from predefined column layouts, control content width, adjust spacing, customize backgrounds and borders, and manage responsive behavior for desktop, tablet, and mobile devices. Use the Row Block to build website sections such as hero areas, [&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-2030","docs","type-docs","status-publish","hentry","doc_category-layout-docs"],"year_month":"2026-10","word_count":1927,"total_views":"47","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\/2030","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=2030"}],"version-history":[{"count":1,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/2030\/revisions"}],"predecessor-version":[{"id":2496,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/2030\/revisions\/2496"}],"wp:attachment":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/media?parent=2030"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/doc_category?post=2030"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/doc_tag?post=2030"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}