在此页面上：了解如何在电子邮件设计器中设计电子邮件内容，从头开始、通过代码或导入的 HTML 构建内容的关键步骤，以及使电子邮件在客户端之间呈现良好渲染效果的最佳实践。
要访问电子邮件设计器并开始设计电子邮件内容，您必须先在历程或营销活动中创建电子邮件。
然后，您可以使用Journey Optimizer 电子邮件设计功能 导入现有内容或从头开始构建响应式电子邮件。 了解详情
通过电子邮件设计器，您还可以：
➡️ 通过观看视频了解此功能
创建电子邮件内容的关键步骤 key-steps
创建电子邮件后，即可开始设计电子邮件内容。
-
在历程或营销活动配置屏幕中，浏览 编辑内容 屏幕，访问“电子邮件设计器”。 了解详情
-
在“电子邮件设计器”主页上，从以下选项中选择设计电子邮件的方式：
-
通过电子邮件设计器的界面，并利用 Adobe Experience Manager Assets Essentials 中的图像，从头开始设计电子邮件。 要了解如何设计电子邮件内容，请参阅此部分。
-
直接在电子邮件设计器中编写或粘贴原始 HTML。 要了解如何编码自己的内容，请参阅此部分。
note NOTE 在营销活动中，您还可以选择 编辑内容 屏幕中的 代码编辑器 按钮。 了解详情 -
从文件或 .zip 文件夹导入现有 HTML 内容。 要了解如何导入电子邮件内容，请参阅此部分。
-
使用 AI 驱动的图像到 HTML 转换器，将图像设计转换为 HTML 模板。 在本节中了解如何将静态图像转换为可编辑的电子邮件模板。
-
从内置或自定义模板列表中选择现有内容。 通过本节了解如何使用电子邮件模板。
-
-
定义电子邮件内容并进行个性化后，您便可以通过 自动内容检查 来验证电子邮件内容，以便在发送之前直接在创作面板中捕获HTML和CSS问题，例如不支持的标记、空div和大小限制违规。 了解详情
note NOTE 系统还会在您设计时检查关键设置，并显示警告（推荐和最佳实践）和错误（阻止阻止阻止测试或激活的问题）警报。 了解有关电子邮件警报的更多信息 电子邮件Designer中的
-
您还可以验证内容质量，以确定可读性、内容一致性和有效性方面的潜在问题。 详细了解内容质量验证
-
最后，您可以导出内容以供验证或稍后使用。 单击导出 HTML 在计算机上保存一个 zip 文件，其中将包含您的 HTML 和资源。
电子邮件设计最佳实践 best-practices
在发送电子邮件时，请务必考虑到收件人可能会转发它们，而这有时会导致电子邮件的呈现出现问题。 当用于转发的电子邮件提供商无法支持所使用的 CSS 类时尤为如此，例如，如果您使用“is-desktop-hidden”CSS 类来隐藏移动设备上的图像。
为了最大限度地减少这些呈现问题，我们建议尽可能简化电子邮件设计结构。 请尝试使用适用于桌面和移动设备的单个设计，并避免使用复杂的 CSS 类或其他设计元素，可能并非所有电子邮件客户端都完全支持这些元素。
遵循这些最佳实践有助于您确保电子邮件均能始终如一地正确呈现，无论收件人如何查看或转发电子邮件。
有关电子邮件设计的最佳实践，请参阅下表：
- 用于结构的基于表的静态布局
- 用于保持布局一致性的 HTML 表和嵌套表
- 介于 600px 和 800px 之间的模板宽度
- 用于设置样式的简单内联 CSS
- 用于实现通用兼容性的 Web 安全字体
- 某些电子邮件平台可能不显示背景图像。
- 自定义 Web 字体缺少通用支持。
- 宽布局在较小的屏幕上显示效果不佳。
- 图像映射提供有限的功能。
- 嵌入式 CSS 在电子邮件投放期间有时会被删除。
- 电子邮件环境中通常不支持 JavaScript。
- 大多数平台会阻止
<iframe>标记。 - Flash 已过期，不再受支持。
- 嵌入式音频经常无法播放。
- 嵌入式视频与许多电子邮件平台不兼容。
- 表单无法在电子邮件中运行。
<div>分层可能会导致渲染问题。
特定护栏和限制 email-guardrails
即使是结构良好的电子邮件，其呈现方式也可能因客户端或打开所在环境的不同而有所不同。 以下部分记录了在设计电子邮件时要牢记的已知限制和客户端特定行为。
移动Web浏览器限制 mobile-web-limitations
当收件人通过移动Web浏览器（例如，手机上的Chrome）打开Gmail或Outlook，而不是使用本机移动设备应用程序或桌面客户端时，电子邮件渲染可能会有所不同。 这是移动Web邮件环境的已知限制，并非特定于Journey Optimizer。
这种呈现差异源于Web邮件客户端在移动浏览器中的行为。 浏览器首先渲染完整的桌面Web邮件UI，将电子邮件置于两层深处 — 超出任何响应式CSS或媒体查询的覆盖范围。 Gmail Web还剥离了CSS <style>块，并将电子邮件内容包装在其自己的<div>中，这会覆盖您的样式并产生对齐冲突。
典型症状包括文本对齐偏移（左对齐文本居中显示居中）、内容部分之间的额外白色分隔行以及与模板设计不同的整体布局。
仅当通过移动浏览器访问时，Gmail Web和Outlook Web中才会出现这些问题。 Outlook和Gmail本机移动设备应用程序以及所有桌面客户端都不会受到影响。
-
使用基于表的简单布局和完全内联CSS。
-
避免依赖媒体查询或
<style>块获取关键布局属性，如文本对齐方式。
Outlook渲染注意事项 outlook-tips
Outlook有许多渲染异常，如果在设计期间未考虑这些异常，则可能会影响电子邮件布局。 要帮助确保电子邮件在Outlook中正确呈现，请遵循以下最佳实践：
- 使用偶数表示内边距、字体大小和宽度。 Outlook会在内部将像素转换为点，这会在使用奇数时引入不均匀的间距和不需要的白线。
- 设置表格宽度（以像素为单位，而非百分比）。 基于百分比的宽度可能会破坏Outlook中的布局。 直接在每个表的样式属性中应用宽度值。
- 始终使用
width属性设置图像宽度。 Outlook忽略图像上的CSSwidth和height属性，如果没有HTML属性，则回退到文件的本机维度。 - 在所有图像上包含替换文本。 这样可以防止在图像被阻止时出现显示和安全问题。
- 将边框应用于表单元格，而不是应用于表元素本身。 如果边框未按预期呈现，请将其从
<table>移至<td>。 - 避免使用圆角。 Outlook中不可靠支持CSS
border-radius— 方角是安全的默认值。
有关深色模式设计考虑事项，包括如何使用媒体查询和特定于Outlook.com的图像交换技术，请参阅此页面。
操作说明视频 video
了解如何使用消息编辑器创建电子邮件内容。
了解如何配置内容试验以进行 A/B 测试，并探索电子邮件内容以最有效地推动业务目标的实现。