Fortgeschrittene Inhalte

  • Aktualisiert

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 Objekt 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 ein textbasiertes Navigationsmenü für Ihre Designs 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 Objekt 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 sidepanel_draghandle.png (Griff) und ziehen Sie das Element an eine andere Position. 

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 Ankerlinks 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 Objekt hinzufügen).
  2. Wählen Sie das HTML-Element aus.
    → Der HTML-Editor wird im Seitenbereich angezeigt.
  3. Geben Sie ihr eigenes HTML ein.

Dynamische Bilder

Über dynamische Bilder

Dynamische Bilder sind ein beliebter Anwendungsfall für benutzerdefiniertes HTML. Ein dynamisches Bild wird für jeden Betrachter einer Landing Page anders angezeigt. Ein solches Bild kann zum Beispiel eine Anrede enthalten, die den Namen des Betrachters verwendet. Dies kann durch Hinzufügen eines JavaScript-Programms in ein benutzerdefiniertes HTML-Element erreicht werden. Dieses JavaScript-Programm muss die On-Page-Funktionalität für das folgende Verfahren bereitstellen:

Sie senden jedem Betrachter einen benutzerdefinierten Link mit URL-Parametern, die benutzerspezifische Informationen enthalten (z. B. einen Namen). Das JavaScript-Programm verarbeitet dann die URL-Parameter und ändert den HTML-Code eines Bildelements so, dass die Bildquelle zu einer Anfrage an einen externen Dienst wird. Der externe Dienst liefert ein angepasstes Bild, das auf den Informationen in der Anfrage basiert.

Der Umschalter Dynamisches Bild

Die Anzeige von dynamischen Bildern im Design-Editor kann problematisch sein, weil der Editor nicht die nötigen URL-Parameter kennt, um Bilder für die HTML <img>-Elemente anzufordern. Zur Vermeidung dieses Problems dient der Umschalter Dynamisches Bild in den Bildeigenschaften im Seitenbereich. Wenn Dynamisches Bild aktiv ist, können sie zwei Quellen für ein Bildelement angeben:

  • Das Feld URL wird für die Anzeige im Editor verwendet und sollte einen Link zu einem neutralen Vorschaubild enthalten.
  • Das Feld Dynamische URL wird verwendet um ihr Bild für externe Betrachter des Designs anzuzeigen und sollte einen Link zum externen Bild-Service mit Variablen enthalten.

Beispiel

Nehmen wir an, Sie haben einen Kunden, den Sie mit seinem Vornamen John in einem Bild auf einer Landingpage ansprechen möchten. Wir gehen davon aus, dass es unter my-image-generator.com einen Dienst gibt, der eine HTTP-Anfrage verarbeiten kann, um ein individuelles Bild für Ihre Landing Page bereitzustellen. Sie können jeden Dienst mit dieser Funktionalität verwenden.

Sie senden John einen Link, der seinen Namen als URL-Parameter enthält:

https://example.com/page?customer_name=John

Wenn John diesen Link in seinem Browser öffnet, wird die Landingpage mit einem dynamischen Bild geladen, das den Platzhalter {NAME} im src-Attribut hat:

<img src="https://my-image-generator.com/image?viewer_name={NAME}>

Das JavaScript aus dem benutzerdefinierten HTML-Element extrahiert den Wert "John" aus dem Link, mit dem John die Seite aufgerufen hat, und benutzt diesen Wert, um das Bild-Element zu verändern, sodass es eine Anfrage mit dem Wert "John" an den externen Bilddienst stellt:

<img src="https://my-image-generator.com/image?viewer_name=John">

Dieses letzte Code-Beispiel ist im Quellcode der Landingpage nicht zu sehen, aber es zeigt, welche Anfrage an den externen Dienst gestellt wird. Das Bild, das der externe Dienst bereitstellt, wird dann benutzt um die Landingpage so zu rendern, wie John sie sieht.