Agency Studio Welcome email template
A welcome email for a web agency: video hero, three services, a strategy panel, a project grid, studio facts, blog posts, the team and a deep blue call to action.
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>Agency Studio 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-cell{padding-left:0!important;padding-right:0!important;}
.ete-nav-cell{padding-top:12px!important;}.ete-nav-cell p{text-align:center!important;}
.ete-video-350{height:195px!important;}
.ete-ds-34{font-size:28px!important;line-height:31px!important;}
.ete-ds-28{font-size:28px!important;line-height:31px!important;}
.ete-icon-cell{padding-left:2px!important;padding-right:2px!important;}
.ete-icon-wrap{min-width:0!important;}
.ete-split-text{padding:32px 20px 36px!important;}
.ete-ds-26{font-size:28px!important;line-height:31px!important;}
.ete-ds-40{font-size:28px!important;line-height:31px!important;}
.ete-stat-82{min-width:82px!important;}
.ete-ds-30{font-size:28px!important;line-height:31px!important;}
}
@media (prefers-color-scheme: dark){
.ete-body,.ete-bg{background-color:#0d0d12!important;}
.ete-content{background-color:#16161d!important;}
.ete-text{color:#c4c4cc!important;}
.ete-heading{color:#ffffff!important;}
.ete-muted{color:#9a9aa6!important;}
.ete-link{color:#9b9aff!important;}
.ete-border{border-color:#2c2c38!important;}
.ete-panel{background-color:#1e1e27!important;border-color:#2c2c38!important;}
.ete-btn{background-color:#5a59ff!important;border-color:#5a59ff!important;}
.ete-btn-text{color:#ffffff!important;}
.ete-btn-outline{border-color:#5a59ff!important;}
.ete-btn-outline-text{color:#5a59ff!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:#c4c4cc!important;}
[data-ogsc] .ete-heading{color:#ffffff!important;}
[data-ogsc] .ete-muted{color:#9a9aa6!important;}
[data-ogsc] .ete-link{color:#9b9aff!important;}
[data-ogsb] .ete-body,[data-ogsb] .ete-bg{background-color:#0d0d12!important;}
[data-ogsb] .ete-content{background-color:#16161d!important;}
[data-ogsb] .ete-panel{background-color:#1e1e27!important;border-color:#2c2c38!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-poppins{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=Poppins:wght@400;600;700;800&display=swap"><!--<![endif]-->
</head>
<body class="ete-body" style="margin:0;padding:0;width:100%;background-color:#f1f1f1;">
<!-- 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;">A short film, our services, recent work and the people you will talk to. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ </div>
<table role="presentation" class="ete-bg" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;background-color:#f1f1f1;">
<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 class="ete-px" style="padding:24px 32px 20px;"><div style="font-size:0;text-align:left;"><!--[if mso]><table role="presentation" width="536" cellpadding="0" cellspacing="0" border="0"><tr><td width="128" valign="middle"><![endif]--><div class="ete-stack ete-stack-center" style="display:inline-block;vertical-align:middle;min-width:23.88%;max-width:100%;width:23.88%;width:calc((429px - 100%) * 429);font-size:16px;text-align:left;"><a href="https://example.com/" style="text-decoration:none;color:#000000;"><span class="ete-heading ete-f-poppins" style="font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:20px;line-height:25px;font-weight:700;letter-spacing:1px;color:#000000;">BRICKYARD</span></a></div><!--[if mso]></td><td width="408" valign="middle"><![endif]--><div class="ete-stack ete-stack-center ete-nav-cell" style="display:inline-block;vertical-align:middle;min-width:76.11%;max-width:100%;width:76.11%;width:calc((429px - 100%) * 429);font-size:16px;text-align:right;"><p style="margin:0;text-align:right;"><a class="ete-heading" href="https://example.com/" style="display:inline-block;padding:4px 10px;font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:20px;font-weight:700;color:#000000;text-decoration:none;text-transform:uppercase;letter-spacing:1px;">Home</a><a class="ete-heading" href="https://example.com/about" style="display:inline-block;padding:4px 10px;font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:20px;font-weight:700;color:#000000;text-decoration:none;text-transform:uppercase;letter-spacing:1px;">About</a><a class="ete-heading" href="https://example.com/work" style="display:inline-block;padding:4px 10px;font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:20px;font-weight:700;color:#000000;text-decoration:none;text-transform:uppercase;letter-spacing:1px;">Work</a><a class="ete-heading" href="https://example.com/blog" style="display:inline-block;padding:4px 10px;font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:20px;font-weight:700;color:#000000;text-decoration:none;text-transform:uppercase;letter-spacing:1px;">Blog</a><a class="ete-heading" href="https://example.com/contact" style="display:inline-block;padding:4px 10px;font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:20px;font-weight:700;color:#000000;text-decoration:none;text-transform:uppercase;letter-spacing:1px;">Contact</a></p></div><!--[if mso]></td></tr></table><![endif]--></div></td></tr>
<tr><td class="" style="padding:0;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td bgcolor="#111111" background="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/agency-studio-welcome-hero.jpg" align="center" valign="middle" height="350" class="ete-video-350" style="height:350px;background-color:#111111;background-image:url('https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/agency-studio-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:350px;"><v:fill type="frame" src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/agency-studio-welcome-hero.jpg" color="#111111" /><v:textbox inset="0,0,0,0" style="v-text-anchor:middle;"><center><![endif]--><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td align="center" valign="middle" height="350" class="ete-video-350" style="height:350px;background-color:rgba(0,0,0,0.45);"><div style="padding:0 24px 24px;"><h1 class="ete-ds-34" style="margin:0;font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:34px;line-height:41px;font-weight:700;color:#ffffff;text-align:center;mso-line-height-rule:exactly;">We build modern websites</h1></div><a href="https://example.com/film" aria-label="Play video: Man working on a laptop at a wooden desk by a bright window" style="display:inline-block;width:72px;height:72px;border-radius:36px;background-color:#ffffff;color:#0d0cb5;font-family:Arial,sans-serif;font-size:26px;line-height:72px;text-align:center;text-decoration:none;mso-line-height-rule:exactly;"><span style="padding-left:5px;color:#0d0cb5;">▶</span></a></td></tr></table><!--[if gte mso 9]></center></v:textbox></v:rect><![endif]--></td></tr></table></td></tr>
<tr><td height="16" style="height:16px;font-size:0;line-height:0;mso-line-height-rule:exactly;"> </td></tr>
<tr><td class="ete-px" style="padding:24px 32px 8px;"><h2 class="ete-heading ete-ds-28" style="margin:0;font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:28px;line-height:34px;font-weight:700;color:#000000;text-align:center;mso-line-height-rule:exactly;">Our services</h2></td></tr>
<tr><td class="ete-px" style="padding:8px 32px;"><p class="ete-muted" style="margin:0;font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:14px;line-height:22px;color:#808080;text-align:center;">Three things we do every day for shops, clinics and small software teams.</p></td></tr>
<tr><td class="ete-px" style="padding:28px 32px 12px;"><div style="font-size:0;text-align:center;"><!--[if mso]><table role="presentation" width="536" cellpadding="0" cellspacing="0" border="0"><tr><td width="178" valign="top"><![endif]--><div class="ete-icon-wrap" style="display:inline-block;vertical-align:top;width:33.33%;min-width:94px;max-width:100%;font-size:16px;text-align:center;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-icon-cell" style="padding:0 8px 16px;"><img src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/icon-check-5a59ff.png" alt="" width="40" height="40" class="" style="display:block;width:40px;max-width:100%;height:auto;border:0;outline:none;text-decoration:none;margin:0 auto;"><p class="ete-heading" style="margin:0;padding-top:10px;font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:14px;line-height:19px;font-weight:700;color:#000000;text-align:center;">Branding</p><p class="ete-muted" style="margin:0;padding-top:4px;font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:18px;color:#808080;text-align:center;">Names, logos and a voice that fits</p></td></tr></table></div><!--[if mso]></td><td width="178" valign="top"><![endif]--><div class="ete-icon-wrap" style="display:inline-block;vertical-align:top;width:33.33%;min-width:94px;max-width:100%;font-size:16px;text-align:center;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-icon-cell" style="padding:0 8px 16px;"><img src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/icon-check-5a59ff.png" alt="" width="40" height="40" class="" style="display:block;width:40px;max-width:100%;height:auto;border:0;outline:none;text-decoration:none;margin:0 auto;"><p class="ete-heading" style="margin:0;padding-top:10px;font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:14px;line-height:19px;font-weight:700;color:#000000;text-align:center;">Design</p><p class="ete-muted" style="margin:0;padding-top:4px;font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:18px;color:#808080;text-align:center;">Pages people can use on any screen</p></td></tr></table></div><!--[if mso]></td><td width="178" valign="top"><![endif]--><div class="ete-icon-wrap" style="display:inline-block;vertical-align:top;width:33.33%;min-width:94px;max-width:100%;font-size:16px;text-align:center;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-icon-cell" style="padding:0 8px 16px;"><img src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/icon-check-5a59ff.png" alt="" width="40" height="40" class="" style="display:block;width:40px;max-width:100%;height:auto;border:0;outline:none;text-decoration:none;margin:0 auto;"><p class="ete-heading" style="margin:0;padding-top:10px;font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:14px;line-height:19px;font-weight:700;color:#000000;text-align:center;">Development</p><p class="ete-muted" style="margin:0;padding-top:4px;font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:18px;color:#808080;text-align:center;">Fast sites that are easy to edit</p></td></tr></table></div><!--[if mso]></td></tr></table><![endif]--></div></td></tr>
<tr><td height="16" style="height:16px;font-size:0;line-height:0;mso-line-height-rule:exactly;"> </td></tr>
<tr><td class="" style="padding:0;"><div style="font-size:0;text-align:left;display:flex;flex-wrap:wrap;background-color:#fafafa;"><!--[if mso]><table role="presentation" width="600" bgcolor="#fafafa" cellpadding="0" cellspacing="0" border="0"><tr><td width="263" valign="middle"><![endif]--><div class="ete-stack" style="display:inline-block;vertical-align:middle;min-width:43.83%;max-width:100%;width:43.83%;width:calc((480px - 100%) * 480);font-size:16px;text-align:left;background-color:#222222;background-image:url('https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/agency-studio-welcome-strategy.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:263px;height:300px;"><v:fill type="frame" src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/agency-studio-welcome-strategy.jpg" color="#222222" /><v:textbox inset="0,0,0,0"><![endif]--><div role="img" aria-label="People working at long desks in a bright open office" style="height:300px;line-height:300px;font-size:0;"> </div><!--[if gte mso 9]></v:textbox></v:rect><![endif]--></div><!--[if mso]></td><td width="337" valign="middle"><![endif]--><div class="ete-stack" style="display:inline-block;vertical-align:middle;min-width:56.16%;max-width:100%;width:56.16%;width:calc((480px - 100%) * 480);font-size:16px;text-align:left;align-self:center;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-split-text" style="padding:40px 32px;"><h1 class="ete-ds-26" style="margin:0;font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:26px;line-height:31px;font-weight:700;color:#000000;text-align:left;mso-line-height-rule:exactly;">Business strategy</h1><p style="margin:0;font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:17px;line-height:27px;color:#000000;padding-top:16px;text-align:left;">Every project starts with a half day workshop. We map your goals, your readers and what the site has to do.</p><div style="padding-top:28px;"><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/strategy" style="height:48px;v-text-anchor:middle;width:160px;" arcsize="6%" strokecolor="#0d0cb5" fillcolor="#0d0cb5"><w:anchorlock/><center style="color:#ffffff;font-family:Arial,sans-serif;font-size:16px;font-weight:bold;">Read more</center></v:roundrect><![endif]--><!--[if !mso]><!--><a href="https://example.com/strategy" style="display:inline-block;background-color:#0d0cb5;border:1px solid #0d0cb5;line-height:48px;border-radius:3px;color:#ffffff;font-family:Poppins, '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 style="color:#ffffff;">Read more</span></a><!--<![endif]--></td></tr></table></div></td></tr></table></div><!--[if mso]></td></tr></table><![endif]--></div></td></tr>
<tr><td height="16" style="height:16px;font-size:0;line-height:0;mso-line-height-rule:exactly;"> </td></tr>
<tr><td class="ete-px" style="padding:24px 32px 8px;"><h2 class="ete-heading ete-ds-28" style="margin:0;font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:28px;line-height:34px;font-weight:700;color:#000000;text-align:center;mso-line-height-rule:exactly;">Projects</h2></td></tr>
<tr><td class="ete-px" style="padding:8px 32px;"><p class="ete-muted" style="margin:0;font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:14px;line-height:22px;color:#808080;text-align:center;">Spaces from four recent brand and website projects.</p></td></tr>
<tr><td class="ete-px" style="padding:16px 32px;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;table-layout:fixed;"><tr><td width="50%" valign="top" style="width:50%;padding:0 6px;"><a href="https://example.com/work/1"><img src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/agency-studio-welcome-g1.jpg" alt="White desk with a wooden ladder shelf of magazines" width="256" height="192" class="ete-fluid" style="display:block;width:256px;max-width:100%;height:auto;border:0;outline:none;text-decoration:none;"></a></td><td width="50%" valign="top" style="width:50%;padding:0 6px;"><a href="https://example.com/work/2"><img src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/agency-studio-welcome-g2.jpg" alt="Home office with a bookcase, a desk and a computer" width="256" height="192" class="ete-fluid" style="display:block;width:256px;max-width:100%;height:auto;border:0;outline:none;text-decoration:none;"></a></td></tr></table><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;table-layout:fixed;margin-top:12px;"><tr><td width="50%" valign="top" style="width:50%;padding:0 6px;"><a href="https://example.com/work/3"><img src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/agency-studio-welcome-g3.jpg" alt="Loft lounge with grey sofas and tall windows" width="256" height="192" class="ete-fluid" style="display:block;width:256px;max-width:100%;height:auto;border:0;outline:none;text-decoration:none;"></a></td><td width="50%" valign="top" style="width:50%;padding:0 6px;"><a href="https://example.com/work/4"><img src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/agency-studio-welcome-g4.jpg" alt="Rows of desks in an open office with glass walls" width="256" height="192" class="ete-fluid" style="display:block;width:256px;max-width:100%;height:auto;border:0;outline:none;text-decoration:none;"></a></td></tr></table></td></tr>
<tr><td height="8" style="height:8px;font-size:0;line-height:0;mso-line-height-rule:exactly;"> </td></tr>
<tr><td class="ete-px" bgcolor="#0a0a4a" style="background-color:#0a0a4a;padding:20px 32px 12px;"><div style="font-size:0;text-align:center;"><!--[if mso]><table role="presentation" width="536" cellpadding="0" cellspacing="0" border="0"><tr><td width="178" valign="top"><![endif]--><div class="ete-stat-82" style="display:inline-block;vertical-align:top;width:33.33%;min-width:112px;max-width:100%;font-size:16px;text-align:center;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-icon-cell" style="padding:0 6px 8px;"><p class="ete-ds-40 ete-hf" style="margin:0;font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:40px;line-height:44px;font-weight:700;color:#ffffff;text-align:center;mso-line-height-rule:exactly;">2014</p><p style="margin:0;padding-top:6px;font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;line-height:16px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#ffffff;text-align:center;">Founded</p></td></tr></table></div><!--[if mso]></td><td width="178" valign="top"><![endif]--><div class="ete-stat-82" style="display:inline-block;vertical-align:top;width:33.33%;min-width:112px;max-width:100%;font-size:16px;text-align:center;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-icon-cell" style="padding:0 6px 8px;"><p class="ete-ds-40 ete-hf" style="margin:0;font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:40px;line-height:44px;font-weight:700;color:#ffffff;text-align:center;mso-line-height-rule:exactly;">9</p><p style="margin:0;padding-top:6px;font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;line-height:16px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#ffffff;text-align:center;">People</p></td></tr></table></div><!--[if mso]></td><td width="178" valign="top"><![endif]--><div class="ete-stat-82" style="display:inline-block;vertical-align:top;width:33.33%;min-width:112px;max-width:100%;font-size:16px;text-align:center;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-icon-cell" style="padding:0 6px 8px;"><p class="ete-ds-40 ete-hf" style="margin:0;font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:40px;line-height:44px;font-weight:700;color:#ffffff;text-align:center;mso-line-height-rule:exactly;">1</p><p style="margin:0;padding-top:6px;font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;line-height:16px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#ffffff;text-align:center;">Studio in Leeds</p></td></tr></table></div><!--[if mso]></td></tr></table><![endif]--></div></td></tr>
<tr><td height="16" style="height:16px;font-size:0;line-height:0;mso-line-height-rule:exactly;"> </td></tr>
<tr><td class="ete-px" style="padding:24px 32px 8px;"><h2 class="ete-heading ete-ds-28" style="margin:0;font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:28px;line-height:34px;font-weight:700;color:#000000;text-align:center;mso-line-height-rule:exactly;">Our blog</h2></td></tr>
<tr><td class="ete-px" style="padding:8px 32px;"><p class="ete-muted" style="margin:0;font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:14px;line-height:22px;color:#808080;text-align:center;">Short notes from the studio on design, code and running projects.</p></td></tr>
<tr><td class="ete-px" style="padding:12px 22px 0;"><div style="font-size:0;text-align:left;"><!--[if mso]><table role="presentation" width="556" cellpadding="0" cellspacing="0" border="0"><tr><td width="278" valign="top"><![endif]--><div class="ete-stack" style="display:inline-block;vertical-align:top;min-width:50%;max-width:100%;width:50%;width:calc((445px - 100%) * 445);font-size:16px;text-align:left;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-cell" style="padding:4px 10px 16px;"><a href="https://example.com/blog/content-first"><img src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/agency-studio-welcome-blog1.jpg" alt="Hands writing notes next to an open laptop" width="258" height="198" class="ete-fluid-cap" style="display:block;width:258px;max-width:100%;height:auto;border:0;outline:none;text-decoration:none;width:100%;max-width:280px;margin:0 auto;"></a><div style="padding-top:14px;"><h3 class="ete-heading" style="margin:0;font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:19px;line-height:26px;font-weight:700;color:#000000;text-align:left;mso-line-height-rule:exactly;">Plan the content first</h3></div><p class="ete-text" style="margin:0;font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:24px;color:#666666;padding-top:6px;text-align:left;">Feb 18 · Business<br>
Why we write the words before we draw a single page.</p><div style="padding-top:16px;"><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/blog/content-first" style="height:48px;v-text-anchor:middle;width:160px;" arcsize="6%" strokecolor="#0d0cb5" fillcolor="#0d0cb5"><w:anchorlock/><center style="color:#ffffff;font-family:Arial,sans-serif;font-size:16px;font-weight:bold;">Read more</center></v:roundrect><![endif]--><!--[if !mso]><!--><a class="ete-btn" href="https://example.com/blog/content-first" style="display:inline-block;background-color:#0d0cb5;border:1px solid #0d0cb5;line-height:48px;border-radius:3px;color:#ffffff;font-family:Poppins, '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;">Read more</span></a><!--<![endif]--></td></tr></table></div></td></tr></table></div><!--[if mso]></td><td width="278" valign="top"><![endif]--><div class="ete-stack" style="display:inline-block;vertical-align:top;min-width:50%;max-width:100%;width:50%;width:calc((445px - 100%) * 445);font-size:16px;text-align:left;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-cell" style="padding:4px 10px 16px;"><a href="https://example.com/blog/faster"><img src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/agency-studio-welcome-blog2.jpg" alt="Hands typing on a laptop keyboard in soft light" width="258" height="198" class="ete-fluid-cap" style="display:block;width:258px;max-width:100%;height:auto;border:0;outline:none;text-decoration:none;width:100%;max-width:280px;margin:0 auto;"></a><div style="padding-top:14px;"><h3 class="ete-heading" style="margin:0;font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:19px;line-height:26px;font-weight:700;color:#000000;text-align:left;mso-line-height-rule:exactly;">A faster home page</h3></div><p class="ete-text" style="margin:0;font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:24px;color:#666666;padding-top:6px;text-align:left;">Feb 11 · Design<br>
Five small changes that cut our load time in half.</p><div style="padding-top:16px;"><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/blog/faster" style="height:48px;v-text-anchor:middle;width:160px;" arcsize="6%" strokecolor="#0d0cb5" fillcolor="#0d0cb5"><w:anchorlock/><center style="color:#ffffff;font-family:Arial,sans-serif;font-size:16px;font-weight:bold;">Read more</center></v:roundrect><![endif]--><!--[if !mso]><!--><a class="ete-btn" href="https://example.com/blog/faster" style="display:inline-block;background-color:#0d0cb5;border:1px solid #0d0cb5;line-height:48px;border-radius:3px;color:#ffffff;font-family:Poppins, '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;">Read more</span></a><!--<![endif]--></td></tr></table></div></td></tr></table></div><!--[if mso]></td></tr></table><![endif]--></div></td></tr>
<tr><td height="8" style="height:8px;font-size:0;line-height:0;mso-line-height-rule:exactly;"> </td></tr>
<tr><td class="ete-px" bgcolor="#fafafa" style="background-color:#fafafa;padding:24px 32px 8px;"><h2 class="ete-ds-28" style="margin:0;font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:28px;line-height:34px;font-weight:700;color:#000000;text-align:center;mso-line-height-rule:exactly;">Our team</h2></td></tr>
<tr><td class="ete-px" bgcolor="#fafafa" style="background-color:#fafafa;padding:8px 32px;"><p style="margin:0;font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:14px;line-height:22px;color:#666666;text-align:center;">The three people you will talk to most.</p></td></tr>
<tr><td class="ete-px" bgcolor="#fafafa" style="background-color:#fafafa;padding:12px 22px 0;"><div style="font-size:0;text-align:left;"><!--[if mso]><table role="presentation" width="556" cellpadding="0" cellspacing="0" border="0"><tr><td width="185" valign="top"><![endif]--><div class="ete-stack" style="display:inline-block;vertical-align:top;min-width:33.33%;max-width:100%;width:33.33%;width:calc((445px - 100%) * 445);font-size:16px;text-align:left;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-cell" style="padding:4px 10px 16px;"><img src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/agency-studio-welcome-team1.jpg" alt="Woman working on a laptop at a cafe table" width="165" height="138" class="ete-fluid-cap" style="display:block;width:165px;max-width:100%;height:auto;border:0;outline:none;text-decoration:none;width:100%;max-width:280px;margin:0 auto;"><div style="padding-top:14px;"><h3 style="margin:0;font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:19px;line-height:26px;font-weight:700;color:#666666;text-align:center;mso-line-height-rule:exactly;">Rosa Klein</h3></div><p style="margin:0;font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:24px;color:#666666;padding-top:6px;text-align:center;">Strategy lead</p></td></tr></table></div><!--[if mso]></td><td width="185" valign="top"><![endif]--><div class="ete-stack" style="display:inline-block;vertical-align:top;min-width:33.33%;max-width:100%;width:33.33%;width:calc((445px - 100%) * 445);font-size:16px;text-align:left;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-cell" style="padding:4px 10px 16px;"><img src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/agency-studio-welcome-team2.jpg" alt="Woman working at the end of a long wooden table" width="165" height="138" class="ete-fluid-cap" style="display:block;width:165px;max-width:100%;height:auto;border:0;outline:none;text-decoration:none;width:100%;max-width:280px;margin:0 auto;"><div style="padding-top:14px;"><h3 style="margin:0;font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:19px;line-height:26px;font-weight:700;color:#666666;text-align:center;mso-line-height-rule:exactly;">Omar Haddad</h3></div><p style="margin:0;font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:24px;color:#666666;padding-top:6px;text-align:center;">Design lead</p></td></tr></table></div><!--[if mso]></td><td width="185" valign="top"><![endif]--><div class="ete-stack" style="display:inline-block;vertical-align:top;min-width:33.33%;max-width:100%;width:33.33%;width:calc((445px - 100%) * 445);font-size:16px;text-align:left;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-cell" style="padding:4px 10px 16px;"><img src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/agency-studio-welcome-team3.jpg" alt="Desk with two screens showing lines of code" width="165" height="138" class="ete-fluid-cap" style="display:block;width:165px;max-width:100%;height:auto;border:0;outline:none;text-decoration:none;width:100%;max-width:280px;margin:0 auto;"><div style="padding-top:14px;"><h3 style="margin:0;font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:19px;line-height:26px;font-weight:700;color:#666666;text-align:center;mso-line-height-rule:exactly;">Jun Park</h3></div><p style="margin:0;font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:24px;color:#666666;padding-top:6px;text-align:center;">Developer</p></td></tr></table></div><!--[if mso]></td></tr></table><![endif]--></div></td></tr>
<tr><td class="" style="padding:0;"><div style="font-size:0;text-align:left;display:flex;flex-wrap:wrap;background-color:#ffffff;"><!--[if mso]><table role="presentation" width="600" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0"><tr><td width="263" valign="middle"><![endif]--><div class="ete-stack" style="display:inline-block;vertical-align:middle;min-width:43.83%;max-width:100%;width:43.83%;width:calc((480px - 100%) * 480);font-size:16px;text-align:left;background-color:#222222;background-image:url('https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/agency-studio-welcome-features.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:263px;height:375px;"><v:fill type="frame" src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/agency-studio-welcome-features.jpg" color="#222222" /><v:textbox inset="0,0,0,0"><![endif]--><div role="img" aria-label="Man in a cap sitting on stone steps" style="height:375px;line-height:375px;font-size:0;"> </div><!--[if gte mso 9]></v:textbox></v:rect><![endif]--></div><!--[if mso]></td><td width="337" valign="middle"><![endif]--><div class="ete-stack" style="display:inline-block;vertical-align:middle;min-width:56.16%;max-width:100%;width:56.16%;width:calc((480px - 100%) * 480);font-size:16px;text-align:left;align-self:center;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-split-text" style="padding:40px 32px;"><h1 class="ete-ds-26" style="margin:0;font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:26px;line-height:31px;font-weight:700;color:#000000;text-align:left;mso-line-height-rule:exactly;">How we work</h1><p style="margin:0;font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:17px;line-height:27px;color:#000000;padding-top:16px;text-align:left;"><b>Responsive</b><br>
Every page is built for phones first.<br>
<br>
<b>Easy to edit</b><br>
You change the words, not us.<br>
<br>
<b>Clean code</b><br>
No page builders, no bloat.</p></td></tr></table></div><!--[if mso]></td></tr></table><![endif]--></div></td></tr>
<tr><td align="center" class="ete-px" style="padding:56px 6.67% 44px;mso-padding-alt:56px 40px 44px;background-color:#0d0cb5;text-align:center;"><h1 class="ete-ds-30" style="margin:0;font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:30px;line-height:36px;font-weight:700;color:#ffffff;text-align:center;mso-line-height-rule:exactly;">Ready for a new website?</h1><p style="margin:0;font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:17px;line-height:27px;color:#ffffff;padding-top:16px;text-align:center;">Book a free half hour call and tell us what you need. We answer within one working day.</p><div style="padding-top:28px;"><table role="presentation" cellpadding="0" cellspacing="0" border="0" align="center"><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/contact" style="height:48px;v-text-anchor:middle;width:163px;" arcsize="6%" filled="f" strokeweight="2px" strokecolor="#ffffff"><w:anchorlock/><center style="color:#ffffff;font-family:Arial,sans-serif;font-size:16px;font-weight:bold;">Get started</center></v:roundrect><![endif]--><!--[if !mso]><!--><a href="https://example.com/contact" style="display:inline-block;background-color:transparent;border:2px solid #ffffff;line-height:44px;border-radius:3px;color:#ffffff;font-family:Poppins, '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 style="color:#ffffff;">Get started</span></a><!--<![endif]--></td></tr></table></div></td></tr>
<tr><td class="ete-px" bgcolor="#000000" style="background-color:#000000;padding:16px 20px 0;"><div style="font-size:0;text-align:left;"><!--[if mso]><table role="presentation" width="560" cellpadding="0" cellspacing="0" border="0"><tr><td width="186" valign="top"><![endif]--><div class="ete-stack" style="display:inline-block;vertical-align:top;min-width:33.33%;max-width:100%;width:33.33%;width:calc((448px - 100%) * 448);font-size:16px;text-align:left;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-cell" style="padding:12px 12px 8px;"><p style="margin:0 0 8px;font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:18px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#b3b3b3;">About</p><p style="margin:0;font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:21px;color:#b3b3b3;line-height:20px;">Brickyard is a small web studio that designs and builds sites for growing teams.</p></td></tr></table></div><!--[if mso]></td><td width="186" valign="top"><![endif]--><div class="ete-stack" style="display:inline-block;vertical-align:top;min-width:33.33%;max-width:100%;width:33.33%;width:calc((448px - 100%) * 448);font-size:16px;text-align:left;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-cell" style="padding:12px 12px 8px;"><p style="margin:0 0 8px;font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:18px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#b3b3b3;">Contact</p><p style="margin:0;font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:21px;color:#b3b3b3;line-height:20px;">18 Wharf Street<br>
Leeds LS2 7EQ<br>
hello@brickyard.example</p></td></tr></table></div><!--[if mso]></td><td width="186" valign="top"><![endif]--><div class="ete-stack" style="display:inline-block;vertical-align:top;min-width:33.33%;max-width:100%;width:33.33%;width:calc((448px - 100%) * 448);font-size:16px;text-align:left;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-cell" style="padding:12px 12px 8px;"><p style="margin:0 0 8px;font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:18px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#b3b3b3;">Useful links</p><p style="margin:0;padding-top:4px;font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:20px;"><a href="https://example.com/" style="color:#b3b3b3;text-decoration:underline;">Home</a></p><p style="margin:0;padding-top:4px;font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:20px;"><a href="https://example.com/about" style="color:#b3b3b3;text-decoration:underline;">About</a></p><p style="margin:0;padding-top:4px;font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:20px;"><a href="https://example.com/services" style="color:#b3b3b3;text-decoration:underline;">Services</a></p><p style="margin:0;padding-top:4px;font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:20px;"><a href="https://example.com/work" style="color:#b3b3b3;text-decoration:underline;">Work</a></p></td></tr></table></div><!--[if mso]></td></tr></table><![endif]--></div></td></tr>
<tr><td align="center" class="ete-px" bgcolor="#000000" style="background-color:#000000;padding:28px 32px 32px;"><p style="margin:0;font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:21px;color:#9a9a9a;line-height:20px;text-align:center;padding-top:10px;">© Brickyard Digital. You get this email because you asked us about a project.</p><p style="margin:0;font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:21px;color:#9a9a9a;line-height:20px;text-align:center;padding-top:10px;"><a href="{{unsubscribe_url}}" style="color:#9a9a9a;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:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;line-height:18px;color:#808080;">Made with <a class="ete-link" href="https://emailtemplateexamples.com/" style="color:#808080;text-decoration:underline;">Email Template Examples</a></td></tr>
</table>
<!--[if mso]></td></tr></table><![endif]-->
</td></tr>
</table>
</body>
</html>
Adapted from Colorlib Email Templates (template 2, Corporate) by Colorlib, MIT license.
About this template
A long welcome email for a web design or digital agency that wants new contacts to see the whole studio in one scroll. It opens with a menu bar and a photo of the studio with a play button, linking to a short film about how the team works.
Three services follow in a row with simple check icons, then a split panel on strategy with a photo of a planning session. A two by two grid shows recent project spaces, and a deep navy band lists three plain facts about the studio.
Two blog posts with dates and buttons, three team members with their roles, and a panel on how the team works lead to a strong blue band with an outline button. Three footer columns hold a short about text, the address and useful links.
The structure is a faithful rebuild of a popular open source corporate template. Swap the photos for your own office and projects, keep the blue, and cut sections you do not need: each one stands on its own.
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
- Logo with menu
- Video hero
- Three services
- Strategy split panel
- Project grid
- Studio facts band
- Blog posts
- Team
- How we work panel
- Call to action band
- Footer columns
- Footer
Subject line ideas
- Welcome to Brickyard: here is how we work
- Meet the studio behind your next website
- {{first_name}}, a quick tour of our studio
Preview text idea
A short film, our services, recent work and the people you will talk to.