ETB - Template Wireframe Guide

1. 1
MARKETO MASTER EMAIL TEMPLATES
WIREFRAME GUIDE

2. Wireframes & Examples
Master Email Template Sections

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
Sections & Examples

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. 9
PRIMARY CONTENT
Social Icons
Image Image Image Image
Image Image Image Image
Image Image Image Image

10. Primary Content
Sections & Examples

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

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

13. 13
PRIMARY CONTENT
Hero Image
Single Image

14. 14
PRIMARY CONTENT
Content Box with CTA Button
CTA
Header

15. 15
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

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

17. 17
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

18. 18
PRIMARY CONTENT
3 Column Quote
Header

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

20. 20
PRIMARY CONTENT
Bullet Points Section
Image Image
Image
Image
Image

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

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

23. 23
CONTENT COMPONENTS
Table Section
Header
Header

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

25. 25
CONTENT COMPONENTS
Event Section 1
Header
CTA
Event:
Date:
Venue:
RSVP:

26. 26
CONTENT COMPONENTS
Event Section 2
Header
CTA
Header
Image
Details:
Date:
Time:
Venue:
RSVP:
Map:
CTA
Header
Image
Details:
Date:
Time:
Venue:
RSVP:
Map:

27. 27
CONTENT COMPONENTS
Event Section 3
ImageImage Image
Header

28. 28
CONTENT COMPONENTS
Event Section 4
Header
Image Image Image

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

30. 30
CONTENT COMPONENTS
Two Column Content Box with CTA
Header Header
CTA
CTA
CTA
CTA

31. 31
CONTENT COMPONENTS
Three Column Content Box with CTA
CTA
CTA
CTA
CTA
CTA
CTA
Header Header Header

32. 32
CONTENT COMPONENTS
Two Column Content Box with image and CTA
Image Image
Header Header
CTA
CTA
CTA
CTA

33. 33
CONTENT COMPONENTS
Three Column Content Box with image and CTA
CTA CTA CTA
CTACTACTA
Header Header Header
Image Image Image

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

35. 35
CONTENT COMPONENTS
2 Images with Centred Content
Image
Header
Image

36. 36
CONTENT COMPONENTS
Content with Centred Image
Header
Image
Header

37. 37
CONTENT COMPONENTS
Pop out Article
Image

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

39. Footer Content
Sections & Examples

40. 40
FOOTER
Navigation
Image
Header Header Header

41. 41
FOOTER
Legal

42. B2C
Specialized Sections & Examples

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