Elementi base

 

Testo

Cliccando sull’elemento Testo si apre l’editor di testo, che serve a modificare l’intero elemento.

È possibile quindi impostare:

  • Colore del testo
  • Colore sfondo dell’elemento
  • Allineamento e bottone per allineamento su dispositivi mobili
  • Interlinea
  • Margini
  • È inoltre possibile impostare l’elemento in modo da non farlo apparire su desktop o dispositivi mobili

 

Cliccando sull’elemento Testo appare simultaneamente in cima all’area di lavoro anche il semplice editor di testo. Con l’editor semplice del testo è possibile modificare le singole parole/espressioni, selezionandole e modificandole.

È possibile modificare le seguenti opzioni del testo:

  • Stile (Normale, Titolo 1, Titolo 2, Titolo 3, et.al.)
  • Tipo di carattere
  • Dimensione carattere
  • Colore del carattere e colore dello sfondo
  • Grassetto (B), Corsivo (I), Sottolineato (U), Barrato (S), Apice (subscript)  , Pedice(superscript)
  • Puoi inserire o annullare un collegamento

 

Il semplice editor permette anche di:

  • Creare elenchi puntati o numerati
  • Impostare l’allineamento
  • Aggiungere una tabella
  • Aggiungere caratteri speciali/simboli
  • Inserire emoji

 

Ma andiamo a spiegare più in dettaglio i collegamenti che possono essere aggiunti nel Testo:

  • COLLEGAMENTI AUTOMATICI E SUBTAG
  • COLLEGAMENTO A SCELTA

 

COLLEGAMENTI AUTOMATICI E SUBTAG

Nel template è possibile inserire in una parola o in un’espressione selezionata anche i nostri collegamenti automatici preconfigurati (tag) e i subtag, ovvero i tag personalizzati.

La funzione del Tag si trova nel semplice editor di testo, in alto a destra, dove sono a disposizione 3 tipi di collegamenti, e cioè Newsletter, Gestione iscrizione e Campi del destinatario.

  • Newsletter ti permette di aggiungere un collegamento automatico per la Visualizzazione sul web, Visualizzazione delle newsletter precedenti e l’Oggetto (Subject). Questi collegamenti vengono soprattutto inseriti nel header del template.

  • Gestione iscrizione ti permette di aggiungere un collegamento automatico per il Collegamento alla cancellazione, Conferma iscrizione, Aggiornamento dati, Opzioni di consenso GDPR e Conferma consenso GDPR. Questi collegamenti vengono spesso inseriti nel footer del template (il Collegamento alla cancellazione è parte obbligatoria di ogni footer di un template), ma anche nel testo principale (p.es. Conferma iscrizione).

  • Campi del destinatario ti permette invece di aggiungere nel template dei subtag per il nome, cognome o indirizzo email del destinatario, o un altro tag personalizzato a tua scelta in base ai campi su misura, salvati nella tua applicazione. L’email del destinatario si mette solitamente nel footer del template (p.es. Questo messaggio è stato inviato all’indirizzo email {subtag:email}), gli altri collegamenti, come quando ci si rivolge a qualcuno nell”Oggetto del messaggio o nel messaggio stesso (p.es. Gentile {subtag:name}).

 

COLLEGAMENTO A SCELTA

I collegamenti possono essere modificati anche cliccando sul bottone per il collegamento nel semplice editor.

Si apre l’editor per i collegamenti.

Nel campo Collegamento inserisci un collegamento a tua scelta. L’editor rileva automaticamente di che tipo di collegamento si tratta – sito web, email, file, Skype, telefono, sms, altro.

Uso del protocollo Altro:

  • Esempio 1: Unsubscribe
    Seleziona nel testo una parola che porterà alla cancellazione e clicca sul simbolo del collegamento. Nel campo per l’indirizzo URL inserisci {unsubscribe}{/unsubscribe}. L’editor rileva automaticamente che si tratta di un protocollo <altro>. Inserendo i collegamenti in questo modo determini da solo il colore della sottolineatura del collegamento. Puoi determinare il colore nell’editor Tipografie.
  • Esempio 2: Numero di telefono
    Puoi inserire il collegamento anche in un numero di telefono e consentire così all’utente di effettuare la chiamata cliccando direttamente sul numero. Nel campo per l’indirizzo URL inserisci p.es.: tel:051222333.
  • Esempio 3: Indirizzo elettronico
    Inserirci l’indirizzo elettronico al quale desideri ricevere i messaggi email.
    Puoi specificare anche l’Oggetto (“subject”) del messaggio.

 

 

Immagine

Trascinando l’elemento Immagine nel template e cliccando su di esso, si apre il browser delle immagini. L’immagine, che vuoi aggiungere nel template, deve essere prima caricata e poi inserita.

Le immagini possono essere caricate dal computer o tramite un collegamento URL e salvate nella galleria.

Tutti i file caricati possono essere gestiti anche nel File manager.  Puoi accedere al manager dal menu principale dell’applicazione SqualoMail (in alto) cliccando su Impostazioni e nel menu a sinistra File manager.

Per inserire l’immagine nel template clicca sull’anteprima dell’immagine nell’editor.

Una volta inserita l’immagine puoi impostare le sue caratteristiche:

  • A destra dell’anteprima sono a disposizione il bottone per sostituire l’immagine (le frecce in cerchio) e il bottone per modificare l’immagine (la bacchetta magica).
    • Cliccando su Sostituisci immagine, sostituisci l’immagine attuale.
    • Cliccando su Modifica immagine puoi modificare l’immagine. Per saperne di più sull’editor dell’immagine leggi il seguente punto.
  • Effetto di transizione – l’immagine cambia quando il destinatario ci passa sopra con il mouse. Si può quindi caricare un’immagine aggiuntiva che apparirà al destinatario al passaggio del mouse sopra la prima immagine.
  • Si consiglia di aggiungere un collegamento nell’immagine. Può essere un collegamento URL o un’email.
  • Come Testo alternativo puoi aggiungere una descrizione di cosa rappresenta l’immagine. Questa descrizione o testo ALT viene visualizzato quando l’immagine nel client di posta non è a disposizione.
  • È possibile impostare all’immagine l’allineamento all’interno della struttura e l’allineamento sui dispositivi mobili.
  • Se l’immagine è delle dimensioni dell’intera struttura, allora l’allineamento all’interno della struttura non avrà alcun effetto sulla sua posizione.
  • Puoi ridurre o ingrandire l’immagine (dipende dalle dimensioni della struttura nella quale si trova), o farla tornare alle dimensioni originali.
  • Immagine adattabile – questo significa che nonostante le dimensioni ridotte, l’immagine si estenderà su tutta la larghezza dello schermo mobile. Se questa opzione viene disattivata, l’immagine rimarrà anche sullo schermo mobile delle stesse dimensioni che sul desktop.
    • L’immagine adattabile si usa nei casi in cui la larghezza dell’immagine è superiore alla larghezza della struttura/box per adattarla alla visualizzazione sui dispositivi mobili.
  • All’immagine si può impostare anche il margine interno. Se imposti all’immagine il margine interno, sarà visibile il colore dello sfondo del box o il colore dello sfondo della struttura.

Esempio:

Il margine interno con il colore azzurro dello sfondo del box e il colore blu dello sfondo della struttura. Il margine interno dell’immagine è impostato su 10px.

 

Editor di immagini

Non hai più bisogno di modificare le immagini con vari programmi prima di caricarle nell’editor.

Ora puoi modificarle direttamente nell’editor e adattarle alle tue necessità.

Cliccando sul bottone Modifica immagine , accanto all’immagine prescelta, si apre un semplice editor di immagini, dove sono a disposizione innumerevoli opzioni:

  • Filtro
  • Ridimensiona
  • Ritaglia
  • Transforma
  • Disegna
  • Testo
  • Forme
  • Adesivi
  • Cornice
  • Angoli
  • Sfondo
  • Unisci

Una volta che hai terminato con le modifiche, clicca sul bottone Salva.

L’immagine verrà poi salvata a parte nella galleria, quella originale invece rimarrà così com’è.

 

 

Bottone

Cliccando sul Bottone si apre l’editor del bottone.

 

È possibile impostare:

  • Collegamento
  • Testo nel bottone
  • Stile e dimensione del testo, grassetto, corsivo
  • Colore del bottone
  • Colore del testo
  • Colore sfondo dell’elemento
  • Rotondità bordo:
    • 0 px

    • 30 px
       
  • Allineamento e il bottone per l’allineamento su dispositivi mobili
  • Larghezza completa del bottone
  • Bordo (tutti i bordi, o solo quello a sinistra, destra, superiore o inferiore)
  • Margini – interni ed esterni
  • È inoltre possibile impostare l’elemento in modo da non farlo apparire su desktop o dispositivi mobili


 

Separatore

L’elemento Separatore consente di inserire nel template una riga orizzontale o utilizzarla come distanza (spazio vuoto – separatore dinamico).

Nell’editor è possibile impostare:

1. Il separatore come Separatore dinamico (spazio)

  • colore sfondo del separatore
  • nascondere da desktop o dispositivi mobili
  • per impostare l’altezza del separatore, clicca sull’elemento, tieni premuto il mouse e trascina il bordo inferiore fino alla distanza desiderata in alto o in basso

2. Il separatore come riga, al quale impostare:

  • colore sfondo
  • spessore, stile (pieno, tratteggiato, punteggiato) e il colore della riga
  • larghezza della riga in pixel
  • allineamento e il bottone per l’allineamento su dispositivi mobili
  • Responsive spacer – adattabilità sui dispositivi mobili
  • margine dal bordo interno dell’elemento
  • nascondi da desktop o dispositivi mobili