Tampa Tech Wire - News and Technology From Around The Bay                  

Building Coupon Cards with WordPress Block Editor

Facebook
Twitter
LinkedIn
Pinterest
Pocket
WhatsApp
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.

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.

You can read more posts like this at www.loadtoadnetworks.com.

Facebook
Twitter
LinkedIn
Pinterest
Pocket
WhatsApp
Your subscription could not be saved. Please try again.
Thanks for subscribing!

Newsletter

Never miss any important news. Subscribe to our newsletter.

Leave a Reply

Your subscription could not be saved. Please try again.
Thanks for subscribing!

Newsletter

Never miss any important news. Subscribe to our newsletter.

Latest Jobs

Recent News

Popular

Blog Subscriber Form