3.1.2创建要在消息中使用的片段
在本练习中，您将配置2个片段，1个片段用于可重用的页眉，1个片段用于可重用的页脚。
通过转到Adobe Experience Cloud登录Adobe Journey Optimizer。 单击 Journey Optimizer。
您将被重定向到Journey Optimizer中的 主页 视图。 首先，确保使用正确的沙盒。 要使用的沙盒名为--aepSandboxName--。
3.1.2.1创建您的标头片段
在左侧菜单中，单击 片段。 片段是Journey Optimizer中可重用的组件，可避免重复并便于将来进行应当影响所有消息的更改，例如对电子邮件中的页眉或页脚的更改。
单击 创建片段。
输入名称--aepUserLdap-- - CitiSignal - Header并选择 类型：可视片段。 单击 创建。
你会看到这个。 在左侧菜单中，您将找到可用于定义电子邮件结构（行和列）的结构组件。
将 1:1列 从菜单拖放到画布中。 这将是徽标图像的占位符。
接下来，您可以使用内容组件在这些块中添加内容。 将 Image 组件拖放到第一行的第一个单元格中。 单击 浏览。
然后，您将看到一个弹出窗口打开，其中显示您的AEM Assets媒体库。 转到文件夹 citi-signal-images，单击以选择图像 CitiSignal-Logo-White.png，然后单击 选择。
你会看到这个。 您的图像是白色的，尚未显示。 您现在应该定义背景颜色，以使图像正确显示。 单击 样式，然后单击 背景颜色 框。
在弹出窗口中，将 十六进制 颜色代码更改为 #8821F4，然后通过单击 100% 字段来更改焦点。 然后，您会看到应用于图像的新颜色。
现在这个图像也有点大。 让我们将 宽度 切换器滑动到 40% 以更改宽度。
您的标头片段现已准备就绪。 单击 保存，然后单击箭头返回上一屏幕。
您的片段需要先发布，然后才能使用。 单击 发布。
几分钟后，您会看到片段的状态已更改为 实时。
接下来，您应该为电子邮件的页脚创建新片段。 单击 创建片段。
3.1.2.2创建您的页脚片段
单击 创建片段。
输入名称--aepUserLdap-- - CitiSignal - Footer并选择 类型：可视片段。 单击 创建。
你会看到这个。 在左侧菜单中，您将找到可用于定义电子邮件结构（行和列）的结构组件。
将 1:1列 从菜单拖放到画布中。 这将是页脚内容的占位符。
接下来，您可以使用内容组件在这些块中添加内容。 将 HTML 组件拖放到第一行的第一个单元格中。 单击组件以将其选中，然后单击 </> 图标以编辑HTML源代码。
你会看到这个。
复制以下HTML代码片段并将其粘贴到Journey Optimizer中的 编辑HTML 窗口中。
<!--[if mso]><table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td style="text-align: center;" ><![endif]-->
<table style="width: auto; display: inline-block;">
<tbody>
<tr class="component-social-container">
<td style="padding: 5px">
<a style="text-decoration: none;" href="https://www.facebook.com" data-component-social-icon-id="facebook">
</a>
</td>
<td style="padding: 5px">
<a style="text-decoration: none;" href="https://x.com" data-component-social-icon-id="twitter">
</a>
</td>
<td style="padding: 5px">
<a style="text-decoration: none;" href="https://www.instagram.com" data-component-social-icon-id="instagram">
</a>
</td>
</tr>
</tbody>
</table>
<!--[if mso]></td></tr></table><![endif]-->
你就能拥有这个了。 在第7、12和17行，您现在需要使用AEM Assets库中的资源插入图像文件。
确保光标位于第7行，然后单击左侧菜单中的 Assets。 单击 打开资产选择器 以选择您的图像。
打开文件夹 citi-signal-images，然后单击选择图像 Icon_Facebook.png。 单击 选择。
确保光标位于第12行，然后单击 打开资产选择器 以选择图像。
打开文件夹 citi-signal-images，然后单击选择图像 Icon_X.png。 单击 选择。
确保光标位于第17行，然后单击 打开资产选择器 以选择图像。
打开文件夹 citi-signal-images 并单击以选择图像 Icon_Instagram.png。 单击 选择。
你会看到这个。 单击 保存。
然后你就可以回到编辑器中了。 您的图标尚未显示，因为背景和图像文件全部为白色。 若要更改背景颜色，请转到 样式 并单击 背景颜色 复选框。
将 十六进制 颜色代码更改为 #000000。
将对齐方式更改为居中。
让我们在页脚中添加一些其他部分。 将 Image 组件拖放到刚刚创建的HTML组件上方。 单击 浏览。
单击选择图像文件 CitiSignal_Footer_Logo.png 并单击 选择。
转到 样式 并单击 背景颜色 复选框，让我们将其再次更改为黑色。 将 十六进制 颜色代码更改为 #000000。
将宽度更改为 20% 并验证对齐方式是否设置为居中。
接下来，将 Text 组件拖放到您创建的HTML组件下。 单击 浏览。
通过替换占位符文本来复制并粘贴以下文本。
1234 N. South Street, Anywhere, US 12345
Unsubscribe
©2024 CitiSignal, Inc and its affiliates. All rights reserved.
将 文本对齐方式 设置为居中。
将 字体颜色 更改为白色，#FFFFFF。
将 背景颜色 更改为黑色，#000000。
选择页脚中的文本 取消订阅，然后单击菜单栏中的 链接 图标。 将 Type 设置为 外部选择退出/取消订阅，并将URL设置为 https://aepdemo.net/unsubscribe.html（取消订阅链接不允许有空白URL）。
你就能拥有这个了。 您的页脚现已准备就绪。 单击 保存，然后单击箭头返回上一页。
单击 发布 发布您的页脚，以便将其用在电子邮件中。
几分钟后，您会看到页脚的状态已更改为 实时。
