Fortgeschrittene Inhalte

Videos in Landingpage-Designs

Optionen für die Video-Anzeige

Es gibt mehrere Möglichkeiten, Videos in Landingpages einzufügen:

• Vorschaubild: Ein Video von Youtube oder Vimeo, das als Bild angezeigt wird. Ein Klick auf das Bild führt die Betrachter zur Videoplattform.
• Eingebettet: Ein Video von Youtube oder Vimeo, das direkt auf Ihrer Landingpage abgespielt wird.
• Gehosted: MP4-Dateien von einer dauerhaften URL.

Extern gehostete Thumbnails müssen über HTTPS bereitgestellt werden, damit sie sichtbar bleiben. Die Bearbeitung einer externen Miniaturansicht im Editor speichert sie lokal.

Eingebettetes Video hinzufügen

Voraussetzungen: Sie sehen den Design-Editor.

1. Fügen Sie ein Video-Inhaltselement hinzu (siehe Design-Editor-Grundlagen: Ein Element hinzufügen).
2. Wählen Sie das Video-Element aus.
3. Wählen Sie im Seitenbereich, im Feld Video-URL den Wert Eingebettet aus.
4. Geben Sie im Feld URL die URL ihres Videos ein.
5. Drücken Sie die Tabulator-Taste oder klicken Sie außerhalb des Feldes URL.
   → Das Video wird zum Inhaltselement hinzugefügt.

Menüs

Überblick

Mit dem Menü-Inhaltselement können Sie eine textbasierte Link-Sammlung erstellen. Es funktioniert mit verschiedenen Layout-Optionen und Geräten und erspart Ihnen die Mühe manueller Anpassungen beispielsweise bei Textgrößen und Abständen.

Ein Menü erstellen

Voraussetzungen: Sie sehen den Design-Editor.

1. Fügen Sie ein Menü-Inhaltselement hinzu (siehe Design-Editor-Grundlagen: Ein Element hinzufügen).
2. Wählen Sie das Menü-Element aus.
3. Wählen Sie im Seitenbereich im Feld Layout zwischen vertikal und horizontal.
   (Bei horizontalen Layouts können Sie im Feld Trennzeichen ein Schriftzeichen als Trenner zwischen Menü-Einträgen auswählen.)
4. Klicken Sie auf + Neuer Eintrag.
   → Ein neuer Abschnitt zum Definieren eines Menü-Eintrags erscheint im Seitenbereich.
5. Geben Sie einen Anzeigetext ein.
6. Wählen Sie einen Linktyp.
7. Geben Sie ein Linkziel ein.
8. Optional: Geben Sie im Feld Titel einen Text ein, der angezeigt wird, wenn der Mauszeiger auf dem Menüeintrag liegt.
9. Optional: Wiederholen Sie Schritte 3 to 8, um mehr Einträge zum gleichen Menü hinzuzufügen.

Weitere Menü-Einstellungen

Die Menüs unterstützen mehrere URL-Typen wie E-Mail, SMS und Click-to-Call. Sie können auch festlegen, ob eine URL im gleichen Fenster oder in einer neuen Registerkarte geöffnet werden soll.

Wenn Sie mehrere Elemente in dasselbe Menüelement eingefügt haben, können Sie sie im Seitenbereich neu anordnen. Klicken Sie in den Abschnitt eines Elements auf (Griff) und ziehen Sie das Element an eine andere Position.

Anker-Links für E-Mails

Überblick

Mit dem Anker-Element können Sie Link-Ziele innerhalb Ihrer E-Mail-Nachrichtenentwürfe definieren. Anschließend können Sie Links erstellen, die auf einen bestimmten Anker verweisen. Ein Anwendungsfall hierfür ist beispielsweise die Erstellung eines verlinkten Inhaltsverzeichnisses für einen langen Newsletter.

Standardmäßig ist das Anker-Element im Seitenbereich nicht verfügbar, kann jedoch auf Anfrage kostenlos in ihrem Mandanten aktiviert werden. Wenden Sie sich an die Kundenbetreuung, wenn Sie es verwenden möchten.

Einen Anker erstellen

Voraussetzungen: Sie sehen einen Nachrichtenentwurf im Design Editor. Das Anker-Element ist in ihrem Mandanten verfügbar.

1. Fügen Sie ein Anker-Element hinzu. (siehe Design-Editor-Grundlagen: Ein Element hinzufügen).
2. Wählen Sie das Anker-Element aus.
3. Klicken Sie auf Anker bearbeiten…
   Das pop-up-Menü Anker bearbeiten wird angezeigt.
4. Geben Sie einen Ankernamen ein. Der Name muss mit einem Raute-Zeichen (#) beginnen, welches automatisch im Feld eingefügt wird und nicht entfernt werden kann.
   Hinweis: Die Groß-/Kleinschreibung ist bei Ankernamen relevant. Folgende Zeichen können verwendet werden:  „A-Z, a-z, 0-9, -, _, :, .“
5. Klicken Sie auf Anwenden.
   → Der neue Anker wird im Editor angezeigt.

Einen Text-Link zu einem Anker setzen

Kontext: Sie können einen Teil eines Textes als Link-Ursprung verwenden.
Voraussetzungen: Sie sehen einen Nachrichtenentwurf im Design Editor. Der Nachrichtenentwurf enthält einen Anker.

1. Wählen Sie den Text aus, den Sie als Link-Ursprung verwenden möchten.
2. Klicken Sie im pop-up-Menü auf Link einfügen/bearbeiten.
   → Das Menü Link einfügen wird angezeigt.
3. Geben Sie im Feld URL ein Raute-Zeichen (#) ein und direkt dahinter den Ankernamen (ohne Leerzeichen).
4. Klicken Sie auf OK.
   → Der ausgewählte Text ist mit dem Anker verlinkt.

Einen Element-Link zu einem Anker setzen

Kontext: Als Link-Ursprung sind alle Inhaltselemente geeignet, für die im Seitenbereich ein Link-Feld angezeigt wird, wenn sie ausgewählt sind (beispielsweise Bilder oder Menüs).
Voraussetzungen: Sie sehen einen Nachrichtenentwurf im Design Editor. Der Nachrichtenentwurf enthält einen Anker.

1. Wählen Sie das Element aus, das Sie als Link-Ursprung verwenden möchten.
2. Suchen Sie im Seitenbereich das URL-Feld für Links von dem ausgewählten Element (z. B. im Abschnitt Aktion für Bilder).
   Hinweis: Bei Bildern gibt es auch ein URL-Feld zum Definieren der Quelle eines Bildes. Verwechseln Sie dieses nicht mit dem Link-URL-Feld.
3. Geben Sie im Feld URL ein Raute-Zeichen (#) ein und direkt dahinter den Ankernamen (ohne Leerzeichen).
   → Das Inhaltselement ist mit dem Anker verlinkt.

Anker-Links in Menüs

In den Inhaltselementen vom Typ Menü gibt es für jeden Menüeintrag ein separates Feld für die Link-URL. Sie müssen Menü-Einträge definieren, bevor Sie Links hinzufügen können. Es ist nicht möglich, das gesamte Menü als Link-Ursprung zu verwenden. Belassen Sie den Wert im Feld Ziel auf aktuelle Seite.

Einen Anker-Link testen

Prerequisites: Sie sehen einen Nachrichtenentwurf im Design Editor. Der Nachrichtenentwurf enthält einen Anker-Link.

1. Klicken Sie auf Vorschau.
   → Die Vorschau des Nachrichtenentwurfs wird angezeigt.
2. Klicken Sie im Nachrichtenentwurf auf ihren Anker-Link.
   → Die Ansicht scrollt zur Position des Ankers.
   Hinweis: In der Vorschau und in E-Mails an Empfänger ist das Anker-Element unsichtbar.

Benutzerdefiniertes HTML

Überblick

Mit dem HTML-Inhaltselment können Sie Ihren eigenen HTML-Code einfügen. Im Design-Editor ist dies so einfach wie das Hinzufügen eines Absatzelements, aber die Funktion ist in für diejenigen gedacht, die sich mit HTML auskennen. Die Verwendung von benutzerdefiniertem HTML kann sich auf die Anpassung Ihres Designs an verschiedene Bildschirmgrößen auswirken. Stellen Sie daher sicher, dass das von Ihnen verwendete HTML für Ihren Anwendungsfall geeignet ist. Beachten Sie, dass Probleme mit benutzerdefiniertem HTML in der Regel nicht vom Support abgedeckt werden.

Anwendungsfälle

Hier einige Fälle, in denen benutzerdefiniertes HTML nützlich sein kann:

• Individuelle Inhalte: Sie sind nicht an vordefinierte Einstellungen gebunden und haben somit mehr Kontrolle über das Styling.
• Besondere Elemente: Fügen Sie Inhalte wie HTML5-Videos oder Anker-Links hinzu, die nicht zu den Standardelementen des Editors gehören.
• Erweiterte CSS-Effekte: CSS-Animationen können Ihre Webseiten interessanter machen.
• Live-Inhalte: Betten Sie Echtzeit-Inhalte wie Produktempfehlungen oder Countdowns ein, indem Sie Code von externen Anbietern einfügen.

Benutzerdefiniertes HTML einfügen

Voraussetzungen: Sie sehen ein Design im Design-Editor.

1. Fügen Sie ein HTML-Inhaltselement hinzu. (siehe Design-Editor-Grundlagen: Ein Element hinzufügen).
2. Wählen Sie das HTML-Element aus.
   → Der HTML-Editor wird im Seitenbereich angezeigt.
3. Geben Sie ihr eigenes HTML ein.

Attribute für Barrierefreiheit

Überblick

Zu bestimmten Inhaltselemente können Sie ARIA-Attribute hinzufügen, um die Barrierefreiheit zu verbessern (siehe auch Barrierefreies HTML). Folgende Attribute sind verfügbar:

• aria-label: Enthält einen Text, der den Inhalt beschreibt und dem Benutzer von einem Screenreader vorgelesen wird.
• aria-hidden: Enthält den Wert wahr oder falsch. Screenreader ignorieren Elemente, bei denen dieses Attribut auf wahr gesetzt ist.

Diese Attribute sind für folgende Inhaltselemente verfügbar:

• Text-Links
• Buttons
• Bilder.

Attribut zu einem Button oder Bild hinzufügen

Voraussetzungen: Sie sehen ein Design im Editor. Das Design enthält einen Button oder ein Bild.

1. Wählen Sie einen Button oder ein Bild aus.
2. Klicken Sie im Seitenbereich, im Abschnitt Attribute auf Neues Attribut.
   → Eine Drop-down-Liste zeigt die verfügbaren Attribute.
3. Wählen Sie das gewünschte Attribut.
   Hinweis: Jedes Attribut kann nur einmal pro Element hinzugefügt werden.
   → Das Attribut wird im Seitenbereich angezeigt.
4. Wählen Sie einen Wert für das Attribut aus oder geben Sie einen Wert ein.

Attribut von einem Button oder Bild löschen

Voraussetzungen: Sie sehen ein Design im Editor. Das Design enthält einen Button oder ein Bild mit einem Attribut.

1. Wählen Sie einen Button oder ein Bild mit einem Attribut aus.
2. Suchen Sie im Seitenbereich, im Abschnitt Attribute, das Attribut, dass Sie löschen möchten.
3. Klicken Sie unter dem Attribut auf Löschen.
   → Das Attribut wird gelöscht.

Attribut zu einem Link hinzufügen

Voraussetzungen: Sie sehen ein Design im Editor. Das Design enthält einen Link in einem Text.

1. Klicken Sie auf den Link.
   → Ein pop-up-Menü wird angezeigt.
2. Klicken Sie im pop-up-Menü auf (Link einfügen/bearbeiten).
   → Das Menü Link einfügen wird angezeigt.
3. Klicken Sie auf Custom Attributes.
4. Füllen Sie die gewünschten Felder aus.
5. Klicken Sie auf Ok.

Attribut aus einem Link löschen

Voraussetzungen: Sie sehen ein Design im Editor. Das Design enthält einen Link in einem Text.

1. Klicken Sie auf den Link.
   → Ein pop-up-Menü wird angezeigt.
2. Klicken Sie im pop-up-Menü auf (Link einfügen/bearbeiten).
   → Das Menü Link einfügen wird angezeigt.
3. Klicken Sie auf Custom Attributes.
4. Leeren Sie das Feld aria-label und wählen Sie im Feld aria-hidden, den Wert false.
5. Klicken Sie auf Ok.

Anhänge

Überblick

Sie können Dateien zu einem Nachrichtenentwurf hinzufügen, die dann mit jeder Nachricht als Anhang versendet werden.

Einen Anhang hochladen

Voraussetzungen: Sie sehen einen Nachrichtenentwurf im Design Editor für E-Mails. Der Anhang, den Sie hochladen möchten, ist auf Ihrem lokalen System verfügbar.

1. Klicken Sie über dem Nachrichtenentwurf auf Weitere Optionen.
2. Wählen Sie Anhänge aus.
   → Das Menü Anhänge erscheint.
3. Klicken Sie auf Hochladen.
   → Das Menü Datei Hinzufügen erscheint.
4. Klicken Sie auf Choose File und wählen sie eine Datei von ihrem lokalen System.
   → Der Name der gewählten Datei wird im Menü Datei Hinzufügen angezeigt..
5. Optional: Bearbeiten Sie im Feld Dateiname den Namen, mit dem die Datei gespeichert werden soll.
6. Optional: Geben Sie im Feld Beschreibung eine Beschreibung ein.
7. Klicken sie auf Datei hochladen.
   → Die Datei wird zur Liste im Menü Anhänge hinzugefügt.
   Hinweis: Die Datei wird noch nicht zum Nachrichtenentwurf hinzugefügt!

Anhänge eines Nachrichtenentwurfs bearbeiten

Voraussetzungen: Sie sehen einen Nachrichtenentwurf im Design Editor für E-Mails. Der Anhang, den Sie hinzufügen möchten, ist in der Liste der Anhänge verfügbar.

1. Klicken Sie über dem Nachrichtenentwurf auf Weitere Optionen.
2. Wählen Sie Anhänge aus.
   → Das Menü Anhänge erscheint.
3. Wählen Sie die gewünschten Anhänge in der Liste aus und wählen Sie gegebenenfalls unerwünschte Anhänge ab.
4. Klicken Sie auf X Datei(en) anhängen.
   → Die gewählten Dateien werden an Nachrichten an Empfänger angehängt.

Einen Anhang löschen

Voraussetzungen: Sie sehen einen Nachrichtenentwurf im Design Editor für E-Mails.

1. Klicken Sie über dem Nachrichtenentwurf auf Weitere Optionen.
2. Wählen Sie Anhänge aus.
   → Das Menü Anhänge erscheint.
3. Wählen Sie einen Anhang aus.
4. Klicken Sie auf Löschen.
5. Bestätigen Sie, dass Sie die Datei endgültig löschen möchten.
   → Die Datei wird aus der Liste der Anhänge gelöscht.

Eigenes <head>-HTML

Zweck

Sie können benutzerdefinierten Code zum HTML-Abschnitt <head> eines Nachrichtenentwurfs hinzufügen. Durch Hinzufügen von Skripten, CSS oder strukturierten Daten können Sie beeinflussen, wie Ihre E-Mails verarbeitet oder dargestellt werden. Dadurch können E-Mails im Posteingang des Empfängers auffälliger und attraktiver präsentiert oder zusätzliche Funktionen bereitgestellt werden. Diese Funktionen hängen jedoch vom E-Mail-Anbieter oder der Software des jeweiligen Empfängers ab, und Ihre spezifischen Anpassungen könnten in einigen oder den meisten Postfächern ignoriert werden.

Diese Funktion ist für Experten gedacht. Achten Sie darauf, dass alle hinzugefügten Inhalte wohlgeformt, responsiv und sicher sind!

Code hinzufügen

Voraussetzungen: Sie sehen einen Nachrichtenentwurf im Design Editor für E-Mails.

1. Öffnen Sie im Seitenbereich den Tab Einstellungen.
2. Finden Sie den Abschnitt Eigenes <head>-HTML.
3. Optional: Wenn Sie ein größeres Eingabefeld nutzen möchten, klicken Sie auf Erweitern.
4. Geben Sie im Abschnitt Eigenes <head>-HTML ihren Code ein.
5. Speichern Sie den Nachrichtenentwurf.
   → Nachrichten, die auf Basis dieses Nachrichtenentwurfs erstellt werden, enthalten ihren Code im HTML-<head>-Bereich.

Anwendungsbeispiele

Ein häufiger Anwendungsfall für benutzerdefinierten <head>-Code ist die Bereitstellung maschinenlesbarer Informationen zu einer E-Mail als strukturierte Daten. Auf schema.org erfahren Sie, wie Sie solche Informationen kodieren können.

Google Mail unterstützt verschiedene Arten von E-Mail-Promotions auf Basis strukturierter Daten. Damit können Sie Bilder oder Gutscheincodes direkt im Google-Mail-Posteingang des Empfängers anzeigen.

United Internet bietet für seine Plattformen web.de und gmx die Funktion trustedDialog Preview an, mit der bis zu drei Bilder und ein Gutscheincode direkt im E-Mail-Posteingang angezeigt werden können. Dadurch heben sich Ihre E-Mails optisch von anderen ab und unterstreichen gleichzeitig ihre Echtheit und Vertrauenswürdigkeit. Die Nutzung von trustedDialog Preview erfordert eine Konfiguration Ihrer Domain bei United Internet und ein Abonnement. Weitere Informationen zu trustedDialog erhalten Sie bei United Internet.