• Marketo Engage Assets — 选择此类型以浏览并从Journey Optimizer B2B edition库或连接的Market Engage实例中选择图像资源。

    浏览可用的图像资源 {width="700" modal="regular"}

    从该对话框中，可以从所选存储库中选择图像。 单击​ 选择 ​以添加资产。

    有多种工具可帮助您找到所需的资源：

    • 单击左上角的​ 筛选器 ​图标以根据您的条件筛选显示的项目。

    • 在​ 搜索 ​字段中输入文本，以筛选显示的项目以匹配资源名称。

      使用筛选器和搜索字段查找您需要的资源 {width="700" modal="regular"}

  • Experience Manager Assets — 选择此类型以浏览并从配置的Experience Manage Assets存储库中选择图像资源。

    从​ 选择Assets ​对话框中，使用可用工具选择一个图像以查找所需的资源，然后单击​选择：

    • 更改右上角的​存储库。

    • 单击右上角的​ 管理资源 ​可在其他浏览器选项卡中打开Assets存储库并使用AEM Assets管理工具。

    • 单击右上角的​ 视图类型 ​选择器以将显示更改为​列表视图、网格视图、图库视图​或​瀑布视图。

    • 单击​ 排序顺序 ​图标可在升序和降序之间更改排序顺序。

      使用“选择Assets”对话框中的工具查找并选择图像资源 {width="700" modal="regular"}

    • 单击​ 排序方式 ​菜单箭头以将排序条件更改为​名称、大小​或​修改时间。

    • 单击左上角的​ 筛选器 ​图标以根据您的条件筛选显示的项目。

    • 在​ 搜索 ​字段中输入文本，以筛选显示的项目以匹配资源名称。

    使用筛选器和搜索字段查找资源 {width="700" modal="regular"}

  • 导入媒体 — 选择此类型可从系统中选择文件并将其导入Journey Optimizer B2B edition资源库。

    在​ 上传图像 ​对话框中，将文件从您的系统拖放到文件框中。 最大文件大小为100 MB。

    将图像文件导入 {width="450"}

    对话框中显示所选图像的文件名。 资源文件名必须是唯一的（跨文件夹），如果具有该名称的文件已存在，则会显示一条消息。 名称最多可包含100个字符，并且不能包含特殊字符（如;、:、\和|）。

    单击​导入。

可以在右侧面板中为图像添加图像标题和替换文本。

图像设置 {width="250"}

设置链接选项

在​ 设置 ​选项卡上，使用​ 链接 ​选项将图像链接到目标以及用于加载目标页面的浏览器行为。

  1. 为链接设置​类型：

    • 外部链接 — 选择此类型以使用标准URL作为链接目标。

      在​ Url ​中，输入链接目标的URL。 单击​个性化 （ 个性化图标 ）图标，将个性化令牌用作URL中的参数。

      为按钮组件定义外部链接 {width="250"}

    • 登陆页面 — 选择此类型可在连接的Marketo Engage实例中选择已发布的登陆页面。

      对于​ 登陆页面 ​选项，选择已发布的登陆页面。 单击​ 选择页面 ​图标（ 显示链接图标 ）和选择已发布的登陆页面。

      为按钮组件定义指向登陆页面的链接 {width="250"}

  2. 对于​标签，输入要显示在按钮中的文本。

    按钮大小会根据设置的文本和样式进行调整。

  3. 对于​Target，请选择如何从电子邮件或页面重定向链接的目标：

    • 无 — 使用默认浏览器或客户端行为（默认）打开链接。
    • 空白 — 在新窗口或选项卡中打开链接。
    • Self — 在同一帧中打开链接。
    • 父项 — 在父框架中打开链接。
    • Top — 在窗口的整个正文中打开链接。

设置样式

在右侧面板中设置图像组件的样式。

背景

在右侧面板中选择​ 样式 ​选项卡后，使用​ 背景 ​部分定义组件的背景颜色。

选中复选框，然后单击颜色方框以从选取器中选择颜色。 您可以通过输入已知的RGB、HSL、HSB或十六进制值来选择颜色。 或者，可以使用颜色滑块和颜色域来选择颜色。

背景拾色器 {width="300"}

边框

  1. 在选择了​ 样式 ​选项卡的右侧面板上，展开​ 边框 ​部分并设置相应选项以显示组件的边框：

  2. 将切换开关右移以启用边框显示选项，并根据您的设计标准进行设置：

    • 若要设置​边框颜色，请选中该复选框，然后单击颜色正方形以从选取器中选择颜色。 您可以通过输入已知的RGB、HSL、HSB或十六进制值来选择颜色。 或者，可以使用颜色滑块和颜色域来选择颜色。

    边框拾色器 {width="300"}

    • 要设置​边框大小 （线条宽度），请单击向上和向下箭头图标以增加或减少像素数。

    • 若要设置​边框样式，请从标准CSS border-style值列表中选择一个值。

    • 要确定显示边框的位置，请选中每个​ 边框位置 ​复选框。

    边框样式 {width="250"}

  3. 对于​边框半径，根据您想要的拐角曲线设置数值。

    值为0（默认）会产生一个方形角。

大小

在选择了​ 样式 ​选项卡的右侧面板上，展开​ 大小 ​部分并设置组件高度和宽度的选项：

  • 高度 — 单击向上和向下箭头图标以增加或减少像素数。 缺省值为空值(Auto)，并根据元素的内容调整元素的高度。

  • 宽度 — 使用切换开关以像素或百分比设置宽度。

    • 对于百分比宽度，使用滑块设置百分比值。 百分比根据包含块的内容框确定元素大小，其中不包括填充和边框。 例如，如果值为50，则将元素宽度设置为其包含的块内容宽度的50%。

      使用百分比的 宽度样式 {width="250"}

    • 对于基于像素的宽度，单击向上和向下箭头图标可增加或减少像素数。 缺省值为空值(Auto)，并根据元素的内容调整元素宽度。

      宽度样式（使用像素） {width="250"}

对齐方式

展开​ 对齐方式 ​部分，然后选择要使用的水平对齐方式：左对齐、居中对齐或右对齐。 此样式将转换为标准text-align CSS样式，并影响该组件在容器组件中的放置方式。

水平对齐样式 {width="250"}

边距

在选择了​ 样式 ​选项卡的右侧面板上，展开​ 边距 ​部分并设置结构组件中的边距间距选项。 此样式复制CSS margin参数，该参数控制组件边框之外的空间，将其与其他组件分开。 它会在组件周围创建一个间隙，以影响其定位和周围内容的布局。

根据设计需要设置边距值（像素）。 您可以单独设置组件的所有边、上边框、左右边或每侧的边距：

  • 所有边 — 若要设置一个值以应用于所有边，请清除每个边的​ 不同边距 ​复选框。 单击向上和向下箭头图标以增加或减少像素数。

    设置所有边的边距 {width="250"}

  • 上下 — 若要将上边距和下边距设置为相同的值，请设置上设置和下设置之间的​ 锁定 ​图标。 单击的向上和向下箭头图标可增加或减少像素数。

  • 左右边距 — 若要将左右边距设置为相同的值，请设置左右设置之间的​ 锁定 ​图标。 单击的向上和向下箭头图标可增加或减少像素数。

    锁定上下边距和左右边距 {width="250"}

  • 独立 — 若要将每个边距设置为独立值，请在上下设置之间以及左右设置之间设置​ Unlocked ​图标。 对于每个设置，单击向上和向下箭头图标以增加或减少像素数。

    设置独立的边距 {width="250"}

填充

在选择了​ 样式 ​选项卡的右侧面板上，展开​ 内边距 ​部分，并设置结构组件内的内边距选项。 此样式将复制CSS padding参数，该参数是组件内容与其边框之间的空间。 内边距提供了内部间距，可用于控制内容与组件边框之间的距离。

根据设计需要设置以像素为单位的填充值。 您可以单独设置组件的所有边、上边框、左右边或每侧的边距：

  • 所有边 — 若要设置一个值以应用于所有边，请清除​ 每个边的不同边距 ​复选框。 单击向上和向下箭头图标以增加或减少像素数。

    设置所有边的内边距 {width="250"}

  • Top-bottom — 若要将顶边距和底边距设置为相同的值，请将​ Locked ​图标设置为介于顶设置和底设置之间。 单击的向上和向下箭头图标可增加或减少像素数。

  • 左右边距 — 若要将左右边距设置为相同的值，请设置左右设置之间的​ 锁定 ​图标。 单击的向上和向下箭头图标可增加或减少像素数。

    上下边距和左右边距的锁定边距 {width="250"}

  • 独立 — 若要将每侧的填充设置为独立值，请在顶部设置与底部设置之间以及左侧设置与右侧设置之间设置​ 已解锁 ​图标。 对于每个设置，单击向上和向下箭头图标以增加或减少像素数。

    设置独立填充 {width="250"}

高级

若要使用值应用其他符合CSS的属性，请使用​ 高级 ​样式设置。 您可以更改现有属性的值或添加新属性。 样式使用父 — 子组件（元素）的CSS继承模型应用于组件。

显示的属性反映当前为组件定义的样式。 您可以根据CSS定义更改值。 单击​添加 (+)图标为组件添加新的样式属性。

高级样式 {width="250"}

社交

使用​ Social ​组件将指向社交媒体页面的链接插入到您的内容中。 它包含三种默认社交媒体类型，但您可以根据需要添加或删除这些类型。

具有默认类型的新社交组件 {width="600" modal="regular"}

  • 要添加社交媒体类型，请单击​添加 ( + )图标，然后选择要添加的社交媒体类型。

    单击+以添加社交媒体类型 {width="250"}

  • 要删除社交媒体类型，请单击社交媒体图标旁边的​X。

选择社交媒体类型后，为该类型设置选项：

  • URL — 输入要链接到社交媒体图形或图标的社交媒体URL。

  • Source — 如果要使用自己的图像而不是默认图像，请选择并创建图像资源。 您可以从连接的Marketo Engage资源存储库和Experience Manager Assets存储库（如果已配置）中选择图像，或从系统中导入图像文件。 有关选择和导入图像资产的详细信息，请参阅图像组件信息。

  • 替代文本 — 为显示的图像输入替代文本。

    所选社交媒体类型的设置 {width="250"}

若要为所有社交媒体图形定义一致的显示大小，请设置​图像大小。

您可以为​ Social ​组件设置以下样式选项：

背景

在右侧面板中选择​ 样式 ​选项卡后，使用​ 背景 ​部分定义组件的背景颜色。

选中复选框，然后单击颜色方框以从选取器中选择颜色。 您可以通过输入已知的RGB、HSL、HSB或十六进制值来选择颜色。 或者，可以使用颜色滑块和颜色域来选择颜色。

背景拾色器 {width="300"}

边框

  1. 在选择了​ 样式 ​选项卡的右侧面板上，展开​ 边框 ​部分并设置相应选项以显示组件的边框：

  2. 将切换开关右移以启用边框显示选项，并根据您的设计标准进行设置：

    • 若要设置​边框颜色，请选中该复选框，然后单击颜色正方形以从选取器中选择颜色。 您可以通过输入已知的RGB、HSL、HSB或十六进制值来选择颜色。 或者，可以使用颜色滑块和颜色域来选择颜色。

    边框拾色器 {width="300"}

    • 要设置​边框大小 （线条宽度），请单击向上和向下箭头图标以增加或减少像素数。

    • 若要设置​边框样式，请从标准CSS border-style值列表中选择一个值。

    • 要确定显示边框的位置，请选中每个​ 边框位置 ​复选框。

    边框样式 {width="250"}

  3. 对于​边框半径，根据您想要的拐角曲线设置数值。

    值为0（默认）会产生一个方形角。

大小

在选择了​ 样式 ​选项卡的右侧面板上，展开​ 大小 ​部分并设置组件高度和宽度的选项：

  • 高度 — 单击向上和向下箭头图标以增加或减少像素数。 缺省值为空值(Auto)，并根据元素的内容调整元素的高度。

  • 宽度 — 使用切换开关以像素或百分比设置宽度。

    • 对于百分比宽度，使用滑块设置百分比值。 百分比根据包含块的内容框确定元素大小，其中不包括填充和边框。 例如，如果值为50，则将元素宽度设置为其包含的块内容宽度的50%。

      使用百分比的 宽度样式 {width="250"}

    • 对于基于像素的宽度，单击向上和向下箭头图标可增加或减少像素数。 缺省值为空值(Auto)，并根据元素的内容调整元素宽度。

      宽度样式（使用像素） {width="250"}

对齐方式

展开​ 对齐方式 ​部分，然后选择要使用的水平对齐方式：左对齐、居中对齐或右对齐。 此样式将转换为标准text-align CSS样式，并影响该组件在容器组件中的放置方式。

水平对齐样式 {width="250"}

边距

在选择了​ 样式 ​选项卡的右侧面板上，展开​ 边距 ​部分并设置结构组件中的边距间距选项。 此样式复制CSS margin参数，该参数控制组件边框之外的空间，将其与其他组件分开。 它会在组件周围创建一个间隙，以影响其定位和周围内容的布局。

根据设计需要设置边距值（像素）。 您可以单独设置组件的所有边、上边框、左右边或每侧的边距：

  • 所有边 — 若要设置一个值以应用于所有边，请清除每个边的​ 不同边距 ​复选框。 单击向上和向下箭头图标以增加或减少像素数。

    设置所有边的边距 {width="250"}

  • 上下 — 若要将上边距和下边距设置为相同的值，请设置上设置和下设置之间的​ 锁定 ​图标。 单击的向上和向下箭头图标可增加或减少像素数。

  • 左右边距 — 若要将左右边距设置为相同的值，请设置左右设置之间的​ 锁定 ​图标。 单击的向上和向下箭头图标可增加或减少像素数。

    锁定上下边距和左右边距 {width="250"}

  • 独立 — 若要将每个边距设置为独立值，请在上下设置之间以及左右设置之间设置​ Unlocked ​图标。 对于每个设置，单击向上和向下箭头图标以增加或减少像素数。

    设置独立的边距 {width="250"}

填充

在选择了​ 样式 ​选项卡的右侧面板上，展开​ 内边距 ​部分，并设置结构组件内的内边距选项。 此样式将复制CSS padding参数，该参数是组件内容与其边框之间的空间。 内边距提供了内部间距，可用于控制内容与组件边框之间的距离。

根据设计需要设置以像素为单位的填充值。 您可以单独设置组件的所有边、上边框、左右边或每侧的边距：

  • 所有边 — 若要设置一个值以应用于所有边，请清除​ 每个边的不同边距 ​复选框。 单击向上和向下箭头图标以增加或减少像素数。

    设置所有边的内边距 {width="250"}

  • Top-bottom — 若要将顶边距和底边距设置为相同的值，请将​ Locked ​图标设置为介于顶设置和底设置之间。 单击的向上和向下箭头图标可增加或减少像素数。

  • 左右边距 — 若要将左右边距设置为相同的值，请设置左右设置之间的​ 锁定 ​图标。 单击的向上和向下箭头图标可增加或减少像素数。

    上下边距和左右边距的锁定边距 {width="250"}

  • 独立 — 若要将每侧的填充设置为独立值，请在顶部设置与底部设置之间以及左侧设置与右侧设置之间设置​ 已解锁 ​图标。 对于每个设置，单击向上和向下箭头图标以增加或减少像素数。

    设置独立填充 {width="250"}

高级

若要使用值应用其他符合CSS的属性，请使用​ 高级 ​样式设置。 您可以更改现有属性的值或添加新属性。 样式使用父 — 子组件（元素）的CSS继承模型应用于组件。

显示的属性反映当前为组件定义的样式。 您可以根据CSS定义更改值。 单击​添加 (+)图标为组件添加新的样式属性。

高级样式 {width="250"}

表单（登陆页面）

[Beta 版]{class="badge informative" title="Beta功能"}

使用​ 表单 ​组件将已发布的表单添加到登陆页面或登陆页面模板。 有关创建和发布表单的更多信息，请参阅Forms。

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

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

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

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

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

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

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

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

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

如果需要，请选择右侧面板中的​ 样式 ​选项卡以设置结构组件中的表单边距。

在选择了​ 样式 ​选项卡的右侧面板上，展开​ 边距 ​部分并设置结构组件中的边距间距选项。 此样式复制CSS margin参数，该参数控制组件边框之外的空间，将其与其他组件分开。 它会在组件周围创建一个间隙，以影响其定位和周围内容的布局。

根据设计需要设置边距值（像素）。 您可以单独设置组件的所有边、上边框、左右边或每侧的边距：

  • 所有边 — 若要设置一个值以应用于所有边，请清除每个边的​ 不同边距 ​复选框。 单击向上和向下箭头图标以增加或减少像素数。

    设置所有边的边距 {width="250"}

  • 上下 — 若要将上边距和下边距设置为相同的值，请设置上设置和下设置之间的​ 锁定 ​图标。 单击的向上和向下箭头图标可增加或减少像素数。

  • 左右边距 — 若要将左右边距设置为相同的值，请设置左右设置之间的​ 锁定 ​图标。 单击的向上和向下箭头图标可增加或减少像素数。

    锁定上下边距和左右边距 {width="250"}

  • 独立 — 若要将每个边距设置为独立值，请在上下设置之间以及左右设置之间设置​ Unlocked ​图标。 对于每个设置，单击向上和向下箭头图标以增加或减少像素数。

    设置独立的边距 {width="250"}

recommendation-more-help