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:
- Ottimizzare 1:1 Personalization: Personalizzare il contenuto ai 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.
-
-
](Windows) o Cmd +](Mac) per portare avanti un livello selezionato. -
[(Windows) o Cmd +[(Mac) per inviare un livello selezionato all'indietro. -
-
-
-
- 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.
- Attiva l'interruttore Raggio uniforme e utilizza il cursore Raggio angolo per regolare uniformemente la rotondità di tutti e quattro gli angoli di un'immagine. Disattivate l'interruttore per personalizzare la rotondità degli angoli assegnando valori di raggio specifici a ciascun angolo.
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.
Formatta parti specifiche di testo e impostale con parametri per controllarle in modo indipendente.
Formattare testo selettivo apply-formatting-to-substring
Per formattare parti specifiche di una stringa, eseguire la procedura seguente:
-
Selezionare uno o più caratteri nella stringa da formattare.
-
Formattare la selezione utilizzando il pannello proprietà. Le seguenti opzioni di formattazione sono applicabili alle sottostringhe e alle relative parti:
- Stile carattere: grassetto, corsivo, sottolineato, pedice e apice utilizzando l'opzione Stile carattere.
- Proprietà carattere: modifica la famiglia, il colore e la dimensione del carattere utilizzando le rispettive opzioni del pannello.
Aggiungere forme all'area di lavoro add-shapes-to-the-canvas
Per aggiungere forme all'area di lavoro, eseguire la procedura seguente:
- Fare clic su
- Scorri fino alla sezione Stile del pannello, definisci un codice esadecimale nel campo Colore forma o utilizza il selettore colore per riempire il colore nella forma selezionata.
- Attiva l'interruttore Raggio uniforme e utilizza il cursore Raggio angolo per regolare uniformemente la rotondità di tutti e quattro gli angoli del rettangolo. Disattivate l'interruttore per personalizzare la rotondità degli angoli assegnando valori di raggio specifici a ciascun angolo.
- Aggiungi il parametro Nascondi al livello selezionato per mostrare o nascondere il livello nel modello in tempo reale utilizzando l'URL del modello.
- Selezionare il livello per aggiungervi un collegamento CTA, consentendo agli utenti di fare clic sulla forma come collegamento ipertestuale nel modello attivo.
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
Il pannello Proprietà include sezioni per riposizionare, ridimensionare e ruotare un livello. Fornisce inoltre opzioni di riempimento colore per livelli forma, opzioni di formattazione testo per livelli testo e un'opzione per aggiungere un collegamento CTA a qualsiasi livello selezionato.
Per passare al pannello delle proprietà di un livello, fai clic su
Dal pannello Proprietà di un livello, seleziona un altro livello nell'area di lavoro per passare al relativo pannello 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à. X e Y sono le coordinate del centro del livello sul piano dell'area di lavoro.
- 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, testi e forme, 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 l'opzione Parametri del pannello.
- 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 livello layer-parameters
Di seguito sono riportati i parametri dei livelli che si applicano sia ai livelli immagine che a quelli di testo.
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 sua 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).
Parametro immagine image-parameter
Includi il parametro Source 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 text-formatting-parameters
Includi i seguenti parametri per modificare il testo, il relativo font, colore e dimensione, dall’URL di consegna 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.
Parametrizza sottostringhe substring-parameterisation
Nel pannello Parametri, scorri fino alla sezione Parametri sottostringa. Questa sezione include un selettore di sottostringhe che visualizza la stringa completa (livello di testo selezionato) con formattazione coerente o le relative parti formattate come sottostringhe separate. Selezionare una sottostringa per parametrizzarne il testo, la famiglia di caratteri, la dimensione e il colore.
Utilizza il selettore delle sottostringhe per dividere le sottostringhe per parametrizzarne le singole parti o unire le sottostringhe per applicare parametri uniformi.
Dividi sottostringa split-substring
Per parametrizzare una parte specifica di una sottostringa, estrarre la parte in modo da renderla una sottostringa separata per la selezione e la parametrizzazione individuali. Per suddividere una sottostringa in sottostringhe separate, eseguire la procedura seguente:
- Nel selettore delle sottostringhe, seleziona i caratteri all’interno di una sottostringa per separarla.
- Fai clic su
È possibile selezionare la sottostringa richiesta per parametrizzarne il testo, la famiglia di caratteri, la dimensione e il colore.
Unisci sottostringa merge-substring
L’unione di sottostringhe rimuove i singoli parametri esistenti e consente di applicare parametri coerenti alla sottostringa appena formata.
Per unire due sottostringhe adiacenti e applicare parametri uniformi alla sottostringa risultante, eseguire la procedura seguente:
-
Nel selettore delle sottostringhe, seleziona i caratteri tra due sottostringhe adiacenti con la stessa formattazione.
-
Fare clic su
Puoi applicare parametri uniformi alla sottostringa appena formata.note note NOTE È possibile unire solo le sottostringhe con la stessa formattazione.
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 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 Call to action (CTA) al livello del modello add-CTA-in-dynamic-media-templates
Trasforma qualsiasi livello immagine, testo o forma 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/it/products.html" alt="Layer with CTA" title="https://business.adobe.com/it/products.html" target="_blank"> <area shape="rect" coords="6,206.57,129,231.43" href="https://business.adobe.com/it/products.html" alt="Layer with CTA" title="https://business.adobe.com/it/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à di 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.