[Support request] Creating Promotional Boxes with Generateblocks

[Luke]

Please check the link and let me know if it’s possible to create such boxes with 2 buttons using Generateblocks?

[David]

Hi there,

yeah thats possible, and theres a couple of ways to do it.
I would probably approach it using a Container with Grid Block.

Copy and paste the following HTML into an empty text block, i made a quick mockup:

<!-- wp:generateblocks/container {"uniqueId":"25001ac4","paddingTop":"20","paddingRight":"20","paddingBottom":"20","paddingLeft":"20","paddingSyncUnits":true,"borderRadiusTopRight":"20","borderRadiusBottomRight":"20","borderRadiusBottomLeft":"20","borderRadiusTopLeft":"20","backgroundColor":"var(\u002d\u002dbase-2)","isDynamic":true,"blockVersion":2,"gpRemoveContainerCondition":"no-post-meta"} -->
<!-- wp:generateblocks/grid {"uniqueId":"9686750c","columns":5,"horizontalGap":20,"verticalGap":20,"isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/container {"uniqueId":"9ecd42c9","isGrid":true,"gridId":"9686750c","width":50,"widthMobile":100,"paddingTop":"5","paddingRight":"5","paddingBottom":"5","paddingLeft":"5","paddingSyncUnits":true,"isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/headline {"uniqueId":"aa41d48d","alignmentMobile":"center","backgroundColor":""} -->
<h2 class="gb-headline gb-headline-aa41d48d gb-headline-text">Headline column one</h2>
<!-- /wp:generateblocks/headline -->

<!-- wp:paragraph -->
<p>some text for column one</p>
<!-- /wp:paragraph -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"dcef92c0","isGrid":true,"gridId":"9686750c","width":50,"widthMobile":100,"paddingTop":"5","paddingRight":"5","paddingBottom":"5","paddingLeft":"5","paddingSyncUnits":true,"isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/headline {"uniqueId":"e0787a53","alignmentMobile":"center","backgroundColor":"","textColor":""} -->
<h2 class="gb-headline gb-headline-e0787a53 gb-headline-text">Headline column two</h2>
<!-- /wp:generateblocks/headline -->

<!-- wp:paragraph -->
<p>some text for column two</p>
<!-- /wp:paragraph -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"9a7b3214","isGrid":true,"gridId":"9686750c","width":50,"widthMobile":100,"paddingTop":"5","paddingRight":"5","paddingBottom":"5","paddingLeft":"5","paddingSyncUnits":true,"isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/button-container {"uniqueId":"a6e5eed9","alignmentMobile":"center","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/button {"uniqueId":"a0cc7610","hasUrl":false,"backgroundColor":"#0366d6","backgroundColorHover":"#222222","textColor":"#ffffff","textColorHover":"#ffffff","paddingTop":"8","paddingRight":"24","paddingBottom":"8","paddingLeft":"24","borderRadiusTopRight":"50","borderRadiusBottomRight":"50","borderRadiusBottomLeft":"50","borderRadiusTopLeft":"50","blockVersion":2} -->
<span class="gb-button gb-button-a0cc7610 gb-button-text">Button</span>
<!-- /wp:generateblocks/button -->
<!-- /wp:generateblocks/button-container -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"d777c791","isGrid":true,"gridId":"9686750c","width":50,"widthMobile":100,"paddingTop":"5","paddingRight":"5","paddingBottom":"5","paddingLeft":"5","paddingSyncUnits":true,"isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/button-container {"uniqueId":"022a4245","alignment":"right","alignmentMobile":"center","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/button {"uniqueId":"d6fc55a5","hasUrl":false,"backgroundColor":"#0366d6","backgroundColorHover":"#222222","textColor":"#ffffff","textColorHover":"#ffffff","paddingTop":"8","paddingRight":"24","paddingBottom":"8","paddingLeft":"24","borderRadiusTopRight":"50","borderRadiusBottomRight":"50","borderRadiusBottomLeft":"50","borderRadiusTopLeft":"50","blockVersion":2} -->
<span class="gb-button gb-button-d6fc55a5 gb-button-text">Button</span>
<!-- /wp:generateblocks/button -->
<!-- /wp:generateblocks/button-container -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"715c2654","isGrid":true,"gridId":"9686750c","width":100,"widthMobile":100,"paddingTop":"5","paddingRight":"5","paddingBottom":"5","paddingLeft":"5","paddingSyncUnits":true,"isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/headline {"uniqueId":"5e484281","alignmentMobile":"center","backgroundColor":"","textColor":"","linkColor":"","linkColorHover":"","borderColor":""} -->
<h2 class="gb-headline gb-headline-5e484281 gb-headline-text">Headline 100% wide column</h2>
<!-- /wp:generateblocks/headline -->

<!-- wp:paragraph -->
<p>some text for 100% wide column</p>
<!-- /wp:paragraph -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->
<!-- /wp:generateblocks/container -->

[Author]

Posts