Affiliate Block – Design 5

The below affiliate block design is ideal to display products in vertical columns (2 columns) in a neat and professional manner.

Block Design

Block Code

<!-- wp:generateblocks/container {"uniqueId":"49d7742b","isDynamic":true,"blockVersion":3} -->
<!-- wp:generateblocks/grid {"uniqueId":"ec274f56","columns":2,"horizontalGap":20,"isDynamic":true,"blockVersion":3} -->
<!-- wp:generateblocks/container {"uniqueId":"9f21d3bd","isGrid":true,"gridId":"ec274f56","borderColor":"#b2b2be","isDynamic":true,"blockVersion":3,"sizing":{"width":"50%","widthMobile":"100%"},"alignment":"center","paddingTop":"20","paddingRight":"20","paddingBottom":"20","paddingLeft":"20","paddingSyncUnits":true,"borderSizeTop":"1","borderSizeRight":"1","borderSizeBottom":"1","borderSizeLeft":"1"} -->
<!-- wp:generateblocks/headline {"uniqueId":"e888426d","element":"h3","blockVersion":2,"fontWeight":"700","backgroundColor":"","textColor":""} -->
<h3 class="gb-headline gb-headline-e888426d gb-headline-text">Dell Monitor P24PH</h3>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/image {"uniqueId":"ddde2569","mediaId":299,"sizeSlug":"full","alignment":"center"} -->
<figure class="gb-block-image gb-block-image-ddde2569"><img class="gb-image gb-image-ddde2569" src="https://dummyimage.com/170x128/eeeeee/666666.png&text=+WPF" alt="" title="imac-g25673f72b_640(1)"/></figure>
<!-- /wp:generateblocks/image -->

<!-- wp:generateblocks/headline {"uniqueId":"b886db81","element":"div","blockVersion":2,"display":"flex","alignItems":"center","justifyContent":"center","marginTop":"20","marginBottom":"20","backgroundColor":"","textColor":"","linkColor":"","linkColorHover":"","borderColor":"","highlightTextColor":"","hasIcon":true,"iconColor":"#d5ab55"} -->
<div class="gb-headline gb-headline-b886db81"><span class="gb-icon"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="122.88px" height="116.864px" viewBox="0 0 122.88 116.864" xml:space="preserve"><g><polygon fill-rule="evenodd" clip-rule="evenodd" points="61.44,0 78.351,41.326 122.88,44.638 88.803,73.491 99.412,116.864 61.44,93.371 23.468,116.864 34.078,73.491 0,44.638 44.529,41.326 61.44,0"></polygon></g></svg><svg xml:space="preserve" viewBox="0 0 122.88 116.864" height="116.864px" width="122.88px" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="Layer_1" version="1.1"><g><polygon points="61.44,0 78.351,41.326 122.88,44.638 88.803,73.491 99.412,116.864 61.44,93.371 23.468,116.864 34.078,73.491 0,44.638 44.529,41.326 61.44,0" clip-rule="evenodd" fill-rule="evenodd"></polygon></g></svg><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="122.88px" height="116.864px" viewBox="0 0 122.88 116.864" xml:space="preserve"><g><polygon fill-rule="evenodd" clip-rule="evenodd" points="61.44,0 78.351,41.326 122.88,44.638 88.803,73.491 99.412,116.864 61.44,93.371 23.468,116.864 34.078,73.491 0,44.638 44.529,41.326 61.44,0"></polygon></g></svg><svg xml:space="preserve" viewBox="0 0 122.88 116.864" height="116.864px" width="122.88px" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="Layer_1" version="1.1"><g><polygon points="61.44,0 78.351,41.326 122.88,44.638 88.803,73.491 99.412,116.864 61.44,93.371 23.468,116.864 34.078,73.491 0,44.638 44.529,41.326 61.44,0" clip-rule="evenodd" fill-rule="evenodd"></polygon></g></svg><svg xml:space="preserve" viewBox="0 0 122.88 116.864" height="116.864px" width="122.88px" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="Layer_1" version="1.1"><g><polygon points="61.44,0 78.351,41.326 122.88,44.638 88.803,73.491 99.412,116.864 61.44,93.371 23.468,116.864 34.078,73.491 0,44.638 44.529,41.326 61.44,0" clip-rule="evenodd" fill-rule="evenodd"></polygon></g></svg></span><span class="gb-headline-text">5 Stars</span></div>
<!-- /wp:generateblocks/headline -->

<!-- wp:paragraph {"style":{"typography":{"fontSize":"16px"}}} -->
<p style="font-size:16px">Dell Professional 24 inches, 1920 x 1080 pixels Full HD Monitor - Wall Mountable. IPS Panel with HDMI, VGA DP &amp; USB Ports. Best for Gaming laptops with high performing CPU.</p>
<!-- /wp:paragraph -->

<!-- wp:generateblocks/button {"uniqueId":"4730a246","hasUrl":true,"target":true,"relNoFollow":true,"blockVersion":3,"display":"flex","alignItems":"center","justifyContent":"center","marginBottom":"15","paddingTop":"15","paddingRight":"20","paddingBottom":"15","paddingLeft":"20","backgroundColor":"#0366d6","backgroundColorHover":"#222222","textColor":"#ffffff","textColorHover":"#ffffff","hasIcon":true,"iconLocation":"right","iconPaddingTop":"0.3","iconPaddingRight":"","iconPaddingLeft":"0.5"} -->
<a class="gb-button gb-button-4730a246" href="#" target="_blank" rel="nofollow noopener noreferrer"><span class="gb-button-text">Buy Now</span><span class="gb-icon"><svg xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 512 243.58"><path fill-rule="nonzero" d="M373.57 0 512 120.75 371.53 243.58l-20.92-23.91 94.93-83L0 137.09v-31.75l445.55-.41-92.89-81.02z"></path></svg></span></a>
<!-- /wp:generateblocks/button -->

<!-- wp:paragraph {"style":{"typography":{"fontSize":"14px"}}} -->
<p style="font-size:14px"><em>Price incl. tax, excl. shipping</em></p>
<!-- /wp:paragraph -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"b9333c94","isGrid":true,"gridId":"ec274f56","borderColor":"#b2b2be","isDynamic":true,"blockVersion":3,"sizing":{"width":"50%","widthMobile":"100%"},"alignment":"center","paddingTop":"20","paddingRight":"20","paddingBottom":"20","paddingLeft":"20","paddingSyncUnits":true,"borderSizeTop":"1","borderSizeRight":"1","borderSizeBottom":"1","borderSizeLeft":"1"} -->
<!-- wp:generateblocks/headline {"uniqueId":"9e6ce252","element":"h3","blockVersion":2,"fontWeight":"700","backgroundColor":"","textColor":"","linkColor":""} -->
<h3 class="gb-headline gb-headline-9e6ce252 gb-headline-text">HP Monitor PH76</h3>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/image {"uniqueId":"1f801246","mediaId":298,"sizeSlug":"full","alignment":"center"} -->
<figure class="gb-block-image gb-block-image-1f801246"><img class="gb-image gb-image-1f801246" src="https://dummyimage.com/170x128/eeeeee/666666.png&text=+WPF" alt="" title="laptop-gf5dd25632_640(1)"/></figure>
<!-- /wp:generateblocks/image -->

<!-- wp:generateblocks/headline {"uniqueId":"4eab04d2","element":"div","blockVersion":2,"display":"flex","alignItems":"center","justifyContent":"center","marginTop":"20","marginBottom":"20","backgroundColor":"","textColor":"","linkColor":"","linkColorHover":"","borderColor":"","highlightTextColor":"","hasIcon":true,"iconColor":"#d5ab55"} -->
<div class="gb-headline gb-headline-4eab04d2"><span class="gb-icon"><svg xml:space="preserve" viewBox="0 0 122.88 116.864" height="116.864px" width="122.88px" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="Layer_1" version="1.1"><g><polygon points="61.44,0 78.351,41.326 122.88,44.638 88.803,73.491 99.412,116.864 61.44,93.371 23.468,116.864 34.078,73.491 0,44.638 44.529,41.326 61.44,0" clip-rule="evenodd" fill-rule="evenodd"></polygon></g></svg><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="122.88px" height="116.864px" viewBox="0 0 122.88 116.864" xml:space="preserve"><g><polygon fill-rule="evenodd" clip-rule="evenodd" points="61.44,0 78.351,41.326 122.88,44.638 88.803,73.491 99.412,116.864 61.44,93.371 23.468,116.864 34.078,73.491 0,44.638 44.529,41.326 61.44,0"></polygon></g></svg><svg xml:space="preserve" viewBox="0 0 122.88 116.864" height="116.864px" width="122.88px" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="Layer_1" version="1.1"><g><polygon points="61.44,0 78.351,41.326 122.88,44.638 88.803,73.491 99.412,116.864 61.44,93.371 23.468,116.864 34.078,73.491 0,44.638 44.529,41.326 61.44,0" clip-rule="evenodd" fill-rule="evenodd"></polygon></g></svg><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="122.88px" height="116.864px" viewBox="0 0 122.88 116.864" xml:space="preserve"><g><polygon fill-rule="evenodd" clip-rule="evenodd" points="61.44,0 78.351,41.326 122.88,44.638 88.803,73.491 99.412,116.864 61.44,93.371 23.468,116.864 34.078,73.491 0,44.638 44.529,41.326 61.44,0"></polygon></g></svg><svg xml:space="preserve" style="enable-background:new 0 0 123.38 117.69" viewBox="0 0 123.38 117.69" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="Layer_1" version="1.1"><style type="text/css">.st0{fill-rule:evenodd;clip-rule:evenodd;stroke:#000000;stroke-width:0.5;stroke-miterlimit:2.6131;}</style><g><path d="M64.64,2.22l15.71,36.79l39.85,3.58c1.76,0.15,3.06,1.7,2.91,3.46c-0.07,0.86-0.48,1.6-1.08,2.13L91.89,74.5 l8.92,39.02c0.39,1.72-0.68,3.44-2.41,3.84c-0.88,0.2-1.76,0.02-2.47-0.44L61.69,96.44l-34.35,20.54c-1.52,0.91-3.48,0.41-4.39-1.1 c-0.44-0.74-0.55-1.58-0.37-2.35l0,0l8.92-39.02L1.34,48.17c-1.33-1.16-1.46-3.18-0.3-4.51c0.59-0.68,1.4-1.04,2.24-1.09 l39.75-3.57L58.75,2.2c0.69-1.63,2.57-2.38,4.2-1.69C63.74,0.85,64.33,1.48,64.64,2.22L64.64,2.22z M61.69,11.6l13.53,31.67l0.01,0 c0.45,1.05,1.45,1.83,2.67,1.93l34.31,3.08L86.37,70.83c-0.95,0.74-1.44,1.99-1.15,3.24l7.68,33.58L63.39,90 c-0.51-0.32-1.1-0.49-1.7-0.49V11.6L61.69,11.6z" class="st0"></path></g></svg></span><span class="gb-headline-text">4.5 Stars</span></div>
<!-- /wp:generateblocks/headline -->

<!-- wp:paragraph {"style":{"typography":{"fontSize":"16px"}}} -->
<p style="font-size:16px">HP Professional 24 inches, 1920 x 1080 pixels Full HD Monitor - Wall Mountable. Easy to carry and light weight.</p>
<!-- /wp:paragraph -->

<!-- wp:generateblocks/button {"uniqueId":"e0a4118e","hasUrl":true,"target":true,"relNoFollow":true,"blockVersion":3,"display":"flex","alignItems":"center","justifyContent":"center","marginBottom":"15","paddingTop":"15","paddingRight":"20","paddingBottom":"15","paddingLeft":"20","backgroundColor":"#0366d6","backgroundColorHover":"#222222","textColor":"#ffffff","textColorHover":"#ffffff","hasIcon":true,"iconLocation":"right","iconPaddingTop":"0.3","iconPaddingRight":"","iconPaddingLeft":"0.5"} -->
<a class="gb-button gb-button-e0a4118e" href="#" target="_blank" rel="nofollow noopener noreferrer"><span class="gb-button-text">Buy Now</span><span class="gb-icon"><svg xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 512 243.58"><path fill-rule="nonzero" d="M373.57 0 512 120.75 371.53 243.58l-20.92-23.91 94.93-83L0 137.09v-31.75l445.55-.41-92.89-81.02z"></path></svg></span></a>
<!-- /wp:generateblocks/button -->

<!-- wp:paragraph {"style":{"typography":{"fontSize":"14px"}}} -->
<p style="font-size:14px"><em>Price incl. tax, excl. shipping</em></p>
<!-- /wp:paragraph -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->
<!-- /wp:generateblocks/container -->

How to Use the Block Code

1. Install GenerateBlocks plugin from WordPress repository
2. Copy and paste the above block code to your WordPress Posts or Page
   • Use Firefox browser
   • When you paste the code, right click and choose “Paste without Formatting” option
3. Start editing and using the block content