Du hast Dich vielleicht schon gefragt, wie Du den Vorschau-Text Deiner E-Mails anpassen kannst:

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/6cadb0bd-138d-42eb-8920-20d0d17ef288/Untitled.png

Ein guter Vorschau-Text sollte den Betreff der E-Mail ergänzen. Er kann dazu beitragen, die Öffungsraten Deiner E-Mails zu erhöhen. Nur: wie funktioniert das eigentlich?

Der erste Text ist die Vorschau

Die meisten E-Mail-Clients zeigen den Text als Vorschau an, mit dem die E-Mail beginnt.

Das ist allerdings nicht immer der gleiche Text, den Du auch in Deiner sichtbaren E-Mail haben möchtest.

Daher gibt es einen Trick, wie Du den Vorschau-Text unabhängig von den sichtbaren Inhalten der E-Mail definieren kannst.

Er funktioniert so, dass wir den Vorschau-Text im HTML-Quelltext der E-Mail mit dem Attribut "hidden" (versteckt) versehen.

Das klingt komplizierter, als es ist. Ich zeige Dir im folgenden, wie es geht.

E-Mail-Vorschau als versteckten Text hinzufügen

Wähle zuerst das erste sichtbare Element Deiner Email aus.

<aside> 💡 Wenn Du den Vorschautext als eigenes Element definierst und dann im HTML auf "Versteckt" setzt, wird es im Editor nicht mehr angezeigt. Daher fügen wir es dem ersten sichtbaren Element hinzu.

</aside>

Oft ist dies der Link zur E-Mail-Vorschau. Es kann auch jedes andere Element sein, das ganz am Anfang steht:

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b7cb7e36-355e-4849-8050-dd584d8072da/Untitled.png

Klicke dann auf der rechte Seite bei "Aussparung anpassen" auf das Icon für den Code View:

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/8ec7ff69-b6ed-4ed6-9ac6-e1e4b2b499b8/Untitled.png

Das sollte dann ungefähr so aussehen:

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/35166a22-6098-4153-9184-7a743152d859/Untitled.png

Jetzt füge einfach diesen Code vor den vorhandenen Code ein:

<!-- Some preview text. -->
<div style="display: none; max-height: 0; overflow: hidden;">
Das ist Dein Vorschau-Text.
</div>
<!-- Get rid of unwanted preview text. -->
<div style="display: none; max-height: 0px; overflow: hidden;">&nbsp;‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌&nbsp;</div>