Nieuwsbriefeditor: CSS inline in HTML-nieuwsbrieven

Je hebt veel moeite gestoken in het ontwerp van je nieuwsbrief en je wilt dat hij precies zo in de inbox van je ontvanger belandt. Als je nieuwsbrieven verstuurt, is een aantrekkelijk ontwerp immers belangrijk en essentieel.  

Sommige e-mailclients zoals Gmail tonen nu alleen inline CSS-stijlen. Wat betekent CSS of Inline CSS, hoe kom je in de broncode van de nieuwsbrief of een element en hoe kun je gemakkelijk je stijlen omzetten in Inline CSS in onze nieuwsbrief editor?

Wat is CSS/Inline CSS?

CSS is een afkorting voor "Cascading Style Sheets" en is een computertaal die kan worden gebruikt om het ontwerp van een elektronisch document (bijv. website, nieuwsbrief) te specificeren en te definiëren. Volg onze eenvoudige instructies om elementen als lay-out, kleur en typografie aan te passen. Ze worden weergegeven in de broncode.

Een manier om CSS op te maken in een webdocument is door alle stijlspecificaties te combineren in één centraal gebied. Daar is inline CSS voor. Sommige e-mailclients, zoals Gmail, AOL Mail en Yahoo, geven nu alleen inline CSS weer in nieuwsbrieven.

De broncode van een e-mail aanpassen

Om naar de broncode van je e-mail te gaan in onze nieuwsbriefeditor, klik je op [Editor] en [Broncode] in de rechterbovenhoek.

Definieer en bewaar de stijl voor je nieuwsbrief.

De broncode van een element bewerken

Je kunt naar de broncode van een element navigeren in onze nieuwsbriefeditor en deze aanpassen. Als je de muis naar je element beweegt, verschijnt er een oranje kader. Klik op </> om naar de broncode van een element te gaan:

Definieer en bewaar je stijl.

Inline CSS in de nieuwsbriefeditor

Om de stijlen automatisch te converteren naar inline CSS stijlen, open je je e-mail in onze nieuwsbrief editor. Klik op de drie streepjes aan de rechterkant:

Je kunt nu de conversie van alle stijlen naar [Inline CSS] activeren:

Voorbeeld CSS-gebied

Zo zou een stijlgebied in de broncode van je nieuwsbrief eruit kunnen zien:

<stijl>

2 /* @title Test */

3.classtest

4 {

5 lettergrootte: 13px;

6 lettertype: Arial, schreefloos;

7 regelhoogte: 21px;

8 kleur: #262626;

9 marge: 0pt;

10 opvulling: 0pt;

11 tekstdecoratie: onderstrepen;

12 rand: 0px solid #000000;

13 achtergrondkleur: #370707;

14 }

15 </stijl>

16

Extra CSS-gebieden instellen en opmaken:

1/*@titel Voettekst

2 @groep Voettekst */

3.footer {

4 achtergrondkleur: #A7C5A1;

5 lettergrootte: 10px;

6 kleur: #ACE950;

7 breedte: 600px;    

8 marge: 0pt;

9 opvulling: 15px;

10 lettertype: verdana;    

11 }

Help & Ondersteuning

Als je vragen hebt of meer hulp nodig hebt, kun je altijd contact opnemen met ons serviceteam.