Esempi costruzione template

Dopo che hai preparato la bozza per il tuo template, determinato le impostazioni base di aspetto e fatto conoscenza con le basi di layout degli elementi, sei pronto a costruire la tua newsletter.

Per capire meglio, guarda questi esempi che mostrano come costruire un template.

Sono descritti esempi semplici che presentano come inserire nel template elementi di layout e di contenuto.

  1. Esempio: 1 Colonna
  2. Esempio: 2 Colonne con immagine e testo
  3. Esempio: 2 Colonne – immagine e testo
  4. Esempio: 2 Colonne – testo e immagine
  5. Esempio: 3 Colonne

1. Esempio: 1 Colonna

1. Inserisci nel template l’Elemento full width.

  • Per farlo, clicca sull’Elemento full width e visualizzare il bordo dell’intero full width.

2. Cliccando sul bottone + in basso si apre una finestra dove puoi scegliere il numero delle colonne.

3. Aggiungi un nuovo Elemento full width cliccando sulla struttura.

4. Nella struttura, ovvero nel box (di colore blu), devi aggiungere il contenuto.

  • Puoi farlo cliccando sull’icona dell’immagine, testo o bottone al centro del box:
  • O scegliendo l’elemento tra gli elementi di contenuto:

5. E trascinarlo e rilasciarlo (drag & drop) nel punto desiderato nel template:

6. Nella stessa Struttura aggiungi sotto l’immagine anche il Testo e il Bottone.

L’immagine inserita deve essere in formato PNG, JPG o GIF.

Con larghezza minima di 600px e non superiore ai 2 MB.

   

2. Esempio: 2 Colonne con immagine e testo

1. Aggiungi nel template l’Elemento full width.

  • Per farlo clicca sull’Elemento full width per visualizzare il bordo dell’intero full width.

2. Cliccando sul bottone + in basso si apre una finestra dove puoi scegliere il numero delle strutture.

3. Cliccando sulla struttura con due colonne aggiungi un nuovo Elemento full width.

4. In ogni colonna/box (di colore blu) aggiungi quindi gli elementi di contenuto.

 La larghezza minima dell’immagine deve essere di almeno 300px.

5. Seleziona il box, clicca sul bottone Copia per duplicarlo e trascinarlo nella colonna a destra. Modifica poi l’immagine, il testo e il bottone della colonna a destra.

6. Sostituisci l’immagine, con larghezza minima di 300px, e cambia il testo.

  • Per sostituire l’immagina clicca sull’elemento immagine. Nell’editor si aprono le opzioni per impostare l’immagine.
  • Oltre all’anteprima dell’immagine hai a disposizione un bottone per cambiare l’immagine e un bottone per modificare l’immagine.

7. Clicca sul bottone per sostituire l’immagine e dalla galleria scegline una nuova, ovvero trascina e rilascia nell’editor la nuova immagine.

 

 

3. Esempio: 2 colonne – immagine e testo

1. Aggiungi nel template l’Elemento full width.

  • Per farlo clicca sull’Elemento full width per visualizzare il bordo dell’intero full width.

2. Cliccando sul bottone + in basso si apre una finestra dove puoi scegliere il numero delle strutture (colonne).

3. Cliccando sulla struttura con le due colonne aggiungi un nuovo Elemento full width.

4. In ogni colonna/box (di colore blu) aggiungi poi gli elementi di contenuto.

5. In quello a sinistra aggiungi l’immagine, in quello a destra il testo e modificali.

La larghezza minima dell’immagine deve essere di almeno 300px.

Imposta infine la distanza tra le due strutture (colonne). Il valore predefinito raccomandato è 20px.

 

 

4. Esempio: 2 colonne – testo e immagine

Una pratica comune, quando si costruisce un template, è duplicare la colonna con l’immagine e il testo, l’una accanto all’altra, e nella seconda parte del template modificare il layout. Cioè, il testo a sinistra e l’immagine a destra.

Pertanto, non è necessario costruire nuovamente questa Structure (colonne), ma solo duplicarla. Una volta al suo posto però, devi fare attenzione che l’elemento venga visualizzato correttamente anche sui dispositivi mobili, cioè che l’immagina sia sempre sopra il testo.

1. Duplica la Struttura che hai creato nel passo precedente.

  • Per farlo, seleziona la Struttura, clicca su per visualizzare altre opzione e clicca sul bottone Copy (copia/duplica).

2. Posiziona la Struttura che hai copiato nel punto desiderato del template.

3. Dopodiché, seleziona, trascina e rilascia gli elementi nel punto desiderato per sostituirli.

4. Ripeti il processo con l’altro elemento.

5. Sostituisci l’immagine, con larghezza minima di 300px, e modifica il testo.

6. Per sostituire l’immagine clicca sull’elemento immagine. Nell’editor si aprono le opzione per impostare l’immagine.

  • Oltre all’anteprima dell’immagine hai a disposizione anche il bottone per sostituire o per modificare l’immagine.

7. Clicca sul bottone per sostituire l’immagine e dalla galleria scegli un’immagine nuova, o trascina e rilascia nell’editor un’immagine nuova.

8. Una volta terminata la modifica degli elementi, seleziona l’intera Struttura.

  • Nell’editor si apre l’opzione per l’impostazione sui dispositivi mobili.
  • Per una corretta visualizzazione sui dispositivi mobili, seleziona Inversione redistribuzione box (con l’immagine in alto e il testo in basso).

9. Controlla il layout anche sull’anteprima o invia a te stesso un messaggio di prova e verifica il layout su un dispositivo mobile.

 

5. Esempio: 3 Colonne

1. Aggiungi nel template l’Elemento full width.

  • Per farlo clicca sull’Elemento full width per visualizzare il bordo dell’intero full width.

2. Cliccando sul bottone + in basso si apre una finestra dove puoi scegliere il numero delle strutture (colonne).

3. Cliccando sulla struttura con tre colonne aggiungi un nuovo Elemento full width.

4. In ogni colonna/box (di colore blu) aggiungi quindi gli elementi di contenuto.

La larghezza minima dell’immagine deve essere di almeno 200px.

5. Imposta alla struttura la spaziatura tra i box per creare colonne più chiare e traspiranti. È raccomandato scegliere il valore predefinito di 20px.

6. Seleziona poi il box e clicca sul bottone Copia per duplicarlo due volte e trascinarlo nella colonna al centro e quella a destra.

7. Modifica l’immagine e il testo delle altre due colonne.