Affiliate Block – Design 4

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":"41f1db7e","borderColor":"var(\u002d\u002dcontrast-3)","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/headline {"uniqueId":"3ea962af","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-3ea962af gb-headline-text"><a href="#">The All-In-One WordPress Plugin for Affiliate Marketing</a></h3>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/grid {"uniqueId":"cd816aab","columns":2,"horizontalGap":40,"verticalGap":20,"isDynamic":true,"blockVersion":3} -->
<!-- wp:generateblocks/container {"uniqueId":"8d119cc2","isGrid":true,"gridId":"cd816aab","isDynamic":true,"blockVersion":3,"sizing":{"width":"33.33%","widthMobile":"100%"}} -->
<!-- wp:generateblocks/image {"uniqueId":"b3259998","mediaId":273,"sizeSlug":"full"} -->
<figure class="gb-block-image gb-block-image-b3259998"><img class="gb-image gb-image-b3259998" 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":"c22a9a73","isGrid":true,"gridId":"cd816aab","isDynamic":true,"blockVersion":3,"sizing":{"width":"66.66%","widthMobile":"100%"}} -->
<!-- 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:generateblocks/button {"uniqueId":"363434c6","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-363434c6" href="#"><span class="gb-button-text">Buy Now</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