Un layout a griglia è un modo molto efficace per organizzare i contenuti nel design della tua email. Ti aiuta a presentare più informazioni, ad es. prodotti, eventi o articoli, in modo pulito, strutturato e visivamente accattivante. Organizzando i contenuti in righe e colonne, faciliti la consultazione, il confronto e l'interazione con le cose più importanti per i tuoi lettori.

Creazione di un layout a griglia nel design di un'email

🎥 Guarda il seguente video e segui le istruzioni riportate di seguito per scoprire come creare un layout a griglia nell'editor di email drag & drop:

1. Crea o apri un design di email nell'editor di email drag & drop.
2. Trascina e blocco di contenuto nell'area di lavoro. Qui, rilasceremo un blocco di contenuto Image (Immagine).
3. Clicca sulla sezione contenente il tuo blocco di contenuto nell'area di lavoro per visualizzarne le impostazioni.
4. Nell'area di lavoro, clicca sull'icona del segno più + accanto al tuo blocco di contenuto per aggiungere una colonna. Puoi aggiungere al massimo 5 colonne. Qui, vogliamo visualizzare 3 colonne.
5. Sotto ogni blocco di contenuto, trascina gli altri blocchi di contenuto che desideri aggiungere per creare un layout a griglia e ripeti il modello. Assicurati di rilasciare i blocchi di contenuto all'interno della stessa sezione. Per ulteriori informazioni, consulta il nostro articolo dedicato Differenze tra sezioni e blocchi di contenuto.
6. Riempi i tuoi blocchi di contenuto con il testo e le immagini che desideri. 

Congratulazioni! 🎉 Hai creato con successo un layout a griglia nel design della tua email. 

Inserimento di variabili del feed di dati in un layout a griglia [Avanzato]

Per inserire le variabili del tuo feed di dati in un layout a griglia, devi inserirle manualmente per specificare l'indice esatto di ogni elemento che vuoi visualizzare. Ciò significa che devi decidere in anticipo quali voci del tuo feed mostrare.

Parte 1: recupero delle variabili del feed di dati

Per sapere esattamente a quali campi fare riferimento nel tuo feed di dati, vai alla pagina Data feeds (Feed di dati) e apri il feed di dati che vuoi visualizzare. Qui puoi visualizzare la struttura del tuo feed e trovare le chiavi corrette da utilizzare nella sintassi delle variabili. 

La sintassi per recuperare manualmente elementi specifici dal tuo feed di dati è la seguente: {{feed.feedalias.array.index.variable}} dove: feedalias è il nome alias esatto del tuo feed di dati in modo che l'ortografia e le lettere maiuscole/minuscole corrispondano a ciò che appare nella pagina Data feeds (Feed di dati). array è l'array che contiene i valori per ciascun elemento. index è la posizione dell'elemento specifico che desideri visualizzare dal tuo feed di dati (partendo da 0 per il primo elemento). variable è la variabile specifica o il nome del campo che desideri visualizzare, ad es. nome, prezzo, data.

Ad esempio, per visualizzare il nome della lezione di yoga nell'array following_classes, nel primo indice, la variabile del tuo feed di dati sarà: 

{{feed.yoga_classes.following_classes.0.class_name}}

Parte 2: creazione e riempimento del layout a griglia con feed di dati

1. Crea il design di un'email con un layout a griglia. Per ulteriori informazioni sulla creazione di un layout a griglia, consulta la sezione dedicata precedente Creazione di un layout a griglia nel design di un'email.
2. Riempi i blocchi di contenuto con le variabili del feed di dati utilizzando la sintassi indicata nella Parte 1: recupero delle variabili del feed di dati. Per ulteriori informazioni sull'inserimento delle variabili nei blocchi di contenuto, apri il paragrafo comprimibile corrispondente al blocco di contenuto che desideri riempire:
   🔠 Aggiunta di una variabile come testo

   Aggiungi una variabile all'interno di un blocco di contenuto contenente testo per visualizzare dettagli specifici relativi a un elemento, ad esempio un nome, una posizione o una data.

   1. Clicca su un blocco di contenuto contenente testo (blocchi Title (Titolo), Text (Testo) o Button (Pulsante)).
   2. Posiziona il cursore nel punto in cui desideri aggiungere una variabile.
   3. Inserisci la variabile del feed di dati corrispondente al testo che desideri visualizzare. Ad esempio, con il nostro feed di dati di esempio, per visualizzare il nome della lezione di yoga del primo elemento nel feed di dati, la variabile sarebbe: {{feed.yoga_classes.following_classes.0.class_name}}.
      
   4. Ripeti la procedura per ogni variabile che desideri aggiungere come testo. Sostituisci ogni volta l'indice corrispondente all'elemento del feed di dati che desideri visualizzare.

   🖼️ Aggiunta di una variabile a un'immagine

   Aggiungi una variabile a un blocco Image (Immagine) per visualizzare l'immagine associata a un elemento, ad esempio un'immagine di un evento.

   1. Clicca su un blocco Image (Immagine).
   2. Nella barra laterale, vai su Image settings (Impostazioni immagine).
   3. Nel campo Insert image from URL (Inserisci immagine da URL), inserisci la variabile del feed di dati corrispondente all'immagine che desideri visualizzare. Nel nostro esempio, per visualizzare l'immagine del primo elemento nel feed di dati, la variabile sarebbe: {{feed.yoga_classes.following_classes.0.imageurl}}.
      
   4. Ripeti la procedura per ogni variabile che desideri aggiungere a un'immagine. Sostituisci ogni volta l'indice corrispondente all'elemento del feed di dati che desideri visualizzare.

   🔗 Aggiunta di una variabile come collegamento ipertestuale nel testo

   Aggiungi una variabile come collegamento ipertestuale nel testo per indirizzare i destinatari all'URL associato a un elemento, ad esempio un modulo di registrazione o la pagina di pianificazione di un evento.

   1. Clicca su un blocco di contenuto contenente testo (blocchi Title (Titolo) o Text (Testo)).
   2. Evidenzia il testo in cui desideri aggiungere il link.
   3. Clicca sull'icona Add link (Aggiungi link) 🔗 nella barra di formattazione.
   4. Nel campo Link target (Destinazione del link), inserisci la variabile del feed di dati corrispondente all'URL che desideri visualizzare. Nel nostro esempio, per visualizzare l'URL della pagina di prenotazione della lezione di yoga per il primo elemento nel feed di dati, la variabile sarebbe: {{feed.yoga_classes.following_classes.0.url}}.
      
      
   5. Ripeti la procedura per ogni variabile che desideri aggiungere come collegamento ipertestuale nel testo. Sostituisci ogni volta l'indice corrispondente all'elemento del feed di dati che desideri visualizzare.

   🔗 Aggiunta di una variabile come collegamento ipertestuale in un'immagine

   Aggiungi una variabile come collegamento ipertestuale in un'immagine per indirizzare i destinatari all'URL associato a un elemento, ad esempio la pagina di un evento.

   1. Clicca su un blocco Image (Immagine).
   2. Nella barra laterale, vai su Link settings (Impostazioni del link).
   3. Nel campo Link target (Destinazione del link), inserisci la variabile del feed di dati corrispondente all'URL che desideri visualizzare. Nel nostro esempio, per visualizzare l'URL della pagina di prenotazione della lezione di yoga per il primo elemento nel feed di dati, la variabile sarebbe: {{feed.yoga_classes.following_classes.0.url}}.
      
      
   4. Ripeti la procedura per ogni variabile che desideri aggiungere come collegamento ipertestuale in un'immagine. Sostituisci ogni volta l'indice corrispondente all'elemento del feed di dati che desideri visualizzare.

   🔗 Aggiunta di una variabile come collegamento ipertestuale in un pulsante

   Aggiungi una variabile come collegamento ipertestuale in un pulsante per indirizzare i destinatari all'URL associato a un elemento, ad esempio la pagina di un prodotto.

   1. Clicca su un blocco Button (Pulsante).
   2. Nella barra laterale, vai su Link settings (Impostazioni del link).
   3. Nel campo Link target (Destinazione del link), inserisci la variabile del feed di dati corrispondente all'URL che desideri visualizzare. Nel nostro esempio, per visualizzare l'URL della pagina di prenotazione della lezione di yoga per il primo elemento nel feed di dati, la variabile sarebbe: {{feed.yoga_classes.following_classes.0.url}}.
      
      
   4. Ripeti la procedura per ogni variabile che desideri aggiungere come collegamento ipertestuale in un pulsante. Sostituisci ogni volta l'indice corrispondente all'elemento del feed di dati che desideri visualizzare.
3. Visualizza in anteprima e prova la tua email per assicurarti che le variabili del feed di dati vengano visualizzate correttamente. 

Congratulazioni! 🎉 Hai creato con successo un layout a griglia contenente le variabili del feed di dati. 

Modello di email	Email nella posta in arrivo dei destinatari

⏭️ E adesso? 

• Personalizzazione del contenuto dell'email con i dati in tempo reale (feed di dati)
• Personalizzazione dell'oggetto e del testo di anteprima dell'email con i dati in tempo reale (feed di dati)

🤔 Domande?

In caso di domande, non esitare a contattare il team dell’assistenza creando un ticket dal tuo account. Se ancora non hai un account, puoi contattarci qui.

Se stai cercando aiuto per un progetto che prevede l'utilizzo di Brevo, possiamo metterti in contatto con l'agenzia partner di Brevo giusta per te.