Skip to content
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
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
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
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
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.
