Dynamic Media modelli dynamic-media-templates
Creare modelli personalizzabili in tempo reale per banner e volantini utilizzando i modelli Dynamic Media, un editor di modelli WYSIWYG. Pubblica il modello Dynamic Media e utilizzalo nelle applicazioni a valle. Un modello Dynamic Media include livelli immagine e testo. Aggiungi parametri ai livelli immagine e testo del modello e utilizza Dynamic Media URL per riposizionare e ridimensionare il livello e aggiornarne il contenuto in tempo reale.
Alcune delle caratteristiche principali includono:
- Dynamic MediaEditor modelli WYSIWYG: Creare banner personalizzabili con livelli immagine e testo.
- Parametrizzazione livello: Definisci coppie chiave-valore dinamiche per i livelli per abilitare gli aggiornamenti in tempo reale.
- Supporto URL Dynamic Media: Utilizza Dynamic Media URL per i modelli, integrando valori personalizzati da applicazioni di prima parte o di terze parti.
- Controllo visibilità livello: nascondere o mostrare dinamicamente i livelli in base alle esigenze.
- Ridimensionamento automatico del testo: Adatta automaticamente le dimensioni del testo alle aree designate.
Alcuni dei vantaggi principali dei modelli Dynamic Media includono:
- Ottimizza Personalization 1:1: Personalizza il contenuto per i segnali dei clienti in tempo reale.
- Riduzione dello sforzo manuale: Automatizzazione e accelerazione della creazione e della gestione dei contenuti.
- Assicurare Esperienze omnicanale coerenti: Mantenere la coerenza del brand tra i canali.
- Riutilizzare il contenuto in modo efficace: evitare contenuti monouso e scalare con modelli dinamici con parametri.
- Riduci rischi: Aggiorna prezzi, sconti e collegamenti in tempo reale.
- Migliora il coinvolgimento dei clienti: esperienze interattive e contestualmente rilevanti.
Scopri come creare un modello Dynamic Media passo dopo passo in questo video.
Prima di iniziare prerequisites-for-dynamic-media-wysiwyg-template
Soddisfare i seguenti requisiti per creare un modello Dynamic Media e generarne l'URL di consegna:
-
Accesso a Dynamic Media.
-
Nella home page di Assets View è presente una cartella in Dynamic Media Assets per salvare il modello. Crea una cartella in
-
Pubblica le immagini da utilizzare per creare il modello per generare l’URL di consegna del modello dopo averlo creato. L’URL di consegna può essere utilizzato nelle applicazioni a valle.
-
Per utilizzare un tipo di carattere diverso da quello predefinito di Adobe Sans F2 nel livello testo del modello, carica e pubblica il file del tipo di carattere in AEM e Dynamic Media simultaneamente. I formati di file dei caratteri supportati sono AFM, OTF, PFB, PFM, PhotoFont, TTC, TTF. Assicurati inoltre di rielaborare i font esistenti per utilizzarli. Per ulteriori informazioni, vedere Tipi di carattere.
-
verifica quanto segue nell’interfaccia utente touch:
- Nella pagina Modifica configurazione Dynamic Media, la modalità di sincronizzazione Dynamic Media impostata su Disabilitata per impostazione predefinita non è applicata a tutte le cartelle di AEM (Sincronizza tutto il contenuto non è selezionata). Per ulteriori informazioni, vedere configurazione di Dynamic Media Cloud Service.
- La modalità di sincronizzazione Dynamic Media è impostata su Abilita per le sottocartelle per la cartella o sottocartella di destinazione in cui verrà salvato il modello dopo la creazione. Per ulteriori informazioni, vedere configurazione Dynamic Media di Cloud Service.
Crea modello Dynamic Media how-to-create-dynamic-media-template
Eseguire la procedura seguente per creare un modello Dynamic Media:
Creare un’area di lavoro vuota create-a-canvas
Per creare un’area di lavoro vuota, effettua le seguenti operazioni:
-
Passa a Assets View, seleziona Dynamic Media Assets disponibile nel pannello a sinistra e passa alla cartella per salvare il modello in tale cartella.
-
Seleziona Crea modello. Viene visualizzata la finestra di dialogo Nuovo modello.
note note NOTE Il modello viene salvato nel percorso in cui è stato creato. Nella home page di Assets View, seleziona Dynamic Media Assets e fai clic su Crea modello per salvare il modello nella cartella principale di Dynamic Media Assets. -
Specifica un nome di modello, definisci la larghezza e l'altezza dell'area di lavoro e fai clic su Crea. Viene visualizzata un'area di lavoro vuota con opzioni di menu su entrambi i lati da utilizzare per la creazione del modello. Passa il puntatore del mouse sulle opzioni del menu per visualizzarne la descrizione comando.
note note NOTE L'intervallo consentito di larghezza e altezza è compreso tra 50 e 5000.
Opzioni di menu nel riquadro di destra: Utilizzare queste opzioni per aggiungere all'area di lavoro le immagini e i livelli di testo necessari.
-
-
-
Opzioni di menu nel riquadro di sinistra: Utilizzare queste opzioni per le seguenti azioni comuni dell'editor.
-
-
-
-
-
-
-
- Premi Backspace o delete per eliminare il livello selezionato se non si sta modificando testo o proprietà.
Fai clic su
Aggiungere immagini all’area di lavoro add-images-to-the-canvas
Per aggiungere immagini all’area di lavoro, effettua le seguenti operazioni:
- Fai clic su
- Sfoglia il pannello o usa le parole chiave nella barra di ricerca per trovare un’immagine specifica.
- Trascina e rilascia un’immagine nell’area di lavoro per utilizzarla. Vedere il pannello Proprietà per ridimensionare o riposizionare un livello nell'area di lavoro.
Aggiungere livelli di testo all'area di lavoro add-text-to-the-canvas
Per aggiungere livelli di testo all’area di lavoro, effettua le seguenti operazioni:
- Fai clic su
- Selezionate il livello e fate clic sul testo per aggiornarlo.
- Selezionare Ridimensionamento automatico del testo nel pannello Proprietà per regolare automaticamente la lunghezza del testo e la dimensione del font in modo che si adattino in modo ottimale all'area designata.
Vedere il pannello Proprietà per riposizionare, ridimensionare, ruotare o eliminare il livello. Formatta il testo con il font, le dimensioni, il colore, lo stile e l'allineamento richiesti (nel livello) modificandone i valori nei rispettivi campi nella sezione Testo del pannello. Nel campo Famiglia di caratteri sono visualizzati il tipo di carattere predefinito Adobe Sans F2, i tipi di carattere esistenti rielaborati e i tipi di carattere appena caricati e pubblicati. Per ulteriori informazioni, vedere il punto 5 della sezione Prima di iniziare.
Modificare o eliminare un livello edit-or-delete-a-layer
Per modificare o eliminare un livello area di lavoro, esegui la procedura seguente:
- Fare clic su
- Fai clic su altre opzioni (
- Fai clic su Elimina per eliminare il livello.
- Fai clic su Modifica per modificare il livello utilizzando il pannello Proprietà.
Pannello Proprietà properties-panel
Per passare al pannello delle proprietà di un livello:
- Fai clic su
- Selezionate il livello dall'elenco.
In questo pannello viene visualizzata la posizione del punto centrale del livello sul piano dell'area di lavoro (valori X e Y), le dimensioni del livello (larghezza e altezza) e le opzioni di formattazione del testo.
Dal pannello delle proprietà di un livello, selezionate un altro livello nell'area di lavoro per passare al relativo pannello delle proprietà.
Riposizionare, ridimensionare, ruotare o eliminare un livello reposition-resize-delete-a-layer
Per modificare un livello testo o immagine, consulta le seguenti azioni di modifica dei livelli comuni:
- Riposizionare il livello: Trascinare il livello per spostarlo in qualsiasi punto dell'area di lavoro. Questa azione aggiorna i valori X e Y nel pannello delle proprietà.
- Ridimensiona il livello: Seleziona il livello e trascina i relativi quadratini di ridimensionamento per ridimensionarlo. Questa azione aggiorna i valori W (larghezza) e H (altezza) nel pannello delle proprietà.
- Ruotare il livello: Trascinare la maniglia quadrata posizionata verticalmente sopra il livello per ruotarlo intorno al centro. Questa azione aggiorna i valori degli angoli nel pannello delle proprietà.
- Eliminare il livello: Premere Backspace o delete e quindi fare clic su Confirm per eliminare il livello selezionato.
Opzioni di formattazione del testo text-formatting-options-on-properties-panel
Formatta il testo con il carattere, le dimensioni, il colore, lo stile e l'allineamento richiesti (all'interno del livello) modificandone i valori nei rispettivi campi nella sezione Testo del pannello.
Assicurarsi di includere Ridimensionamento testo avanzato. Smart Text Resize funziona sull'algoritmo Copyfit per riempire in modo ottimale il testo nell'area di testo, impedisce l'overflow del testo e riduce al minimo lo spazio in eccesso nella parte inferiore del testo.
Livelli parametrizzati parameterise-a-layer
Dopo aver creato un modello con più livelli di immagini e testi, impostate i parametri per i livelli selezionati. Quando un livello o la relativa proprietà sono parametrizzati, ottiene una coppia chiave-valore (detta anche parametro). Questo parametro può essere incluso nell’URL del modello per aggiornare la posizione, le dimensioni o il contenuto del livello in tempo reale, con conseguente personalizzazione del modello in un attimo.
Per parametrizzare un livello:
- fai clic su
- Attiva Includi parametro per parametrizzare una proprietà. Per informazioni sul comportamento della proprietà dopo la parametrizzazione, vedere Opzione pannello Parametri.
- Facoltativo: Rinominare il nome del parametro. Il nome di un parametro è seguito da un suffisso. Per un livello selezionato, tutte le relative proprietà con parametri condividono lo stesso nome di livello seguito da un suffisso variabile. Rinominate il nome del livello seguendo la convenzione di denominazione semantica in modo che, quando includete il parametro nell'URL, il nome del parametro spieghi da solo il contenuto o lo scopo del livello.
- Fai clic su Salva.
Per passare dal pannello Parametri di un'immagine al livello testo, selezionare il livello nell'area di lavoro e fare clic su Parametri.
Opzione del pannello Parametri parameterisation-options-or-allowed-parameters
Le proprietà con parametri possono essere incluse come parametri URL nell’URL del modello per modificare il modello in tempo reale utilizzando l’URL.
Parametri immagine:
X: Includere per spostare il livello orizzontalmente lungo la sua linea centrale, parallelamente all'asse X del piano del modello, modificando il valore del parametro nell'URL.
Y: Includere per spostare il livello verticalmente lungo la linea centrale, parallelamente all'asse Y del piano del modello, modificando il valore del parametro nell'URL.
Larghezza: Includere per regolare la larghezza del livello modificando il valore del parametro nell'URL.
Altezza: Includere per regolare l'altezza del livello modificando il valore del parametro nell'URL.
Nascondi: Includi per nascondere o mostrare il livello nel modello utilizzando 0 (mostra) e 1 (nascondi).
Source: Includi per sostituire l'immagine del livello con una nuova immagine modificando il percorso dell'immagine nel valore del parametro nell'URL.
Parametri di formattazione del testo:
Includi i seguenti parametri per modificare il testo, il relativo font, colore e dimensione, dall’URL aggiornando i valori dei parametri nell’URL.
Testo: Includere per aggiornare il testo dall'URL.
Famiglia di caratteri: Includere per aggiornare il carattere del testo dall'URL.
Dimensione font: Includere per aggiornare la dimensione font del testo dall'URL.
Colore testo: Includere per aggiornare il colore del carattere del testo dall'URL.
Raggruppare i livelli per controllarne contemporaneamente la visibilità group-layers
Un altro modo per mantenere flessibili i modelli consiste nell'utilizzare un singolo nome di parametro per controllare più livelli. Questa strategia è utile per il parametro di visibilità (nascondi o mostra livelli), per aggiornare la progettazione o gli elementi grafici da un singolo modello.
Segui questi passaggi per assegnare lo stesso nome ai parametri di nascondi (
- Passa al pannello Proprietà di un livello.
- Attiva/disattiva il parametro Nascondi se non è già stato impostato in precedenza come parametro.
- Facoltativo: Rinomina il parametro Nascondi.
- Copia il nome del parametro Nascondi.
- Passa al pannello Parametri degli altri livelli selezionandoli dall'area di lavoro e, se non sono parametrizzati, imposta il parametro Nascondi.
- Sostituisci il nome del parametro con il nome copiato.
- Fai clic su Salva per raggruppare i livelli.
- Eseguire i passaggi 3 e 4 nella sezione Anteprima e pubblicazione per visualizzare le modifiche.
Anteprima e pubblicazione del modello per copiare l’URL di consegna preview-and-publish-template-and-copy-template-deliver-url
Per visualizzare in anteprima e pubblicare il modello e copiare l’URL di consegna, effettua le seguenti operazioni:
-
Nella pagina dell'area di lavoro fare clic su Anteprima. È inoltre possibile passare alla visualizzazione Assets > Assets Dynamic Media > trovare e selezionare il modello > fare clic su Modifica modello > fare clic su Anteprima. Nella pagina di anteprima vengono visualizzati il modello, i relativi parametri (livelli e proprietà con parametri), lo stato di pubblicazione e l'opzione Pubblica.
-
Seleziona i parametri dal pannello Parametri modello per modificarne i valori e aggiornare immediatamente il contenuto, le dimensioni, la posizione o la formattazione del testo del livello del modello corrispondente nell'anteprima. Ad esempio:
- Selezionare un livello di testo e modificarne il testo oppure
- Seleziona un livello immagine, fai clic su
Il modello viene aggiornato immediatamente, visualizzando il testo modificato e sostituendo l’immagine precedente con quella nuova. Inoltre, il valore del parametro immagine riflette il nuovo percorso immagine. Analogamente, potete ridimensionare un livello regolandone i valori e le modifiche vengono applicate al modello in tempo reale.
-
Selezionare dall'elenco il parametro Nascondi per livelli raggruppati per mostrarli o nasconderli nel modello.
-
Facoltativo: Modificare il valore del parametro Hide tra 0 e 1 e fare clic su Aggiorna per visualizzare le modifiche. I livelli con lo stesso parametro Hide vengono nascosti o visualizzati insieme. Allo stesso modo, potete controllare la visibilità dei livelli dall'URL.
Puoi anche attivare Includi tutti i parametri per modificare tutti i valori dei parametri visualizzati e visualizzare gli aggiornamenti nell'anteprima del modello. -
Per pubblicare il modello dalla pagina di anteprima, fai clic su Pubblica e conferma la pubblicazione. Viene visualizzato un messaggio di Pubblicazione completata e lo stato di pubblicazione viene aggiornato a Pubblicato.
Copiare l’URL di consegna
I parametri selezionati nella pagina Anteprima diventano i parametri URL nell'URL del modello.
Assicurati che le immagini nel modello siano già pubblicate in AEM e Dynamic Media per generare l’URL di consegna del modello.
Per copiare l’URL di consegna del modello, effettua le seguenti operazioni:
- Fare clic su Copia URL. Viene visualizzata la finestra di dialogo Copia URL. Seleziona e copia l’URL visualizzato. Il primo parametro nell'URL inizia dopo un punto interrogativo (?) e una coppia chiave-valore iniziano con $ e terminano con &. La chiave e il valore sono separati da un segno di uguale (=), con la chiave a sinistra e il valore a destra.
- Incolla questo URL nella scheda del browser e visualizza il modello live. Personalizza il modello in tempo reale aggiornando il valore del parametro richiesto (valore della chiave) nell'URL direttamente come mostrato nel passaggio 2 della sezione Anteprima e pubblicazione.
- Utilizza questo URL per accelerare il merchandising dei tuoi prodotti o servizi. Puoi condividere questo URL con i clienti o integrarlo nel tuo sito web o in qualsiasi applicazione di terze parti a valle per visualizzare il banner e aggiornarlo in tempo reale per riflettere le offerte in corso.
Aggiornamenti in tempo reale al modello dall’URL update-the-template-from-the-url
Modificare i parametri direttamente nell’URL può essere noioso. Per semplificare:
-
Copia l’URL e incollalo in un blocco note.
-
Utilizzare Cmd+F (Mac) o Ctrl+F (Windows) per trovare e modificare i valori dei parametri. Ad esempio:
- Trova e sostituisci i percorsi immagine per i livelli immagine.
- Trova le coordinate con parametri del livello, larghezza e altezza, per regolarne i valori.
- Modificare testo, font, colore, dimensione o allineamento per i livelli di testo.
- Modificate i valori di visibilità compresi tra 0 e 1.
Incolla questo URL aggiornato nel browser per visualizzare le modifiche.
Modifica il modello edit-the-template
Modifica il modello seguendo questi passaggi:
- In Assets view, fai clic su Dynamic Media Assets.
- Passa alla posizione del modello.
- Seleziona il modello.
- Fare clic su Modifica modello. Nell'area di lavoro del modello vengono visualizzati il modello e l'elenco di tutti i relativi livelli nel pannello Livelli. Inizia a modificare il modello in base alle tue esigenze.
Aggiungere un collegamento di invito all’azione (CTA) al livello del modello add-CTA-in-dynamic-media-templates
Trasforma qualsiasi livello immagine o testo del modello Dynamic Media in un collegamento ipertestuale aggiungendo un collegamento CTA che indirizza gli utenti a una pagina di destinazione.
Per aggiungere un collegamento CTA a un livello, effettuate le seguenti operazioni:
-
Passa alla posizione del modello, seleziona il modello e fai clic su
-
Seleziona il livello del modello e passa al relativo pannello delle proprietà per aggiungervi un collegamento CTA.
-
Nel pannello delle proprietà, seleziona Aggiungi CTA, specifica l'URL di destinazione nel campo URL e fai clic su Salva.
-
Fai clic su Anteprima e seleziona Pubblica per pubblicare il modello, se non già pubblicato in precedenza.
-
Passa alla cartella in cui è stato salvato il modello, selezionalo e fai clic su
-
Fai clic su Opzioni copia e seleziona Copia codice di incorporamento. Assicurarsi di pubblicare le immagini modello in AEM and Dynamic Media per copiare il codice da incorporare.
Di seguito è riportato un esempio di codice da incorporare:
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/products.html" alt="Layer with CTA" title="https://business.adobe.com/products.html" target="_blank"> <area shape="rect" coords="6,206.57,129,231.43" href="https://business.adobe.com/products.html" alt="Layer with CTA" title="https://business.adobe.com/products.html" target="_blank"> </map> </div> -
Aggiungi il codice da incorporare copiato al file HTML del sito ed eseguilo nel browser per visualizzare il modello.
Fai clic sull’elemento CTA sul modello per passare alla pagina di destinazione.
Guarda questo video passo per passo per scoprire come aggiungere un collegamento CTA a un livello di modello.
Punti importanti da notare important-points-to-note
- Dopo aver creato un modello con livelli immagine con parametri per gli aggiornamenti dinamici, assicuratevi che le immagini destinate agli aggiornamenti futuri condividano le stesse dimensioni delle immagini con parametri. In questo modo le immagini si adattano perfettamente ai livelli senza traboccare o lasciare spazi vuoti. Attualmente, il modello non supporta le regolazioni automatiche delle quote per adattare le immagini ai livelli.
- Non è disponibile alcun supporto per sottostringhe in un livello di testo. L'utente non può applicare proprietà font diverse alla sottostringa di un livello di testo.
- Il supporto di più società Dynamic Media non è attualmente disponibile con Dynamic Media modelli.
- In caso di copia o spostamento, il selettore di destinazione mostra tutte le cartelle (incluse le cartelle non sincronizzate Dynamic Media). Inoltre, attualmente non visualizza le risorse Modello Dynamic Media (entrambe queste sono limitazioni del selettore di destinazione).
- Qualsiasi operazione di aggiornamento su una cartella (ad esempio, Pubblica o Elimina) da Assets influisce sui modelli Dynamic Media disponibili in tale cartella.
- Il cestino non funziona per i modelli Dynamic Media. Se una risorsa viene spostata nel cestino e quindi ripristinata, viene ripristinata in AEM ma non in Dynamic Media. Lo stesso vale per i modelli Dynamic Media.