How to achieve this content layout

Hi Paul,

Can you start with the Grid and Container blocks first?
https://docs.generateblocks.com/article/grid-overview/
https://docs.generateblocks.com/article/container-overview/#layout-%E2%80%93-grid-item

Let me know if you run into any issues.

hello, thanks for your help

could you please make the video guide with steps?

thanks

Hi Paul,

Here's a video tutorial on how to make a similar layout. You'll just need to change the Container Widths.

hello Fernando

you forget to add the link of the video tutorial? could you re-send it? thanks

Hi there,

create a new page, and in the Top Bar 3 dot menu change to Code Editor.

then paste this code into the editor:

<!-- wp:generateblocks/grid {"uniqueId":"4dd0fcc5","columns":4,"horizontalGapMobile":20,"verticalGapMobile":20,"isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/container {"uniqueId":"7d7f6785","isGrid":true,"gridId":"4dd0fcc5","width":25,"widthMobile":50,"paddingRight":"5","paddingLeft":"5","marginSyncUnits":true,"borderSizeRight":"1","borderSizeTopMobile":"1","borderSizeRightMobile":"1","borderSizeBottomMobile":"1","borderSizeLeftMobile":"1","borderRadiusTopRightMobile":"5","borderRadiusBottomRightMobile":"5","borderRadiusBottomLeftMobile":"5","borderRadiusTopLeftMobile":"5","alignmentMobile":"center","isDynamic":true,"blockVersion":3} -->
<!-- wp:generateblocks/grid {"uniqueId":"1c78c056","columns":2,"verticalAlignment":"center","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/container {"uniqueId":"4859f487","isGrid":true,"gridId":"1c78c056","width":50,"widthMobile":100,"paddingTop":"5","paddingRight":"5","paddingBottom":"5","paddingLeft":"5","paddingBottomMobile":"0","isDynamic":true,"blockVersion":3} -->
<!-- wp:generateblocks/headline {"uniqueId":"39be689f","element":"div","fontWeight":"600","fontSize":26} -->
<div class="gb-headline gb-headline-39be689f gb-headline-text">100+</div>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"edbc8346","isGrid":true,"gridId":"1c78c056","width":50,"widthMobile":100,"paddingTop":"5","paddingRight":"5","paddingBottom":"5","paddingLeft":"5","paddingTopMobile":"0","paddingRightMobile":"5","paddingBottomMobile":"5","paddingLeftMobile":"5","isDynamic":true,"blockVersion":3} -->
<!-- wp:generateblocks/headline {"uniqueId":"459b831f","element":"div"} -->
<div class="gb-headline gb-headline-459b831f gb-headline-text">Some text</div>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"18bd649d","isGrid":true,"gridId":"4dd0fcc5","width":25,"widthMobile":50,"paddingRight":"5","paddingLeft":"5","marginSyncUnits":true,"borderSizeRight":"1","borderSizeTopMobile":"1","borderSizeRightMobile":"1","borderSizeBottomMobile":"1","borderSizeLeftMobile":"1","borderRadiusTopRightMobile":"5","borderRadiusBottomRightMobile":"5","borderRadiusBottomLeftMobile":"5","borderRadiusTopLeftMobile":"5","alignmentMobile":"center","isDynamic":true,"blockVersion":3} -->
<!-- wp:generateblocks/grid {"uniqueId":"a41ccd6f","columns":2,"verticalAlignment":"center","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/container {"uniqueId":"c97c8110","isGrid":true,"gridId":"a41ccd6f","width":50,"widthMobile":100,"paddingTop":"5","paddingRight":"5","paddingBottom":"5","paddingLeft":"5","paddingBottomMobile":"0","isDynamic":true,"blockVersion":3} -->
<!-- wp:generateblocks/headline {"uniqueId":"c1292f3e","element":"div","fontWeight":"600","fontSize":26} -->
<div class="gb-headline gb-headline-c1292f3e gb-headline-text">100+</div>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"d16d1cb7","isGrid":true,"gridId":"a41ccd6f","width":50,"widthMobile":100,"paddingTop":"5","paddingRight":"5","paddingBottom":"5","paddingLeft":"5","paddingTopMobile":"0","paddingRightMobile":"5","paddingBottomMobile":"5","paddingLeftMobile":"5","isDynamic":true,"blockVersion":3} -->
<!-- wp:generateblocks/headline {"uniqueId":"031c65ba","element":"div"} -->
<div class="gb-headline gb-headline-031c65ba gb-headline-text">Some text</div>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"036dda26","isGrid":true,"gridId":"4dd0fcc5","width":25,"widthMobile":50,"paddingRight":"5","paddingLeft":"5","marginSyncUnits":true,"borderSizeRight":"1","borderSizeTopMobile":"1","borderSizeRightMobile":"1","borderSizeBottomMobile":"1","borderSizeLeftMobile":"1","borderRadiusTopRightMobile":"5","borderRadiusBottomRightMobile":"5","borderRadiusBottomLeftMobile":"5","borderRadiusTopLeftMobile":"5","alignmentMobile":"center","isDynamic":true,"blockVersion":3} -->
<!-- wp:generateblocks/grid {"uniqueId":"e145ce4a","columns":2,"verticalAlignment":"center","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/container {"uniqueId":"a94da3e4","isGrid":true,"gridId":"e145ce4a","width":50,"widthMobile":100,"paddingTop":"5","paddingRight":"5","paddingBottom":"5","paddingLeft":"5","paddingBottomMobile":"0","isDynamic":true,"blockVersion":3} -->
<!-- wp:generateblocks/headline {"uniqueId":"2aefba70","element":"div","fontWeight":"600","fontSize":26} -->
<div class="gb-headline gb-headline-2aefba70 gb-headline-text">100+</div>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"bd22f9b9","isGrid":true,"gridId":"e145ce4a","width":50,"widthMobile":100,"paddingTop":"5","paddingRight":"5","paddingBottom":"5","paddingLeft":"5","paddingTopMobile":"0","paddingRightMobile":"5","paddingBottomMobile":"5","paddingLeftMobile":"5","isDynamic":true,"blockVersion":3} -->
<!-- wp:generateblocks/headline {"uniqueId":"354f7b74","element":"div"} -->
<div class="gb-headline gb-headline-354f7b74 gb-headline-text">Some text</div>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"58967924","isGrid":true,"gridId":"4dd0fcc5","width":25,"widthMobile":50,"paddingRight":"5","paddingLeft":"5","marginSyncUnits":true,"borderSizeTop":"0","borderSizeRight":"0","borderSizeBottom":"0","borderSizeLeft":"0","borderSizeTopMobile":"1","borderSizeRightMobile":"1","borderSizeBottomMobile":"1","borderSizeLeftMobile":"1","borderRadiusTopRightMobile":"5","borderRadiusBottomRightMobile":"5","borderRadiusBottomLeftMobile":"5","borderRadiusTopLeftMobile":"5","alignmentMobile":"center","isDynamic":true,"blockVersion":3} -->
<!-- wp:generateblocks/grid {"uniqueId":"9e666b8c","columns":2,"verticalAlignment":"center","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/container {"uniqueId":"9789875e","isGrid":true,"gridId":"9e666b8c","width":50,"widthMobile":100,"paddingTop":"5","paddingRight":"5","paddingBottom":"5","paddingLeft":"5","paddingBottomMobile":"0","isDynamic":true,"blockVersion":3} -->
<!-- wp:generateblocks/headline {"uniqueId":"d2740836","element":"div","fontWeight":"600","fontSize":26} -->
<div class="gb-headline gb-headline-d2740836 gb-headline-text">100+</div>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"5ea4478e","isGrid":true,"gridId":"9e666b8c","width":50,"widthMobile":100,"paddingTop":"5","paddingRight":"5","paddingBottom":"5","paddingLeft":"5","paddingTopMobile":"0","paddingRightMobile":"5","paddingBottomMobile":"5","paddingLeftMobile":"5","isDynamic":true,"blockVersion":3} -->
<!-- wp:generateblocks/headline {"uniqueId":"7884b9a7","element":"div"} -->
<div class="gb-headline gb-headline-7884b9a7 gb-headline-text">Some text</div>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->

Then switch back to Visual Editor.

hello david,

thanks for your help and customized code

but i would like to solve this one issue with GeneratepressBlocks, ot using Code.

because i want to make better use of theme and generateblock plugin without coding

thanks for understanding and have a great day

Hi Paul,

The code provided by David is GenerateBlocks code. If you add them to the Code Editor, they translate to GenerateBlocks.

Example: https://share.getcloudapp.com/5zuPbgnv