안녕하세요,
메타의 알림 이메일 레이아웃이 정말 마음에 드는데, 제 이메일은 아직 매우 평범합니다. 여기서 사용 중인 템플릿을 어떻게 받을 수 있을까요?
감사합니다!
이 부분이 간과되었을 것 같습니다. 새 이메일 템플릿을 어떻게 받을 수 있는지 알려주실 수 있을까요?
@neil 여기서 뭘 하는 건지 혹시 아세요?
다음은 Admin > Customize > Email Style에서 사용할 HTML과 CSS입니다. 요약 이메일 템플릿에서 가져온 것입니다.
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="%{html_lang}" xml:lang="%{html_lang}">
<head>
<meta http-equiv="Content-type" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
<title></title>
</head>
<body>
<!--[if mso]>
<style type="text/css">
body, table, td, th, h1, h2, h3 {font-family: Helvetica, Arial, sans-serif !important;}
</style>
<![endif]-->
<table class="e-header">
<tr>
<td>
<a href="https://www.example.com">
<img src="my-site-logo.png" height="40" alt="My Site Name">
</a>
</td>
</tr>
</table>
<table class="e-body">
<tr>
<td class="e-side-spacer">
<div class="with-accent-colors">
<table class="spacer">
<tbody>
<tr>
<td height="400px"> </td>
</tr>
</tbody>
</table>
</div>
</td>
<td class="e-middle">
<table align="center" class="with-accent-colors">
<tbody>
<tr>
<td class="with-dir e-middle-wrap">
<br/>
<center class="with-accent-colors" style="font-size:22px;font-weight:400;text-align:left;"> </center>
<br/>
<table align="center" class="e-contents">
<tbody>
<tr>
<td class="with-dir">
%{email_content}
</td>
</tr>
</tbody>
</table>
<div style="background-color:#f3f3f3">
<table class="spacer" style="padding:0;width:100%">
<tbody><tr><td height="40" style="border-collapse:collapse!important;font-size:40px;line-height:40px;margin:0;mso-line-height-rule:exactly;padding:0;"> </td></tr></tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td class="e-side-spacer">
<!-- Background that goes down part-way behind content -->
<div class="with-accent-colors">
<table class="spacer">
<tbody>
<tr>
<td height="400px"> </td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</table>
<!-- prevent Gmail on iOS font size manipulation -->
<div style="display:none;white-space:nowrap;font:15px courier;line-height:0">
</div>
<style>
@media only screen {
html {
min-height: 100%;
background: #f3f3f3
}
}
@media only screen and (max-width:900px) {
table.body img {
width: auto;
height: auto
}
table.body center {
min-width: 0!important;
}
table.body .side-spacer {
width: 2.5%!important;
}
table.body .column,
table.body .columns {
height: auto!important;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-left: 16px!important;
padding-right: 16px!important
}
table.body .column .column,
table.body .column .columns,
table.body .columns .column,
table.body .columns .columns {
padding-left: 0!important;
padding-right: 0!important
}
}
</style>
</body>
</html>
css
.e-header { background-color: white; width: 100%; }
.e-header td {
text-align: center;
padding: 20px 0;
}
.e-header a {
text-decoration: none;
}
.e-header img {
clear:both;
display:block;
height:40px;
margin:auto;
max-width:100%;
outline:0;
}
.e-body {
width:100%;
background:#f3f3f3;
padding:0;
border-spacing:0;
font-family:Helvetica,Arial,sans-serif;
font-size:14px;
font-weight:200;
line-height:1.3;
vertical-align:top;
}
.e-side-spacer {
width:5%;
vertical-align:top;
padding:0;
}
.e-side-spacer .spacer {
border-spacing:0;
padding:0;
width:100%;
}
.e-side-spacer .spacer td {
height:200px;
border-collapse:collapse!important;
margin:0;
mso-line-height-rule:exactly;
padding:0;
}
.e-middle {
vertical-align:top;
padding:0;
font-family:Helvetica,Arial,sans-serif;
}
.e-middle table {
border-spacing:0;
margin:0;
padding:0;
text-align:inherit;
vertical-align:top;
width:100%;
}
.e-middle .e-middle-wrap {
border-collapse:collapse!important;
color:#0a0a0a;
line-height:1.3;
margin:0;
padding:0;
vertical-align:top;
word-wrap:normal;
}
.e-contents {
border-spacing:0;
background:#fefefe;
margin:0;
padding:0;
text-align:center;
vertical-align:top;
width:100%;
}
.e-contents td {
-moz-hyphens:auto;
-webkit-hyphens:auto;
border-collapse:collapse!important;
color:#0a0a0a;
hyphens:auto;
line-height:1.3;
margin:0;
padding:16px;
vertical-align:top;
word-wrap:normal;
}
멋지네요, 닐 씨! 감사합니다!
이 Admin > Customize > Email Style가 2.4에서 도입될 예정인가요?
네. 현재 베타 버전에는 이미 포함되어 있습니다.
작은 수정 사항 하나: 콘텐츠 영역에 패딩이 포함되어 있지 않았습니다. 메타에서 받는 이메일에서 이 스타일 부분을 복사했습니다:
<td class="with-dir" style="border-collapse:collapse!important;color:#0a0a0a;line-height:1.3;margin:0;padding:16px;vertical-align:top;word-wrap:normal;text-align:left">
%{email_content}
</td>