Uploaded byFab Capodicasa
Email Template Builder - Master Template Wireframe Guide
This document provides a wireframe guide for building email templates with different sections and components. It outlines the top-level sections like header, primary content, secondary content and footer. It then describes various content components that can be used to design these sections, including images, text boxes, call-to-action buttons, quotes, tables and more. The guide provides examples of how these components can be arranged and styled within the email sections. It also includes some business-to-consumer specific sections like product details and cart abandonment.
More Related Content
Similar to Email Template Builder - Master Template Wireframe Guide
Email Template Builder - Master Template Wireframe Guide
- 1. EMAIL TEMPLATE BUILDER MASTERTEMPLATE WIREFRAME GUIDE
- 2. Top Level Email SectionsReview
- 3. 3 TOP LEVEL EMAILSECTIONS REVIEW Content Envelope vs Body Preheader Text Header Primary Content Secondary Content Footer Unsubscribe Link Body Content Content Envelope
- 4.
- 5.
- 6. 6 HEADER Preheader Text Preheader Text PreheaderText Preheader
- 7.
- 8. 8 HEADER Membership Section withImage Image Image Image Image
- 9.
- 10. 10 PRIMARY CONTENT Editable SectionHeading Header Left Align Header Centre Align Header Right Align
- 11. 11 PRIMARY CONTENT Section Spacer Spacersare useful on formatting the layout, separating different sections and making the navigability better. Blank Spacer Alternate Spacer
- 12.
- 13. 13 PRIMARY CONTENT Content Boxwith image and CTA button Image Header CTA CTA Image CTA CTA Header
- 14. 14 PRIMARY CONTENT Event Section1 Header CTA Header Image Details: Date: Time: Venue: RSVP: Map: CTA Header Image Details: Date: Time: Venue: RSVP: Map:
- 15. 15 PRIMARY CONTENT Event Section2 Header HeaderImage CTA Event: Date: Venue: RSVP:
- 16.
- 17. 17 CONTENT COMPONENTS 2 ColumnSingle Table Section Header CTA Header
- 18. 18 PRIMARY CONTENT One ColumnContent Box with CTA Button CTA Header
- 19. 19 PRIMARY CONTENT Featured columnwith CTA button Image CTA
- 20. 20 PRIMARY CONTENT Content Boxwith 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 ColumnContent Box with CTA Header Header CTA CTA CTA CTA
- 22. 22 PRIMARY CONTENT Three ColumnContent Box with CTA CTA CTA CTA CTA CTA CTA Header Header Header
- 23. 23 PRIMARY CONTENT Two ColumnContent Box with image and CTA Image Image Header Header CTA CTA CTA CTA
- 24. 24 PRIMARY CONTENT Three ColumnContent Box with image and CTA CTA CTA CTA CTACTACTA Header Header Header Image Image Image
- 25. 25 PRIMARY CONTENT Two ColumnContent Box with Image Image Header Image Image
- 26. 26 PRIMARY CONTENT Three ColumnContent Box with Image Header Image Image Image
- 27. 27 PRIMARY CONTENT Quote withImage 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 ColumnContent Box with Single Image Header Image Header CTA CTA button can be moved to the right column if needed.
- 29. 29 PRIMARY CONTENT 3 ColumnQuote Header
- 30. 30 PRIMARY CONTENT Call ToAction Buttons CTA CTA CTA CTA CTA CTA CTA
- 31. 31 PRIMARY CONTENT 2 Imageswith Centred Content Image C T A Header Image
- 32. 32 PRIMARY CONTENT Content withCentred Image C T A Header Image C T A Header
- 33. 33 PRIMARY CONTENT Two SideBy Side Advertising Banners Image Image
- 34. 34 PRIMARY CONTENT Three SideBy Side Advertising Banners Image Image Image
- 35. 35 PRIMARY CONTENT Social Icons ImageImage Image Image
- 36. 36 CONTENT COMPONENTS Background Imagewith Editable Text Background Image Header CTA
- 37. 37 CONTENT COMPONENTS Pop outArticle Image
- 38. 38 CONTENT COMPONENTS Bullet PointsSection Image Image Image Image Image
- 39.
- 40.
- 41.
- 42.
- 43. 43 CONTENT COMPONENTS Image withText and CTA (Cart Abandonment) Image Header CTA
- 44. 44 CONTENT COMPONENTS I3 Columnimage with Text and CTA Image Image Image CTA CTACTA
- 45. 45 CONTENT COMPONENTS Divisible Sideby 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 Stackwith Description (Product Details) Image Image Image
- 47. 47 CONTENT COMPONENTS Image SideBy Side with Description (Product Details) Image Image Image
- 48. 48 CONTENT COMPONENTS Big Banner Thisimage section is auto height adjustable – meaning the section height will automatically adjust to match any image size Image
- 49. 49 CONTENT COMPONENTS Two SideBy Side Image Banner Images can be reshuffled for mobile view or simply scaled down Image Image Image Image
- 50. 50 CONTENT COMPONENTS Three SideBy Side Image Banner Images can be reshuffled for mobile view or simply scaled down Image Image Image Image Image Image
- 51.