Photo Band Welcome email template
A welcome email for a home office store with a teal wordmark, a laptop photo band with white caps text, a 20% sign-up code, an activate button and social links.
Light shows the email as designed. Dark and Gmail show how email apps can change its colors.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="x-apple-disable-message-reformatting">
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>Photo Band Welcome</title>
<!--[if gte mso 9]><xml><o:OfficeDocumentSettings><o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]-->
<style>
:root{color-scheme:light dark;supported-color-schemes:light dark;}
body{margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
table,td{mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;}
img{border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;}
a[x-apple-data-detectors]{color:inherit!important;text-decoration:none!important;font-size:inherit!important;font-family:inherit!important;font-weight:inherit!important;line-height:inherit!important;}
u + .ete-body a{color:inherit;text-decoration:none;}
@media only screen and (max-width:620px){
.ete-container{width:100%!important;max-width:100%!important;}
.ete-outer{padding:0!important;}
.ete-content{border-radius:0!important;}
.ete-px{padding-left:20px!important;padding-right:20px!important;}
.ete-stack{display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box;padding-left:0!important;padding-right:0!important;}
.ete-stack-gap{padding-bottom:20px!important;}
.ete-fluid{width:100%!important;max-width:100%!important;height:auto!important;}
.ete-fluid-cap{width:100%!important;max-width:280px!important;height:auto!important;display:block!important;margin-left:auto!important;margin-right:auto!important;}
.ete-stack-center,.ete-stack-center p{text-align:center!important;}
.ete-h1{font-size:28px!important;line-height:34px!important;}
.ete-h2{font-size:22px!important;line-height:28px!important;}
.ete-code{font-size:24px!important;letter-spacing:2px!important;}
.ete-btn-full{display:block!important;width:100%!important;box-sizing:border-box;}
.ete-ds-32{font-size:28px!important;line-height:31px!important;}
.ete-ds-24{font-size:28px!important;line-height:31px!important;}
}
@media (prefers-color-scheme: dark){
.ete-body,.ete-bg{background-color:#111414!important;}
.ete-content{background-color:#171b1b!important;}
.ete-text{color:#c9cfce!important;}
.ete-heading{color:#f1f5f4!important;}
.ete-muted{color:#9aa3a1!important;}
.ete-link{color:#5fd8c9!important;}
.ete-border{border-color:#3a4241!important;}
.ete-panel{background-color:#1d2222!important;border-color:#3a4241!important;}
.ete-btn{background-color:#3cc7b6!important;border-color:#3cc7b6!important;}
.ete-btn-text{color:#062421!important;}
.ete-btn-outline{border-color:#3cc7b6!important;}
.ete-btn-outline-text{color:#3cc7b6!important;}
.ete-logo-light{display:none!important;}
.ete-logo-dark{display:block!important;max-height:none!important;overflow:visible!important;}
}
[data-ogsc] .ete-text{color:#c9cfce!important;}
[data-ogsc] .ete-heading{color:#f1f5f4!important;}
[data-ogsc] .ete-muted{color:#9aa3a1!important;}
[data-ogsc] .ete-link{color:#5fd8c9!important;}
[data-ogsb] .ete-body,[data-ogsb] .ete-bg{background-color:#111414!important;}
[data-ogsb] .ete-content{background-color:#171b1b!important;}
[data-ogsb] .ete-panel{background-color:#1d2222!important;border-color:#3a4241!important;}
body,table,td,th,p,a,span,div,li{mso-ascii-font-family:Arial;mso-hansi-font-family:Arial;mso-bidi-font-family:Arial;}
h1,h2,h3,.ete-hf{mso-ascii-font-family:Arial;mso-hansi-font-family:Arial;mso-bidi-font-family:Arial;}
.ete-f-dm-sans{mso-ascii-font-family:Arial;mso-hansi-font-family:Arial;mso-bidi-font-family:Arial;}
</style>
<!--[if !mso]><!--><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap"><!--<![endif]-->
</head>
<body class="ete-body" style="margin:0;padding:0;width:100%;background-color:#ffffff;">
<!-- Made with emailtemplateexamples.com -->
<div class="ete-preheader" style="display:none;font-size:1px;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;mso-hide:all;">Thanks for signing up. Your 20% code is inside, plus one click to activate your account. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ </div>
<table role="presentation" class="ete-bg" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;background-color:#ffffff;">
<tr><td align="center" class="ete-outer" style="padding:24px 12px;">
<!--[if mso]><table role="presentation" width="600" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<table role="presentation" class="ete-container" width="600" cellpadding="0" cellspacing="0" border="0" style="width:100%;max-width:600px;margin:0 auto;">
<tr><td class="ete-content" style="background-color:#ffffff;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;">
<tr><td align="left" class="ete-px" style="padding:28px 32px 20px;"><a href="https://example.com/" style="text-decoration:none;color:#138a7e;"><span class="" style="font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:22px;line-height:28px;font-weight:700;letter-spacing:2px;color:#138a7e;">DESKHAVEN</span></a></td></tr>
<tr><td class="ete-px" style="padding:0px 32px;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="" style="border-top:3px solid #2bb3a3;font-size:0;line-height:0;"> </td></tr></table></td></tr>
<tr><td bgcolor="#2a2a2a" background="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/photo-band-welcome-hero.jpg" valign="top" style="background-color:#2a2a2a;background-image:url('https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/photo-band-welcome-hero.jpg');background-position:center center;background-size:cover;background-repeat:no-repeat;"><!--[if gte mso 9]><v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:320px;"><v:fill type="frame" src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/photo-band-welcome-hero.jpg" color="#2a2a2a" /><v:textbox inset="0,0,0,0"><![endif]--><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-px" valign="middle" align="left" height="320" style="height:320px;padding:48px 6.67%;mso-padding-alt:48px 40px;text-align:left;background-color:rgba(0,0,0,0.45);"><h1 class="ete-ds-32" style="margin:0;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:32px;line-height:38px;font-weight:700;color:#ffffff;text-align:left;mso-line-height-rule:exactly;text-transform:uppercase;letter-spacing:0.5px;">Welcome to Deskhaven!</h1><p style="margin:0;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:17px;line-height:27px;color:#ffffff;padding-top:16px;text-align:left;">We hope you love working from home as much as we do.</p></td></tr></table><!--[if gte mso 9]></v:textbox></v:rect><![endif]--></td></tr>
<tr><td class="ete-px" style="padding:24px 32px 8px;"><h2 class="ete-ds-24" style="margin:0;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:24px;line-height:29px;font-weight:700;color:#1a9e90;text-align:center;mso-line-height-rule:exactly;">Here's 20% off for signing up</h2></td></tr>
<tr><td class="ete-px" style="padding:16px 32px;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td align="center" class="ete-panel" style="padding:24px 20px;background-color:#ffffff;border:2px dashed #bdbdbd;border-radius:0px;text-align:center;"><p class="ete-muted" style="margin:0;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;line-height:16px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#7d7d7d;">Code</p><p class="ete-code ete-heading" style="margin:0;padding-top:8px;font-family:'Courier New',Courier,monospace;font-size:30px;line-height:38px;font-weight:700;letter-spacing:4px;color:#2b2b2b;">HOME20</p></td></tr></table></td></tr>
<tr><td class="ete-px" style="padding:16px 32px;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-border" style="border-top:1px solid #bdbdbd;font-size:0;line-height:0;"> </td></tr></table></td></tr>
<tr><td class="ete-px" style="padding:8px 32px;"><p class="ete-text" style="margin:0;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:24px;color:#4d4d4d;text-align:left;">We're glad you joined. One click activates your account and keeps your code ready at checkout.</p></td></tr>
<tr><td align="left" class="ete-px" style="padding:16px 32px;"><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td align="center"><!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://example.com/activate" style="height:48px;v-text-anchor:middle;width:172px;" arcsize="0%" strokecolor="#138a7e" fillcolor="#138a7e"><w:anchorlock/><center style="color:#ffffff;font-family:Arial,sans-serif;font-size:16px;font-weight:bold;">Activate now</center></v:roundrect><![endif]--><!--[if !mso]><!--><a class="ete-btn" href="https://example.com/activate" style="display:inline-block;background-color:#138a7e;border:1px solid #138a7e;line-height:48px;border-radius:0px;color:#ffffff;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;font-weight:700;text-align:center;text-decoration:none;padding:0 28px;-webkit-text-size-adjust:none;mso-hide:all;"><span class="ete-btn-text" style="color:#ffffff;">Activate now</span></a><!--<![endif]--></td></tr></table></td></tr>
<tr><td height="24" style="height:24px;font-size:0;line-height:0;mso-line-height-rule:exactly;"> </td></tr>
<tr><td align="center" class="ete-px" bgcolor="#c9c9c9" style="background-color:#c9c9c9;padding:16px 32px;"><a href="https://example.com/instagram" style="display:inline-block;margin:4px;padding:6px 14px;border:1px solid #bdbdbd;border-radius:999px;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:18px;font-weight:700;color:#2b2b2b;text-decoration:none;">Instagram</a><a href="https://example.com/pinterest" style="display:inline-block;margin:4px;padding:6px 14px;border:1px solid #bdbdbd;border-radius:999px;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:18px;font-weight:700;color:#2b2b2b;text-decoration:none;">Pinterest</a></td></tr>
<tr><td align="center" class="ete-px" bgcolor="#c9c9c9" style="background-color:#c9c9c9;padding:28px 32px 32px;"><p style="margin:0;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:21px;color:#3a3a3a;line-height:20px;text-align:center;"><strong>Deskhaven</strong><br>77 Mill Street, Toronto, ON M5A 3C4</p><p style="margin:0;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:21px;color:#3a3a3a;line-height:20px;text-align:center;padding-top:10px;"><a href="{{unsubscribe_url}}" style="color:#3a3a3a;text-decoration:underline;">Unsubscribe</a></p></td></tr>
</table>
</td></tr>
<tr><td align="center" class="ete-muted" style="padding:20px 12px 0;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;line-height:18px;color:#7d7d7d;">Made with <a class="ete-link" href="https://emailtemplateexamples.com/" style="color:#7d7d7d;text-decoration:underline;">Email Template Examples</a></td></tr>
</table>
<!--[if mso]></td></tr></table><![endif]-->
</td></tr>
</table>
</body>
</html>
Adapted from sendwithus templates (Skyline theme, welcome) by Techdrop Labs Inc. (sendwithus), Apache-2.0 license.
About this template
A welcome email for an online store that sells desks, chairs and small things for working from home. It greets new subscribers, hands over a sign-up discount and asks them to activate their account, all in one short scroll.
A teal wordmark and a thin teal line open the email. The hero is a photo of hands on a laptop with a dark tint and white capital letters on top, so the welcome reads clearly over the image. Below it a teal line of text announces the discount and a simple bordered box shows the code.
A thin rule separates the offer from a short note and a teal activate button. A grey band at the end holds the social links and the footer with the address and the unsubscribe link.
The layout follows a classic open source welcome template. Change the photo to your own product in use, keep the discount line to one sentence and match the teal to your brand color.
Use it in your email tool
- Click Copy HTML, or download the .html file.
- In Mailchimp, Brevo, HubSpot or Klaviyo, start a new email with the custom HTML or code editor and paste it in.
- Change the text, links and images. Map merge tags such as {{first_name}} and {{unsubscribe_url}} to the tags of your tool.
- Send a test to yourself on desktop and phone before you send it to your list.
Sections in this email
- Teal wordmark and line
- Photo band with welcome text
- Discount line and code
- Note and activate button
- Social links band
- Footer
Subject line ideas
- Welcome to Deskhaven, here's 20% off
- Your sign-up code is inside
- {{first_name}}, one click to activate your account
Preview text idea
Thanks for signing up. Your 20% code is inside, plus one click to activate your account.