--- title: Fortgeschrittene Inhalte slug: campaign/docs/fortgeschrittene-inhalte createdAt: 2026-08-06T15:53:45.993Z --- ## 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](docId:3vJ7k3AuL3jpWqnm09bGQ)*: 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](docId:3vJ7k3AuL3jpWqnm09bGQ)*: 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 :inlineImage[]{src="https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/ErH4tkWKhHHvsPANE0wZp-20260720-145226.png" alt="Bild" caption width="20" height="20"} (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](docId\:ZWe1T3UPz3JW6_4mc76qV), 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](docId:3vJ7k3AuL3jpWqnm09bGQ)). 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](docId:3vJ7k3AuL3jpWqnm09bGQ)*: 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](docId\:AXshAupGzEcyijieVNG8h)). 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 :inlineImage[]{src="https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/mC_-p1SLc8ED9HWnyoem4-20260720-145226.png" alt="Bild" caption width="20" height="20"} (*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 :inlineImage[]{src="https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/G1fEE47v7W49HT5-Itlht-20260720-145226.png" alt="Bild" caption width="20" height="20"} (*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 \-HTML ### Zweck Sie können benutzerdefinierten Code zum HTML-Abschnitt \ 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. :::hint{type="danger"} **Warning** 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 \-HTML*. 3. Optional: Wenn Sie ein größeres Eingabefeld nutzen möchten, klicken Sie auf *Erweitern*. 4. Geben Sie im Abschnitt *Eigenes \-HTML* ihren Code ein. 5. Speichern Sie den Nachrichtenentwurf. → Nachrichten, die auf Basis dieses Nachrichtenentwurfs erstellt werden, enthalten ihren Code im HTML-\-Bereich. ### Anwendungsbeispiele Ein häufiger Anwendungsfall für benutzerdefinierten \-Code ist die Bereitstellung maschinenlesbarer Informationen zu einer E-Mail als *strukturierte Daten*. Auf [schema.org](https://schema.org/) erfahren Sie, wie Sie solche Informationen kodieren können. Google Mail unterstützt verschiedene Arten von [E-Mail-Promotions](https://developers.google.com/workspace/gmail/promotab) 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](https://www.united-internet-media.de/de/produkteundloesungen/dialogsolutions/trusteddialog/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.