Secret Snippets For HTML Email Template Design
A collection of VS Code snippets to streamline HTML email template development.
Overview
This extension provides a comprehensive set of snippets for creating responsive HTML email templates that work across different email clients. These snippets follow email development best practices and include various layout options, components, and utilities.
Installation
- Open VS Code
- Go to Extensions (Ctrl+Shift+X)
- Search for "Secret Snippets For HTML Email Template"
- Install and reload VS Code
Available Snippets
Prefix |
Description |
Details |
ET-boilerplate |
Base email template |
Includes DOCTYPE, meta tags, and basic structure |
ET-css |
CSS reset |
Complete CSS reset with dark mode support |
ET-img |
Image block |
Bulletproof image template with alt text |
ET-button |
Button block |
Mobile-friendly button with customizable styles |
ET-content |
Content block |
Container for email content |
ET-row |
Row block |
Table row structure |
ET-space |
Spacing block |
Vertical spacing with configurable height |
ET-mspace |
Mobile spacing |
Mobile-only vertical spacing |
ET-mobileblock |
Mobile-only block |
Content visible only on mobile devices |
Responsive Layouts
Prefix |
Description |
ET-rcol1 |
Single column responsive layout |
ET-rcol2 |
Two column responsive layout |
ET-rcol3 |
Three column responsive layout |
ET-rcol4 |
Four column responsive layout |
ET-rcol5 |
Five column responsive layout |
Fluid Layouts
Prefix |
Description |
ET-fcol1 |
Single column fluid layout |
ET-fcol2 |
Two column fluid layout |
ET-fcol3 |
Three column fluid layout |
ET-fcol4 |
Four column fluid layout |
ET-fcol5 |
Five column fluid layout |
Hybrid Layouts
Prefix |
Description |
ET-hcol1 |
Single column hybrid layout |
ET-hcol2 |
Two column hybrid layout |
ET-hcol3 |
Three column hybrid layout |
Special Components
Prefix |
Description |
ET-BGHero |
Background hero image section |
ET-BGMobile |
Different backgrounds for mobile/desktop |
ET-preheader |
Hidden preview text |
ET-social |
Social media icons |
ET-footer |
Standard footer with copyright |
ET-unsubscribe |
Unsubscribe section |
Usage
- Create a new HTML file
- Type
ET-
to see all available snippets
- Select the desired snippet
- Use Tab to navigate through the customizable fields
Features
- Mobile-responsive layouts
- Dark mode support
- Cross-client compatible
- MSO conditional comments for Outlook
- Fluid and hybrid layout options
- Bulletproof components
- Add preheader text for email previews
- Implement dark mode support
- Ensure mobile responsiveness
- Include unsubscribe options
Best Practices
- Always test emails across different email clients
- Use tables for layout structure
- Include proper alt text for images
- Maintain a maximum width of 600-640px
- Use inline CSS for better compatibility
🎓 Master Freelancing on Fiverr!
Join my comprehensive course: "Fiverr: Get Your First Order (Bangla Advanced Course)"
Transform your freelancing journey with my detailed 5+ hour course (28 videos) that takes you from beginner to landing your first client on Fiverr!
💡 What Makes This Course Special:
- Proven strategies to stand out in the Fiverr marketplace
- Secret methods for accelerating your success (exclusive content!)
- Access to private Telegram group for networking and support
- Direct interaction with me and other successful learners
- No fluff - straight to the important content!
By enrolling, you're not just getting a course - you're joining a community of successful freelancers and getting access to proven strategies that work!
☕ Your support fuels the creation of more valuable content that helps transform freelancing dreams into reality!
Want to transform your freelancing career? Contact me on WhatsApp to enroll or learn more:
WhatsApp: 01754752096
Support
For issues, suggestions, or contributions, please visit our GitHub repository.
License
MIT License - feel free to use in personal and commercial projects.
Author
Created by Akon M Hasib