The below affiliate block design is ideal to display a snapshot of your affiliate product in a neat and professional manner.
The 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":"d1d48849","borderColor":"var(\u002d\u002dcontrast-3)","isDynamic":true,"blockVersion":3,"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":"13f8a5b1","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-13f8a5b1 gb-headline-text"><a href="#">The All-In-One WordPress Plugin for Affiliate Marketing</a></h3>
<!-- /wp:generateblocks/headline -->
<!-- wp:generateblocks/grid {"uniqueId":"f8a755ad","columns":2,"horizontalGap":40,"verticalGap":20,"isDynamic":true,"blockVersion":3} -->
<!-- wp:generateblocks/container {"uniqueId":"fa8d2dc9","isGrid":true,"gridId":"f8a755ad","isDynamic":true,"blockVersion":3,"sizing":{"width":"75%","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":"9acea926","hasUrl":true,"blockVersion":3,"display":"inline-flex","displayMobile":"flex","alignItems":"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-9acea926" href="#"><span class="gb-button-text">Get it with $50 Discount</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/container {"uniqueId":"337fbee1","isGrid":true,"gridId":"f8a755ad","isDynamic":true,"blockVersion":3,"sizing":{"width":"25%","widthMobile":"100%"}} -->
<!-- wp:generateblocks/image {"uniqueId":"f6911898","mediaId":273,"sizeSlug":"full"} -->
<figure class="gb-block-image gb-block-image-f6911898"><img class="gb-image gb-image-f6911898" src="https://dummyimage.com/170x128/eeeeee/666666.png&text=+WPF" alt="" title="party-cap"/></figure>
<!-- /wp:generateblocks/image -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->
<!-- /wp:generateblocks/container -->How to Use the Block Code
- Install GenerateBlocks plugin from WordPress respoitory
- 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
- Start editing and using the block content