How to Design an Amazing Black Friday Banner with YayMail Blocks

How to Design an Amazing Black Friday Banner with YayMail Blocks

Hi everyone, I had so much fun designing several patterns for showcasing a Black Friday banner in our newsletters and websites. As a YayMail user, you can also create these seasonal banners and play around with the design variations for your own WooCommerce online store. 

Today, I would like to show you how to create a Black Friday banner in the WooCommerce email template with YayMail Blocks.

Black Friday banner preview in WooCommerce

Below you will find the basic steps to create custom email blocks from the YayMail Pro editor. I will also share a couple of ideas for Christmas variations at the end.

Step 1: Add a YayMail block

YayMail Pro comes with a predesigned block to allow you to build a custom Black Friday banner. It has custom background, content, and button.

As with most YayMail blocks, you can drag and drop the block onto the template to create a container. In this tutorial, I’m adding a YayMail block to a Recover Abandoned Cart email template.

Adding new blocks to new recover abandoned cart email template

You are free to customize this however you want. However, to make sure the outcome looks good, you should at least prepare a wide rectangle image as a background and have in mind the desired alignment for this banner.

Step 2: Add text content

This step is straightforward. In the sidebar panel, you will see a rich format text editor to allow you to insert custom text inside of the container from step #1. 

Adding sales pitch text content

Of course, you can add multiple lines of text with different colors, sizes, and other format options. Even using emojis! There are many ways to spice it up and create something new!

I want my Black Friday block to have a dark background color, so the text would be white. Therefore, adding the text in this step makes it appear in black as default, which makes it easier for me to edit it at the beginning. Later on, I would need to change the text to a lighter color.

Step 3: Display background image and button

Then, I checked the display options to show the background image and button. Each of these options in the sidebar panel shows live changes on the email template.

Add background image and button

Likewise, when you change the button color and content, you will see its preview right away. 

Step 4: Add more tweaks

The most crucial setting for this step is to add personalized content via the shortcodes in the text editor. So feel free to have a little fun with colors and other settings until you find something that matches your shop.

Black Friday additional tweaks in email templates

Remember that you should keep the heading content short and make a line break to prevent it from butting against the side of the container, especially when your customer is viewing the email on mobile devices.

Step 4: Add more blocks

With a variety of blocks built in YayMail Pro, you have an easy way to throw in your sales pitch to potential customers.

This can be as simple as an Email Heading followed by an Image Box, or something much more complex like a multiple-column Related Products block.

Below you will find how to dynamically embed a wide range of products into the email templates with bespoke design.

Anyway, it’s best to keep the titles short, on point, and above each custom block.

Wrapping up: Extra variations

Of course, it is your online shop banner, so have fun customizing it.

The wonderful thing about the YayMail blocks is that users can modify the output of a set of blocks like the above. 

A minor tweak as changing the color can give it an entirely different look. Like, changing the background colors or images to something red or brandy would definitely bring a Christmas atmosphere to your WooCommerce email templates.

And, you can craft something uniquely your own just by combining two or more blocks altogether.

If you get stuck or want to achieve more advanced banners, check out these WooCommerce tutorials by YayCommerce team:

Thuy Nguyen
Thuy Nguyen

Thuy Nguyen is an online marketeer and professional blogger. When not creating content for YayCommerce, she can most often be found at some cafés in town, reading Graphic Guides, or enjoying a good laugh with The Big Bang Theory.

Related Posts