Row block - Greenshift

Blog Staff
May 2, 2022
Row block is main block when you make custom pages in Gutenberg editor.
Row block of Greenshift plugin has all options from modern page builder: possibility to control layout structure per each resolution, background (including video), spacing, shadows, borders, typography, etc.
There are also some unique options. For example, you can use Fluid width (by calc, max, min CSS options), you can convert columns to carousels on mobiles, add Mobile scroll option, and you can add animations.
Example how carousel option is working.
See, for example how min option is working.
Check this video with details
In depth tutorial
Copy this post’s content
<!-- wp:paragraph -->
<p>Row block is main block when you make custom pages in Gutenberg editor. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Row block of Greenshift plugin has all options from modern page builder: possibility to control layout structure per each resolution, background (including video), spacing, shadows, borders, typography, etc.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>There are also some unique options. For example, you can use Fluid width (by calc, max, min CSS options), you can convert columns to carousels on mobiles, add Mobile scroll option, and you can add animations.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Example how carousel option is working.</p>
<!-- /wp:paragraph -->

<!-- wp:video {"id":476} -->
<figure class="wp-block-video"><video controls src="https://greenshiftwp.com/wp-content/uploads/2022/05/mobilescroll.mp4"></video></figure>
<!-- /wp:video -->

<!-- wp:paragraph -->
<p>See, for example how min option is working.</p>
<!-- /wp:paragraph -->

<!-- wp:video {"id":475} -->
<figure class="wp-block-video"><video autoplay controls loop muted src="https://greenshiftwp.com/wp-content/uploads/2022/05/min-demo.mp4" playsinline></video></figure>
<!-- /wp:video -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Check this video with details</p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/row {"id":"gsbp-bb86db5e-3797","align":"full","width":[900,null,null,null],"displayStyles":false,"background":{"backgroundState":"Gradient","gradient":"linear-gradient(135deg,rgb(101,0,233) 0%,rgb(78,0,138) 42%,rgb(76,0,176) 100%)","color":"#7000f4"},"overlay":{"color":""},"spacing":{"margin":{"values":{"top":[50]},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{"top":[60],"bottom":[80]},"unit":["px","px","px","px"],"locked":false}},"shapeDivider":{"topShape":{"shape":null,"fill":"#ffffff","height":[30],"rotateY":false,"halfopacity":true},"bottomShape":{"shape":"0","rotateY":false,"rotateX":true,"fill":"#ffffff","height":[190]}}} -->
<div id="gspb_row-id-gsbp-bb86db5e-3797" class="gspb_row gspb_row-id-gsbp-bb86db5e-3797 wp-block-greenshift-blocks-row alignfull gspb_row-id-gsbp-bb86db5e-3797"><div class="gspb_backgroundOverlay"></div><div class="gspb_row__content"> 
<!-- wp:greenshift-blocks/row-column {"id":"gsbp-d671aeb6-2ee2"} -->
<div id="gspb_col-id-gsbp-d671aeb6-2ee2" class="gspb_row__col--12 wp-block-greenshift-blocks-row-column  gspb_col-id-gsbp-d671aeb6-2ee2">
<!-- wp:greenshift-blocks/heading {"id":"gsbp-9be76dde-b5a6","headingTag":"div","headingContent":"In depth tutorial","spacing":{"margin":{"values":{},"unit":["px","px","px","px"],"locked":true},"padding":{"values":{},"unit":["px","px","px","px"],"locked":false}},"typography":{"alignment":["center"],"textShadow":{},"color":"#ffffff","size":[40],"customweight":"bold"},"headingSeparator":true,"headingSepSpacing":{"margin":{"values":{"right":[10],"left":[10]},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{},"unit":["px","px","px","px"],"locked":false}},"headingSepAfterSpacing":{"margin":{"values":{"right":[10],"left":[10]},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{},"unit":["px","px","px","px"],"locked":false}},"spacingBlock":{"margin":{"values":{"bottom":[20]},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{"bottom":[30]},"unit":["px","px","px","px"],"locked":false}},"headingSepColor":"#ffffff","headingSepVJustify":"center","headingSepPosition":"both","headingSepType":"zigzag","headingSepJustify":"center"} -->
<div class="gspb_heading_sep_gsbp-9be76dde-b5a6"><div class="gspb_heading_sep gspb_heading_sep_before"><svg width="88" height="11" viewbox="0 0 88 11" xmlns="http://www.w3.org/2000/svg"><path d="M87.387 9.066c-7.279 0-7.279-6.787-14.557-6.787-7.28 0-7.28 6.787-14.561 6.787-7.283 0-7.283-6.787-14.565-6.787l-14.562 6.787c-7.286 0-7.286-6.787-14.57-6.787-7.287 0-7.287 6.787-14.571 6.787" fill="none"></path></svg></div><div id="gspb_heading-id-gsbp-9be76dde-b5a6" class="gspb_heading gspb_heading-id-gsbp-9be76dde-b5a6 ">In depth tutorial</div><div class="gspb_heading_sep gspb_heading_sep_after"><svg width="88" height="11" viewbox="0 0 88 11" xmlns="http://www.w3.org/2000/svg"><path d="M87.387 9.066c-7.279 0-7.279-6.787-14.557-6.787-7.28 0-7.28 6.787-14.561 6.787-7.283 0-7.283-6.787-14.565-6.787l-14.562 6.787c-7.286 0-7.286-6.787-14.57-6.787-7.287 0-7.287 6.787-14.571 6.787" fill="none"></path></svg></div></div>
<!-- /wp:greenshift-blocks/heading -->
<!-- wp:greenshift-blocks/video {"id":"gsbp-761f9442-97c3","src":"https://www.youtube.com/watch?v=hwzSWXvvJXU","provider":"youtube","poster":"https://i.ytimg.com/vi/hwzSWXvvJXU/maxresdefault.jpg","isOverlay":true,"overlayIcon":true,"overlayLightbox":true,"postDate":"2022-05-02T12:34:29","bgColor":"#291341","shadow":{"hoffset":0,"voffset":32,"blur":48,"spread":0,"color":"rgba(0, 0, 0, 0.15)","position":null}} -->
<div class="wp-block-greenshift-blocks-video gs-video youtube gspb_video-id-gsbp-761f9442-97c3" id="gs-video-gsbp-761f9442-97c3"><div class="gs-video-wrapper" itemscope><iframe class="gs-video-element" data-src="https://www.youtube.com/watch?v=hwzSWXvvJXU" data-provider="youtube" data-autoplay="true" data-playsinline="false" data-controls="true" data-loop="false" data-mute="false" data-overlay="true" data-lightbox="true" data-modestbranding="false" data-suggested="true" frameborder="0" allowfullscreen></iframe><div class="gs-video-overlay" style="background-image:url(https://i.ytimg.com/vi/hwzSWXvvJXU/maxresdefault.jpg)" data-type="youtube" data-lightbox="true"><div class="gs-play-icon" style="background-color:#cc0000"><div style="content:"";display:block;position:absolute;border-radius:50%;border:1px solid #cc0000;left:-20px;right:-20px;bottom:-20px;top:-20px;animation:pulsevideobutton 1.5s linear infinite;opacity:0"></div><span></span><div style="content:"";display:block;position:absolute;border-radius:50%;border:1px solid #cc0000;left:-20px;right:-20px;bottom:-20px;top:-20px;animation:pulsevideobutton 1.5s linear infinite;opacity:0;animation-delay:0.5s"></div></div><div class="gs-overlay-color" style="background-color:#291341;background-image:;opacity:0.5"></div></div></div></div>
<!-- /wp:greenshift-blocks/video -->
</div>
<!-- /wp:greenshift-blocks/row-column -->
 </div><div class="gspb_shape-divider-container gspb_shape-divider-container--bottom"><svg xmlns="https://www.w3.org/2000/svg" xmlnsxlink="https://www.w3.org/1999/xlink" version="1.1" data-style="0" x="0px" y="0px" viewbox="0 0 2200 300" xmlspace="preserve" preserveaspectratio="none" fill="#ffffff"><polygon data-style="0" class="gspb_st0 gspb_shape_0" points="2200,300 0,0 2200,0 "></polygon><polygon data-style="0" class="gspb_st1 gspb_shape_1" points="0,0 2200,0 0,300 "></polygon><defs><linearGradient><stop></stop><stop></stop></linearGradient><linearGradient><stop></stop><stop></stop></linearGradient></defs></svg></div></div>
<!-- /wp:greenshift-blocks/row -->
containers, layout