product box

Hi there,

That is a very simple layout to create. 🙂

Basically, you will have a structure like this:

--Container
---- Image Block
---- Headline Block
---- Button Block
---- Headline Block

I’ve created a sample layout that you can add to your page to see how the layout was created.

To do this, create a new page. Then, click the three dots option on the top right, and under Editor, select the Code Editor option.

Next, paste this HTML markup:

<!-- wp:generateblocks/container {"uniqueId":"e8ae4f1a","backgroundColor":"var(\u002d\u002dcontrast)","isDynamic":true,"blockVersion":4,"display":"flex","alignItems":"center","justifyContent":"center","sizing":{"height":"","minHeight":"700px"}} -->
<!-- wp:generateblocks/container {"uniqueId":"5c3c0ffd","backgroundColor":"var(\u002d\u002dbase)","isDynamic":true,"blockVersion":4,"display":"flex","flexDirection":"column","rowGap":"15px","sizing":{"width":"500px","minWidth":"","minHeight":"","height":"600px"},"spacing":{"paddingTop":"40px","paddingLeft":"40px","paddingRight":"40px","paddingBottom":"40px"}} -->
<!-- wp:generateblocks/image {"uniqueId":"39159e06","mediaId":4371,"sizeSlug":"full","blockVersion":2} -->
<figure class="gb-block-image gb-block-image-39159e06"><img class="gb-image gb-image-39159e06" src="https://sites.biz.my/wp-content/uploads/2020/10/pexels-ken-tomita-389818.jpg" alt="" title="pexels-ken-tomita-389818"/></figure>
<!-- /wp:generateblocks/image -->

<!-- wp:generateblocks/headline {"uniqueId":"3341b112","element":"p","blockVersion":3,"spacing":{"marginBottom":"0px"}} -->
<p class="gb-headline gb-headline-3341b112 gb-headline-text">15.6” 144Hz FHD Display, Intel Core i5-11400H Processor, GeForce RTX 2050, 8GB DDR4 RAM, 512GB PCIe SSD Gen 3, Wi-Fi 6, Windows 11, FX506HF-ES51,Graphite Black</p>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/button {"uniqueId":"c26a9551","blockVersion":4,"display":"inline-flex","justifyContent":"center","sizing":{"maxWidth":""},"typography":{"textAlign":""},"spacing":{"paddingTop":"15px","paddingRight":"20px","paddingBottom":"15px","paddingLeft":"20px"},"borders":{"borderTopWidth":"","borderRightWidth":"","borderBottomWidth":"","borderLeftWidth":"","borderTopStyle":"","borderRightStyle":"","borderBottomStyle":"","borderLeftStyle":"","borderTopLeftRadius":"20px","borderTopRightRadius":"20px","borderBottomLeftRadius":"20px","borderBottomRightRadius":"20px"},"backgroundColor":"#ff9800","textColor":"var(\u002d\u002dcontrast)","textColorHover":"#ffffff"} -->
<span class="gb-button gb-button-c26a9551 gb-button-text">Buy at Amazon.com</span>
<!-- /wp:generateblocks/button -->

<!-- wp:generateblocks/headline {"uniqueId":"ba782121","element":"p","blockVersion":3,"typography":{"fontSize":"15px"}} -->
<p class="gb-headline gb-headline-ba782121 gb-headline-text">As an Amazon Associate, we earn from qualifying purchases.</p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/container -->

Then click the Exit code editor on the top left. You can then reference how the layout was constructed.

No problem.