文档Journey OptimizerJourney Optimizer 指南

使用电子邮件 Designer 内容组件 content-components

最近更新： 2026年9月5日

创建对象：

  • 中级
  • 初学者
  • 用户

在此页面上：​了解如何添加和配置电子邮件Designer内容组件（如按钮、文本、图像、分隔条、HTML、社交链接和优惠决策）来构建电子邮件内容。

style
shade-box

在创建电子邮件内容时，内容组件​允许您使用原始组件进一步个性化电子邮件，这些组件一旦放入电子邮件中即可编辑。

您可以根据需要在一个或多个结构组件中添加任意数量的内容组件，这些组件定义电子邮件的布局。

NOTE
《欧洲无障碍法案》规定，所有数字通信都应支持无障碍访问。 利用内容组件在Journey Optimizer中设计电子邮件时（例如使用无障碍字体、可读格式以及为图像提供替换文本），请确保遵循此页面上列出的特定准则。

添加内容组件 add-content-components

要将内容组件添加到您的电子邮件中，并根据您的需要调整这些内容组件，请执行以下步骤。

  1. 在电子邮件设计器中，使用现有内容或将​ 结构组件 ​拖放到空白内容中以定义电子邮件版面。 了解如何操作

  2. 要访问​ 内容组件 ​部分，请从电子邮件设计器左窗格中选择相应的按钮。

  3. 将所选内容组件拖放到相关的结构组件中。

    note
    NOTE
    您可以将多个组件添加到单个结构组件中，也可以将它们添加到结构组件的每个列中。

  4. 使用右侧的​ 设置 ​和​ 样式 ​选项卡调整每个组件的属性和样式。 例如，您可以更改每个组件的文本样式、内边距或边距。 了解有关对齐方式和内边距的更多信息

  5. 通过​ 内容组件 ​的高级菜单，您可以根据需要轻松删除或复制任何内容组件。

容器 container

要将特定样式应用于一组内容组件，您可以添加​ Container ​组件，然后在其中添加所需的内容组件。 这允许您向容器应用不同的样式，这与应用于内部内容组件的样式不同。

例如，添加一个​ 容器 ​组件，然后在该容器中添加一个按钮组件。 可以为该容器使用一个特定背景，并为按钮使用另一个背景。

按钮 button

使用​ 按钮 ​组件可将一个或多个按钮插入电子邮件中，并将电子邮件受众重定向到另一个页面。

  1. 从​ 内容组件 ​中，将​ 按钮 ​组件拖放到​ 结构组件 ​中。

  2. 单击新添加的按钮以个性化文本，并访问“电子邮件Designer”右窗格中的​ 设置 ​和​ 样式 ​选项卡。

  3. 从​ 链接 ​菜单中，添加单击该按钮时要重定向到的URL。

  4. 使用​ Target ​下拉列表选择如何重定向受众：

    • 无：单击时在同一框架中打开链接（默认）。
    • 空白：在新窗口或标签页中打开链接。
    • 自身：单击时在同一框架中打开链接。
    • 父：在父框架中打开链接。
    • 顶部：在窗口的整个正文中打开链接。

  5. 您可以通过从​ 组件设置 ​窗格中更改​边框、大小、边距​等样式属性来进一步个性化按钮。

文本 text

使用​ 文本 ​组件将文本插入到您的电子邮件中，并调整样式（边框、大小、填充等） 使用​ 样式 ​选项卡。

  1. 从​Content组件，将​ Text ​组件拖放到​ 结构组件 ​中。

  2. 单击新添加的组件以个性化文本，并访问Email Designer右侧窗格中的​ 设置 ​和​ 样式 ​选项卡。

  3. 使用工具栏中的以下可用选项更改文本：

    • 更改文本样式：对文本应用粗体、斜体、下划线或删除线。
    • 更改对齐方式：为文本选择左对齐、右对齐、居中对齐或两端对齐。
    • 创建列表：将项目符号或编号列表添加到文本中。
    • 设置标题：向文本添加最多六个标题级别。
    • 字体大小：选择文本的字体大小（以像素为单位）。
    • 更改字体颜色：选择字体颜色。
    • 插入链接：向内容添加任何类型的链接。
    • 编辑图像：将图像或资产添加到文本组件。 了解有关资产管理的更多信息
    • 更改字体颜色：选择字体颜色。
    • 添加个性化：添加个性化字段以自定义轮廓数据中的内容。 详细了解内容个性化
    • 显示源代码：显示文本的源代码。 不能修改。
    • 启用条件内容：添加条件内容以将组件的内容调整到目标配置文件。 了解有关动态内容的更多信息
    • 复制：添加文本组件的副本。
    • 删除：从电子邮件中删除选定的文本组件。

  4. 从​ 样式 ​选项卡中调整其他样式属性，如文本颜色、字体系列、边框、填充、边距等。

分隔条 divider

使用​ 分隔条 ​组件可插入分隔线来整理电子邮件的版面和内容。

可从​ 设置 ​和​ 样式 ​选项卡调整线条颜色、样式和高度等样式属性。

HTML HTML

使用 HTML 组件可复制并粘贴现有 HTML 的不同部分。 这使您能够创建免费的模块化 HTML 组件以重用某些外部内容。

  1. 从​ 内容组件 ​中，将 HTML 组件拖放到​ 结构组件 ​中。

  2. 单击新添加的组件，然后从上下文工具栏中选择​ 显示源代码 ​以添加 HTML。

  3. 复制并粘贴要添加到电子邮件中的HTML代码，然后单击​保存。

NOTE
要简单地使外部内容与电子邮件设计器兼容，Adobe 建议从头开始创建邮件并将现有电子邮件中的内容复制到组件中。

图像 image

使用​ Image ​组件将图像文件从您的计算机插入电子邮件内容。

  1. 从​内容组件，将​ 图像 ​组件拖放到​ 结构组件 ​中。

  2. 在​ 设置 ​选项卡中，单击​ 浏览 ​以从资源中选择图像文件，或单击​ 导入媒体 ​以将资源上传到Adobe Experience Manager Assets。

    要了解有关Adobe Experience Manager Assets的更多信息，请参阅Adobe Experience Manager Assets文档。

    note
    NOTE
    为了确保您的链接保持活动状态并避免任何过期问题，我们建议使用Adobe Assets而不是依赖图像的源URL。

  3. 您还可以使用​ 查找Adobe Stock照片 ​选项直接在Adobe Stock中搜索。

  4. 单击新添加的组件并设置图像属性：

    • 使用​ 图像标题 ​可以定义图像的标题。
    • 使用​ 替代文字 ​可以定义链接到图像的题注。 这对应于 alt HTML 属性。 了解详情

  5. 您还可以选择​查找类似的Stock照片。 了解详情

  6. 在​ 样式 ​选项卡中，调整其他样式属性，如边距、边框等，或添加链接以将受众重定向到​ 组件设置 ​窗格中的其他内容。

社交 social

使用​ 社交 ​组件可将指向社交媒体页面的链接插入到电子邮件内容中。

  1. 从​ 内容组件 ​中，将​ 社交 ​组件拖放到​ 结构组件 ​中。

  2. 选择新添加的组件。

  3. 在​ 设置 ​选项卡的​ 社交 ​字段中，选择要添加或删除的社交媒体。

  4. 通过专用字段选择图标的大小。

  5. 单击每个社交媒体图标可配置受众将被重定向到的​URL。

  6. 如果需要，您还可以从Assets中更改每个社交媒体的图标。

  7. 从​ 样式 ​选项卡中调整其他样式属性，如样式、边距、边框等。

优惠决策 offer-decision

使用​ 优惠决策 ​组件将优惠插入到消息中。 决策管理引擎将选取要提供给客户的最佳优惠。

  1. 从​内容组件，将​ 优惠决策 ​组件拖放到​ 结构组件 ​中。

  2. 单击​ 添加 ​以选择您的​优惠决策。

  3. 从下拉列表中，选择您的​投放位置。 然后，选择要添加到内容中的​优惠决策，然后单击​添加。

  4. 从​ 优惠决策 ​选项卡中，您可以预览或更改插入的优惠。

在本节中了解如何将个性化优惠添加到电子邮件中。

IMPORTANT
如果对历程消息中使用的优惠决策进行了更改，则需要取消发布该历程并重新发布。 这将确保将更改纳入历程的消息中，并且消息与最新更新一致。

网格 grid

使用​ 网格 ​组件将内容组织成由行和列组成的结构，其中每个单元格可以包含其他内容组件。

{width="90%"}

  1. 与Container组件一样，将其他内容组件拖放到网格的每个单元格中。

    例如，您可以添加​ Text ​组件、Image​组件和两个​ Button ​组件。 然后，您可以添加图像并单独编辑每个组件的内容。

    {width="90%"}

  2. 要调整网格的结构，请选择网格，然后转到Email Designer右窗格的​ 设置 ​选项卡。

    {width="90%"}

  3. 您可以定义网格包含多少列和行，编辑列和行之间的间距，并以百分比更改每个列的宽度。

    note
    NOTE
    使用​ 请勿在移动设备上栈叠列 ​选项可在移动设备上保留网格布局，而不是垂直栈叠列。

  4. 根据需要将其他内容组件拖放到每个单元格中，并从每个组件的​ 样式 ​选项卡中调整样式。

AI Knowledge Reference

This section contains structured knowledge intended to support interpretation, retrieval, and question answering related to this topic.

For complete understanding, this information should be combined with the documentation on this page. Neither source is intended to stand alone; the page describes the feature, while this section provides additional context that helps disambiguate terminology, intent, applicability, and constraints.

  • TL;DR: Content components are empty content placeholders you add inside structure components in the Email Designer — including Container, Button, Text, Divider, HTML, Image, Social, Offer decision, and Grid — and configure through the Settings and Style tabs.

Intents:

  • Add and configure content components inside structure components
  • Insert buttons, text, dividers, images, social links, HTML, and offer decisions into an email
  • Group components inside a Container to apply a distinct style
  • Organize content into rows and columns with the Grid component
  • Insert personalized offers with the Offer decision component
  • Adjust component attributes and styling using the Settings and Style tabs

Glossary:

  • Content components: Empty content placeholders used to build and personalize email layout, added inside structure components (product-specific)
  • Container: A component that groups content components so a distinct style can be applied to the group (product-specific)
  • Grid: A component that organizes content into rows and columns, where each cell can contain other content components (product-specific)
  • Offer decision: A component that inserts offers into a message, with the decision management engine picking the best offer to deliver (product-specific)
  • Alt text: Caption defined for an image, corresponding to the alt HTML attribute (product-specific)

Guardrails:

  • If changes are made to an offer decision used in a journey’s message, you need to unpublish the journey and republish it so the changes are incorporated.
  • Follow the European accessibility act guidelines (accessible fonts, readable formats, and alternative text for images) when designing with content components.
  • For images, Adobe recommends using Adobe Assets rather than a source URL to keep links active and avoid expiration issues.
  • Button Target options: None (default, same frame), Blank (new window or tab), Self (same frame), Parent (parent frame), Top (full body of the window).
  • Use the Do not stack columns on mobile option to preserve a grid layout on mobile devices instead of stacking columns vertically.

Terminology:

  • Canonical name: Content components — Acronym: n/a — variants: content component
  • Synonyms: “Settings tab” and “Style tab” = the two configuration tabs in the right pane (also referred to as Styles tab)
  • Do not confuse: “Content components” (empty placeholders for content) ≠ “Structure components” (define the layout, hold content components)
  • Do not confuse: “Container” (styles a group of components) ≠ “Grid” (organizes components into rows and columns)

FAQ:

  • Q: Which content components are available? — Container, Button, Text, Divider, HTML, Image, Social, Offer decision, and Grid.
  • Q: How many components can go into a structure component? — You can add several components into a single structure component and into each column of a structure component.
  • Q: What happens after I change an offer decision used in a journey? — You must unpublish and republish the journey so the message reflects the latest updates.
  • Q: How do I insert an image? — Drag the Image component into a structure component, then Browse your assets, Import media to Adobe Experience Manager Assets, or Find Adobe Stock photos.
  • Q: Can I keep the grid layout on mobile? — Yes, use the Do not stack columns on mobile option.
recommendation-more-help
journey-optimizer-help