Coupon Sections

Everyone loves a good discount

Note: Coupon sections have been introduced starting with the Marquez Email Template.

Offer discounts for your products or services with several pre-designed coupon sections:

  • Coupon With Background Colour
  • Coupon With Background Image
  • Coupon With Dashed Border
  • Coupon With Image And Border

Coupon With Background Colour

The Coupon With Background Colour has centered text and CTA button, framed with a border and filled with a solid colour.
You can adjust the background color with the bgcolor="" attribute on the parent column table cell, as well as the border colour and style, on the inner column cell.

Example

Coupon 1 - With Background Colour

Coupon With Background Image

Similar to the coupon with background colour, but with an image background instead.
Coded with background image support for almost all clients, including all Outlook versions and Windows 10 Mail.

Example

Coupon 4 - With Background Image

Coupon With Dashed Border

Similar to the coupon with background colour, but with content layed out differently, and a dashed, thick border instead.
On very small devices, the coupon value (numbers) stack vertically.

Example

Coupon 2 - With Dashed Border

Coupon With Image And Border

Two column coupon that provides a compact, stackable-on-mobile layout for when you need to add an image to your offers, but don't want to use the coupon with background image.

Example

Coupon 3 - With Dashed Border

Customisation

You can easily change the looks by changing images, text, spacing, buttons, borders, and backgrounds.

  • Text and buttons can be changed with inline CSS
  • Images — simply change the path to the image, and the alt text. If you want to use a larger image (for example, for retina screens) make sure your image dimensions are proportional to those defined by the template
  • Border — customize the inline CSS on the innermost table column
  • Background image — change the image path in the background="" attribute, and in the src="" of the <v:image /> element, for Outlook 2007 - 2016.
  • Top/bottom spacing — change the value in the height="" attribute, as well as the font-size and line-height CSS values, on the <td class="spacer" ...> near the top and bottom of the section
Warning: there are some caveats with Outlook/Windows 10 Mail background image support. Read about it here.

Next Up: Interactive →