文档Journey Optimizer B2BJourney Optimizer B2B Edition 文档

[Beta 版]{class="badge informative" title="此功能当前为有限测试版"}

登陆页面模板设计

Last update: Wed Sep 10 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

创建对象：

  • 用户

在您创建登陆页面模板之后，请使用可视化设计空间在页面模板中创作结构和内容组件。

添加结构和内容 structure-content-landing-page

  1. 要开始内容设计，请从​ 结构 ​中拖动一个项，然后将其放到画布上。

    根据需要从​ 结构 ​添加任意数量的项，并编辑右侧窗格中每个项的设置。

    note tip
    TIP
    选择​_n:n列_​组件以定义您选择的列数（3到10之间）。 您还可以通过移动列下方的箭头来定义每列的宽度。

    将结构拖动到画布上并调整设置 {width="800" modal="regular"}

    每个列大小不能小于结构组件总宽度的10%。 只能删除空列。

  2. 展开​ 内容 ​部分，然后根据需要将任意数量的内容组件添加到一个或多个结构组件中。

    将内容元素拖到画布上并调整设置 {width="800" modal="regular"}

  3. 如果需要，您可以在​ 设置 ​或​ 样式 ​选项卡中为每个组件进行其他自定义。

    例如，可以更改每个组件的文本样式、填充或边距。

  4. 要添加条件内容并根据条件规则将内容调整到目标配置文件，请选择一个内容组件，然后单击组件工具栏中的​ 启用条件内容 ​图标。

    有关详细信息，请参阅​条件内容。

添加自定义 CSS

您可以直接在登陆页面设计空间中添加自己的自定义CSS。 使用自定义CSS可应用高级和特定的样式，以便更加灵活地控制内容的外观。 最佳实践是在包含组件（如图像、按钮和文本）之前添加此最高级别的样式。

如果画布中至少有一个内容组件，请选择左侧导航树中的​ Body ​组件以访问自定义CSS编辑器。

访问正文样式 {width="800" modal="regular"}

  1. 在右侧显示的​ 样式 ​选项卡中，单击​添加自定义CSS。

    note note
    NOTE
    添加自定义CSS​按钮仅在选择了​_正文_​组件时可用。 但是，您可以将自定义CSS样式应用于其中的所有组件。

    添加自定义CSS​弹出编辑器显示占位符代码注释。

  2. 在编辑器中输入CSS代码。

    请确保自定义CSS有效并遵循正确的语法。 如果输入的CSS无效，则会显示一条错误消息，并且无法保存CSS。 若要了解详细信息，请参阅CSS有效期。

  3. 单击​ 保存 ​以保存自定义CSS。

    自定义样式表应用于现有内容。 您可以检查自定义CSS是否已根据您的需求应用。 有关如何进行更改并调整样式表应用程序的信息，请参阅疑难解答。

NOTE
如果删除所有内容，则CSS部分将不再出现在正文样式面板中，并且之前定义的自定义CSS将不再应用。 如果添加回内容，则会重新显示​ CSS样式 ​部分，并再次应用自定义CSS。

添加资源

在可视内容编辑器中，选择左侧导航栏中的​Marketo Engage Assets ( Marketo Engage Assets图标 )图标或​Experience Manager Assets ( AEM Assets图标 )图标。 在资产选择器中，您可以直接选择存储在源库中的资产。

NOTE
如果您配置了 Adobe Experience Manager as a Cloud Services，当您的用户帐户具有所需的权限时，您就可以访问 Marketo Engage Design Studio 和 Adobe Experience Manager Assets as a Cloud Service 的存储库。这两个存储库是独立的，且不同步。您可以使用任一源中的图像资产。

  • 通过将图像资产拖放到结构组件中来添加新资产。

    将Marketo Engage资源拖动到画布上并调整设置 {width="800" modal="regular"}

  • 通过在画布上选择现有图像资源并单击图像源工具中的​ 选择资源 ​来替换该资源。

    从源库中选择资产 {width="600" modal="regular"}

有关使用源类型中的资产的更多信息，请参阅使用资产进行内容创作。

添加表单

表单是可重复使用的组件，可由Adobe Journey Optimizer B2B edition中的多个登陆页面和登陆页面模板引用。 它是一个字段块和提交按钮，可以预先创建并快速插入该按钮，以使页面设计更快更一致。

以下示例概述了在设计页面时添加表单的步骤。

  1. 在​ 内容 ​部分下，将​ 表单 ​项拖放到页面设计空间上的某个结构组件中。

    将表单组件拖动到可视设计空间 {width="600"}

    note tip
    TIP
    要添加表单，使其占据电子邮件中的整个水平布局，请添加1:1列结构，然后将表单拖放到其中。

  2. 单击组件工具栏中的​ 表单 ​图标，或使用右侧的​ 嵌入表单 ​属性选择发布的表单。

    选择已发布的表单 {width="600"}

  3. 如果要覆盖表单的默认​跟进类型，请根据页面或模板的要求更改设置。

    这也称为表单的​感谢页面，此设置确定访客提交表单时会发生什么情况：

    • 停留在页面 — 选择此选项可在提交表单时将访客停留在同一页面。

    • 登陆页面 — 选择此选项可选择任意Journey Optimizer B2B edition或Marketo Engage登陆页面作为跟进。

    • 外部URL — 选择此选项可将任何URL指定为后续页面。 访客提交表单后，浏览器会加载指定的URL。

      note tip
      TIP
      如果您希望使用表单下载文件，则可以指定托管文件的URL。 对于此配置，提交按钮将充当下载按钮。

    更改跟进设置 {width="280"}

  4. 如果要按设备类型限制表单显示，请更改​ 显示选项 ​设置：

    • 仅在桌面设备上显示
    • 仅在移动设备上显示
    • 在所有设备上显示（默认）

  5. 如果需要，请选择右侧面板中的​ 样式 ​选项卡以设置页面中的表单边距。

导航图层、设置和样式

在可视化设计空间中使用内容时，可以使用导航树访问组件、列和内容元素。 单击左侧的​ 导航树 ​图标（ 导航树图标 ）以显示该树。

访问内容层 {width="800" modal="regular"}

以下示例概述了在具有列的结构组件内调整填充和垂直对齐的步骤。

  1. 直接在画布中选择结构组件中的列，或使用左侧显示的​导航树。

  2. 在列工具栏中，单击​ 选择列 ​工具，然后选择要编辑的工具。

    也可以从结构树中选择它。 该列的可编辑参数显示在右侧的​ 设置 ​和​ 样式 ​选项卡中。

    可视化设计器中显示的 列组件 {width="800" modal="regular"}

  3. 要编辑列属性，请单击右侧的​ 样式 ​选项卡，然后根据需要进行更改：

    • 对于​背景，根据需要更改背景颜色。

      清除透明背景的复选框。 启用​ 背景图像 ​设置以使用图像作为背景，而不是纯色。

    • 对于​对齐方式，请选择​Top、Middle​或​ Bottom ​图标。

    • 对于​内边距，定义所有边的内边距。

      如果要微调边距，请选择​每边不同的边距。 单击​ 锁定 ​图标中断同步。

    • 展开​ 高级 ​部分以定义列的内联样式。

    更改选定列的样式 {width="700" modal="regular"}

  4. 如果需要，请重复这些步骤以调整组件中其他列的对齐和填充。

  5. 保存更改。

个性化内容

Journey Optimizer B2B edition使用内联简单语法，允许您创建包含用双大括号{}括起来的个性化内容的表达式。 您可以在同一内容或字段中添加多个表达式，而不受限制。

示例：

  • Hello {{profile.person.name.firstName}} {{profile.person.name.lastName}}

  • Hello {{profile.person.name.fullName}}

处理内容时，Journey Optimizer B2B edition会使用Experience Platform数据库中包含的数据替换表达式。 因此，第一个示例变为​Hello John Doe。

以下示例概述了使用商机/帐户属性和系统令牌对内容进行个性化的步骤。

  1. 选择文本组件并单击工具栏中的​ 添加个性化 ​图标。

    单击“个性化”图标 {width="600"}

    此操作打开​ 编辑Personalization ​对话框。

  2. 单击​ + ​或​ … ​将令牌添加到空白空间。

    使用令牌构造个性化文本 {width="700" modal="regular"}

  3. 单击​保存。

编辑链接的URL跟踪

  1. 单击左侧的​ 链接 ​图标（ 显示链接图标 ）可显示您的内容中要跟踪的所有链接URL。

  2. 如果需要，请单击​编辑 （ 编辑图标 ）图标并修改​ 跟踪类型 ​或​标签。

    您还可以为链接添加​标记。

单击“编辑”图标以访问链接跟踪 {width="500"}

保存您所做的工作

随时单击​ 保存 ​以保存登陆页面模板。

查看选项

利用可视设计空间中可用的视图和内容验证选项。

  • 通过预设缩放选项放大/缩小内容。

  • 切换在桌面、移动设备或纯文本/纯文本中查看内容。

    • 单击​ 查看 ​图标可跨设备预览内容。
    • 选择一个现成的设备或输入自定义维度以预览内容。

更多选项

从可视化设计空间顶部的​ 更多…… ​菜单中，可以执行以下操作：

单击“更多”以访问模板操作 {width="500"}

  • 重置登陆页面 — 单击此选项可将可视化设计画布清除为空白并重新启动页面内容生成操作。
  • 更改您的设计 — 返回到​ 创建您的主登陆页面 ​主页。 从该位置，您可以选择另一个模板来重新启动设计过程，或者选择在空白画布中从头开始设计页面。
  • 导出HTML — 将可视画布中的内容以HTML格式下载到您的本地系统，并打包为zip文件。
recommendation-more-help
6ef00091-a233-4243-8773-0da8461f7ef0