Authoring di modelli e-mail
Dopo aver creato un modello e-mail, utilizza lo spazio di progettazione visiva per creare i componenti struttura e contenuto nel modello e-mail.
Aggiungere struttura e contenuto structure-content
-
Per iniziare la progettazione del contenuto, trascina un elemento dalle Strutture e rilascialo nell'area di lavoro.
Aggiungi tutti gli elementi da Strutture necessari e modifica le impostazioni per ciascuno nel riquadro a destra.
note tip TIP Seleziona il componente n:n column per definire il numero di colonne desiderato (tra tre e 10). Puoi anche definire la larghezza di ciascuna colonna spostando le frecce sotto di essa. 
Le dimensioni di ogni colonna non possono essere inferiori al 10% della larghezza totale del componente struttura. È possibile rimuovere solo colonne vuote.
-
Espandi la sezione Contents e aggiungi tutti i componenti di contenuto necessari in uno o più componenti della struttura.
-
Se necessario, puoi effettuare ulteriori personalizzazioni per ciascun componente nelle schede Impostazioni o Stile.
Ad esempio, puoi modificare lo stile del testo, la spaziatura interna o il margine di ciascun componente.
-
Per aggiungere contenuto condizionale e adattarlo ai profili target in base alle regole condizionali, selezionare un componente di contenuto e fare clic sull'icona Abilita contenuto condizionale nella barra degli strumenti del componente.
Per ulteriori informazioni, vedere Contenuto condizionale.
Aggiungere CSS personalizzato
Puoi aggiungere CSS personalizzato direttamente nello spazio di progettazione del modello e-mail. Utilizza CSS personalizzato per applicare uno stile avanzato e specifico, per una maggiore flessibilità e un maggiore controllo sull’aspetto del contenuto. È consigliabile aggiungere questo stile di livello più alto prima di includere componenti quali immagini, pulsanti e testo.
Con almeno un componente di contenuto nell'area di lavoro, seleziona il componente Corpo nella struttura di navigazione a sinistra per accedere all'editor CSS personalizzato.
-
Nella scheda Stili visualizzata a destra, fai clic su Aggiungi CSS personalizzato.
note note NOTE Il pulsante Aggiungi CSS personalizzato è disponibile solo quando è selezionato il componente Body. Tuttavia, puoi applicare stili CSS personalizzati a tutti i componenti al suo interno. L'editor a comparsa Aggiungi CSS personalizzato viene visualizzato con i commenti del codice segnaposto.
-
Immetti il codice CSS nell’editor.
Assicurati che il CSS personalizzato sia valido e segua la sintassi corretta. Se il CSS immesso non è valido, viene visualizzato un messaggio di errore e non è possibile salvarlo. Per ulteriori informazioni, consulta Validità CSS.
-
Fai clic su Salva per salvare il file CSS personalizzato.
Il foglio di stile personalizzato viene applicato al contenuto esistente. Puoi verificare che il CSS personalizzato sia applicato in base alle tue esigenze. Per informazioni su come apportare modifiche e regolare l'applicazione del foglio di stile, vedere Risoluzione dei problemi.
Aggiungi frammenti
Un frammento visivo è un componente di progettazione riutilizzabile a cui possono fare riferimento più risorse di contenuto in Adobe Journey Optimizer B2B edition. In genere si tratta di un blocco di contenuti che può essere precreato e inserito rapidamente per rendere l’authoring più rapido e coerente.
L’esempio seguente illustra i passaggi per aggiungere frammenti durante l’authoring dei contenuti.
-
Per aprire l'elenco dei frammenti, seleziona l'icona Frammenti (
Puoi eseguire le seguenti operazioni:
- Ordina l’inserzione.
- Sfoglia, cerca o filtra l’inserzione.
- Passa dalla visualizzazione delle miniature a quella dell’elenco e viceversa.
- Aggiorna l’elenco per riflettere eventuali frammenti creati di recente.
-
Trascina uno dei frammenti nel componente strutturale.
L’editor esegue il rendering del frammento all’interno della sezione/elemento della struttura e-mail.
note tip TIP Per aggiungere il frammento in modo che occupi l’intero layout orizzontale all’interno dell’e-mail, aggiungi una struttura di colonne 1:1 e quindi trascina e rilascia il frammento al suo interno. Il contenuto del frammento viene aggiornato dinamicamente all’interno della struttura per mostrare come appare il contenuto nel contenuto.
Campi modificabili nei frammenti personalizzabili
Un frammento visivo può includere campi modificabili che puoi personalizzare. I campi personalizzati ti consentono di modificare i parametri quando incorpori il frammento nel contenuto e di creare un’esperienza personalizzata senza influire sul frammento originale. L'autore del frammento può progettare il frammento per la personalizzazione dei componenti testo, immagine e pulsante. Se un frammento incluso contiene componenti con campi modificabili, puoi modificare i valori predefiniti per personalizzarlo in base al contenuto.
-
Seleziona il componente frammento.
Le Impostazioni visualizzate a destra includono e campi modificabili con i valori predefiniti.
-
Modifica eventuali campi modificabili in base alle esigenze.
Dopo il salvataggio, il modello viene visualizzato nella pagina dei dettagli del frammento quando si seleziona la scheda Usato da nel riepilogo.
Aggiungere risorse immagine
Nell'editor del contenuto visivo, seleziona l'icona Assets di Marketo Engage (
-
Aggiungi una nuova risorsa trascinando la risorsa immagine in un componente struttura.
-
Sostituisci una risorsa immagine esistente selezionandola nell'area di lavoro e fai clic su Seleziona una risorsa negli strumenti di origine delle immagini.
Per ulteriori informazioni sull'utilizzo delle risorse del tipo di origine, vedere Utilizzare le risorse per l'authoring dei contenuti.
Spostarsi tra livelli, impostazioni e stili
Quando si lavora con il contenuto nello spazio di progettazione visivo, è possibile accedere ai componenti, alle colonne e agli elementi di contenuto utilizzando la struttura di navigazione. Fai clic sull'icona Struttura di navigazione (
L’esempio seguente illustra i passaggi per regolare la spaziatura e l’allineamento verticale all’interno di un componente struttura con le colonne.
-
Selezionare la colonna nel componente struttura direttamente nell'area di lavoro o utilizzando la struttura di spostamento visualizzata a sinistra.
-
Dalla barra degli strumenti della colonna, fare clic sullo strumento Seleziona una colonna e scegliere quello che si desidera modificare.
Puoi anche selezionarla dall’albero della struttura. I parametri modificabili per tale colonna vengono visualizzati nelle schede Impostazioni e Stili a destra.
-
Per modificare le proprietà della colonna, fai clic sulla scheda Stili a destra e modificale in base alle tue esigenze:
-
Per Sfondo, modifica il colore di sfondo in base alle esigenze.
Deselezionare la casella di controllo relativa a uno sfondo trasparente. Abilita l'impostazione Immagine di sfondo per utilizzare un'immagine come sfondo invece di un colore a tinta unita.
-
Per Allineamento, seleziona l'icona Superiore, Centro o Inferiore.
-
Per Spaziatura interna, definire la spaziatura per tutti i lati.
Selezionare Spaziatura interna diversa per ogni lato per ottimizzare la spaziatura. Fai clic sull'icona Blocca per interrompere la sincronizzazione.
-
Espandi la sezione Avanzate per definire gli stili in linea per la colonna.
-
-
Se necessario, ripeti questi passaggi per regolare l’allineamento e la spaziatura per le altre colonne del componente.
-
Salva le modifiche.
Personalizzazione dei contenuti
Journey Optimizer B2B edition utilizza una sintassi semplice in linea che consente di creare espressioni con contenuto personalizzato racchiuso tra parentesi graffe {}. È possibile aggiungere più espressioni nello stesso contenuto o campo senza restrizioni.
Esempi:
Hello {{lead.firstName}} {{lead.lastName}}Hello {%= lead.mktoName ?: "Marketer" %}
Durante l’elaborazione del contenuto, Journey Optimizer B2B edition sostituisce l’espressione con i dati contenuti nel database di Experience Platform. Il primo esempio diventa Hello John Doe.
L’esempio seguente illustra i passaggi per personalizzare il contenuto utilizzando gli attributi lead/account e i token di sistema.
-
Seleziona il componente testo e fai clic sull'icona Aggiungi personalizzazione nella barra degli strumenti.
Questa azione apre la finestra di dialogo Modifica Personalization.
-
Aggiungere un token facendo clic sul simbolo più ( + ) accanto a esso.
Se desideri aggiungere il token con un fallback (testo predefinito che viene visualizzato quando tale campo non è disponibile per un lead), fai clic sull'icona Altro ( … ) e scegli Inserisci con testo di fallback.
-
Aggiungi eventuali altri token o altro testo statico da includere.
-
Fai clic su Salva.
Lo script di personalizzazione viene visualizzato nello spazio di progettazione visiva. Puoi selezionarla per apportare modifiche quando necessario.
Modifica tracciamento URL collegato
-
Fai clic sull'icona Collegamenti (
-
Se necessario, fare clic sull'icona Modifica (
Puoi anche aggiungere Tag per un collegamento.
Applica stile modalità scura
Utilizza la modalità scura per verificare la presenza di un tema scuro nel client di posta elettronica. Una modalità scura o un tema consente a un client e-mail o a un’app di supporto di visualizzare e-mail con sfondi più scuri e colori più chiari per testo, pulsanti e altri elementi visivi. In alto a destra nell'area di progettazione, imposta il selettore su modalità scura (
Per ulteriori informazioni sullo stile della modalità scura e sulle best practice, vedere Modalità scura per il contenuto delle e-mail.
Opzioni di visualizzazione
Sfrutta le opzioni di convalida della visualizzazione e del contenuto disponibili nello spazio di progettazione visiva.
-
Zoom in/out del contenuto tra le opzioni di zoom predefinite.
-
Cambia la visualizzazione del contenuto tra desktop, dispositivi mobili o solo testo/solo testo.
- Fai clic sull'icona Occhio per visualizzare l'anteprima del contenuto tra i dispositivi.
- Seleziona uno dei dispositivi predefiniti o immetti dimensioni personalizzate per visualizzare in anteprima il contenuto.
Altre opzioni
Dal menu Altro … nella parte superiore dello spazio di progettazione delle e-mail, puoi eseguire le azioni seguenti:
- Ripristina modello - Fare clic su questa opzione per cancellare l'area di progettazione in un'area vuota e riavviare la creazione del contenuto.
- Salva come frammento - Consente di salvare tutte o alcune parti del modello come frammento da riutilizzare in più e-mail o modelli di e-mail. Fornisci un nome e una descrizione per il frammento, quindi salvalo nell’elenco dei frammenti disponibili.
- Modifica la progettazione - Torna alla pagina Progetta la tua e-mail. A questo punto è possibile scegliere un altro modello per riavviare il processo di progettazione. Puoi anche scegliere di progettare il contenuto da zero con un'area di lavoro vuota (Modalità classica) o utilizzando un tema del marchio (Modalità tema).
- Esporta HTML - Scarica il contenuto nell'area di lavoro visiva nel tuo sistema locale in formato HTML racchiuso in un file zip.