[Beta]{class="badge informative"}
Utilizzare i temi del brand per i contenuti e-mail email-brand-themes
Con i temi, i designer non tecnici hanno la possibilità di creare linee guida per la progettazione di contenuti e-mail riutilizzabili, in linea con un marchio e uno stile specifici. I temi consentono agli addetti al marketing di sfruttare le e-mail visivamente accattivanti e coerenti con il brand in modo più rapido e con meno sforzo, e di fornire opzioni di personalizzazione avanzate per esigenze di progettazione univoche.
Linee guida e limitazioni del tema themes-guidelines
Quando lavori con i temi, tieni presenti le seguenti linee guida e limitazioni:
-
Quando crei un modello e-mail o e-mail da un'area di lavoro vuota (progettazione da zero), puoi scegliere Modalità tema per iniziare a creare i contenuti utilizzando un tema per applicare uno stile specifico adatto al tuo marchio e design. Se si sceglie Modalità manuale, non sarà possibile applicare un tema a meno che non si reimposti la struttura per l'e-mail o il modello e-mail.
-
I frammenti non sono compatibili tra la modalità tema e la modalità manuale nel contenuto dell'e-mail. Per utilizzare un frammento nel contenuto dell'e-mail in cui viene applicato un tema, è necessario creare il frammento anche in modalità tema.
-
Le modifiche a un tema personalizzato non si sovrappongono automaticamente a tutti i messaggi e-mail o modelli e-mail che lo utilizzano già. Modifica il contenuto di ogni per aggiornare il tema.
-
Se elimini un tema, questo non influisce su eventuali modelli e-mail o e-mail a cui è già stato applicato.
Creare un tema del brand create-theme
Definisci il tema del tuo marchio da applicare ai contenuti delle e-mail e dei modelli e-mail nei contenuti delle e-mail future.
-
Accedere agli strumenti del tema utilizzando uno dei seguenti metodi:
-
Crea un nuovo modello e-mail e fai clic su Modifica modello e-mail per avviare la pagina Progetta modello.
-
Fare clic su … Altro in alto a destra nello spazio di progettazione del contenuto dell'e-mail e scegli Cambia la progettazione.
Nella finestra di dialogo di conferma, fai clic su Cambia modello per aprire la pagina di progettazione.
-
-
Nella pagina di progettazione scegliere Crea o modifica temi.
-
Seleziona il tema predefinito o utilizza uno dei temi Adobe da utilizzare come punto di partenza.
note note NOTE Se desideri utilizzare uno dei tuoi temi personalizzati (I miei temi) come punto di partenza, puoi duplicarlo e modificare il nome del tema quando modifichi il tema. -
Fai clic su Crea.
La pagina Crea tema fornisce un'area di lavoro con gli elementi esistenti di tutti i tipi di testo, pulsanti e contenitori del tema iniziale.
-
Utilizza la navigazione a destra per accedere alle diverse schede di stile del tema e modificare le impostazioni del tema:
Gli elementi visivi cambiano nell’area di lavoro quando si definiscono le nuove impostazioni del tema. Se il risultato non è quello desiderato, puoi fare clic sull'icona Annulla (
-
Al termine della definizione del tema, fai clic su Salva.
-
Fai clic su Chiudi per tornare alla pagina Crea tema, quindi su Annulla per tornare alla pagina di progettazione.
Puoi quindi scegliere Progettazione da zero per aprire lo spazio di progettazione visiva e utilizzare il tema per l'e-mail o il modello.
Impostazioni generali
Nella scheda Impostazioni generali, definisci i parametri di base per il tema:
-
Immetti un nome tema univoco.
-
Regola la larghezza del riquadro di visualizzazione per il contenuto e-mail (corpo). Utilizza le frecce su e giù per aumentare o diminuire la larghezza oppure immetti il valore (in pixel).
Colori
Selezionare la scheda Colori e utilizzare le impostazioni per definire la tavolozza dei colori del tema.
-
Fai clic su Modifica per visualizzare la palette di colori che include i colori del tema.
Scegli un predefinito per usare una combinazione di colori per il tema o regola ogni colore del set. Puoi anche utilizzare una combinazione di entrambi.
Per il quadrato di colore selezionato nella parte superiore, è possibile impostare il colore immettendo un valore RGB, HSL, HSB o esadecimale noto. In alternativa, è possibile utilizzare il cursore del colore e il campo del colore per selezionare il colore.
Fai clic sulla freccia Indietro per chiudere gli strumenti della tavolozza dei colori.
-
Fai clic su Aggiungi variante per creare più varianti di colore, ad esempio in modalità chiaro e scuro, in cui ogni variante dispone di una propria palette di colori e controlli sfumatura. Puoi avere fino a sei varianti.
Per ogni variante, fai clic sull'icona Modifica (
Per ogni colore che desideri modificare per la variante, sposta l’interruttore a sinistra o a destra per disabilitarlo o abilitarlo. Per un'impostazione di colore abilitata, fare clic sul quadrato di colore per scegliere il colore.
accordion Impostazioni colore variante Le impostazioni sono raggruppate in base al tipo:
table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 Tipo Impostazioni Descrizione Generale 
Queste impostazioni consentono di impostare i colori per il corpo, le strutture, i contenitori, gli sfondi, i collegamenti, le griglie e i bordi. Intestazioni 
Queste impostazioni si applicano agli elementi Heading, in cui è possibile impostare i colori del testo e del bordo per ciascuno dei sei livelli di intestazione. Espandere ogni livello di intestazione per cui si desidera impostare il colore per la variante.Paragrafi 
Queste impostazioni si applicano agli elementi Paragraph, in cui è possibile impostare i colori del testo e del bordo per ciascuno dei tre tipi di paragrafo. Espandere ogni tipo di paragrafo per il quale si desidera impostare il colore per la variante.Pulsanti 
Le impostazioni si applicano agli elementi dei pulsanti, in cui è possibile impostare il colore di riempimento, il colore del bordo e il colore del testo per ciascuno dei tre predefiniti per pulsanti: Primario, Secondario e Terziario.
Impostazioni testo
Nella scheda Impostazioni testo è possibile impostare i tipi di carattere, gli stili e le dimensioni globali che si desidera utilizzare per il tema. Per un controllo più granulare, è inoltre possibile modificare questi parametri per i tipi di intestazione e paragrafo.
| table 0-row-3 1-row-3 2-row-3 3-row-3 | ||
|---|---|---|
| Tipo | Impostazioni | Descrizione |
| Globale |
|
Impostare la libreria caratteri su Standard o Caratteri Google. Scegliere quindi la famiglia di caratteri che si desidera utilizzare. Queste impostazioni globali di testo vengono applicate in tutto, a meno che non si impostino stili di testo diversi per i livelli di intestazione e i tipi di paragrafo. |
| Intestazioni |
|
Per il livello di intestazione che si desidera impostare, selezionare H1, H2 e così via. Impostare la libreria caratteri su Standard o Caratteri Google. Scegliere quindi la famiglia, la dimensione e lo stile del carattere. Scegli l'Allineamento testo: Sinistra, Centrata, Destra o Giustificata. |
| Paragrafi |
|
Per impostare il livello di intestazione, selezionare P1, HP e così via. Impostare la libreria caratteri su Standard o Caratteri Google. Scegliere quindi la famiglia, la dimensione e lo stile del carattere. Regola l'altezza della riga in base alle esigenze. Scegli l'Allineamento testo: Sinistra, Centrata, Destra o Giustificata. |
Spaziatura e bordo
Nella scheda Spaziatura è possibile impostare la spaziatura e il margine per i diversi tipi di elementi. Per Seleziona tipo, scegli il tipo di contenuto. Quindi, impostare la spaziatura interna, i margini, gli angoli e i bordi applicabili per quel tipo di elemento.
| table 0-row-3 1-row-3 2-row-3 3-row-3 | ||
|---|---|---|
| Tipo | Impostazioni | Descrizione |
| Margini |
|
Scegli l'icona Margine per visualizzare le impostazioni che replicano il parametro CSS margin, che controlla lo spazio all'esterno del bordo di un componente e lo separa da altri componenti o elementi. Crea un gap intorno al componente per influenzarne il posizionamento e il layout del contenuto circostante. Impostate i valori dei margini in pixel in base alle esigenze di progettazione. Puoi impostare il margine per tutti i lati, il bottone superiore, il lato sinistro-destro o ciascun lato del componente in modo indipendente. Fai clic sulle icone Blocca e Sblocca per sincronizzare o annullare la sincronizzazione dei valori dei margini superiore-inferiore e sinistro-destro. |
| Paddings |
|
Scegli l'icona Spaziatura interna per visualizzare le impostazioni che replicano il parametro CSS padding, che è lo spazio tra il contenuto di un componente/elemento e il relativo bordo. La spaziatura interna consente di controllare la distanza tra il contenuto e il bordo del componente. Imposta i valori di spaziatura in pixel in base alle tue esigenze di progettazione. Puoi impostare la spaziatura per tutti i lati, il bottone superiore, il lato sinistro-destro o ciascun lato del componente in modo indipendente. Fai clic sulle icone Blocca e Sblocca per sincronizzare o annullare la sincronizzazione dei valori di spaziatura interna superiore-inferiore e sinistra-destra. |
| Angoli |
|
Scegli l'icona Angoli per visualizzare le impostazioni che replicano il parametro CSS border-radius, che definisce il raggio degli angoli del componente/elemento. Impostate il valore numerico in base alla curva desiderata per gli angoli. Un valore pari a 0 (impostazione predefinita) produce un angolo al quadrato. |
Sposta l'interruttore Bordo a destra per abilitare le opzioni di visualizzazione del bordo e impostarle in base ai criteri di progettazione:
-
Per impostare la dimensione bordo (larghezza linea), fare clic sulle icone della freccia su e giù per aumentare o diminuire il numero di pixel.
-
Per impostare lo stile Bordo, scegliere un valore dall'elenco dei valori CSS
border-stylestandard, ad esempio Solido, Punteggiato e Tratteggiato. -
Per determinare la posizione di visualizzazione del bordo, selezionare ogni casella di controllo Posizione bordo.
Pulsanti
Nella scheda Pulsanti è possibile impostare attributi diversi (diversi dal colore) per gli elementi dei pulsanti, ad esempio il raggio del bordo (forma), il testo e le dimensioni. È possibile modificare le impostazioni per ciascuno dei tre predefiniti di pulsante: Primario, Secondario e Terziario.
| table 0-row-3 1-row-3 2-row-3 3-row-3 | ||
|---|---|---|
| Tipo | Impostazioni | Descrizione |
| Testo |
|
Impostare la libreria caratteri su Standard o Caratteri Google. Scegliere quindi la famiglia, la dimensione e lo stile del carattere. Scegli l'Allineamento testo: Sinistra, Centrata, Destra o Giustificata. |
| Bordo |
|
Sposta l'interruttore Bordo a destra per abilitare le opzioni di visualizzazione del bordo del pulsante e impostarle in base ai criteri di progettazione. Impostare Dimensione bordo (larghezza linea) aumentando o diminuendo il numero di pixel. Imposta lo stile bordo scegliendo un valore dall'elenco dei valori CSS border-style standard, ad esempio Solido, Punteggiato e Tratteggiato. |
| Dimensione |
|
Per l'opzione Altezza, fare clic sulle icone della freccia su e giù per aumentare o diminuire il numero di pixel. Il valore predefinito è un valore vuoto (Automatico) e l'altezza del pulsante viene ridimensionata in base al contenuto. Per Larghezza, utilizza l'interruttore per impostare la larghezza in pixel o in percentuale. Per una larghezza percentuale, utilizzare il dispositivo di scorrimento per impostare il valore percentuale. La percentuale determina la dimensione del pulsante in base alla casella del contenuto del blocco contenitore, che esclude la spaziatura e i bordi. Ad esempio, un valore pari a 50 imposta la larghezza del pulsante sul 50% della larghezza del contenuto del blocco che lo contiene. Per una larghezza basata su pixel, fai clic sulle icone freccia su e giù per aumentare o diminuire il numero di pixel. Un valore vuoto (Auto) è l'impostazione predefinita e ridimensiona la larghezza del pulsante in base al suo contenuto. |
Divisore
Nella scheda Divider è possibile impostare lo stile della linea e le impostazioni del contenitore per un componente Divider.
| table 0-row-3 1-row-3 2-row-3 3-row-3 | ||
|---|---|---|
| Tipo | Impostazioni | Descrizione |
| Line |
|
Imposta lo stile bordo scegliendo un valore dall'elenco dei valori CSS border-style standard, ad esempio Solido, Punteggiato e Tratteggiato. |
| Dimensione contenitore |
|
Per l'opzione Altezza, fare clic sulle icone della freccia su e giù per aumentare o diminuire il numero di pixel per il componente o l'elemento. Il valore predefinito è un valore vuoto (Automatico) e l'altezza viene ridimensionata in base al contenuto (stile linea). Per Larghezza, utilizza l'interruttore per impostare la larghezza in pixel o in percentuale. Per una larghezza percentuale, utilizzare il dispositivo di scorrimento per impostare il valore percentuale. La percentuale determina la larghezza dell’elemento in base alla casella del contenuto del blocco contenitore. Ad esempio, un valore pari a 50 imposta la larghezza del divisore sul 50% della larghezza del contenuto del blocco che lo contiene. Per una larghezza basata su pixel, fai clic sulle icone freccia su e giù per aumentare o diminuire il numero di pixel. Un valore vuoto (Auto) è il valore predefinito e ridimensiona la larghezza del divisore in base al suo contenuto. |
| Allineamento |
|
Scegli l'allineamento orizzontale all'interno del blocco contenitore: Sinistra, Centrata o Destra. |
Griglia
Nella scheda Griglia è possibile controllare gli spazi vuoti di colonne e righe per un elemento griglia:
-
Spazio tra colonne - Fare clic sulle icone freccia su e giù per aumentare o diminuire il numero di pixel per lo spazio tra le colonne della griglia. In alternativa, è possibile immettere un numero nel campo.
-
Spazio tra righe - Fare clic sulle icone freccia su e giù per aumentare o diminuire il numero di pixel per lo spazio tra le righe della griglia. In alternativa, è possibile immettere un numero nel campo.
Modificare un tema
È possibile modificare un tema utilizzando lo stesso flusso di lavoro e gli stessi strumenti utilizzati per creare un tema. La differenza sta nel fatto che si seleziona la scheda I miei temi e si seleziona il tema personalizzato che si desidera modificare.
Utilizza la barra a destra per spostarti tra le diverse schede e modificare le impostazioni del tema:
Gli elementi visivi visualizzati cambiano quando si modificano le impostazioni. Se il risultato nell'area di lavoro non è quello desiderato, è possibile fare clic sull'icona Annulla (
Al termine delle modifiche al tema, fai clic su Salva.
Gestire i temi personalizzati
Puoi gestire i temi personalizzati utilizzando lo stesso flusso di lavoro e gli stessi strumenti utilizzati per creare un tema. La differenza sta nel fatto che si seleziona la scheda I miei temi e si gestiscono i temi nell'elenco visualizzato.
Se hai un elenco esteso di temi personalizzati, utilizza il campo Cerca e altri filtri per ridurre l'elenco visualizzato. Quando gestisci l’elenco dei temi disponibili, puoi modificare, eliminare o duplicare un tema personalizzato in qualsiasi momento.
Modificare un tema
-
Seleziona il tema da modificare e fai clic su Modifica in alto a destra.
-
Utilizza la navigazione a destra per utilizzare le diverse schede di stile e modificare le impostazioni del tema:
Gli elementi visivi visualizzati cambiano quando si modificano le impostazioni. Se il risultato sull'area di lavoro non è quello desiderato, puoi fare clic sull'icona Annulla nella parte inferiore della barra a destra. Fai clic sull'icona Ripristina per applicare nuovamente la modifica.
-
Al termine delle modifiche al tema, fai clic su Salva.
Eliminare o duplicare un tema
Quando si individua il tema, fare clic sull'icona Altro menu (…) in basso a destra della scheda del tema e scegliere l'azione che si desidera eseguire:
-
Duplicato - Scegliere questa azione per duplicare il tema. Il nuovo tema è identico alla copia di aggiunta al nome dell'originale. Puoi cambiare il nome quando modifichi il tema.
-
Elimina - Scegliere questa azione per rimuovere il tema personalizzato. Nella finestra di dialogo di conferma, fai clic su Elimina.
note note NOTE L’eliminazione del tema non influisce su alcun modello e-mail o e-mail a cui è già applicato.
Utilizza un tema per l’authoring dei contenuti delle e-mail use-email-theme
Quando crei un nuovo modello e-mail o e-mail, puoi scegliere di utilizzare un tema del brand che semplifica il processo di authoring dei contenuti e assicura che la progettazione sia allineata agli standard definiti. Per un nuovo frammento, puoi anche applicare un tema prima di salvare il frammento. Il frammento rimane in Modalità tema da quel momento ed è compatibile da aggiungere alle e-mail e ai modelli e-mail che sono anche in Modalità tema.
-
Selezionare una delle azioni seguenti:
-
Seleziona un modello di e-mail che incorpora un tema (creato in Modalità tema). Il tema specifico di ciascun modello viene applicato automaticamente.
-
Utilizza l'opzione Progetta da zero e seleziona Usa temi per iniziare con un tema di stile predefinito.
note important IMPORTANT Se si sceglie la modalità Stile manuale, è necessario reimpostare la struttura dell'e-mail per applicare un tema. Se scegli la modalità Temi, solo frammenti creati anche in modalità Temi sono disponibili per l'aggiunta al contenuto dell'e-mail.
-
-
Nello spazio di progettazione delle e-mail, fai clic sull'icona Temi (
Viene visualizzato il tema predefinito o applicato al modello. Puoi cambiare le varianti di colore per questo tema.
-
Fai clic sulla freccia accanto al tema visualizzato per visualizzare l’elenco dei temi personalizzati e Adobe disponibili.
-
Fai clic su I miei temi e seleziona il tema personalizzato.
-
Fai clic all’esterno dell’elenco.
Il tema personalizzato appena selezionato applica gli stili a tutti i componenti e-mail nell’area di lavoro. Puoi alternare tra le varianti di colore.
-
Se devi ignorare gli stili del tema per un componente selezionato, fai clic sull'icona Sblocca stili componente (
Nella finestra di dialogo di conferma, fai clic su Sblocca.
Seleziona la scheda Stili nel pannello di destra per modificare le impostazioni del componente.
Modificare il tema per il contenuto dell’e-mail
Per un e-mail o un modello e-mail creato in Modalità tema, puoi modificare il tema in qualsiasi momento. Il contenuto dell’e-mail rimane invariato, ma gli stili vengono aggiornati per riflettere il nuovo tema.
-
Apri il modello e-mail o e-mail nello spazio di progettazione.
-
Fai clic sull'icona Temi (
Il tema applicato viene visualizzato nel pannello di destra.
-
Fai clic sulla freccia accanto al tema visualizzato per visualizzare l’elenco dei temi personalizzati e Adobe disponibili.
-
Seleziona un altro tema.
-
Fai clic all’esterno dell’elenco.
Il tema selezionato applica gli stili a tutti i componenti e-mail nell’area di lavoro. Puoi alternare tra le varianti di colore.