11 – Voucher/Coupon
- 1 Minute to read
- Print
- DarkLight
11 – Voucher/Coupon
- 1 Minute to read
- Print
- DarkLight
Article summary
Did you find this summary helpful?
Thank you for your feedback
Description
This block has the same features as block 10 but with the added option of including a voucher code or discount code in conjunction with uploading coupon codes to Engage or a single manual generic code. A 50/50 split between image and text with the option to swap the content left or right. Editable image, title, Voucher/Coupon Code, CTA. All these elements also have the option to Hide or Show.
Default block view
Desktop
Mobile
Formatting options
Padding
This refers to the space between the block's content and its border. This can be edited in the Details Tab.
Option | Details | Default |
|---|---|---|
Padding | Top | 10 |
Right | 20 | |
Bottom | 10 | |
Left | 20 |
Hide/Show
Use the toggles to hide or show all the different elements.
Option | Details | Default |
|---|---|---|
Hide/Show | Image | Show |
Title | Show | |
Voucher | Show | |
Validity | Show | |
CTA | Show |
Block Background Color
Used to change the block background color. Only use HEX color values. HTML email only recognizes 6-digit long-hand versions and has patchy support for shorthand versions.
Option | Details | Default |
|---|---|---|
Background Color | Block Background Color | #ffffff |
Image Position
There are multiple alignment options, all of which can be found in the drop-down menu.
Font Weight
Set the weight of each text element independently.
Option | Details | Dropdown | Default |
|---|---|---|---|
Font Weight | Title | Bold/Normal | Bold |
Voucher | Bold | ||
Validity | Bold |
Line Height
Used to change the text line height.
As with all text, please be sure the minimum line height value is not less than 4px higher than the font size. For example, if the font size is 18px, the line height should not exceed 22px.
Option | Details | Default |
|---|---|---|
Line Height | Title | 34 |
Voucher | 18 | |
Validity | 18 |
Manual Offer Code
This is used to manually set an offer code. Enter the code into the code field.
Option | Details | Default |
|---|---|---|
Voucher Offer Code | Voucher Manual Offer Code | Blank |
Dashed Border Color
The dashed border color can be changed, but please be sure to use a 6-digit HEX value.
Option | Details | Default |
|---|---|---|
Voucher Border Color | Voucher Dashed Border Color | #000000 |
Manual Offer Code Validity
Enter some text to inform recipients of when the code or voucher is due to expire.
Option | Details | Default |
|---|---|---|
Offer Validity | Manual Offer Code Validity | Blank |
CTA
It allows you to format the CTA button as required. Details are below. It takes the color's hexacode as the value to change the color wherever applicable.
Option | Details | Default |
|---|---|---|
CTA | Background Color | #e71825 |
Text Color | #ffffff | |
Font weight | Bold | |
Border radius | 6 | |
Border width | 1 | |
Border Color | #e71825 | |
Height | 52 |
Links
Add links to the image and CTA.
Option | Details | Default |
|---|---|---|
Links | Image | Blank |
CTA | https://www.example.com |
Mobile Header Font Size
The mobile font size can be set using the Advanced Tab.
Option | Details | Default |
|---|---|---|
Font Size | Mobile Header Font Size | 24 |
Compatibility
Currently, the CTA button curved border does not render in the devices listed below. Instead, the corners will be square.
GMX Chrome Windows 10
GMX Edge Windows 10
GMX Firefox Windows 10
Web.de Chrome Windows 10
Web.de Edge Windows 10
Web.de Firefox Windows 10
Was this article helpful?