Affiliate Block – Design 2

The below affiliate block design is ideal to display a snapshot of your affiliate product in a neat and professional manner.

factThe below block design was created using GenerateBlocks plugin. So make sure to install GenerateBlocks plugin from WordPress repository.

Block Design

Block Code

<!-- wp:generateblocks/container {"uniqueId":"e10a100c","borderColor":"#b2b2be","isDynamic":true,"blockVersion":3,"marginTop":"20","marginBottom":"20","paddingTop":"25","paddingRight":"25","paddingBottom":"25","paddingLeft":"25","paddingSyncUnits":true,"borderSizeTop":"1","borderSizeRight":"1","borderSizeBottom":"1","borderSizeLeft":"1","borderRadiusTopRight":"15","borderRadiusBottomRight":"15","borderRadiusBottomLeft":"15","borderRadiusTopLeft":"15"} -->
<!-- wp:generateblocks/grid {"uniqueId":"2f39f232","columns":2,"horizontalGap":40,"verticalGap":20,"isDynamic":true,"blockVersion":3} -->
<!-- wp:generateblocks/container {"uniqueId":"a59810c8","isGrid":true,"gridId":"2f39f232","isDynamic":true,"blockVersion":3,"sizing":{"width":"33.33%","widthMobile":"100%"}} -->
<!-- wp:generateblocks/image {"uniqueId":"197da325","mediaId":273,"sizeSlug":"full"} -->
<figure class="gb-block-image gb-block-image-197da325"><img class="gb-image gb-image-197da325" src="https://dummyimage.com/500x500/eeeeee/666666.png&text=+WPF" alt="" title="party-cap"/></figure>
<!-- /wp:generateblocks/image -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"2b67e25c","isGrid":true,"gridId":"2f39f232","isDynamic":true,"blockVersion":3,"sizing":{"width":"66.66%","widthMobile":"100%"}} -->
<!-- wp:generateblocks/headline {"uniqueId":"b52f2759","element":"h3","blockVersion":2,"display":"flex","flexDirection":"row","alignItems":"center","fontWeight":"700","backgroundColor":"","textColor":"","linkColor":"","linkColorHover":"","borderColor":"","highlightTextColor":"","iconColor":"","iconPaddingRight":"2","iconSize":2} -->
<h3 class="gb-headline gb-headline-b52f2759 gb-headline-text"><a href="#">The All-In-One WordPress Plugin for Affiliate Marketing</a></h3>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"b886db81","element":"div","blockVersion":2,"display":"flex","alignItems":"center","marginBottom":"20","backgroundColor":"","textColor":"","linkColor":"","linkColorHover":"","borderColor":"","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 -->
<p>A WordPress plugin that lets you add, manage, and display your affiliate links from any program, including Amazon. Increase conversions. Find new affiliate link opportunities. Earn more revenue! Less than 5 minutes to set up.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>A WordPress plugin that lets you add, manage, and display your affiliate links from any program, including Amazon.</p>
<!-- /wp:paragraph -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->

<!-- wp:separator {"backgroundColor":"base","className":"small-separator-margin"} -->
<hr class="wp-block-separator has-text-color has-base-color has-alpha-channel-opacity has-base-background-color has-background small-separator-margin"/>
<!-- /wp:separator -->

<!-- wp:generateblocks/grid {"uniqueId":"01177539","columns":2,"horizontalGap":40,"isDynamic":true,"blockVersion":3} -->
<!-- wp:generateblocks/container {"uniqueId":"c64a5db1","isGrid":true,"gridId":"01177539","isDynamic":true,"blockVersion":3,"sizing":{"width":"50%","widthMobile":"100%"}} -->
<!-- wp:paragraph -->
<p><em>We earn a commission if you make a purchase, at no additional cost to you.</em></p>
<!-- /wp:paragraph -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"60be3004","isGrid":true,"gridId":"01177539","isDynamic":true,"blockVersion":3,"sizing":{"width":"50%","widthMobile":"100%"}} -->
<!-- wp:generateblocks/button {"uniqueId":"9d1441f2","hasUrl":true,"blockVersion":3,"display":"flex","displayMobile":"flex","alignItems":"center","justifyContent":"center","justifyContentMobile":"center","paddingTop":"15","paddingRight":"20","paddingBottom":"15","paddingLeft":"20","backgroundColor":"#0366d6","backgroundColorHover":"#222222","textColor":"#ffffff","textColorHover":"#ffffff","hasIcon":true,"iconLocation":"right","iconPaddingRight":"","iconPaddingLeft":"0.5","iconSize":1.5} -->
<a class="gb-button gb-button-9d1441f2" href="#"><span class="gb-button-text">Start Your Free Trial</span><span class="gb-icon"><svg viewBox="0 0 512 243.58" clip-rule="evenodd" fill-rule="evenodd" image-rendering="optimizeQuality" text-rendering="geometricPrecision" shape-rendering="geometricPrecision" xmlns="http://www.w3.org/2000/svg"><path 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" fill-rule="nonzero"></path></svg></span></a>
<!-- /wp:generateblocks/button -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->
<!-- /wp:generateblocks/container -->

how-toHow to Use the Block Code

  1. Install GenerateBlocks plugin from WordPress respoitory
  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