Dynamic Media mallar dynamic-media-templates
Skapa anpassningsbara mallar i realtid för banners och flygblad med hjälp av Dynamic Media-mallar, en WYSIWYG-mallredigerare. Publicera din Dynamic Media-mall och använd den i program längre fram i kedjan. En Dynamic Media-mall innehåller bild- och textlager. Lägg till parametrar i bild- och textlagren i mallen och använd Dynamic Media URL:er för att flytta och ändra storlek på lagret och uppdatera innehållet i realtid.
Några av de viktigaste funktionerna:
- Dynamic MediaWYSIWYG mallredigerare: Skapa anpassningsbara banners med bild- och textlager.
- Lagerparameterisering: Definiera dynamiska nyckelvärdepar för lager för att aktivera realtidsuppdateringar.
- Dynamic MediaURL-stöd: Använd Dynamic Media URL:er för mallar och integrera anpassade värden från första eller tredje part-program.
- Kontroll av lagersynlighet: Dölj eller visa lager dynamiskt efter behov.
- Smart storleksändring av text: Justera automatiskt textstorleken så att den passar de angivna områdena.
Några av de största fördelarna med mallar i Dynamic Media är:
- Optimera :1 Personalization: Anpassa innehåll efter kundsignaler i realtid.
- Minska den manuella ansträngningen: Automatisera och snabba upp skapandet och hanteringen av innehåll.
- Säkerställ enhetliga flerkanalsupplevelser: Bevara varumärkets enhetlighet över alla kanaler.
- Återanvänd innehåll effektivt: Undvik engångsinnehåll och skalning med dynamiska, parametriserade mallar.
- Minska riskerna: Uppdatera priser, rabatter och länkar i realtid.
- Förbättra kundengagemanget: Skapa interaktiva, sammanhangsberoende upplevelser.
Lär dig att skapa en Dynamic Media-mall steg för steg i den här videon.
Innan du börjar prerequisites-for-dynamic-media-wysiwyg-template
Uppfyll följande krav för att skapa en Dynamic Media-mall och generera dess leverans-URL:
-
Åtkomst till Dynamic Media.
-
På startsidan för Assets View har du en mapp i Dynamic Media Assets där du kan spara mallen. Skapa en mapp i
-
Publicera bilderna som ska användas när mallen skapas för att generera leverans-URL:en för mallen när den har skapats. Leverans-URL:en kan användas i program längre fram i kedjan.
-
Om du vill använda ett annat teckensnitt än standardteckensnittet Adobe Sans F2 i mallens textlager överför och publicerar du teckensnittsfilen till AEM och Dynamic Media samtidigt. De teckensnittsfilformat som stöds är: AFM, OTF, PFB, PFM, PhotoFont, TTC, TTF. Se även till att bearbeta om befintliga teckensnitt för att använda dem. Mer information finns i Teckensnitt.
-
verifiera följande i Touch-gränssnittet:
- Edit Dynamic Media Configuration page som är inställd på Dynamic Media sync mode på Disabled by default används inte på alla AEM-mappar (Sync all content är avmarkerad). Mer information finns i Konfigurera Dynamic Media Cloud Service.
- Dynamic Media sync mode är inställt på Enable for subfolders för målmappen eller undermappen där du vill spara mallen när den har skapats. Mer information finns i Konfigurera Dynamic Media Cloud Service.
Skapa mallen Dynamic Media how-to-create-dynamic-media-template
Utför följande steg för att skapa en Dynamic Media-mall:
Skapa en tom arbetsyta create-a-canvas
Så här skapar du en tom arbetsyta:
-
Navigera till Assets View, markera Dynamic Media Assets i den vänstra panelen och navigera till din mapp för att spara mallen i den mappen.
-
Välj Create Template. Dialogrutan New Template visas.
note note NOTE Mallen sparas på den plats där du skapar den. På hemsidan Assets View väljer du Dynamic Media Assets och klickar på Create Template för att spara mallen i rotmappen Dynamic Media Assets. -
Ange ett mallnamn, definiera arbetsytans bredd och höjd och klicka på Create. En tom arbetsyta visas med menyalternativ på båda sidor som du kan använda för att skapa mallen. Håll muspekaren över menyalternativen för att se deras verktygstips.
note note NOTE Tillåtet intervall för bredd och höjd är mellan 50 och 5000.
Menyalternativ i den högra rutan: Använd dessa alternativ för att lägga till nödvändiga bilder och textlager på arbetsytan.
-
-
-
Menyalternativ i den vänstra rutan: Använd dessa alternativ för följande vanliga redigeringsåtgärder.
-
-
](Windows) eller Cmd +](Mac) för att föra ett markerat lager framåt. -
[(Windows) eller Cmd +[(Mac) om du vill skicka ett markerat lager bakåt. -
-
-
-
- Tryck på backspace eller delete för att ta bort det markerade lagret om ingen text eller egenskap redigeras.
Klicka på mallen
Lägga till bilder på arbetsytan add-images-to-the-canvas
Gör så här för att lägga till bilder på arbetsytan:
- Klicka på
- Bläddra i panelen eller använd nyckelord i sökfältet för att hitta en viss bild.
- Dra och släpp en bild på arbetsytan för att använda den. Se Properties Panel för att ändra storlek på eller flytta ett lager på arbetsytan.
- Aktivera växlingsknappen Uniform Radius och använd skjutreglaget Corner Radius för att justera rundheten för alla fyra hörnen i en bild enhetligt. Inaktivera alternativet för att anpassa hörnens rundhet genom att tilldela specifika radievärden till varje hörn.
Lägga till textlager på arbetsytan add-text-to-the-canvas
Gör så här för att lägga till textlager på arbetsytan:
- Klicka på
- Markera lagret och klicka på texten för att uppdatera den.
- Välj Smart Text Resize på egenskapspanelen om du automatiskt vill justera textlängden och teckenstorleken så att den passar i det angivna området.
Se Properties Panel för att flytta, ändra storlek på, rotera eller ta bort lagret. Formatera texten till önskat teckensnitt, önskad storlek, färg, stil, justering (i lagret) genom att ändra deras värden i respektive fält under Text-delen av panelen. Fältet Font Family innehåller Adobe Sans F2 standardteckensnitt, de ombearbetade befintliga teckensnitten samt de nyligen överförda och publicerade teckensnitten. Mer information finns i punkt 5 i avsnittet Innan du börjar ovan.
Formatera specifika delar av text och parametrisera dem för att styra dem oberoende av varandra.
Formatera selektiv text apply-formatting-to-substring
Utför följande steg för att formatera specifika delar av en sträng:
-
Markera ett eller flera tecken i strängen som ska formateras.
-
Formatera markeringen med egenskapspanelen. Följande formateringsalternativ gäller för delsträngar och deras delar:
- Teckensnittsformat: Fet, kursiv, understruken, nedsänkt och upphöjd med alternativet Font Style .
- Teckensnittsegenskaper: Ändra teckensnittsfamilj, färg och storlek med respektive panelalternativ.
Lägga till former på arbetsytan add-shapes-to-the-canvas
Gör så här för att lägga till former på arbetsytan:
- Klicka på
- Bläddra till avsnittet Style på panelen, definiera en hexkod i fältet Shape Color eller använd färgväljaren för att fylla i färg i den markerade formen.
- Aktivera växlingsknappen Uniform Radius och använd skjutreglaget Corner Radius för att justera rundheten för alla fyra hörnen i rektangeln unikt. Inaktivera alternativet för att anpassa hörnens rundhet genom att tilldela specifika radievärden till varje hörn.
- Lägg till parametern Hide i det markerade lagret om du vill visa eller dölja lagret i mallen i realtid med mall-URL:en.
- Markera lagret om du vill lägga till en CTA länk i det, så att användarna kan klicka på formen som en hyperlänk i den aktiva mallen.
Redigera eller ta bort ett lager edit-or-delete-a-layer
Så här redigerar eller tar du bort ett lager på arbetsytan:
- Klicka på
- Klicka på more options (
- Klicka på Delete för att ta bort lagret.
- Klicka på Edit om du vill redigera lagret med Properties Panel.
Egenskapspanelen properties-panel
Panelen Properties innehåller avsnitt för att flytta, ändra storlek och rotera ett lager. Den innehåller också färgfyllningsalternativ för formlager, textformateringsalternativ för textlager och ett alternativ för att lägga till en CTA länk till ett markerat lager.
Om du vill navigera till ett lagers egenskapspanel klickar du på
Gå till panelen Properties för ett lager och markera ett annat lager på arbetsytan för att navigera till panelen Properties.
Flytta, ändra storlek på, rotera eller ta bort ett lager reposition-resize-delete-a-layer
Se de här vanliga redigeringsåtgärderna för lager när du vill redigera text eller ett bildlager:
- Flytta lagret: Dra lagret så att det flyttas var som helst på arbetsytan. Den här åtgärden uppdaterar X- och Y-värdena på egenskapspanelen. X och Y är koordinaterna för lagrets mitt på arbetsytans plan.
- Ändra storlek på lagret: Markera lagret och dra i dess kanthandtag för att ändra storlek på det. Den här åtgärden uppdaterar värdena för B (bredd) och H (höjd) på egenskapspanelen.
- Rotera lagret: Dra det fyrkantiga handtaget som är placerat lodrätt ovanför lagret för att rotera det runt dess mitt. Den här åtgärden uppdaterar vinkelvärdena på egenskapspanelen.
- Ta bort lagret: Tryck på Backsteg eller delete och klicka sedan på Confirm för att ta bort ett markerat lager.
Textformateringsalternativ text-formatting-options-on-properties-panel
Formatera texten till önskat teckensnitt, önskad storlek, färg, stil, justering (i lagret) genom att ändra deras värden i respektive fält under avsnittet Text på panelen.
Inkludera Smart Text Resize. Smart Text Resize fungerar med algoritmen Textpassning för att fylla texten optimalt i textområdet och förhindrar textspill och minimerar extra utrymme längst ned i texten.
Parameterlager parameterise-a-layer
När du har skapat en mall med flera lager med bilder, texter och former, parametriseras de markerade lagren. När ett lager eller dess egenskap är parametriserad, hämtas ett nyckelvärdepar (kallas även parameter). Den här parametern kan inkluderas i mallens URL för att uppdatera lagrets position, storlek eller innehåll i realtid, vilket resulterar i att mallen anpassas på nolltid.
Så här parameteriserar du ett lager:
- klicka på
- Växla Include Parameter för att parameterisera en egenskap. Se alternativet Parameterpanelen om du vill veta hur egenskapen fungerar efter parametrisering.
- Valfritt: Byt namn på parametern. Ett parameternamn har ett lagernamn följt av ett suffix. Alla parametriserade egenskaper för ett markerat lager delar samma lagernamn följt av ett varierande suffix. Byt namn på lagret genom att följa den semantiska namnkonventionen, så att när du tar med parametern i URL:en, förklarar parameternamnet själva lagrets innehåll eller dess syfte.
- Klicka på Save.
Om du vill växla mellan parameterpanelen för ett bild- och textlager markerar du lagret på arbetsytan och klickar på Parameters .
Alternativet Parameterpanel parameterisation-options-or-allowed-parameters
Parameteriserade egenskaper kan inkluderas som URL-parametrar i mallens URL för att redigera mallen i realtid med URL:en.
Lagerparametrar layer-parameters
Följande är lagerparametrar som gäller för både bild- och textlager.
X: Inkludera om du vill flytta lagret vågrätt längs dess mittlinje, parallellt med mallplanets X-axel, genom att ändra parameterns värde i URL:en.
Y: Inkludera om du vill flytta lagret lodrätt längs dess mittlinje, parallellt med mallplanets Y-axel, genom att ändra parameterns värde i URL:en.
Width: Inkludera om du vill justera lagrets bredd genom att ändra parameterns värde i URL:en.
Height: Inkludera om du vill justera lagrets höjd genom att ändra parameterns värde i URL:en.
Hide: Inkludera om du vill dölja eller visa lagret i mallen med 0 (visa) och 1 (dölj).
Bildparameter image-parameter
Inkludera parametern Source om du vill ersätta lagrets bild med en ny bild genom att ändra bildsökvägen i parameterns värde i URL:en.
Textformateringsparametrar text-formatting-parameters
Ta med följande parametrar för att redigera texten, teckensnittet, färgen och storleken från leverans-URL:en genom att uppdatera parametervärdena i URL
Text: Inkludera om du vill uppdatera text från URL:en.
Font Family: Inkludera om du vill uppdatera textens teckensnitt från URL:en.
Font Size: Inkludera om du vill uppdatera textens teckenstorlek från URL:en.
Text color: Inkludera om du vill uppdatera textens teckenfärg från URL:en.
Parametrisera delsträngar substring-parameterisation
Bläddra till avsnittet Parameters i panelen Substring Parameters. Det här avsnittet innehåller en delsträngsväljare som visar den fullständiga strängen (det markerade textlagret) med konsekvent formatering eller dess formaterade delar som separata delsträngar. Välj en delsträng för att parametrisera dess text, teckensnittsfamilj, teckenstorlek och färg .
Använd delsträngsväljaren för att dela delsträngar om du vill parametrisera de enskilda delarna eller sammanfoga delsträngar om du vill använda enhetliga parametrar.
Dela delsträng split-substring
Om du vill parametrisera en viss del av en delsträng drar du ut delen så att den blir en separat delsträng för enskild markering och parametrisering. Utför följande steg för att dela upp en delsträng i separata delsträngar:
- I delsträngsväljaren markerar du de tecken i en delsträng som du vill separera.
- Klicka på
Du kan välja önskad delsträng för att parametrisera text, teckensnittsfamilj, teckenstorlek och färg .
Sammanfoga delsträng merge-substring
När du sammanfogar delsträngar tas deras befintliga individuella parametrar bort, vilket gör att du kan använda konsekventa parametrar i den nya delsträngen.
Utför följande steg för att sammanfoga två intilliggande delsträngar för att använda enhetliga parametrar på den resulterande delsträngen:
-
I delsträngsväljaren markerar du tecken över två intilliggande delsträngar med samma formatering.
-
Klicka på
Du kan använda enhetliga parametrar för den nya delsträngen.note note NOTE Endast delsträngar med identisk formatering kan sammanfogas.
Gruppera lager för att styra synligheten samtidigt group-layers
Ett annat sätt att göra mallarna flexibla är att använda ett enda parameternamn för att styra flera lager. Den här strategin är användbar för parametern visibility (hide or show layers) för att uppdatera designen eller grafiken från en enda mall.
Följ de här stegen för att tilldela samma namn till Hide-parametrarna (
- Navigera till Properties Panel för ett lager.
- Växla parametern Hide om den inte är parameteriserad tidigare.
- Valfritt: Byt namn på parametern Hide.
- Kopiera parametern Hide.
- Gå till panelen Parameter för andra lager genom att markera dem på arbetsytan och växla deras Hide-parameter om de inte är parameteriserade.
- Ersätt deras Hide parameter-namn med det kopierade namnet.
- Klicka på Save om du vill gruppera lagren.
- Kör steg 3 och sedan 4 i avsnittet Preview and Publish för att se ändringarna.
Förhandsgranska och publicera mallen för att kopiera leverans-URL:en preview-and-publish-template-and-copy-template-deliver-url
Utför dessa steg för att förhandsgranska och publicera mallen och kopiera leverans-URL
-
Klicka på Preview på arbetsytans sida. Du kan också navigera till Assets View > Dynamic Media Assets > och välja mallen >, klicka Edit Template > och klicka Preview. Förhandsgranskningssidan visar mallen, dess parametrar (parametriserade lager och egenskaper), publiceringsstatus och alternativet Publish.
-
Välj parametrar på panelen Template Parameters om du vill redigera deras värden och omedelbart uppdatera innehåll, storlek, position eller textformatering för motsvarande mallager i förhandsgranskningen. Till exempel:
- Markera ett textlager och redigera texten eller
- Markera ett bildlager, klicka på
Mallen uppdateras omedelbart, visar den redigerade texten och ersätter den tidigare bilden med den nya. Dessutom återspeglar bildparametervärdet den nya bildsökvägen. På samma sätt kan du ändra storlek på ett lager genom att justera dess värden, och ändringarna tillämpas på mallen i realtid.
-
Välj parametern Hide för grupperade lager i listan om du vill visa eller dölja dem tillsammans i mallen.
-
Valfritt: Ändra parametervärdet Hide mellan 0 och 1 och klicka på Refresh för att se ändringarna. Lager med samma Hide-parameter döljs eller visas tillsammans. På samma sätt kan du styra lagrens synlighet från URL-adressen.
Du kan också växla Include all parameters för att redigera alla parametervärden som visas och se uppdateringarna i mallförhandsvisningen. -
Om du vill publicera mallen från förhandsgranskningssidan klickar du på Publish och bekräftar att du vill publicera. Ett Publish Complete-meddelande visas och publiceringsstatusen uppdateras till Published.
Kopiera leverans-URL
De valda parametrarna på sidan Preview blir URL-parametrar i mall-URL:en.
Kontrollera att bilderna i mallen redan har publicerats till AEM och Dynamic Media för att generera mallens leverans-URL.
Utför följande steg för att kopiera mallens leverans-URL:
- Klicka på Copy URL. Dialogrutan Copy URL visas. Markera och kopiera den URL som visas. Den första parametern i URL:en startar efter ett frågetecken (?) och ett nyckelvärdepar börjar med $ och slutar med &. Nyckeln och värdet avgränsas med ett likhetstecken (=), med tangenten till vänster och värdet till höger.
- Klistra in den här URL-adressen på webbläsarfliken och se den aktiva mallen. Anpassa mallen i realtid genom att uppdatera den obligatoriska parameterns värde (Key-värdet) i URL:en direkt, vilket visas i steg 2 i avsnittet Förhandsgranska och publicera .
- Använd den här URL:en för snabb försäljning av produkter och tjänster. Du kan dela den här URL:en med dina kunder eller integrera den på din webbplats eller i ett tredjepartsprogram för att visa banderollen och göra uppdateringar i realtid för den så att den speglar de pågående erbjudandena.
Uppdatera mallen i realtid från URL:en update-the-template-from-the-url
Det kan vara tidsödande att redigera parametrar direkt i URL:en. Förenkla:
-
Kopiera URL-adressen och klistra in den i en anteckningsruta.
-
Använd Cmd+F (Mac) eller Ctrl+F (Windows) för att hitta och redigera parametervärdena. Till exempel:
- Sök och ersätt bildbanor för bildlager.
- Hitta lagrets parametriserade-koordinater, bredd och höjd för att justera deras värden.
- Redigera text, teckensnitt, färg, storlek eller justering för textlager.
- Ändra synlighetsvärden mellan 0 och 1.
Klistra in den uppdaterade URL-adressen i webbläsaren för att visa ändringarna.
Redigera mallen edit-the-template
Redigera mallen genom att följa de här stegen:
- Klicka på Assets view på Dynamic Media Assets.
- Navigera till mallplatsen.
- Markera mallen.
- Klicka på Edit Template. Mallens arbetsyta visar mallen och listan över alla dess lager på panelen Lager. Börja redigera mallen efter dina behov.
Lägg till Call to action-länk (CTA) till mallagret add-CTA-in-dynamic-media-templates
Omvandla bilder, text eller formlager i mallen Dynamic Media till en hyperlänk genom att lägga till en CTA-länk som dirigerar användarna till en målsida.
Så här lägger du till en CTA-länk till ett lager:
-
Navigera till mallplatsen, markera mallen och klicka på
-
Markera mallagret och navigera till egenskapspanelen för att lägga till en CTA-länk till det.
-
Välj Add CTA på egenskapspanelen, ange mål-URL:en i fältet URL och klicka på Save.
-
Klicka på Preview och välj Publish för att publicera mallen, om den inte har publicerats tidigare.
-
Navigera till mappen där mallen sparas, markera den här mallen och klicka på
-
Klicka på Copy Options och välj Copy Embed Code. Se till att publicera mallbilderna på AEM and Dynamic Media för att kopiera inbäddningskoden.
Här följer ett exempel på den inbäddade koden:
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/se/products.html" alt="Layer with CTA" title="https://business.adobe.com/se/products.html" target="_blank"> <area shape="rect" coords="6,206.57,129,231.43" href="https://business.adobe.com/se/products.html" alt="Layer with CTA" title="https://business.adobe.com/se/products.html" target="_blank"> </map> </div> -
Lägg till den kopierade inbäddningskoden i webbplatsens HTML-fil och kör den i webbläsaren för att visa mallen.
Klicka på CTA-elementet i mallen för att navigera till målsidan.
I den här stegvideon lär du dig hur du lägger till en CTA-länk i ett mallager.
Viktiga punkter att notera important-points-to-note
- När du har skapat en mall med parametriserade bildlager för dynamiska uppdateringar måste du se till att de bilder som är avsedda för framtida uppdateringar har samma dimensioner som de parametriserade bilderna. Detta garanterar att bilderna passar perfekt i lagren utan att de flödar över eller lämnar tomma utrymmen. Mallen stöder för närvarande inte automatiska dimensionsjusteringar för att passa in bilder i lagren.
- Det finns inget stöd för delsträngar i ett textlager. Användaren kan inte använda olika teckensnittsegenskaper på delsträngar i ett textlager.
- Stöd för flera Dynamic Media-företag är för närvarande inte tillgängligt med Dynamic Media-mallar.
- Om du kopierar eller flyttar, visar målväljaren alla mappar (inklusive mappar som inte är synkroniserade Dynamic Media). För närvarande visas inte heller mallresurserna Dynamic Media (båda är begränsningar för målväljaren).
- Alla uppdateringsåtgärder för en mapp (till exempel Publicera eller Ta bort) från Assets-avsnittet påverkar de Dynamic Media-mallar som är tillgängliga i den mappen.
- Papperskorgen fungerar inte för Dynamic Media-mallar. Om en resurs flyttas till papperskorgen och sedan återställs, återställs resursen i AEM men inte på Dynamic Media. Samma sak gäller för Dynamic Media-mallar.
Se även
- Utforska Dynamic Media och dess funktioner
- Utforska Dynamic Media med OpenAPI-funktioner