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 di sfondo
  • Allineamento (è possibile gestire separatamente l’allineamento sul desktop e sul mobile facendo click sul pulsante con l’icona del mobile accanto all’opzione allineamento)
  • Interlinea
  • Spaziatura
  • È inoltre possibile impostare l’elemento in modo da non farlo apparire su desktop o sui dispositivi mobili

 

Cliccando sull’elemento Testo appare simultaneamente in cima all’area di lavoro, anche l’editor semplice 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 font
  • Colore del font e colore dello sfondo
  • Grassetto (B), Corsivo (I), Sottolineato (U), Barrato (S), Apice (subscript)  , Pedice(superscript)
  • Dimensione font

 

Il semplice editor permette anche di:

  • Impostare l’allineamento
  • Creare elenchi puntati o numerati
  • L’interruzione di riga
  • Puoi inserire o eliminare un link
  • Aggiungere un tag
  • Inserire emoji
  • Aggiungere caratteri speciali/simboli

 

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

  • LINK AUTOMATICI E SUBTAG
  • LINK A SCELTA

 

LINK AUTOMATICI E SUBTAG

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

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

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

  • Gestione iscrizione ti permette di aggiungere un link automatico per il Link per la cancellazione, Conferma iscrizione, Aggiornamento impostazioni, Opzioni di consenso GDPR e Conferma consenso GDPR. Questi link vengono spesso inseriti nel footer del template (il Link 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 tag invece, come quello per il nome o il cognome del destinatario, che ci permettono di rivolgerci direttamente al lettore, vanno aggiunti nell’oggetto del messaggio o nel messaggio stesso (p.es. Gentile {subtag:name}).

 

LINK A SCELTA

I link possono essere modificati anche cliccando sul bottone per il link nell’editor semplice del testo.

Si apre l’editor per i link.

Nel campo Link inserisci un link a tua scelta. L’editor rileva automaticamente di che tipo di link 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 link. Nel campo per l’indirizzo URL inserisci {unsubscribe}{/unsubscribe}. L’editor rileva automaticamente che si tratta di un protocollo <altro>. Inserendo i link in questo modo determini da solo il colore della sottolineatura del link. Puoi determinare il colore nell’editor del testo.
  • Esempio 2: Numero di telefono
    Puoi inserire il link 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 email al quale desideri ricevere i messaggi di risposta alle tue newsletter.
    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 file 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 che formano un cerchio 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 rollover – 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 link 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 non viene visualizzata nel client di posta del tuo lettore.
  • È possibile impostare per l’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 responsive– questo significa che nonostante le dimensioni ridotte, l’immagine si estenderà su tutta la larghezza dello schermo del cellulare. Se questa opzione viene disattivata, l’immagine rimarrà, anche sullo schermo del cellulare, delle stesse dimensioni che ha sul desktop.
    • L’immagine responsive si usa nei casi in cui la larghezza dell’immagine è superiore alla larghezza della struttura/box per adattarla alla visualizzazione sui dispositivi mobili.
  • Per l’immagine è possibile impostare anche il margine interno. Se imposti 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 per le 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 del bottone
  • Stile e dimensione del testo, grassetto, corsivo
  • Colore del bottone
  • Colore del testo
  • Colore sfondo
  • Raggio degli angoli:
    • 0 px

    • 30 px
       
  • Allineamento (è possibile gestire separatamente l’allineamento sul desktop e sul mobile facendo click sul pulsante con l’icona del mobile accanto all’opzione allineamento)
  • 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 sui dispositivi mobili

 

Divisore

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

Nell’editor è possibile impostare:

1. Il divisiore come Divisiore dinamico (spazio)

  • Colore di sfondo dell’elemento
  • Nascondere l’elemento sul desktop o sui dispositivi mobili
  • per impostare l’altezza del divisore, clicca sull’elemento, tieni premuto il mouse e trascina il bordo inferiore fino alla distanza desiderata in alto o in basso

2. Il divisore come linea, al quale impostare:

  • colore di sfondo dell’elemento
  • spessore, stile (pieno, tratteggiato, punteggiato) e il colore della linea
  • larghezza della linea in pixel
  • allineamento(è possibile gestire separatamente l’allineamento sul desktop e sul mobile facendo click sul pulsante con l’icona del mobile accanto all’opzione allineamento)
  • divisore responsive – adattabilità sui dispositivi mobili
  • margine dal bordo interno dell’elemento
  • nascondi da desktop o dispositivi mobili