How to Create Coupon Cards with WordPress Blocks – WP Tavern
Last year, I designed several templates to showcase discount codes on a site. They were part of a larger thematic project that I never completed. However, I had a lot of fun playing with the variations. Not liking them to fade on my laptop hard drive, I thought I’d share them with the Tavern audience.
The basic coupon card looks like this:
When I designed this and the others I had Christmas in mind (if that wasn’t obvious from the screenshot). Of course, I always think of the holidays, usually starting my shopping at least in July each year.
Besides the image, I intentionally left most of the design generic so it could be easily applied to other holidays and events.
This tutorial in the Building with Blocks series will walk you through every step of creating custom coupon cards from the editor. I’ll also share some variation ideas at the end.
Step 1: Add a group block
As with most templates, you need to start with a container-like block. For the coupon card, start by inserting a group. You are free to customize this as you wish. However, to use the same layout in the tutorial, you must at least set the block padding to
0px and block spacing option for
0px. These need to be zeroed 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 dotted border and a
8px border radius. Each of these design tools is available in the Block Inspector in the sidebar panel. Play around with the colors and other settings until you find something you like.
Step 2: Add an image
This step is simple. Insert an Image block inside the group from step 1. No particular setting is required.
Of course, you have to link it to something via the insert link button in the toolbar. You’re probably selling a product and you want people to click on it.
Step 3: Add a content group
This should be another simple step. Under 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 adding padding through 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 contents from butting against the side of the container.
Step 4: Add content
With the Group block in place from Step 3, you have a new free-form area to present your sales pitch to potential customers. It can be as simple as a title followed by a paragraph or something much more complex. It’s probably best to keep it short and to the point.
Step 5: Coupon Code Line
To highlight the coupon code, add a new Line 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 parameter separates each nested block from the other.
Next, select a custom background color. This should automatically give padding to the Row block. If you refuse to set a color, you must manually set the padding to match the Group block above.
Step 6: Add code and expiration
The final step is to add two Paragraph Blocks to the Line container. The first should read something like “Coupon: XMAS2022” and the second should be “Expire: December 31”.
Of course, it’s your card, so have fun customizing it.
The wonderful thing about the WordPress block editor is that there are many ways for users to edit the output of a set of blocks like above. Something as simple as changing the colors can give you a completely different look. And, by rearranging a block or two, you can create something uniquely yours.
One of the easiest ways to customize the coupon code above is to add some emoji as shown in the following screenshot:
OKAY. I had a little fun with it. More seriously, there are many ways to modify the formula and create something new.
It only took me a few moments to merge steps 2 and 4 (skipping step 3) above to create the following:
It’s a Media & Text block in the mix. I leave it up to you to recreate this variation without a full walkthrough. If you get stuck, check out my previous tutorial, which covers media and text in detail.