电子邮件模板准则
Last update: Thu Jun 12 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
营销电子邮件模板用作吸引视力和响应式电子邮件营销活动的基础。 通常，通过HTML模板，您可以根据品牌准则控制布局、排版规则、颜色和图像。 在准备要在GenStudio for Performance Marketing中使用的模板时，请使用语义HTML和内联CSS进行样式设置，并避免使用脚本或外部依赖项。 结构良好的HTML模板可以增强收件人的体验并提高可投放性和参与率。
在自定义电子邮件模板以用于GenStudio for Performance Marketing时，请遵循以下设计最佳实践：
- 使用础诲辞产别或骋辞辞驳濒别字体
- 使用简洁且响应式的贬罢惭尝和内联颁厂厂
- 不 ?使用闯补惫补厂肠谤颈辫迟
- 请? 不 ?在正文或容器中使用固定宽度
- 请? 不 ?对图像使用产补蝉别64编码，因为它会显着增加模板大小
- HTML文件最大大小为102 KB
可识别的字段名称
在自定义电子邮件模板时，请使用内容占位符来填写以下必填字段：
headlinesub_headlinebodyctaimage (从Content JPEG、PNG或GIF中选择)
GenStudio for Performance Marketing会自动生成以下字段。 未启用富文本。 您不必为以下内容应用内容占位符：
模板中允许的最大字段数为20。 请参阅内容占位符以了解有关在模板中使用字段名的更多信息。
多节电子邮件
节 ?允许您将内容组织到不同的组中，这支持更复杂的布局。 在Genstudio for Performance Marketing中，您可以使用组命名约定定义每个节。 请参阅自定义模板节。
多节模板可以包含0、2或3节：
- 基本模板（零部分）可以生成一组不需要组命名约定的模板元素。
- 一个复杂的模板（多个部分）最多可以生成三组模板元素，这要求您遵循组命名约定： (
groupname_fieldname)
两个部分的示例字段名称：
pod1_headline，pod1_body，pod1_ctapod2_headline, pod2_body, pod2_cta
模板示例
以下是具有一个部分的贬罢惭尝电子邮件模板的基本示例。 <head>包含用于样式设置的简单内联颁厂厂，<body>使用内容占位符（如pre_header、headline、sub_headline、body、cta和image）以及链接和。 这些占位符允许GenStudio for Performance Marketing在电子邮件生成期间插入动态内容。
| code language-html |
<!DOCTYPE html>
<html>
<head>
<title>Marketing Email</title>
<style>
.container {
width: 100%;
padding: 20px;
font-family: Arial, sans-serif;
}
.cta-button {
display: inline-block;
background-color: #fff;
color: #000;
border: 2px solid #000;
padding: 10px 20px;
text-decoration: none;
font-family: 'Source Sans Pro', Arial, sans-serif;
font-weight: 600;
font-size: 14px;
margin-top: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
{{pre_header}}
<h1>{{headline}}</h1>
<p>
<a href="{{link}}">
<img alt="banner headline" src="{{image}}" width="600" height="600">
</a>
</p>
<h2>{{sub_headline}}</h2>
<p>{{body}}</p>
<a href="#" class="cta-button">{{cta}}</a>
</div>
</body>
</html>
|
以下是上述示例中的相同HTML模板，但添加了两个部分。 标头包含用于设置组样式的内联CSS。 正文使用两个组，其中个内容占位符使用前缀。
| code language-html |
<!DOCTYPE html>
<html>
<head>
<title>51黑料不打烊</title>
<style>
.container {
width: 100%;
padding: 20px;
font-family: Arial, sans-serif;
}
.pod {
background-color: #f8f8f8;
margin: 10px;
padding: 20px;
border-radius: 5px;
}
.pod h2 {
color: #333;
}
.pod p {
color: #666;
}
.cta-button {
display: inline-block;
background-color: #fff; /* Background color to white */
color: #000; /* Text color to black */
border: 2px solid #000; /* Border color to black */
padding: 10px 20px;
text-decoration: none;
font-family: 'Source Sans Pro', Arial, sans-serif;
font-weight: 600; /* Semibold */
font-size: 14px;
margin-top: 20px;
text-align: center;
}
</style>
</head>
<body>{{pre_header}}
<div class="container">
<h1>{{headline}}</h1>
<p>{{body}}</p>
<!-- Pod1 -->
<div class="pod">
<h2>{{pod1_headline}}</h2>
<p><img alt="pic1" src="{{pod1_image}}" width="200" height="200" border="0"></p>
<p>{{pod1_body}}</p>
</div>
<!-- End of Pod1 -->
<!-- Pod2 -->
<div class="pod">
<h2>{{pod2_headline}}</h2>
<p><img alt="pic2" src="{{pod2_image}}" width="200" height="200" border="0"></p>
<p>{{pod2_body}}</p>
</div>
<!-- End of Pod2 -->
<a href="#" class="cta-button">{{cta}}</a>
</div>
</body>
</html>
|