Come aggiungere immagini laterali nei moduli d'iscrizione
Cosa imparerai
Scopri come includere un'immagine di alta qualità a sinistra o a destra del tuo modulo d'iscrizione per un'esperienza d'iscrizione coinvolgente che corrisponde al design del tuo brand.
Prima di iniziare
Le immagini laterali vengono visualizzate a sinistra o a destra del contenuto del modulo. Quando usi un'immagine in un modulo, ci sono alcune cose da tenere a mente:
- Ci sono molti tipi di formati immagine tra cui scegliere. I file JPEG offrono un buon equilibrio tra qualità e dimensioni per le immagini ricche di colori, mentre i file PNG possono mantenere nitide le immagini o i loghi con trasparenza.
- Assicurati di usare un'immagine di qualità sufficientemente alta per ottenere i migliori risultati.
- Cerca di mantenere le immagini tra 600 e 1000 px di larghezza e sotto i 2000 px di altezza per le immagini a larghezza intera, così da bilanciare qualità e tempi di caricamento. Le immagini non a larghezza intera possono essere più piccole di 600 px.
- Come per tutte le immagini visualizzate sul web, dimensioni dei file più grandi comportano tempi di caricamento più lenti.
- Punta a una dimensione del file di 50–100 KB per le immagini laterali e inferiore a 200 KB per le immagini di sfondo, per garantire che l'immagine abbia un aspetto di alta qualità senza rallentare il sito.
- Aggiungi il testo alternativo all'immagine in modo che i moduli siano accessibili a tutti i visitatori del sito.
Poiché i moduli d'iscrizione vengono renderizzati nei browser (a differenza delle e-mail, che vengono renderizzate negli ESP), ci sono meno raccomandazioni su come formattarli e modificarli. I browser possono renderizzare immagini di tutti i tipi e dimensioni, quindi in generale attieniti a immagini ad alta risoluzione, dimensioni dei file gestibili e testa l'aspetto su ogni tipo di dispositivo.
Aggiungi un’immagine laterale al modulo
Per aggiungere un'immagine su entrambi i lati del contenuto del tuo modulo d'iscrizione:
- Accedi alla scheda Moduli d'iscrizione.
- Accanto al modulo, fai clic su 3 puntini > Modifica modulo.
Se il tuo modulo è stato creato prima di luglio 2021 e utilizza un'immagine di sfondo allineata a destra o a sinistra come immagine laterale, rimuovila prima di utilizzare la funzionalità immagine laterale. Per farlo, vai alla sezione Sfondo del modulo della sezione Stili e rimuovi l’immagine di sfondo. Poi scorri verso il basso fino a Stili del modulo e rimuovi qualsiasi spaziatura interna in eccesso sul lato destro o sinistro.
- Nella sezione Stili, vai alla sezione Immagine laterale e seleziona il lato in cui vuoi aggiungere un'immagine (sinistra o destra).
- Fai clic sul segnaposto vuoto dell’immagine nell’anteprima del modulo.
- Fai clic su Sfoglia libreria immagini per aggiungere un'immagine dalla tua libreria immagini di Klaviyo, caricare un'immagine o importare una nuova immagine da un URL.
Assicurati di utilizzare un’immagine di qualità sufficientemente elevata per ottenere risultati ottimali. Come per tutte le immagini visualizzate sul web, file di dimensioni maggiori comportano tempi di caricamento più lenti. Punta a una dimensione del file di 50–100 KB per le immagini laterali, per garantire un aspetto di alta qualità senza rallentare il sito.
Opzioni di visualizzazione dell'immagine laterale
Stili di forma
Per impostazione predefinita, i moduli con immagini laterali sono impostati su una larghezza di 780 px, con la larghezza dell’immagine laterale impostata su Media. Puoi utilizzare le sezioni Larghezza e Altezza minima per regolare le dimensioni del modulo. Se vuoi che l'immagine laterale occupi più o meno spazio nel modulo, regola le dimensioni nella sezione Immagine laterale (ad es. piccola, media, grande, personalizzata).
Per impostazione predefinita, l’immagine laterale del modulo verrà nascosta sui dispositivi mobili per ottimizzare l’esperienza mobile, poiché lo spazio sullo schermo dei dispositivi mobili è limitato. Se vuoi che l'immagine laterale venga visualizzata su tutti i dispositivi, fai clic sull'immagine nell'anteprima, poi scorri fino a Mostra su e seleziona Tutti i dispositivi.
Stili delle immagini laterali
Usa la sezione Stili delle impostazioni Immagine laterale per scegliere come verrà visualizzata l'immagine.
- Testo alternativo
Aggiungi un testo alternativo all’immagine, in modo che sia accessibile a chiunque visiti il tuo sito web. - Posizione dell’immagine
Questo determina come l’immagine si adatterà all’interno dell’area Side Image. Seleziona una delle seguenti opzioni:- Contieni
L’immagine completa apparirà all’interno della sezione e non verrà ritagliata. Se l’immagine non si adatta in modo preciso all’area dell’immagine, il colore di sfondo della sezione riempirà tutte le aree non coperte. - Copri
L’immagine riempirà completamente l’area dell’immagine laterale. Alcune parti dell'immagine potrebbero essere tagliate per consentire all'immagine di riempire lo spazio. - Personalizzato
Seleziona la larghezza dell’immagine.
- Contieni
- Allineamento orizzontale e Allineamento verticale
Ti consentono di scegliere se l'immagine è centrata o allineata alla parte superiore, inferiore, sinistra o destra dell'area dell'immagine. - Colore di sfondo
Se stai utilizzando un'immagine più piccola nel tuo modulo, imposta un colore di sfondo per riempire lo spazio vuoto dietro di essa.
Risorse aggiuntive
- 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.
- Understanding styles for a sign-up form
Learn how to use Klaviyo’s sign-up form builder to design your form by editing the design settings available in the Styles section. Style settings apply across your sign-up form, including in all of a form’s steps and in its success message.
- Getting started with Canva for Images
Learn how to integrate Klaviyo with Canva in order to bring images from Klaviyo into Canva, and designs from Canva into your Klaviyo image library. Once Canva designs are in your Klaviyo image library, you can use them within email templates, SMS content, sign-up forms, and more.