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)以向後傳送選取的圖層。 -
-
-
-
- 如果沒有編輯文字或屬性，請按 退格鍵 或 刪除 刪除選取的圖層。
按一下
將影像新增至畫布 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 （高度）值。
- 旋轉圖層：拖曳垂直放置在圖層上方的方形控點，使其繞其中心旋轉。 這個動作會更新屬性面板中的角度值。
- 刪除圖層：按 退格鍵 或刪除，然後按一下 確認 刪除選取的圖層。
文字格式選項 text-formatting-options-on-properties-panel
將文字的格式設定為所需的字型、大小、顏色、樣式、對齊方式（在圖層內），方法是在面板的 文字 區段下的個別欄位中變更其值。
確定包括智慧文字調整大小。 智慧型文字調整大小適用於Copyfitting演演算法，可在文字區域中以最佳方式填入文字，防止文字溢位，並儘量減少文字底部的額外空間。
引數化圖層 parameterise-a-layer
建立包含多個影像、文字和形狀圖層的範本後，請引數化選取的圖層。 將圖層或其屬性引數化後，它會取得索引鍵/值組（也稱為引數）。 此引數可包含在範本URL中，以即時更新圖層的位置、大小或內容，從而即時自訂範本。
欲引數化圖層：
- 按一下
- 切換 包含引數 以引數化屬性。 請參閱引數面板選項，瞭解引數化後的屬性行為。
- 選擇性：重新命名引數名稱。 引數名稱具有圖層名稱及尾碼。 對於選取的圖層，其所有引數化屬性會共用相同的圖層名稱，後面跟著不同的尾碼。 依照語意命名慣例重新命名圖層名稱，這樣當您在URL中包含引數時，引數名稱就會自行說明圖層的內容或其用途。
- 按一下儲存。
若要在影像和文字圖層的「引數」面板之間切換，請選取畫布上的圖層，然後按一下引數。
引數面板選項 parameterisation-options-or-allowed-parameters
引數化的屬性可作為URL引數包含在範本URL中，以使用URL即時編輯範本。
圖層引數 layer-parameters
以下是同時套用至影像和文字圖層的圖層引數。
X：包含以變更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，然後按一下 重新整理 檢視變更。 具有相同 隱藏 引數的圖層會隱藏或同時顯示。 同樣地，您可以從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
將Dynamic Media範本的任何影像、文字或形狀圖層轉換為超連結，方法是新增指向該範本的CTA連結，將使用者導向目標頁面。
執行以下步驟，將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/tw/products.html" alt="Layer with CTA" title="https://business.adobe.com/tw/products.html" target="_blank"> <area shape="rect" coords="6,206.57,129,231.43" href="https://business.adobe.com/tw/products.html" alt="Layer with CTA" title="https://business.adobe.com/tw/products.html" target="_blank"> </map> </div> -
將複製的內嵌程式碼新增至網站的HTML檔案，並在瀏覽器中執行以顯示範本。
按一下範本上的CTA元素，即可導覽至目的地頁面。
觀看此逐步影片，瞭解如何將CTA連結新增至範本圖層。
需要注意的重要事項 important-points-to-note
- 在使用引數化影像圖層建立範本以進行動態更新後，請確保打算用於未來更新的影像共用與引數化影像相同的尺寸。 這可確保影像完全符合圖層內，不會溢滿或留下空白空間。 目前，範本不支援自動調整尺寸以讓影像符合圖層。
- 文字圖層不支援子字串。 使用者無法在文字圖層的子字串上套用不同的字型屬性。
- Dynamic Media範本目前無法支援多個Dynamic Media公司。
- 若是複製或移動，Destination Selector會顯示所有資料夾（包括非Dynamic Media同步資料夾）。 此外，目前也不會顯示Dynamic Media範本資產（兩者皆為目的地選擇器的限制）。
- 從Assets區段對資料夾執行的任何更新操作（例如「發佈」或「刪除」）都會影響該資料夾中可用的Dynamic Media範本。
- 垃圾桶無法用於Dynamic Media範本。 如果資產移至垃圾桶後還原，資產會在AEM中還原，但不會在Dynamic Media上還原。 Dynamic Media範本也是相同的。
另請參閱
- 探索Dynamic Media 及其功能
- 使用OpenAPI功能探索Dynamic Media