Mailer html templates
Here are some common HTML templates used in email marketing:
Simple Email Template
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Simple Email Template</title>
<style>
/* Add some basic styling to make the email look decent */
body {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
}
</style>
</head>
<body>
<h1>Welcome to our email!</h1>
<p>This is a simple email template.</p>
<p>Thank you for subscribing to our newsletter.</p>
<a href="https://example.com">Learn more</a>
</body>
</html>Newsletter Template
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Newsletter Template</title>
<style>
/* Add some basic styling to make the email look decent */
body {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
}
.newsletter-container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #f9f9f9;
border: 1px solid #ddd;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.newsletter-header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
.newsletter-content {
padding: 20px;
}
.newsletter-footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="newsletter-container">
<div class="newsletter-header">
<h2>Our Newsletter</h2>
</div>
<div class="newsletter-content">
<p>This is a sample newsletter.</p>
<p>Stay up-to-date with our latest news and promotions.</p>
<a href="https://example.com">Learn more</a>
</div>
<div class="newsletter-footer">
<p>Best regards, [Your Name]</p>
</div>
</div>
</body>
</html>Promotional Email Template
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Promotional Email Template</title>
<style>
/* Add some basic styling to make the email look decent */
body {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
}
.promotional-email-container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #f9f9f9;
border: 1px solid #ddd;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.promotional-email-header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
.promotional-email-content {
padding: 20px;
}
.promotional-email-footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="promotional-email-container">
<div class="promotional-email-header">
<h2>Exclusive Offer</h2>
</div>
<div class="promotional-email-content">
<p>Get 20% off your next purchase!</p>
<p>Use code PROMO20 at checkout.</p>
<a href="https://example.com">Shop now</a>
</div>
<div class="promotional-email-footer">
<p>Offer valid until [Date].</p>
</div>
</div>
</body>
</html>Transactional Email Template
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Transactional Email Template</title>
<style>
/* Add some basic styling to make the email look decent */
body {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
}
.transactional-email-container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #f9f9f9;
border: 1px solid #ddd;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.transactional-email-header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
.transactional-email-content {
padding: 20px;
}
.transactional-email-footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="transactional-email-container">
<div class="transactional-email-header">
<h2>Order Confirmation</h2>
</div>
<div class="transactional-email-content">
<p>Thank you for your order!</p>
<p>Your order number is #12345.</p>
<p>Track your order here: <a href="https://example.com">https://example.com</a></p>
</div>
<div class="transactional-email-footer">
<p>Best regards, [Your Name]</p>
</div>
</div>
</body>
</html>These are just a few examples of HTML templates used in email marketing. You can customize them to fit your brand's style and messaging. Remember to keep your templates responsive and accessible to ensure they look good on various devices and browsers.