Load Toad Networks                     
Load Toad Networks - Website Design | IT Support | Digital Marketing | Website Hosting

Building Coupon Cards with WordPress Block Editor

Building Coupon Cards with WordPress Block Editor

Share It:

This tutorial in the Building with Blocks series will walk you through each step of creating custom coupon cards from the editor. I will also share a couple of ideas for variations at the end.

Step 1: Adding a Group Block

WordPress post editor with a gray-colored Group block in the post editor.
Adding a Group block with custom background and border.

As with most patterns, you should start with a container-type block. For the coupon card, begin by inserting a Group. You are free to personalize this however you want. However, to use the same layout in the tutorial, you should at least set the block’s padding to 0px and block spacing option to 0px. Those need to be zeroed out for the rest of the design to work.

I adjusted my Group block to have a light gray background color. Then, I added a 4px dashed border and an 8px border-radius. Each of these design tools is available in the block inspector in the sidebar panel. Have a little fun with colors and other settings until you find something you like.

Step 2: Add an Image

WordPress post editor with an image housed inside of a Group block with a gray border and background.
Inserting an Image block into the Group.

This step is straightforward. Insert an Image block inside of the Group from step #1. There are no particular settings required.

Of course, you should link it to something via the insert-link button in the toolbar. You are presumably selling a product and want folks to click on it.

Step 3: Add Content Group

WordPress post editor with a Group block that houses an Image and another Group block.
Adding a nested Group block.

This should be another simple step. Below the Image block from step #2, add a new Group. This will house the “content” you will add in step #4.

The most crucial setting for this block is to add padding via the block design tools in the sidebar panel. I opted for 2rem to match my theme. Remember that you zeroed out the padding in the outer Group in step #1. Now, you need to add some to keep the content from butting against the side of the container.

Step 4: Add Content

WordPress post editor with a Group block that houses an Image, Heading, and Paragraph.
Adding the sales pitch.

With the Group block in place from step #3, you have a new freeform area to throw in your sales pitch to potential customers. This can be as simple as a Heading followed by a Paragraph or something much more complex. It is probably best to keep it short and on point.

Step 5: Coupon Code Row

WordPress post editor with a Group block that houses an Image, a second Group with content, and a new Row block.
Inserting a Row block for coupon code section.

To highlight the coupon code, add a new Row block below the Group block added in step #3. This allows you to add a section for the code and expiration date in the next step.

Select the “space between items” option for the justification control. This setting pushes each nested block away from the other.

Then, select a custom background color. This should automatically give padding to the Row block. If you opt out of setting a color, you should manually set the padding to match the Group block above it.

Step 6: Add Code and Expiration

WordPress post editor with a Group block that houses an Image, a second Group with content, and a Row with a coupon code.
Custom coupon code and expiration date.

The final step is to add two Paragraph blocks into the Row container. The first should read something like “Coupon: XMAS2022,” and the second should be “Expires: December 31.”

Of course, it is your card, so have fun customizing it.


The wonderful thing about the WordPress block editor is there are so many ways that users can modify the output of a set of blocks like the above. Something as simple as changing the colors can give you an entirely different look. And, by rearranging a block or two, you can craft something uniquely your own.

One of the easiest ways of customizing the coupon code above is by throwing in a few emoji, as shown in the following screenshot:

WordPress post editor with a Group block that houses an Image, a second Group with content, and a Row with a coupon code. Christmas-themed emoji are mixed in.
Emoji variation.

OK. I was having a bit of fun with that. On a more serious note, there are many ways to tinker with the formula and create something new.

It took me only a few moments to merge steps #2 and #4 (skipping step #3) from earlier to create the following:

WordPress post editor with a Group block that houses a Media & Text block with a sales pitch. Below, sits a Row block with a coupon code and expiration date.
Media & Text variation.

That is a Media & Text block in the mix. I will leave you with the challenge of recreating this variation without a complete walkthrough. If you get stuck, don’t miss, How to build Book & Book Review Cards, which will covers Media & Text extensively in the coming weeks.

If You liked this Tutorial, you should checkout Building a Recipe Card with WordPress Block Builder.

Related Posts

Share It

Previous Happy Clients

Can't Figure Out Installing Your Full Website? Need Custom Design Help?

Let Us Help You