Come aggiungere colonne a un'e-mail
Cosa imparerai
Scopri come disporre i contenuti affiancati nell’editor e-mail drag-and-drop di Klaviyo usando i blocchi split, i layout a colonne o i blocchi tabella e come regolare l’aspetto del design su desktop e mobile.
Quando usare un blocco split, le colonne o una tabella
Esistono 3 modi per disporre i contenuti affiancati usando l’editor e-mail di Klaviyo: blocco split, colonne e blocco tabella. Ogni opzione offre determinati vantaggi e compromessi.
Layout dei contenuti | Numero di colonne | Opzioni di larghezza | Tipi di contenuto consentiti | Le colonne possono impilarsi nella visualizzazione per dispositivi mobili? |
Blocco split | 2 | Controllo preciso (usa Stili > Layout) | Solo immagine o testo | Sì |
Colonne | 1-4 | Selezione limitata | Qualsiasi tipo di blocco di contenuti (ad esempio blocco di testo, blocco immagine, blocco di citazione di recensione) | Sì |
Blocco tabella | Qualsiasi numero | Controllo preciso (usa Larghezza colonna > Manuale) | Solo immagine o testo | No |
Le tabelle possono essere complesse per l’accessibilità, perché gli screen reader fanno fatica a interpretarle.
Per usare l’impilamento su dispositivi mobili e l’anteprima Mobile, attiva Ottimizza per dispositivi mobili in Ottimizzazione per dispositivi mobili nelle impostazioni principali Stili del modello.
Aggiungi un blocco split a un'e-mail
Per aggiungere un blocco split a un’e-mail:
- Trascina un blocco split nel tuo modello, poi selezionalo per aprire le sue impostazioni.
- Apri la scheda Stili del blocco e modifica le percentuali in Layout per personalizzare la larghezza delle 2 colonne.
- Apri la scheda Contenuti e utilizza Selettore di colonne per selezionare una colonna.
- In Contenuto della colonna, scegli Testo o Immagine per la colonna selezionata.
- Aggiungi i tuoi contenuti: fai doppio clic sul testo nel canvas dell’e-mail per modificarlo oppure scegli un’immagine usando i controlli dell’immagine. Ripeti per l’altra colonna.
- Facoltativo: apri Stili > Impilamento su dispositivi mobili per scegliere l'ordine di impilamento oppure seleziona Nessun impilamento per mantenere le colonne affiancate sui dispositivi mobili.
- Fai clic sulla freccia indietro per tornare al menu dei contenuti principale e salvare le modifiche al blocco.
Aggiungi colonne a un'e-mail
Per aggiungere colonne a un'e-mail:
- Trascina Colonne dalla sezione Layout nella tua e-mail.
- Scegli il numero di colonne e il layout desiderato nella finestra di dialogo, quindi fai clic su Aggiungi layout di colonna.
- Trascina blocchi di qualsiasi tipo nelle tue colonne.
A differenza del blocco split, puoi usare qualsiasi blocco, avere più blocchi nella stessa colonna e scegliere di avere più di 2 colonne. Ad esempio, questa è un'e-mail con un'immagine da un lato e testo e un pulsante dall'altro.
Con l’ottimizzazione per dispositivi mobili attivata, per impostazione predefinita le colonne si impilano da sinistra a destra. Puoi modificare l’ordine di impilamento o mantenere le colonne affiancate nelle impostazioni della sezione. Per testo e immagini, puoi anche utilizzare un blocco tabella.
Per modificare lo stacking su dispositivo mobile per la sezione che contiene le tue colonne:
- Fai clic nell’area a sinistra o a destra del contenuto della sezione per aprire le impostazioni della sezione.
- Apri Stili > Impilamento su mobile e scegli un ordine di impilamento, oppure seleziona Nessun impilamento per mantenere le colonne affiancate.
- Fai clic sulla freccia indietro per tornare al menu principale dei contenuti e salvare le modifiche alla sezione.
Aggiungi un blocco tabella a un’e-mail
Usa un blocco tabella per disporre testo e immagini in colonne che restano affiancate su dispositivi mobili. Per aggiungere e compilare una tabella:
- Trascina un blocco Tabella nella tua e-mail, poi selezionalo per aprire le impostazioni.
- Apri Stili e, in Colonne, fai clic su Aggiungi colonna per ogni colonna aggiuntiva necessaria. Per impostare la larghezza di una colonna, espandi la colonna e seleziona Larghezza colonna > Manuale, quindi inserisci la larghezza.
- Apri Contenuto e usa Selettore celle per selezionare una cella. In Contenuto della cella, scegli Testo o Immagine. Fai doppio clic sul testo nel canvas dell’e-mail per modificarlo oppure scegli un’immagine usando i controlli dell’immagine. Ripeti per ogni cella.
- Fai clic sulla freccia indietro per tornare al menu principale dei contenuti e salvare le modifiche alla tabella.
Per regolare la spaziatura interna della tabella (lo spazio intorno ai suoi contenuti), i colori dei bordi e i caratteri, seleziona la tabella e apri Stili.
Controlla la tabella nell’anteprima Mobile. Le tabelle con molte colonne possono essere difficili da leggere su uno schermo piccolo. Per nascondere una colonna su mobile, apri la scheda Stili della tabella, espandi la colonna in Colonne e imposta Mostra colonna su su Solo desktop.
Per maggiori informazioni sulla progettazione delle e-mail, consulta la nostra guida all’editor di modelli per e-mail
Risorse aggiuntive
- How to add a first name to an email, SMS, or push message
Learn how to add a variable that dynamically populates a recipient’s first name in an email, SMS, or push message. These are supported in campaigns and flows, the body of any message, and an email’s subject line.
- Accessibility in emails and forms best practice reference
Learn how to make your emails and sign-up forms more accessible. When designing your emails and signup forms, you’ll want to make sure your designs are accessible to all of your recipients.