[Support request] How to achieve this content layout

Home Forums Support [Support request] How to achieve this content layout

Home Forums Support How to achieve this content layout

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #2371227
    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

    #2371350
    Leo
    Staff
    Customer Support

    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.

    #2371752
    Paul

    hello, thanks for your help

    could you please make the video guide with steps?

    thanks

    #2371759
    Fernando
    Customer Support

    Hi Paul,

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

    #2372181
    Paul

    hello Fernando

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

    #2372508
    David
    Staff
    Customer Support

    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.

    #2373121
    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

    #2373210
    Fernando
    Customer Support

    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

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.