Email Template Builder - Master Template Wireframe Guide

1. EMAIL TEMPLATE BUILDER
MASTER TEMPLATE WIREFRAME GUIDE

2. Top Level
Email Sections Review

3. 3
TOP LEVEL EMAIL SECTIONS REVIEW
Content Envelope vs Body
Preheader Text
Header
Primary Content
Secondary Content
Footer
Unsubscribe Link
Body Content
Content Envelope

4. Wireframe
Components

5. Header
Content

6. 6
HEADER
Preheader Text
Preheader Text
Preheader Text
Preheader

7. 7
HEADER
Navigation
Nav Bar

8. 8
HEADER
Membership Section with Image
Image
Image
Image
Image

9. Primary
Content

10. 10
PRIMARY CONTENT
Editable Section Heading
Header Left Align
Header Centre Align
Header Right Align

11. 11
PRIMARY CONTENT
Section Spacer
Spacers are useful on formatting the layout, separating different sections and making
the navigability better.
Blank Spacer
Alternate Spacer

12. 12
PRIMARY CONTENT
Hero Image
Single Image

13. 13
PRIMARY CONTENT
Content Box with image and CTA button
Image
Header
CTA CTA
Image
CTA CTA
Header

14. 14
PRIMARY CONTENT
Event Section 1
Header
CTA
Header
Image
Details:
Date:
Time:
Venue:
RSVP:
Map:
CTA
Header
Image
Details:
Date:
Time:
Venue:
RSVP:
Map:

15. 15
PRIMARY CONTENT
Event Section 2
Header
HeaderImage
CTA
Event:
Date:
Venue:
RSVP:

16. 16
CONTENT COMPONENTS
Table Section
Header

17. 17
CONTENT COMPONENTS
2 Column Single Table Section
Header
CTA
Header

18. 18
PRIMARY CONTENT
One Column Content Box with CTA Button
CTA
Header

19. 19
PRIMARY CONTENT
Featured column with CTA button
Image
CTA

20. 20
PRIMARY CONTENT
Content Box with Image
2 CTA buttons can also be
placed side by side. CTA
can be removed for
flexibility.
Image can be a separate
section.
CTA CTA
Image

21. 21
SECONDARY CONTENT
Two Column Content Box with CTA
Header Header
CTA
CTA
CTA
CTA

22. 22
PRIMARY CONTENT
Three Column Content Box with CTA
CTA
CTA
CTA
CTA
CTA
CTA
Header Header Header

23. 23
PRIMARY CONTENT
Two Column Content Box with image and CTA
Image Image
Header Header
CTA
CTA
CTA
CTA

24. 24
PRIMARY CONTENT
Three Column Content Box with image and CTA
CTA CTA CTA
CTACTACTA
Header Header Header
Image Image Image

25. 25
PRIMARY CONTENT
Two Column Content Box with Image
Image
Header
Image Image

26. 26
PRIMARY CONTENT
Three Column Content Box with Image
Header
Image Image Image

27. 27
PRIMARY CONTENT
Quote with Image with/without CTA
Different from the
columns, this section is
used for brief text.
Perfect for testimonials
“
”
Image
Header
CTA CTA
“
”
Image
Header
CTA CTA

28. 28
PRIMARY CONTENT
Two Column Content Box with Single Image
Header
Image
Header
CTA
CTA button can be moved
to the right column if
needed.

29. 29
PRIMARY CONTENT
3 Column Quote
Header

30. 30
PRIMARY CONTENT
Call To Action Buttons
CTA
CTA
CTA CTA CTA
CTA CTA

31. 31
PRIMARY CONTENT
2 Images with Centred Content
Image
C
T
A
Header
Image

32. 32
PRIMARY CONTENT
Content with Centred Image
C
T
A
Header
Image
C
T
A
Header

33. 33
PRIMARY CONTENT
Two Side By Side Advertising Banners
Image Image

34. 34
PRIMARY CONTENT
Three Side By Side Advertising Banners
Image Image Image

35. 35
PRIMARY CONTENT
Social Icons
Image Image Image Image

36. 36
CONTENT COMPONENTS
Background Image with Editable Text
Background Image
Header
CTA

37. 37
CONTENT COMPONENTS
Pop out Article
Image

38. 38
CONTENT COMPONENTS
Bullet Points Section
Image Image
Image
Image
Image

39. Footer
Content

40. 40
FOOTER
Navigation
Image
Header Header Header

41. 41
FOOTER
Legal
Footer

42. B2C
Specific Sections

43. 43
CONTENT COMPONENTS
Image with Text and CTA (Cart Abandonment)
Image
Header
CTA

44. 44
CONTENT COMPONENTS
I3 Column image with Text and CTA
Image Image Image
CTA CTACTA

45. 45
CONTENT COMPONENTS
Divisible Side by Side Images with Description
(Product Details)
Can be divided into 3 separate sections for
flexibility.
4 columns will become 2 columns in mobile.
This could also be 2 or 3 columns.
Image Image Image Image

46. 46
CONTENT COMPONENTS
Image Stack with Description (Product Details)
Image
Image
Image

47. 47
CONTENT COMPONENTS
Image Side By Side with Description (Product
Details)
Image Image Image

48. 48
CONTENT COMPONENTS
Big Banner
This image section is auto height
adjustable – meaning the section
height will automatically adjust to
match any image size
Image

49. 49
CONTENT COMPONENTS
Two Side By Side Image Banner
Images can be reshuffled for
mobile view or simply
scaled down
Image Image
Image
Image

50. 50
CONTENT COMPONENTS
Three Side By Side Image Banner
Images can be reshuffled for
mobile view or simply
scaled down
Image Image Image
Image
Image
Image

51. 51