HTML Email Newsletter Templates
These free HTML email newsletters templates offer layout and design ideas, along with the HTML code that you can customise as you wish!
The templates were designed with the following in mind:
- Responsive design - All templates collapse columns properly on mobile devices
- Dark mode support - Templates adapt when users have dark mode enabled
- Clean, modern design - Bright accent colors with white backgrounds for readability
- Image placeholders - Commented code for easy customization
- Variety of layouts - Different structures to suit various business needs
The templates are ready to use - simply replace the placeholder content with your own text and images, and adjust colors as needed to match your brand.
About the "HTML Code"
Clicking on HTML Code opens the respective template in a .txt file containing the HTML source code. You can copy and paste the HTML code into your email platform or editor as you wish. You can then customize as required. You can also download the .txt file if you wish.
About the "MJML Code"
Clicking on MJML Code opens the respective template in a .txt file containing the MJML source code. MJML (Mailjet Markup Language) is a markup language designed specifically for creating responsive email templates. It simplifies the complex process of coding HTML emails by providing semantic components that automatically generate cross-client compatible HTML and CSS.
Key Features of MJML
MJML uses intuitive component names like <mj-button>, <mj-text>, <mj-image>, and <mj-column> instead of complex HTML table structures. These components automatically handle the intricate CSS and HTML needed to ensure emails render consistently across different email clients like Outlook, Gmail, and Apple Mail.
The framework follows a nested structure where <mjml> is the root element, containing <mj-head> for metadata and <mj-body> for content. Within the body, you use <mj-section> for rows and <mj-column> for layout columns.
Sending Emails with MJML Templates
To send emails using MJML templates, you typically follow this process:
- Compile the Template: First, convert your MJML code to HTML using an MJML compiler. This can be done through the online MJML editor, CLI tool, or programmatically using the MJML API or npm package.
- Integrate with Email Service: Use the compiled HTML with your preferred email service provider like SendGrid, Amazon SES, or Nodemailer. Most services accept HTML content directly in their API calls.
- Dynamic Content: For personalized emails, you can either pre-process your MJML template with variables before compilation, or inject dynamic content into the compiled HTML before sending.
For example, you might compile an MJML template to HTML, then use an email service's API to send it with recipient-specific data. Many developers integrate this into their applications by storing MJML templates, compiling them when needed, and sending through their chosen email provider's infrastructure.
The main advantage is that you write clean, semantic markup once in MJML, and it handles all the complex email client compatibility issues automatically.
For more information, see the MJML website.