[Support request] How to achieve this content layout

[Paul]

hi, how to achive this kknd of content layout ?

in desktop, like this https://prnt.sc/KYdILKYyXr-U
in mobile, like this effect https://prnt.sc/yYK6YE_8kPVQ

pls guide me and what blocks or others i should use to achieve this effect

thanks

[Leo]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Paul]

hello, thanks for your help

could you please make the video guide with steps?

thanks

[Fernando]

Hi Paul,

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

[Paul]

hello Fernando

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

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Paul]

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

[Fernando]

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

[Author]

Posts