Editor newsletter: CSS inline nelle newsletter HTML

Hai dedicato molto impegno alla progettazione della tua newsletter e desideri che atterri nella casella di posta del destinatario esattamente come l'hai creata. Dopo tutto, quando invii newsletter, un design accattivante è importante ed essenziale.

Alcuni client di posta elettronica come Gmail ora mostrano solo gli stili CSS inline. Cosa significano CSS o CSS inline, come si entra nel codice sorgente della newsletter o di un elemento e come si possono convertire facilmente i propri stili in CSS inline nel nostro editor di newsletter?

Cos'è CSS / CSS inline?

CSS è l'abbreviazione di "Cascading Style Sheets" ed è un linguaggio informatico che può essere utilizzato per specificare e definire il design di un documento elettronico (per es. sito, newsletter). Segui le nostre semplici istruzioni per personalizzare elementi come layout, colore e tipografia. Vengono visualizzati nel codice sorgente.

Un modo per formattare CSS in un documento è combinare tutte le specifiche di stile in un'area centrale. Ecco a cosa servono i CSS inline. Alcuni client di posta elettronica, come Gmail, AOL mail e Yahoo, ora visualizzano solo CSS inline nelle newsletter.

Regolazione del codice sorgente di un'e-mail

Per accedere al codice sorgente della tua e-mail nel nostro editor di newsletter, clicca su [Editor] e [Codice sorgente] nell'angolo in alto a destra.

Bildschirmfoto_2021-04-12_um_10.42.58.png

Definisci e salva lo stile per la tua newsletter.

Modifica del codice sorgente di un elemento

Puoi accedere al codice sorgente di un elemento nel nostro editor di newsletter e modificarlo. Quando sposti il ​​mouse sul tuo elemento, viene visualizzata una cornice arancione. Clicca su </> per accedere al codice sorgente di un elemento:

Bildschirmfoto_2021-03-23_um_10.59.53.png

Definisci e salva il tuo stile.

CSS inline nell'editor della newsletter

Per convertire automaticamente gli stili in stili CSS inline, apri la tua e-mail nel nostro editor newsletter. Clicca sui tre trattini a destra:

Bildschirmfoto_2021-04-27_um_14.47.28.png

Ora puoi attivare la conversione di tutti gli stili in [Inline CSS]:

Bildschirmfoto_2021-04-27_um_14.47.15.png

Esempio di area CSS

Ecco come potrebbe apparire un'area di stile nel codice sorgente della tua newsletter:

<style>

2    /* @title Test */

3    .classtest

4    {

5    font-size: 13px;

6    font-family: Arial, sans-serif;

7    line-height: 21px;

8    color: #262626;

9    margin: 0pt;

10    padding: 0pt;

11    text-decoration: underline;

12    border: 0px solid #000000;

13    background-color: #370707;

14    }

15  </style>

16

 

Imposta e modificare aree CSS aggiuntive:

1/*  @title Footer

2        @group Footer */

3        .footer {

4        background-color: #A7C5A1;

5     font-size: 10px;

6     color: #ACE950;

7     width: 600px;    

8     margin: 0pt;

9        padding: 15px;

10        font-family: verdana;    

11        }

 

Consiglio: Lo stile del CSS dovrebbe essere semplice, così da fare sì che l’e-mail sia comunque leggibile nel caso in cui il client del destinatario della newsletter non lo carichi correttamente.

Aiuto & Supporto

Se hai domande o hai bisogno di ulteriore assistenza, contatta in ogni momento il nostro servizio clienti.