Dynamic Media模板 dynamic-media-templates
使用Dynamic Media模板(WYSIWYG模板编辑器)为您的横幅和传单创建实时可自定义的模板。 发布Dynamic Media模板并将其用于下游应用程序。 Dynamic Media模板包含图像和文本图层。 向模板的图像和文本图层添加参数，并使用Dynamic Media URL重新定位图层并调整其大小以及实时更新其内容。
一些主要功能包括：
- Dynamic MediaWYSIWYG模板编辑器： 创建带有图像和文本图层的可自定义横幅。
- 层参数化： 为层定义动态键值对以启用实时更新。
- Dynamic MediaURL支持： 为模板使用Dynamic Media URL，集成来自第一方或第三方应用程序的个性化值。
- 图层可见性控件： 根据需要动态隐藏或显示图层。
- 智能文本调整大小： 自动调整文本大小以适合指定的区域。
Dynamic Media模板的一些主要优势包括：
- 优化1:1 Personalization： 根据实时客户信号定制内容。
- 减少手动工作： 自动化并加快内容创建和管理。
- 确保一致的全渠道体验： 保持跨渠道的品牌一致性。
- 有效地重用内容： 避免使用单次的内容，并通过动态的参数化模板进行缩放。
- 降低风险： 实时更新定价、折扣和链接。
- 增强客户参与度： 推动交互式、与上下文相关的体验。
在此视频中了解如何分步创建Dynamic Media模板。
开始之前 prerequisites-for-dynamic-media-wysiwyg-template
满足以下要求以创建Dynamic Media模板并生成其投放URL：
-
访问Dynamic Media。
-
在Assets View主页上，您有一个文件夹位于 Dynamic Media Assets 中以保存您的模板。 在Assets
-
发布要在创建模板时使用的图像，以便在创建模板后生成模板的投放URL。 投放URL可用于下游应用程序。
-
若要在模板的文本图层中使用默认Adobe Sans F2字体以外的字体，请同时将该字体文件上载并发布到AEM和Dynamic Media。 支持的字体文件格式为：AFM、OTF、PFB、PFM、PhotoFont、TTC、TTF。 另外，请确保重新处理要使用的现有字体。 有关详细信息，请参阅字体。
-
在触屏UI中验证以下内容：
- 在 编辑Dynamic Media配置页面 上，默认情况下设置为 Dynamic Media禁用的 同步模式 未应用于所有AEM文件夹（ 同步所有内容 未选中）。 有关详细信息，请参阅配置Dynamic Media Cloud Service。
- Dynamic Media同步模式 设置为目标文件夹或子文件夹的子文件夹 启用 创建后保存模板。 有关详细信息，请参阅配置 Dynamic Media Cloud Service。
创建Dynamic Media模板 how-to-create-dynamic-media-template
执行以下步骤以创建Dynamic Media模板：
创建空白画布 create-a-canvas
执行以下步骤可创建空白画布：
-
导航到Assets View，选择左侧面板中可用的 Dynamic Media Assets，然后导航到您的文件夹以将您的模板保存在该文件夹中。
-
选择 创建模板。 此时将显示 新模板 对话框。
note note NOTE 模板将保存在创建该模板的位置。 在Assets View主页上，选择 Dynamic Media Assets，然后单击 创建模板 以将模板保存在 Dynamic Media Assets 根文件夹中。 -
指定模板名称，定义画布宽度和高度，然后单击 创建。 屏幕上会显示一个空白画布，画布的两侧都有用于创建模板的菜单选项。 将鼠标悬停在菜单选项上可查看其工具提示。
note note NOTE 允许的宽度和高度范围是50到5000。
右窗格中的菜单选项： 使用这些选项将必要的图像和文本图层添加到画布中。
-
-
-
左窗格中的菜单选项： 请将这些选项用于以下常用编辑器操作。
-
-
](Windows)或 Cmd +](Mac)以转发选定的层。 -
[(Windows)或 Cmd +[(Mac)以向后发送选定的图层。 -
-
-
-
- 如果没有正在编辑文本或属性，请按 Backspace 或 Delete 删除选定的图层。
单击
将图像添加到画布 add-images-to-the-canvas
执行以下步骤以将图像添加到画布：
在画布中添加文本图层 add-text-to-the-canvas
执行以下步骤以将文本图层添加到画布：
- 单击
- 选择图层并单击文本进行更新。
- 在“属性”面板中选择 智能文本调整大小 以自动调整文本长度和字体大小，使其以最佳方式适应指定区域。
查看 属性面板 以重新定位、调整大小、旋转或删除图层。 通过更改面板 文本 部分下相应字段中的值，将文本格式设置为所需的字体、大小、颜色、样式、对齐方式（在图层中）。 字体系列 字段显示Adobe Sans F2默认字体、重新处理的现有字体以及新上载和发布的字体。 有关详细信息，请参阅上面开始之前部分中的第5点。
设置选择性文本格式 apply-formatting-to-substring
执行以下步骤来格式化字符串的特定部分：
-
在字符串中选择一个或多个字符设置格式。
-
使用属性面板格式化所选内容。 以下格式选项适用于子字符串及其部分：
- 字体样式：使用 字体样式 选项的粗体、斜体、下划线、下标和上标。
- 字体属性：使用相应的面板选项更改字体系列、颜色和大小。
每个带格式的字符串部分在子字符串选择器中显示为子字符串，可在参数面板中使用。 向这些格式化部分添加参数，以使用模板的投放URL动态格式化它们。
将形状添加到画布 add-shapes-to-the-canvas
执行以下步骤将形状添加到画布：
- 单击
- 滚动到面板的 样式 部分，在 形状颜色 字段中定义十六进制代码，或者使用拾色器填充所选形状中的颜色。
- 启用 统一半径 切换功能，并使用 圆角半径 滑块来统一调整矩形所有四个角的圆度。 禁用切换功能，以通过为每个拐角指定特定半径值来自定义拐角圆度。
- 将 隐藏 参数添加到选定的图层以使用模板URL实时显示或隐藏模板中的图层。
- 选择图层以向其中添加CTA链接，允许用户在实时模板中单击形状作为超链接。
编辑或删除图层 edit-or-delete-a-layer
执行以下步骤以编辑或删除画布层：
- 单击支持动态更新的
- 单击 更多选项 （
- 单击 删除 以删除图层。
- 单击 编辑 以使用 属性面板 编辑图层。
属性面板 properties-panel
属性面板包含要重新定位、调整大小和旋转图层的部分。 它还为形状图层提供颜色填充选项，为文本图层提供文本格式设置选项，并提供将CTA链接添加到任何选定图层的选项。
要导航到图层的属性面板，请单击
从图层的属性面板中，选择画布上的另一个图层以导航到其属性面板。
重新定位、调整大小、旋转或删除图层 reposition-resize-delete-a-layer
请参阅这些常见的图层编辑操作以编辑文本或图像图层：
- 重新定位图层： 拖动图层可将其移动到画布上的任意位置。 此操作将更新属性面板中的X和Y值。 X和Y是画布平面上图层中心的坐标。
- 调整图层大小： 选择图层并拖动其边缘手柄以调整其大小。 此操作更新属性面板中的W（宽度）和H（高度）值。
- 旋转图层： 拖动垂直放置在图层上方的方形手柄，使其绕其中心旋转。 此操作将更新属性面板中的角度值。
- 删除层： 按 Backspace 或 删除，然后单击 确认 以删除选定的层。
文本格式设置选项 text-formatting-options-on-properties-panel
通过更改面板 文本 部分下相应字段中的值，将文本格式设置为所需的字体、大小、颜色、样式、对齐方式（在图层内）。
确保包括 智能文本大小调整。 智能文本大小调整适用于Copyfitting算法，可在文本区域中以最佳方式填充文本，防止文本溢出，并最大程度地减少文本底部的额外空间。
参数化图层 parameterise-a-layer
创建包含多个图像、文本和形状层的模板后，将选定图层参数化。 将图层或其属性参数化后，它将获得一个键值对（也称为参数）。 此参数可以包含在模板URL中，以实时更新图层的位置、大小或内容，从而实时自定义模板。
要参数化图层，请执行以下操作：
- 单击
- 切换 包含参数 以参数化属性。 请参阅参数面板选项，了解属性在参数化后的行为。
- 可选： 重命名参数名称。 参数名称具有层名称后跟一个后缀。 对于选定层，其所有参数化属性共享相同的层名称，后跟一个变化的后缀。 按照语义命名约定重命名层名称，以便在URL中包含参数时，参数名称本身可以说明层的内容或其用途。
- 单击 保存。
若要在图像和文本图层的“参数”面板之间进行切换，请选择画布上的图层，然后单击 参数。
“参数”面板选项 parameterisation-options-or-allowed-parameters
参数化的属性可以作为URL参数包含在模板URL中，以使用URL实时编辑模板。
图层参数 layer-parameters
下面是适用于图像和文本图层的图层参数。
X： Include可通过更改URL中的参数值，沿图层中心线水平移动图层，平行于模板平面的X轴。
Y： 包含可通过更改URL中的参数值，沿图层中心线垂直移动图层，平行于模板平面的Y轴。
宽度： 包含可通过更改URL中的参数值来调整图层的宽度。
高度： 包含可通过更改URL中的参数值来调整图层的高度。
隐藏： 包含以使用0（显示）和1（隐藏）来隐藏或显示模板中的图层。
图像参数 image-parameter
包含 Source 参数，以通过更改URL中参数值中的图像路径来使用新图像替换图层的图像。
文本格式设置参数 text-formatting-parameters
包括以下参数，以便通过更新URL中的参数值来编辑投放URL中的文本、其字体、颜色和大小：
文本： 包含以从URL更新文本。
字体系列： 包含以从URL更新文本的字体。
字体大小： 包含以从URL更新文本的字体大小。
文本颜色： 包含以从URL更新文本的字体颜色。
参数化子字符串 substring-parameterisation
在 参数 面板中，滚动到 子字符串参数 部分。 此部分包含一个 子字符串选择器，该选择器将格式一致的完整字符串（选定文本图层）或其格式化部分显示为单独的子字符串。 选择一个子字符串以参数化其文本、字体系列、字体大小和颜色。
使用子字符串选择器拆分子字符串以参数化其各个部分，或者使用合并子字符串以应用统一的参数。
拆分子字符串 split-substring
要参数化子字符串的特定部分，请提取该部分，使其成为单独的子字符串以供单独选择和参数化。 执行以下步骤，将子字符串拆分为单独的子字符串：
- 在子字符串选择器中，选择子字符串中的字符以将其分开。
- 单击
您可以选择所需的子字符串以参数化其文本、字体系列、字体大小和颜色。
合并子字符串 merge-substring
合并子字符串会删除其现有的单个参数，并允许您在新形成的子字符串中应用一致的参数。
执行以下步骤以合并两个相邻的子字符串，将统一的参数应用于生成的子字符串：
-
在子字符串选择器中，跨两个具有相同格式的相邻子字符串选择字符。
-
单击
可以将统一参数应用到新形成的子字符串。note note NOTE 只能合并具有相同格式的子字符串。
将层分组以同时控制其可见性 group-layers
保持模板灵活性的另一种方法是使用单个参数名称控制多个层。 此策略有助于显示可见性（隐藏或显示层）参数，以更新单个模板的设计或图形。
按照以下步骤为多个图层的隐藏参数（
预览并发布模板以复制投放URL preview-and-publish-template-and-copy-template-deliver-url
执行以下步骤以预览和发布模板并复制投放URL：
-
在画布页面上，单击 预览。 您还可以导航到 Assets视图 > Dynamic Media Assets > 查找并选择您的模板 > 单击 编辑模板 > 单击 预览。 预览页面显示模板、其参数（参数化层和属性）、发布状态以及 发布 选项。
-
从 模板参数 面板中选择参数以编辑其值，并立即更新预览中相应模板图层的内容、大小、位置或文本格式。 例如：
- 选择文本图层并编辑其文本或
- 选择图像图层，单击
模板会立即更新，显示编辑过的文本并将以前的图像替换为新图像。 此外，图像参数值反映了新的图像路径。 同样，可以通过调整图层的值来调整其大小，所做的更改将实时应用于模板。
-
从列表中选择 分组图层 的隐藏参数，以便在模板中显示或隐藏这些图层。
-
可选： 将 隐藏 参数值在0和1之间更改，然后单击 刷新 以查看更改内容。 具有相同 Hide 参数的图层会一起隐藏或显示。 同样，您可以从URL控制图层的可见性。
您还可以切换 包含所有参数 以编辑所有显示的参数值，并在模板预览中查看更新。 -
要从预览页面发布模板，请单击 发布 并确认发布。 显示 发布完成 消息，发布状态更新为 已发布。
复制投放URL
预览 页面上选定的参数将成为模板URL中的URL参数。
确保模板中的图像已发布到AEM和Dynamic Media以生成模板的投放URL。
执行以下步骤以复制模板的投放URL：
- 单击 复制URL。 将显示 复制URL 对话框。 选择并复制显示的URL。 URL中的第一个参数在问号 (？) 和一个键值对以 $ 开头，以 & 结尾。 键和值用等号 (=) 分隔，键在左侧，值在右侧。
- 将此URL粘贴到浏览器选项卡中，并查看您的实时模板。 通过直接更新URL中所需参数的值（键值）实时自定义模板，如预览和发布部分的 步骤2 所示。
- 使用此URL快速推销您的产品或服务。 您可以与客户共享此URL，或将其集成到您的网站或任何下游第三方应用程序，以显示横幅并实时更新以反映持续优惠。
从URL实时更新模板 update-the-template-from-the-url
直接在URL中编辑参数可能比较繁琐。 要简化：
-
复制URL并将其粘贴到记事本中。
-
使用Cmd+F (Mac)或Ctrl+F (Windows)查找并编辑参数值。 例如：
- 查找和替换图像图层的图像路径。
- 查找图层的参数化的坐标（宽度和高度）以调整其值。
- 编辑文本图层的文本、字体、颜色、大小或对齐方式。
- 将可见性值更改为0和1。
将此更新的URL粘贴到浏览器中以查看更改。
编辑模板 edit-the-template
按以下这些步骤编辑模板：
- 在Assets view上，单击 Dynamic Media Assets。
- 导航到模板位置。
- 选择模板。
- 单击 编辑模板。 模板画布在“图层”面板中显示模板及其所有图层的列表。 根据您的要求开始编辑模板。
将Call to action (CTA)链接添加到模板层 add-CTA-in-dynamic-media-templates
通过添加CTA链接将Dynamic Media模板的任何图像、文本或形状图层转换为超链接，该链接可将用户引导至目标页面。
执行以下步骤以将CTA链接添加到层：
-
导航到模板位置，选择模板并单击
-
选择模板图层并导航到其属性面板以向其添加CTA链接。
-
在属性面板上，选择 添加CTA，在 URL 字段中指定目标URL，然后单击 保存。
-
单击 预览，然后选择 发布 以发布您的模板（如果之前未发布）。
-
导航到保存此模板的文件夹，选择该模板并单击
-
单击 复制选项 并选择 复制嵌入代码。 确保将模板图像发布到AEM and Dynamic Media以复制嵌入代码。
以下是嵌入代码的示例：
code language-json <div class="adobe-dynamicmedia-template-embed-container"> <img id="<Image ID>>" src="<Image Source>>" alt="adobe dynamicmedia template" usemap="#adobe-dynamicmedia-template-map" width="800" height="300"> <map name="adobe-dynamicmedia-template-map"> <area shape="rect" coords="417,-60,817,340" href="https://business.adobe.com/cn/products.html" alt="Layer with CTA" title="https://business.adobe.com/cn/products.html" target="_blank"> <area shape="rect" coords="6,206.57,129,231.43" href="https://business.adobe.com/cn/products.html" alt="Layer with CTA" title="https://business.adobe.com/cn/products.html" target="_blank"> </map> </div> -
将复制的嵌入代码添加到网站的HTML文件，并在浏览器中运行该代码以显示模板。
单击模板上的CTA元素以导航到目标页面。
观看此分步视频，了解如何将CTA链接添加到模板图层。
要注意的重要事项 important-points-to-note
- 在创建具有用于动态更新的参数化图像层的模板后，请确保打算用于将来更新的图像共享与参数化图像相同的尺寸。 这确保图像完全适合在层内，而不会溢出或留下空隙。 目前，模板不支持自动调整尺寸以将图像适合图层。
- 文本图层不支持子字符串。 用户无法对文本图层的子字符串应用不同的字体属性。
- Dynamic Media模板当前不支持多个Dynamic Media公司。
- 如果进行复制或移动，目标选择器会显示所有文件夹（包括非Dynamic Media同步文件夹）。 此外，当前它不显示Dynamic Media模板资产（两者都是目标选择器的限制）。
- 从Assets部分对文件夹执行的任何更新操作（例如，发布或删除）都会影响该文件夹中可用的Dynamic Media模板。
- 垃圾桶对Dynamic Media模板无效。 如果将某个资源移至垃圾桶并恢复，则该资源将在AEM中恢复，但在Dynamic Media中无法恢复。 这同样适用于Dynamic Media模板。
另请参阅
- 探索Dynamic Media 及其功能
- 使用OpenAPI功能浏览Dynamic Media