Build responsive email newsletter templates. Drag and drop blocks for custom layouts.
Create responsive HTML email newsletter templates
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Welcome to Our Newsletter!</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
.email-container {
max-width: 600px;
margin: 0 auto;
background-color: #ffffff;
}
.header {
background-color: #6366F1;
padding: 40px 20px;
text-align: center;
}
.logo {
max-width: 150px;
height: auto;
margin-bottom: 20px;
}
.header-text {
color: #ffffff;
font-size: 28px;
font-weight: bold;
margin: 0;
}
.content {
padding: 40px 30px;
color: #333333;
line-height: 1.6;
}
.content p {
margin: 0 0 20px 0;
font-size: 16px;
}
.cta-button {
display: inline-block;
padding: 15px 40px;
background-color: #6366F1;
color: #ffffff;
text-decoration: none;
border-radius: 5px;
font-weight: bold;
font-size: 16px;
margin: 20px 0;
}
.cta-container {
text-align: center;
padding: 20px;
}
.divider {
height: 1px;
background-color: #e0e0e0;
margin: 30px 0;
}
.social-links {
text-align: center;
padding: 20px;
}
.social-links a {
display: inline-block;
margin: 0 10px;
}
.social-links img {
width: 32px;
height: 32px;
}
.footer {
background-color: #f4f4f4;
padding: 30px 20px;
text-align: center;
color: #666666;
font-size: 14px;
}
.footer a {
color: #6366F1;
text-decoration: none;
}
@media only screen and (max-width: 600px) {
.content {
padding: 20px;
}
.header-text {
font-size: 24px;
}
}
</style>
</head>
<body>
<div class="email-container">
<!-- Header -->
<div class="header">
<h1 class="header-text">Welcome to Our Newsletter!</h1>
</div>
<!-- Main Content -->
<div class="content">
<p>Thank you for subscribing. We're excited to have you as part of our community.</p>
<div class="cta-container">
<a href="https://example.com" class="cta-button">Get Started</a>
</div>
<div class="divider"></div>
<p style="font-size: 14px; color: #666;">
We hope you enjoy staying connected with us. If you have any questions, feel free to reach out.
</p>
</div>
<!-- Footer -->
<div class="footer">
<p>© 2025 Your Brand. All rights reserved.</p>
<p>
<a href="#">Unsubscribe</a> | <a href="#">View in Browser</a> | <a href="#">Privacy Policy</a>
</p>
</div>
</div>
</body>
</html>📧 Email Client Testing: This template is designed to work across major email clients including Gmail, Outlook, Apple Mail, and mobile devices. Always test your emails before sending to your full list.