Definire lo stile delle campagne e-mail

Modificare i tipi di carattere, i colori, il padding e altre impostazioni di stile della propria campagna per adattarli al proprio sito o marchio.

Ultimo aggiornamento 6 dicembre 2024

Ogni campagna email è costituita da più sezioni. Sebbene sia possibile definire lo stile della maggior parte delle sezioni separatamente, esistono alcune impostazioni di stile "globali" che riguardano l'intera campagna. In questo modo, puoi ottenere uno stile coerente per il tuo brand.

Questi stili globali vengono applicati a ciascuna campagna:

Puoi applicare automaticamente le impostazioni di stile del tuo sito Web alla campagna o impostare manualmente questi stili. Puoi anche salvare e riutilizzare i colori per qualsiasi elemento o duplicare una campagna per riutilizzare tutte le impostazioni di stile in una nuova bozza.

Suggerimento

per modificare gli stili globali, clicca sull'area al di fuori delle sezioni (sfondo e-mail).

Applica stili sito Web

Se vuoi che la tua campagna corrisponda all'estetica del tuo sito Web, puoi inserire automaticamente il logo del tuo sito e applicare i colori in base alla combinazione di colori del tuo sito. Per fare ciò:

  1. Durante la modifica della bozza della campagna, fai clic su Stile nel pannello di destra.
  2. Clicca su Copia rapidamente il look del tuo sito. Se questo pulsante non viene visualizzato, è possibile che le impostazioni di stile di una sezione dei contenuti siano aperte. Clicca nell'area esterna al contenuto bozza per mostrare gli stili di e-mail globali.
  3. Per inserire il logo del sito, clicca su Inserisci logo. Questa opzione è disabilitata se non hai aggiunto un logo del sito.
  4. Per cambiare i colori della campagna, clicca su una delle combinazioni di colori. Per modificare questi temi, modifica la combinazione di colori del tuo sito.

Dopo aver apportato queste modifiche, puoi ripristinare le impostazioni precedenti cliccando sulla freccia annulla. Per rimuovere il logo, clicca sul logo nell'anteprima della campagna e seleziona Testo nel pannello a destra.

Scegliere i font

In qualsiasi sezione, clicca su Font Pack (Pacchetto Font) per impostare i font per tutto il testo di una campagna.

I pacchetti di font sono combinazioni di font, scelte attentamente dai nostri designer per essere piacevoli alla vista e mettere in evidenza il messaggio principale. Sfoglia le opzioni per trovare un pacchetto di font che soddisfi il tono e il contenuto della tua campagna.

Non esiste un metodo per modificare singoli font all'interno di un pacchetto di font. I nostri pacchetti di font sono studiati per dare un aspetto coerente su un'ampia gamma di client email. La maggior parte dei client email su dispositivi mobili, ad esempio, non supporta font web e li sostituisce con propri font predefiniti. I font dei nostri pacchetti sono selezionati per garantire la massima compatibilità, quindi puoi essere certo che quello che vedi nella tua bozza è perlopiù simile a quello che i tuoi iscritti vedranno nella propria Posta in arrivo.

Se occorre un font diverso in una posizione specifica, considera l'aggiunta di un'immagine o l'uso di colore e formattazione specifica per distinguere il testo.

Ad esempio, nel layout Bloom, "Bloom" è un'immagine aggiunta all'intestazione ed "extra special" (nella sezione del testo) è in corsivo e in rosa per un maggiore risalto:

bloom.png

Impostare la dimensione del testo

In qualsiasi sezione, clicca su Font Sizes (Dimensione Font) per impostare la dimensione per tutto il testo della campagna.

  • Usa il cursore Base Font Size (Dimensione Font Base) per scegliere la dimensione del testo del corpo della campagna.
  • Usa il cursore Type Scale (Scala) per impostare il contrasto della dimensione del testo. Ad esempio, una scala più piccola determina una email "piatta", dove le intestazioni sono leggermente più grandi del testo del paragrafo, e una scala più grande renderà le intestazioni relativamente più grandi.
font-size.png

Esistono alcune eccezioni. Per il Testo Intestazione esistono impostazioni di dimensione proprie e i seguenti elementi hanno attualmente una dimensione fissa:

  • Testo Pulsante
  • Titoli Post e Prodotti
  • Date Post
  • Prezzi Prodotti
  • Testo del piè di pagina, incluso il tuo indirizzo e il link di annullamento dell'iscrizione

Cambiare i colori

Quando fai clic su un elemento per cambiarne il colore, ad esempio lo sfondo di un contenuto o il colore di un link, vedrai comparire due opzioni, Palette delle e-mailPalette del sito, con i campionari di colore corrispondenti.

Palette delle e-mail

In Palette delle e-mail vengono visualizzati i colori attualmente in uso nella campagna.

  • Per utilizzare un colore esistente, clicca sul relativo campione
  • Per aggiungere un nuovo colore, clicca all'interno del selettore di colori per trovare la tonalità desiderata e poi clicca sul + nel campione che appare
  • Per eliminare un colore, clicca sul campione e poi sulla X visualizzata
adjust-colors.gif

Suggerimento

Guarda i nostri suggerimenti per la creazione di un carattere tramite il colore.

Se conosci il valore del colore desiderato, puoi inserirlo nel campo del valore. Questo è un ottimo metodo per copiare i colori esatti da altre impostazioni di stile. Il campo del valore accetta valori HEX e RGB.

color_code.jpg

Tavolozza colori del sito

In Tavolozza colori del sito vengono visualizzati i colori utilizzati negli stili del sito. Puoi utilizzare questa opzione per assicurarti che le tonalità usate nelle tue campagne corrispondano al branding del sito.

  • Per utilizzare un colore della Palette del sito, fate clic sul relativo campione. Così facendo lo aggiungerai anche alla Palette delle e-mail.
  • Non è possibile modificare o eliminare direttamente i colori della Palette del sito. Per farlo, devi andare su Stili sito.

Ho cancellato per sbaglio un campione di colore nella Palette delle e-mail

Se tale colore è utilizzato in un'altra sezione, puoi reinserirlo tra i colori campione principali. Ad esempio, se elimini un colore campione che è utilizzato anche nei pulsanti dei tuoi post:

  1. Fai clic sulla sezione dei post del blog.
  2. Fai clic su Dettagli.
  3. Fai clic su Colore pulsante.
  4. Fai clic sul + nel campione per quel colore e lo vedrai ricomparire in altre aree di stile colore.

Se il colore non viene utilizzato in un altro punto nella campagna, non esiste un modo per recuperarlo. Come precauzione, puoi annotare i codici HEX dei colori che usi, per recuperarli in caso di eliminazione accidentale di un campione.

Colori di sfondo

Esistono tre tipi di colori di fondo da impostare:

  • Sfondo e-mail: il colore di sfondo dell'area attorno al contenuto. Se i due stili riportati di seguito sono impostati su trasparente, questo è il colore che viene visualizzato anche dietro il contenuto della campagna.
  • Sfondo contenuto: il colore di fondo dietro tutte le sezioni di una campagna. Se il colore della sezione è impostato su trasparente, questo è il colore visualizzato nella sezione. Se tutte le sezioni hanno impostazioni di colore univoche, questo colore potrebbe non essere visualizzato da nessuna parte.
  • Colore sezione: il colore di sfondo di una singola sezione. È possibile attribuire colori ad ogni sezione in modo indipendente. Se il colore della sezione è impostato su trasparente, dietro la sezione apparirà invece lo sfondo del contenuto o dell'e-mail.

Per impostare lo Sfondo e-mail e lo Sfondo contenuto, clicca sull'area esterna alle sezioni e poi sulle opzioni nel pannello laterale. Per impostare il colore di una sezione, clicca sulla sezione e poi su Colore sezione.

Ricorda:

  • Per sezioni immagine, il colore di sfondo appare solo dietro le didascalie e le aree dell'immagine trasparenti. Ad esempio, se hai selezionato il layout della sezione dell'immagine Below e hai nascosto le didascalie, il colore dello sfondo non sarà visibile.
  • Dal momento che le e-mail visualizzate sui dispositivi mobili occupano spesso l'intero schermo, il colore di sfondo potrebbe non essere visibile su alcuni dispositivi.
  • Per creare uno sfondo trasparente, scegli il campione a sinistra con linee diagonali.
transparent_color.jpg

I link di testo seguono il pacchetto dei tipi di carattere globale e le dimensioni dei tipi di carattere globali. Per impostare il colore per tutti i link della tua campagna, clicca sull'area al di fuori delle sezioni e imposta l'opzione Colore link.

Suggerimento

i Link view-in-browser hanno la propria opzione colore, poiché vengono visualizzati sopra il colore di sfondo dell'intestazione.

style-a-link.png

Padding

Per modificare lo spazio bianco attorno al testo e alle immagini, fare clic su qualsiasi sezione per visualizzare le opzioni di riempimento. L'aspetto dell'imbottitura può variare a seconda del dispositivo. Ad esempio, le immagini delle campagne non dispongono di imbottitura sui dispositivi mobili per garantire che il contenuto sia visibile e chiaro su schermi più piccoli.

Se appare un'imbottitura troppo o troppo piccola, sperimenta impostazioni diverse fino a trovare l'aspetto ideale per le tue esigenze. Tieni presente che le tue campagne potrebbero presentare lievi differenze di aspetto, a seconda del modo in cui i tuoi abbonati visualizzano la campagna.

Suggerimento

Puoi aggiungere più spazio bianco sopra e sotto le sezioni con blocchi spazio.

Design Responsive

Il design responsive integrato di Campagne e-mail ridimensiona le tue immagini e il testo in base allo schermo del visitatore. Indipendentemente dal fatto che gli iscritti utilizzino un computer o controllino l'e-mail su uno smartphone fuori dall'ufficio, il responsive design migliora l'aspetto della tua campagna.

  • I font diventano leggermente più grandi su dispositivi mobili per migliorare la leggibilità su schermi più piccoli.
  • Per blog, prodotti e sezioni immagini, le immagini e il testo vengono impilati nei browser e negli schermi più stretti. In questo modo, i tuoi contenuti rimangono visibili.

Definire lo stile di una sezione

Ad eccezione degli stili globali di cui sopra, lo stile di ogni sezione viene definito separatamente. Fai clic su una sezione nell'anteprima a sinistra e usa il pannello a destra per definirne lo stile. Per ulteriori informazioni, visita i nostri suggerimenti per la creazione e la definizione dello stile di ogni tipo di sezione.

Riutilizzare uno stile

Per utilizzare una campagna che hai già inviato come modello, incluse le relative impostazioni di stile:

  1. Apri la dashboard di Campagne e-mail.
  2. Clicca su Sent (Inviate).
  3. Clicca sull'icona Riutilizza modello nella campagna con lo stile che desideri riutilizzare.
  4. Seleziona il tipo di automazione.

Il layout viene visualizzato come nuova bozza, che puoi utilizzare come punto iniziale per una nuova campagna. Per maggiori informazioni, visita Creare campagne e-mail.

Footer Image
  • Ricevi assistenza dalla nostra community

  • Ricevi assistenza dalla nostra community in merito alle personalizzazioni avanzate.

  • Affidati a uno Squarespace Expert

  • Fatti notare online con l'aiuto di un designer o di uno sviluppatore esperto.

Definire lo stile delle campagne e-mail