Landing Pages - Neue Landing Page erstellen und bearbeiten

1. Erstelle eine Landing Page

Bevor du deine Landing Page im Editor bearbeiten kannst, musst du erstmal eine Landing Page erstellen. Du hast dazu zwei Möglichkeiten. Entweder du erstellst eine Landing Page mit Vorlage oder manuell. 

Wie das geht findest du in unseren Tutorials: 

• Landing Pages – Grundeinstellungen

• Landing Pages – Neue Landing Page mit Vorlage erstellen

Sobald du die Landing Page erstellt hast, kannst du sie bearbeiten, indem du sie unter “Landing Pages” auswählst und auf “Bearbeiten” klickst.

Landing Page Editor

Nun öffnet sich der Landing Page Editor in einem neuen Tab in deinem Browser. Hier kannst du deine Landing Page erstellen und bearbeiten. Im Beispiel verwenden wir eine Landingpage ohne Vorlage. Ich werde jedes Element und jede Option durchgehen, damit du volle Kontrolle über das Design deiner Landing Page hast. Mit einer Landing Page mit Vorlage hast du übrigens ebenfalls volle Kontrolle über das Design deiner Landing Page, da du alle Inhalte der Vorlage löschen und bearbeiten kannst. Dies spart in den meisten Fällen viel Zeit und ist für Einsteiger die bessere Option.

Erklärungen zu den Buttons und Optionen in der Kopfleiste

Ansichtsoptionen

Ganz links siehst du die Optionen, wie deine Landing Page auf verschiedenen Geräten aussieht. Das ist super praktisch, um zu prüfen, ob das Design auf allen Bildschirmgrößen gut funktioniert.

• Großer Bildschirm: Zeigt, wie die Seite auf einem Desktop-PC aussieht.

• Tablet: Simuliert die Ansicht auf einem Tablet.

• Smartphone: Zeigt die mobile Ansicht für Handys.

Wichtig zu wissen: Design-Einstellungen für Zeilen und Elemente sind nicht geräteübergreifend. Das heißt, wenn du zum Beispiel die Größe eines Bildes für die Tablet-Ansicht änderst, hat das keinen Einfluss auf die Desktop- oder Smartphone-Ansicht.

Einstellungen zu Rändern und der Inhalt deiner Seite bleiben aber auf allen Ansichten gleich. So kannst du das Design für jedes Gerät perfekt anpassen, ohne dass sich die Inhalte ändern oder das Design einer anderen Ansicht beeinflusst wird.

Bearbeitungsoptionen

In der Mitte sind die wichtigsten Funktionen für die Bearbeitung deiner Seite.

• Vorschau: Hier kannst du dir deine Seite ansehen, wie sie Besucher später sehen. Ein Klick darauf und du wechselst in den Vorschau-Modus, ohne die Seite zu speichern.

Du kannst die Vorschau verlassen, indem du rechts oben auf das durchgestichene Auge klickst. 

• Vollbild: Diese Option blendet deinen Browser aus, sodass du nur die Landing Page siehst.

Du kannst diese Ansicht abstellen, idem du wieder auf “Vollbild” klickst.

• Rückgängig machen: Der Pfeil nach links macht deinen letzten Bearbeitungsschritt rückgängig.

• Wiederholen: Der Pfeil nach rechts wiederholt einen Schritt, den du gerade rückgängig gemacht hast.

• Speichern: Ein Klick auf diese Schaltfläche sichert deine aktuellen Änderungen. Am besten regelmäßig zwischendurch speichern!

• Veröffentlichen: Wenn deine Seite fertig ist, drücke diesen Button, um sie live zu schalten. 

Bearbeitungsleiste der Elemente. Erklärung der Icons und Funktionen.

Wenn du auf eines der Elemente im Editor klickst, erscheint ein blauer Balken am Rand des Elementes, welcher dir verschiedene Optionen anbietet.

Zahnrad-Icon

Das Zahnrad-Icon steht für die Einstellungen. Hier kannst du globale Einstellungen für das ausgewählte Element vornehmen, wie z.B. die Hintergrundfarbe, Abstände (Padding/Margin), und Ausrichtung. Die Einstellungen öffnen sich durch einen Klick auf das Icon auf der linken Seite des Editors.

Stift-Icon

Das Stift-Icon dient zum Bearbeiten des Inhalts. Wenn du auf dieses Icon klickst, kannst du den Text oder andere Inhalte des Elements direkt ändern. Bei Textblöcken öffnet es einen Texteditor.

Drei-Linien-Icon

Wenn du darauf klickst, wählst du das übergeordnete Element aus. Das ist super praktisch, wenn du schnell die Abstände (Margins) oder ähnliches anpassen möchtest, die sich in einem übergeordneten Element verstecken.

Jede Webseite besteht im Hintergrund aus HTML Code. Dieser ist verschachtelt aufgebaut. Jede Seite besteht also aus folgender Struktur:

1. Seitenabschnitt

2. Zeile

3. Spalte

4. Inhalt (z.B. Text, Video, Bild)

Wenn du nun in einem Inhaltselement bist und du möchtest Abstände bearbeiten, kannst du mit dem Drei-Linien-Icon eine Ebene nach oben wechseln und die Spalte bearbeiten. Wenn du dann nochmal auf das Icon klickst, kannst du die Zeile bearbeiten usw.

Jedes Element bietet andere Eigenschaften, z.B. Breite, Abstand nach oben, etc.

Dieses Icon ist also sehr wichtig, wenn du sicherstellen möchtest, dass alle Abstände in deiner Webseite in der Desktop-Ansicht und mobil gut aussehen.

 Pfeil-Icon

Das Pfeil-Icon, ist für die Positionierung zuständig. Damit kannst du das Element mit der Maus frei verschieben. Es hilft, das Element an die gewünschte Stelle zu ziehen.

Zwei-Dokumente-Icon

Das Icon mit den zwei übereinander liegenden Dokumenten 📑 ist zum Duplizieren gedacht. Wenn du darauf klickst, wird eine exakte Kopie des ausgewählten Elements erstellt.

 Papierkorb-Icon

Das Papierkorb-Icon dient zum Löschen. Ein Klick darauf entfernt das ausgewählte Element. 

Elemente

Oben in der Ecke findest du die Buttons Einstellungen und Elemente. Einstellungen bezieht sich auf die Einstellungen für das ausgewählte Element, wie zum Beispiel die Hintergrundfarbe, Schriftart, usw. Elemente ist der Bereich, in dem du all die verschiedenen Bausteine findest, die du per Drag-and-Drop auf deine Landing Page ziehen kannst.

Zeilen und Spalten

• Layout: Bietet dir die Grundstruktur für deine Seite. Du musst immer zuerst das Layout auf deine Seite ziehen. Es ist eine Art leere Leinwand, auf der du alles von Grund auf neu aufbauen kannst.

• Zeile mit 1 Spalte: Dies erstellt eine Zeile, die den gesamten Bereich einnimmt. Perfekt für einen großen Titel oder ein breites Bild.

Dies würde so aussehen, wenn du die Zeile unter den Text im Layout ziehst.

• Zeile mit 2 Spalten: Damit kannst du Inhalte nebeneinander anordnen, zum Beispiel eine Überschrift und einen Text oder zwei Bilder.

Dies würde so aussehen, wenn du die Zeile unter die Zeile mit einer Spalte im Layout ziehst.

• Zeile mit 3-6 Spalten: Wie der Name schon sagt, teilt dies deine Zeile in drei bis sechs gleich große Spalten auf, was sich gut für Produkt-Features oder kurze Beschreibungen eignet.

• Spalten: Mit dieser Option kannst du weitere Spalten in die bereits bestehende Zeile ziehen. Im Beispiel habe ich eine Spalte in die Mitte der Zeile mit 2 Spalten gezogen und dadurch eine Zeile mit 3 Spalten erstellt. 

Zeilen/Spalten-Einstellungen im Landing Page Editor

Lass uns mal durch die Einstellungen für "Zeilen" in deinem Landing Page Editor gehen. Das ist super wichtig, um deine Seite genau so zu gestalten, wie du es dir vorstellst.

Basis-Einstellungen (Basis)

Hier sind die grundlegenden Optionen, die du am häufigsten benutzen wirst:

• Verstecke dieses Element auf:  Hier kannst du steuern, auf welchen Geräten eine Zeile sichtbar sein soll. Wenn du z.B. das Kästchen für "Mobile" anklickst, wird diese Zeile auf dem Handy nicht angezeigt. Das ist nützlich, um eine optimierte Ansicht für verschiedene Geräte zu schaffen.

• Verzögerte Einblendung / Ausblendung: Diese Checkboxen sorgen dafür, dass eine Zeile erst nach einer gewissen Verzögerung erscheint oder verschwindet. Das kann einen coolen, dynamischen Effekt erzeugen.

• Ausrichtung:  Hier legst du fest, wie der Inhalt in deiner Zeile ausgerichtet wird. Du hast die Wahl zwischen Links, Zentriert und Rechts.

• Unsichtbar auf öffentlicher Seite:  Wenn du diese Option aktivierst, wird die Zeile im Editor noch angezeigt, aber für Besucher deiner Live-Seite ist sie nicht sichtbar. Das ist perfekt, wenn du an etwas arbeitest, das noch nicht fertig ist.

• Spalten nebeneinander auf dem mobile:  Normalerweise werden Spalten auf Handys untereinander angeordnet, um Platz zu sparen. Wenn du diese Option aktivierst, bleiben sie nebeneinander, was aber schnell unübersichtlich werden kann.  

• Breite:  Mit diesem Regler stellst du ein, wie breit die Zeile sein soll. Du kannst einen relativen Wert (in Prozent) einstellen. 100% bedeutet, dass die Zeile die gesamte verfügbare Breite einnimmt.

• Äußerer Abstand oben: Das ist der Abstand (auch Margin genannt) zwischen der oberen Kante deiner Zeile und dem Element, das darüber liegt. Er dient dazu, den Abstand zwischen verschiedenen Elementen zu kontrollieren. Du kannst den Wert in px (Pixel) angeben.

• Hintergrundbild:  Hier kannst du ein Bild hochladen, das als Hintergrund für die gesamte Zeile dienen soll.

• Hintergrundfarbe:  Wähle eine Farbe, die als Hintergrund für die Zeile dient. Wenn du ein Hintergrundbild hast, wird die Farbe nur sichtbar, wenn das Bild transparent ist.

• Innerer Abstand: Das ist der Abstand (auch Padding genannt) zwischen dem Rand deiner Zeile und dem Inhalt, der sich darin befindet. Du kannst den inneren Abstand für Oben, Rechts, Unten und Links separat einstellen. Das ist super wichtig, um Text und Bilder nicht direkt am Rand kleben zu lassen und ihnen "Luft zum Atmen" zu geben.

Erweiterte Zeilen-Einstellungen

Dieser Bereich bietet dir die Feinabstimmung für das Design deiner Zeilen.

Ausrichtung Flex

• Flex-Ausrichtung: Diese vier Icons steuern die Anordnung von Elementen innerhalb deiner Zeile, wenn du den Flexbox-Modus aktivierst. Flexbox ist eine moderne Art, Layouts zu erstellen, die super flexibel sind.

  • Links-Rechts-Ausrichtung: Mit den ersten beiden Icons legst du fest, ob die Inhalte nebeneinander (horizontal) oder untereinander (vertikal) angeordnet werden sollen.

  •  Oben-Unten-Ausrichtung: Die letzten beiden Icons bestimmen die vertikale Ausrichtung der Elemente. Du kannst sie oben oder unten in der Zeile ausrichten.

Rand / Border

• Breite:  Hier legst du fest, wie dick der Rand deiner Zeile sein soll. Du kannst einen Wert in Pixeln (px) eingeben. Ein Wert von 0 bedeutet, dass die Zeile keinen Rand hat.

• Stil: Mit diesem Dropdown-Menü wählst du die Art des Randes aus. Die gängigsten Stile sind:

  • Vollständig: Ein durchgehender, fester Rand.

  • Gestrichelt: Ein Rand aus gestrichelten Linien.

  • Gepunktet: Ein Rand aus Punkten.

  • Und es gibt noch weitere, wie doppelte Linien, etc.

• Farbe: Mit diesem Farbwähler bestimmst du die Farbe deines Randes.

Rand Radius

Der Rand-Radius (oder auf Englisch "Border Radius") ist eine super coole Funktion, um die Ecken deiner Zeile abzurunden. Das verleiht deiner Seite ein weicheres, moderneres Aussehen. Je höher der Wert, desto runder die Ecke.

• Oben Links: Rundet die obere linke Ecke ab.

• Oben Rechts: Rundet die obere rechte Ecke ab.

• Unten Rechts: Rundet die untere rechte Ecke ab.

• Unten Links: Rundet die untere linke Ecke ab.

Wenn du alle vier Werte gleich einstellst, bekommen alle Ecken die gleiche Rundung. Wenn du verschiedene Werte nimmst, kannst du kreative, ungleichmäßige Formen erstellen.

Box Schatten

• Box Schatten:  Mit dem Plus-Symbol kannst du einen Schatteneffekt für deine Zeile hinzufügen. Sobald du draufklickst, erscheinen weitere Optionen, um den Schatten genau zu definieren:

  • Farbe des Schattens: Wähle die Farbe deines Schattens. Meistens ist ein Grauton eine gute Wahl.

  • Horizontaler/Vertikaler Versatz: Bestimmt, wie weit der Schatten horizontal oder vertikal von der Zeile entfernt ist.

  • Unschärfe (Blur): Macht den Schatten weicher oder schärfer.

  • Streuung (Spread): Vergrößert oder verkleinert die Größe des Schattens.

 "Spalten"-Einstellungen

Spalten sind die Container innerhalb einer Zeile, in denen du deine eigentlichen Inhalte (wie Text, Bilder, Buttons) platzierst.

Was ist neu oder anders?

• Element zuerst in Mobile platzieren: Das ist eine ganz wichtige und spezielle Funktion für Spalten. Normalerweise werden Spalten von links nach rechts angeordnet. Wenn du diese Option aktivierst, wird diese Spalte auf dem Handy zuerst angezeigt, bevor die anderen Spalten in der gleichen Zeile kommen. Das ist super, wenn du z.B. ein Bild auf dem Desktop links hast und den Text rechts, aber auf dem Handy das Bild lieber über dem Text haben möchtest.

• Breite:  Bei Spalten ist die "Breite" besonders wichtig, weil sie proportional zur Breite der Zeile eingestellt wird. Mit dem Schieberegler kannst du den Anteil der Spalte an der gesamten Zeilenbreite festlegen. Wenn du drei Spalten hast und jede auf 33 % stellst, füllen sie die Zeile gleichmäßig aus. Wenn du eine Spalte auf 50 % und die beiden anderen auf 25 % stellst, hast du ein asymmetrisches Layout.

Was ist gleich?

Die restlichen Optionen kennst du schon von den "Zeilen"-Einstellungen:

• Verstecke dieses Element auf: Gleiche Funktion wie bei Zeilen. Du kannst die Spalte auf bestimmten Geräten ausblenden.

• Verzögerte Einblendung / Ausblendung: Funktioniert genau wie bei Zeilen.

• Äußerer Abstand oben:  Gleicher äußerer Abstand zur Spalte darüber.

• Hintergrundbild / Hintergrundfarbe: Du kannst der Spalte ein eigenes Hintergrundbild und eine eigene Hintergrundfarbe geben.

• Innerer Abstand: Der innere Abstand (Padding) funktioniert genauso und sorgt für "Luft" um den Inhalt innerhalb der Spalte.

Kurz gesagt: Spalten sind im Grunde genommen "Mini-Zeilen" innerhalb einer Haupt-Zeile, die dir helfen, deine Inhalte anzuordnen. Die wichtigsten Unterschiede sind die "Mobile"-Anordnung und die proportionale "Breite"-Einstellung.

Textelemente

Hier sind die Erklärungen für die "Text elemente" in deinem Landing Page Editor

Überschrift 

Das Überschrift-Element ist für den Haupttitel deiner Seite oder eines Abschnitts gedacht. Es ist in der Regel das größte und auffälligste Textelement. Du benutzt es, um die Aufmerksamkeit der Besucher zu fangen und den Hauptinhalt eines Abschnitts zusammenzufassen. Denk an eine Zeitungsüberschrift – sie sagt dir sofort, worum es geht.

Im Beispiel habe ich die Überschrift in die Zeile mit einer Spalte gezogen.

Unter-Überschrift 🖋️

Das Unter-Überschrift-Element ist ideal für kleinere Titel, die sich unter der Hauptüberschrift befinden. Es dient dazu, den Text weiter zu unterteilen und dem Leser eine klare Struktur zu geben, ohne dass es so prominent wie die Hauptüberschrift ist. Es ist perfekt, um einen Absatz einzuleiten oder einen bestimmten Punkt hervorzuheben.

Im Beispiel habe ich die “Unter-Überschrift” unter die Überschrift gezogen.

Absatz

Das Absatz-Element ist für den normalen Fließtext deiner Seite gedacht. Hier schreibst du die Details, Erklärungen und den Großteil deiner Informationen. Es ist der Hauptteil des Textes, der die Geschichte erzählt und die Argumente darlegt. Du benutzt es, um Sätze und Sätze zu gruppieren, die zusammengehören.

Im Beispiel habe ich einen Absatz in die linke Spalte der Zeile mit drei Spalten unter der “Unter-Überschrift” gezogen.

Liste

Mit dem Liste-Element kannst du Informationen in einer übersichtlichen, aufzählungsartigen Form darstellen. Das ist super, um Vorteile, Merkmale oder Schritte aufzulisten. Listen sind leicht zu scannen und helfen dem Leser, wichtige Punkte schnell zu erfassen. Du kannst entweder Aufzählungspunkte oder nummerierte Listen verwenden.

Im Beispiel habe ich eine Liste in die mittlere Spalte gezogen.

FAQ Element ❓

Das FAQ Element (Frequently Asked Questions) ist speziell für Fragen und Antworten gedacht. Dieses Element klappt meistens auf und zu (ein sogenanntes Akkordeon), sodass der Nutzer die Antwort nur sieht, wenn er auf die Frage klickt. Das hilft, die Seite aufgeräumt zu halten und nur die Informationen anzuzeigen, die der Nutzer wirklich sehen will. Es ist perfekt, um die häufigsten Fragen deiner Kunden zu beantworten.

Im Beispiel habe ich ein “FAQ Element” in die rechte Spalte gezogen. 

Textelemente Einstellungen

Wenn du auf eines der Textelemente gehst und durch einen Klick auf das Zahnradsymbol die Einstellungen öffnest. Öffnen sich auf der linken Seite die Einstellungsmöglichkeiten zu diesem Element. 

Überschrift-Typ (Typ der Überschrift)

Hier kannst du das HTML-Tag für die Überschrift festlegen, z. B. H1, H2, H3, H4, H5, oder H6. H1 ist die wichtigste Überschrift und sollte nur einmal pro Seite verwendet werden. Die anderen Tags strukturieren den Inhalt hierarchisch. Das ist wichtig für Suchmaschinenoptimierung (SEO) und die Barrierefreiheit.

Element verstecken (Verstecke dieses Element auf):

Mit diesen drei Icons kannst du festlegen, ob die Überschrift auf bestimmten Geräten ausgeblendet werden soll. Von links nach rechts:

1. Desktop: Das Element wird nur auf Computern angezeigt.

2. Tablet: Das Element wird nur auf Tablets angezeigt.

3. Smartphone: Das Element wird nur auf Smartphones angezeigt.

Ein- und Ausblenden

• Verzögerte Einblendung: Wenn du das Feld aktivierst, wird die Überschrift mit einer Animation eingeblendet. Das erzeugt einen dynamischen Effekt.

• Verzögerte Ausblendung: Wenn du das Feld aktivierst, wird die Überschrift mit einer Animation ausgeblendet.

Abstände und Schrift

• Äußerer Abstand oben (Margin): Hier stellst du den externen Abstand über der Überschrift ein. Das ist der Platz zwischen der Überschrift und dem Element darüber. Der Wert wird in Pixeln (px) angegeben.

• Schriftart: Hier wählst du die Schriftart (Font) für den Text aus, z. B. "Quicksand".

• Schriftgröße: Mit dem Schieberegler oder den Pfeilen legst du die Größe der Buchstaben fest. Auch hier wird der Wert in Pixeln (px) angegeben.

• Schriftstärke: Du kannst die Schriftstärke anpassen, zum Beispiel „Fett“ (bold).

• Text Ausrichtung: Mit den vier Icons kannst du die Ausrichtung des Textes steuern:

  1. Linksbündig: Der Text beginnt auf der linken Seite.

  2. Zentriert: Der Text wird in der Mitte ausgerichtet.

  3. Rechtsbündig: Der Text beginnt auf der rechten Seite.

  4. Blocksatz: Der Text wird sowohl links als auch rechts bündig ausgerichtet.

• Schriftfarbe: Mit dem Farbfeld kannst du die Farbe der Schrift ändern. Der Code "#444050" ist ein Hex-Code für die genaue Farbe. * 

• Hintergrundfarbe: Hier kannst du eine Hintergrundfarbe für die Überschrift festlegen. Wenn „none“ ausgewählt ist, ist der Hintergrund transparent.

• Innerer Abstand (Padding): Dieser Bereich regelt den inneren Abstand (Padding) um den Text der Überschrift herum. Stell dir das wie Polsterung vor. Du kannst den Abstand für jede Seite (Oben, Rechts, Unten, Links) separat festlegen. Die Werte werden ebenfalls in Pixeln (px) angegeben.

Erweiterte Text-Optionen 

Hier sind die erweiterten Einstellungen für deine Textelemente. Sie helfen dir, das Aussehen und die Position deiner Texte ganz genau anzupassen.

Zeichenabstand

• normal: Das ist der Standard-Abstand zwischen den Buchstaben. * Andere Werte (Zahlen): Mit den Pfeilen kannst du den Abstand zwischen den Buchstaben vergrößern oder verkleinern. Ein höherer Wert macht den Abstand größer, ein negativer Wert verkleinert ihn.

Zeilenhöhe

• Wert (z.B. 1.37): Hiermit stellst du den vertikalen Abstand zwischen den Textzeilen ein. Ein höherer Wert vergrößert den Abstand und macht den Text lockerer.

Rand / Border

• Breite: Hier legst du fest, wie dick der Rahmen um dein Textelement sein soll.

• Stil: Wähle hier die Art des Rahmens aus, zum Beispiel "Vollständig" für eine durchgehende Linie oder andere Optionen für gestrichelte oder gepunktete Linien.

• Farbe: Klicke auf das Farbfeld, um die Farbe für deinen Rahmen auszuwählen.

Rand Radius

• Oben Links, Oben Rechts, Unten Rechts, Unten Links: Mit diesen vier Feldern kannst du die Ecken deines Textelements abrunden. Wenn du überall den gleichen Wert eingibst, bekommst du gleichmäßig abgerundete Ecken.

Opazität

• Schieberegler (und Wert): Mit dem Schieberegler stellst du die Durchsichtigkeit deines Textes oder Textelements ein. 0 bedeutet komplett unsichtbar, und 1 bedeutet komplett undurchsichtig (also volle Deckkraft).

Text Schatten und Box Schatten

• Plus-Symbol (+): Wenn du hier klickst, kannst du einen Schatten für den Text selbst oder für das gesamte Textelement (die "Box" darum) hinzufügen. Es öffnen sich dann weitere Einstellungen, um den Schatten genau anzupassen.

Visuelle Elemente

Lass uns die visuellen Elemente für deinen Landing-Page-Editor durchgehen. Das sind alles Drag-and-Drop-Optionen, die du ganz einfach auf deine Seite ziehen kannst.

Video 

• Was es ist: Ein Video-Element.

• Wofür es ist: Um ein Video von, zum Beispiel, YouTube einzubetten ein eigenes video hochzuladen oder eines deiner Videos aus der Medienbibliothek zu verwenden. Du hast hier auch Zugriff auf die Videos aus der “KI-Videoerstellung”. Perfekt, um Produkte zu zeigen oder eine Geschichte zu erzählen.

Im Beispiel habe ich ein Video-Element in eine Zeile mit nur einer Spalte hinzugefügt.

Die "Video"-Einstellungen (Basis)

Mit diesen Optionen kannst du Videos ganz einfach in deine Seite einbinden und anpassen.

Video-Quelle und Wiedergabe

• Video URL: Hier fügst du den Link (URL) zu deinem Video ein. Das kann ein YouTube Link zu einer Videodatei sein, die du hochgeladen hast.

• Meine Videos: Dieser Button öffnet deine Medienbibliothek, in der du Videos auswählen kannst, die du bereits hochgeladen hast oder ein neues Video hochladen kannst.

• Pulsierender Play Button: Wenn du das aktivierst, wird der Play-Button des Videos größer und kleiner, um die Aufmerksamkeit der Besucher zu gewinnen und sie zum Abspielen des Videos zu animieren.

• Autoplay: Das Video beginnt automatisch abzuspielen, sobald die Seite geladen ist. Achtung: Viele Browser blockieren "Autoplay", wenn das Video nicht stummgeschaltet ist. Daher ist es sinnvoll, die Option "Stumm" gleich mit zu aktivieren.

• Endlosschleife: Das Video spielt immer wieder von vorn, sobald es zu Ende ist. Ideal für kurze, animierte Hintergründe oder Gifs.

• Stumm: Das Video wird ohne Ton abgespielt. Das ist wichtig, wenn du Autoplay benutzt, um die Besucher nicht zu erschrecken und die Wiedergabe in allen Browsern zu gewährleisten.

• Video Steuerung anzeigen: Wenn du diese Option aktivierst, sind die Steuerelemente des Videos (Play/Pause, Lautstärke, Fortschrittsbalken) sichtbar. Wenn du sie deaktivierst, verschwinden sie, was gut für Hintergrund-Videos ist, die einfach laufen sollen.

• Untertitel Standardsprache: Wenn dein Video Untertitel hat, kannst du hier die Sprache festlegen, die standardmäßig angezeigt werden soll.

Aussehen und Layout

• Hauptfarbe des Spielers:  Hier wählst du die Hauptfarbe für die Steuerelemente des Videos aus, z.B. die Farbe des Play-Buttons oder des Fortschrittsbalkens. Damit kannst du den Video-Player an das Design deiner Seite anpassen.

• Ausrichtung:  Bestimmt, ob das Video links, zentriert oder rechts in seinem Container (der Spalte) ausgerichtet wird.

• Verstecke dieses Element auf:  Wie bei Zeilen und Spalten kannst du das Video-Element auf bestimmten Geräten ausblenden.

• Verzögerte Einblendung / Ausblendung: Das Video wird erst mit einer Verzögerung eingeblendet oder ausgeblendet.

• Äußerer Abstand oben:  Legt den Abstand zum Element darüber fest.

• Breite / Höhe:  Hier kannst du die Abmessungen des Videos festlegen. Du kannst feste Werte in Pixeln (px) oder prozentuale Werte (%) eingeben. Wenn du "auto" wählst, behält das Video sein ursprüngliches Seitenverhältnis bei.

• Innerer Abstand: Fügt einen "Padding" um das Video herum hinzu, also einen Abstand zwischen dem Video und seinem Rand.

Kurz gesagt: Mit diesen Einstellungen hast du die volle Kontrolle über das Verhalten und das Aussehen deines Videos, von der Wiedergabe bis hin zur Platzierung und zum Design.

Die "Video"-Einstellungen (Erweitert)

Dieser Bereich bietet dir weitere Optionen, um das Aussehen deines Videos zu personalisieren.

Was ist neu oder anders?

• Rand / Border: Diese Optionen kennst du bereits. Sie funktionieren genauso wie bei den "Zeilen" und "Spalten". Du kannst hier einen Rand (Border) um dein Video legen.

  • Breite: Wie dick soll der Rand sein?

  • Stil: Soll er durchgehend, gestrichelt oder gepunktet sein?

  • Farbe: Welche Farbe soll der Rand haben?

• Rand Radius: Auch diese Funktion ist dir schon bekannt. Du kannst die Ecken deines Video-Players abrunden, um ihm ein weicheres, moderneres Aussehen zu geben.

  • Oben Links, Oben Rechts, Unten Rechts, Unten Links: Hier stellst du die Rundung für jede Ecke individuell ein.

• Box Schatten: Und auch hier hast du die Möglichkeit, deinem Video einen coolen Schatten zu verpassen. Das gibt dem Video mehr Tiefe und lässt es optisch "aus der Seite herausspringen".

Zusammengefasst:

Die erweiterten Einstellungen für das Video-Element sind fast identisch mit denen für "Zeilen" und "Spalten". Es gibt keine speziellen, zusätzlichen Optionen, die nur für Videos gelten. Stattdessen sind es allgemeine Design-Einstellungen, die du für fast alle Elemente auf deiner Landing Page nutzen kannst. Super praktisch, weil du nicht jedes Mal eine neue Einstellung lernen musst!

Audio 

• Was es ist: Ein Audio-Element.

• Wofür es ist: Um einen Podcast, einen Song oder eine Sprachnachricht abzuspielen. Ideal für Interviews oder um eine persönliche Note hinzuzufügen.

Im Beispiel habe ich ein Audio-Element unter das Video eingefügt.

"Audio-Player" Einstellungen

Ein Audio-Player-Element ist dafür da, Tondateien (wie Podcasts, Musik oder Sprachnachrichten) auf deiner Seite abzuspielen.

Was ist neu oder anders?

• Src (Source): Hier wird der Link zu deiner Audiodatei angezeigt. 

• Audiodateien: Dieser Button öffnet deine Medienbibliothek, in der du Audiodateien hochladen und verwalten kannst. 

Was ist gleich?

Die restlichen Einstellungen sind dir bereits bekannt und funktionieren genauso wie bei den anderen Elementen:

• Verstecke dieses Element auf:  Du kannst den Audio-Player auf Desktop, Tablet oder Handy ausblenden.

• Verzögerte Einblendung / Ausblendung: Lässt den Player mit einer Verzögerung erscheinen oder verschwinden.

• Äußerer Abstand oben:  Legt den Abstand zum Element darüber fest.

• Äußerer Abstand links: Legt den Abstand zum Element links davon fest.

Bild 

• Was es ist: Ein Bild-Element.

• Wofür es ist: Um Fotos, Grafiken oder Illustrationen einzufügen. Ein Muss für jedes Design, um deine Seite ansprechender zu machen.

Im Beispiel habe ich ein Bild-Element unter das Audio-Element gezogen.

Die "Bild"-Einstellungen 

Mit diesen Einstellungen kannst du Bilder nicht nur einfügen, sondern auch interaktiv machen.

Verlinkungs-Optionen

Diese Optionen sind neu und spezifisch für dieses Element. Sie verwandeln dein Bild in einen klickbaren Link.

• Element Verlinken:  Hier wählst du aus, ob dein Bild ein Link sein soll oder nicht.

  • Ja: Aktiviert die Verlinkungsfunktionen.

  • Nein: Dein Bild bleibt einfach nur ein Bild.

• Art der Verlinkung: Bestimmt, wohin der Link führt.

  • Intern: Der Link verweist auf eine andere Landing Page oder Seite innerhalb von Mentortools. 

  • Extern: Der Link führt zu einer ganz anderen Website (z.B. Google.de).

  • Datei: Mit dieser Option kannst du einen Link direkt zu einer Datei erstellen, die du hochgeladen hast (z.B. ein PDF, eine ZIP-Datei oder ein Bild). Wenn der Nutzer auf das verlinkte Element klickt, beginnt der Download der Datei. Das ist perfekt, um z.B. einen Flyer, einen Bericht oder ein E-Book anzubieten.

  • Innerhalb der Seite: Diese Funktion ist extrem nützlich, wenn du zu einem bestimmten Bereich auf der gleichen Seite springen möchtest. Das kennt man von "Anker-Links" oder "Sprungmarken". Du kannst zum Beispiel einen Button oben auf deiner Seite haben, der den Nutzer direkt zu einem Abschnitt weiter unten scrollt, z.B. zum Kontaktformular. Damit musst du nicht erst eine neue Seite anlegen, sondern leitest den Nutzer nur zu einem bestimmten Element.

• Verknüpfung: Wähle hier die genaue Seite aus, zu der der Link führen soll. Wenn du "Intern" gewählt hast, siehst du hier eine Liste deiner Seiten. Wenn du "Extern" gewählt hast, erscheint hier ein Eingabefeld für die URL.

• Ziel der Verlinkung: Das ist eine wichtige Option für die Benutzerfreundlichkeit.

  • In diesem Fenster öffnen: Der Link öffnet sich im gleichen Tab/Fenster des Browsers. Der Besucher verlässt deine Seite.

  • In neuem Fenster öffnen: Der Link öffnet sich in einem neuen Tab. Die Besucher bleiben auf deiner Landing Page, was meistens die bessere Wahl ist, wenn du nicht möchtest, dass sie deine Seite verlassen.

• Alternativer Text (Alt-Text): Das ist ein sehr wichtiger Punkt für die Suchmaschinenoptimierung (SEO) und Barrierefreiheit. Der Text, den du hier eingibst, beschreibt das Bild. Suchmaschinen nutzen diesen Text, um den Inhalt des Bildes zu verstehen. Außerdem wird er angezeigt, wenn das Bild nicht geladen werden kann, und Screenreader (für sehbehinderte Personen) lesen ihn vor. Mach es dir zur Gewohnheit, hier immer eine kurze, präzise Beschreibung einzugeben.

Layout-Einstellungen

Die folgenden Optionen kennst du schon:

• Ausrichtung:  Du kannst das Bild innerhalb seiner Spalte linksbündig, zentriert oder rechtsbündig ausrichten.

• Verstecke dieses Element auf: Wie bei den anderen Elementen kannst du das Bild auf bestimmten Geräten ausblenden.

• Verzögerte Einblendung / Ausblendung:  Lässt das Bild mit einem kleinen Effekt erscheinen.

• Äußerer Abstand oben:  Legt den Abstand zum Element darüber fest.

• Breite / Höhe:  Hier stellst du die genauen Abmessungen deines Bildes ein. Du kannst feste Pixelwerte oder relative Werte in Prozent verwenden.

Zusammengefasst: Die Verlinkungs-Optionen und der Alternativ-Text sind die wichtigsten neuen Funktionen bei den Bildeinstellungen, die du unbedingt nutzen solltest, um deine Seite interaktiver und suchmaschinenfreundlicher zu machen.

Button 

• Was es ist: Ein anklickbarer Button.

• Wofür es ist: Um Besucher zu einer bestimmten Aktion zu bewegen (z.B. "Jetzt kaufen", "Mehr erfahren"). Dieser Button ist super wichtig für deinen Call-to-Action (CTA).

Im Beispiel habe ich einen Button unter das Bild-Element gesetzt. 

Basis-Einstellungen für den "Button"

Mit diesen Optionen machst du deinen Button nicht nur klickbar, sondern auch optisch ansprechend.

Verlinkung und Inhalt

• Art der Verlinkung / Verknüpfung / Ziel der Verlinkung:  Das kennst du schon vom Bild-Element. Du kannst deinen Button mit einer internen oder externen Seite, einer Datei oder einer bestimmten Stelle auf der aktuellen Seite verlinken.

• Button Text:  Hier schreibst du den Text, der auf dem Button stehen soll, zum Beispiel "Jetzt kaufen" oder "Mehr erfahren". Mach den Text kurz und handlungsauffordernd.

• Icon vor/nach dem Button Text:  Mit diesen Optionen kannst du ein Icon vor oder nach dem Text hinzufügen. Das ist super, um die visuelle Wirkung zu verstärken, z. B. ein Einkaufswagen-Icon für einen Shop-Button.

Design und Aussehen

• Button-Designs anzeigen:  Dieser Button öffnet eine Auswahl an vorgefertigten Button-Designs. So kannst du schnell einen passenden Stil finden und musst nicht alle Einstellungen manuell vornehmen.

• Animation: Hier kannst du eine Animation für deinen Button auswählen damit er pulsiert. Das hilft, die Aufmerksamkeit der Besucher zu gewinnen.

• Hintergrundbild / Hintergrundfarbe: Du kannst dem Button eine Farbe oder ein Hintergrundbild geben. Beachte aber, dass kleine Bilder hier am besten funktionieren.

• Schriftart / Schriftgröße / Schriftstärke / Schriftfarbe:  Mit diesen Optionen legst du das Aussehen des Textes auf deinem Button fest. Du kannst die Schriftart, die Größe, die Stärke (normal, fett, etc.) und die Farbe des Textes bestimmen, damit er sich vom Hintergrund abhebt.

• Innerer Abstand (Padding):  Das ist der Platz zwischen dem Button-Text und dem Rand des Buttons. Hier hast du die volle Kontrolle für Oben, Rechts, Unten und Links. Mit einem gleichmäßigen Padding sorgst du dafür, dass dein Button harmonisch aussieht.

Was ist wie bei den anderen Elementen?

Die folgenden Optionen funktionieren genau wie bei den "Zeilen" und "Spalten":

• Ausrichtung:  Du kannst den Button in seiner Spalte linksbündig, zentriert oder rechtsbündig ausrichten.

• Verstecke dieses Element auf:  Mit dieser Option kannst du den Button für Desktop, Tablet oder Mobile ausblenden.

• Verzögerte Einblendung / Ausblendung:  Lässt den Button mit einer Verzögerung erscheinen.

• Äußerer Abstand oben/links:  Damit legst du den Abstand zum Element darüber oder links daneben fest.

• Breite / Höhe: Du kannst die Breite und Höhe des Buttons manuell anpassen. 

Icon 

• Was es ist: Ein Icon-Element.

• Wofür es ist: Um kleine Symbole hinzuzufügen, die etwas visualisieren. Icons sind super, um Listen oder Features zu strukturieren, ohne viel Text zu verwenden. Die Icons lassen sich auch verlinken, um zum Beispiel auf deine Instagram Seite zu gelangen.

Im Beispiel habe ich ein Icon unter den Button gesetzt.

Kärtchen 

• Was es ist: Ein Karten-Element.

• Wofür es ist: Um Inhalte in kleinen, übersichtlichen Kacheln darzustellen. Das eignet sich gut für Teammitglieder, Testimonials oder Produkt-Features.

Im Beispiel habe ich eine Zeile mit drei Spalten unter das Icon gezogen und sie mit Kärtchen gefüllt. Du kannst nun die Beschriftung ändern und Bilder hinzufügen, wenn du möchtest.

Einstellungen für das "Kärtchen"-Element

Ein Kärtchen ist im Grunde ein kleiner Container, der verschiedene Inhaltstypen kombiniert, wie ein Bild, einen Titel, Text und eine Fußzeile.

Inhalts-Einstellungen

Diese Optionen sind neu und speziell für dieses Element. Sie steuern, welche Inhalte auf deinem Kärtchen angezeigt werden:

• Bild oberhalb anzeigen:  Wenn du diese Option aktivierst, wird ein Bild am oberen Rand deines Kärtchens platziert.

• Bildunterschrift anzeigen: Wenn du ein Bild hast, kannst du hiermit einen kleinen Text (eine Bildunterschrift) direkt unter dem Bild einblenden.

• Bild mittig anzeigen:  Diese Option platziert ein Bild in die Mitte deines Kärtchens.

• Haupttext anzeigen: Hiermit aktivierst du den Haupttext-Bereich. Das ist der Platz für eine kurze Beschreibung oder weitere Informationen.

• Fußzeile anzeigen: Wenn du das aktivierst, wird eine Zeile am unteren Rand deines Kärtchens angezeigt. Das ist nützlich für zusätzliche Informationen wie einen Preis, eine Kategorie oder einen Link.

• Bild unterhalb anzeigen: Diese Option platziert ein Bild am unteren Rand deines Kärtchens, unter dem Haupttext.

Layout und Design

Die restlichen Einstellungen kennst du schon von den anderen Elementen. Sie funktionieren genauso:

• Verstecke dieses Element auf:  Du kannst das Kärtchen auf Desktop, Tablet oder Handy ausblenden.

• Verzögerte Einblendung / Ausblendung:  Lässt das Kärtchen mit einem kleinen Effekt erscheinen oder verschwinden.

• Äußerer Abstand oben:  Legt den Abstand zum Element darüber fest.

• Hintergrundbild / Hintergrundfarbe:  Du kannst dem gesamten Kärtchen ein eigenes Hintergrundbild oder eine Farbe geben.

• Innerer Abstand:  Mit diesen Reglern schaffst du "Luft" zwischen dem Inhalt des Kärtchens und seinem Rand. Du kannst den Abstand für Oben, Rechts, Unten und Links separat festlegen.

Countdown 

• Was es ist: Ein Countdown-Timer.

• Wofür es ist: Um Dringlichkeit zu erzeugen. Wenn du ein zeitlich begrenztes Angebot hast (z.B. "Angebot endet in..."), ist das dein bester Freund.

Im Beispiel habe ich einen Countdown unter die Zeile mit den Kärtchen gezogen.

Basis-Einstellungen für den "Countdown"

Mit diesen Optionen kannst du deinen Countdown einrichten und anpassen.

• Countdown läuft bis:  Hier stellst du das genaue Datum und die Uhrzeit ein, bis zu der dein Countdown laufen soll. Klicke auf das Kalender-Icon, um das Datum auszuwählen.

• Text nach Ablauf:  Wenn der Countdown abgelaufen ist, verschwindet er und dieser Text wird stattdessen angezeigt. Du kannst hier zum Beispiel schreiben: "ANGEBOT ABGELAUFEN" oder "VERKAUF BEENDET".

• Tage / Stunden / Minuten / Sekunden anzeigen:  Mit diesen Checkboxen entscheidest du, welche Zeiteinheiten in deinem Countdown sichtbar sein sollen. Wenn du zum Beispiel nur einen Countdown für Stunden und Minuten brauchst, kannst du die Kästchen für Tage und Sekunden deaktivieren.

• Countdown wiederholt sich nach Ende:  Wenn du diese Option aktivierst, startet der Countdown nach Ablauf automatisch neu.

Layout und Design

• Verstecke dieses Element auf:  Wie bei den anderen Elementen kannst du den Countdown auf Desktop, Tablet oder Handy ausblenden.

• Verzögerte Einblendung / Ausblendung:  Lässt den Countdown mit einer kleinen Verzögerung erscheinen oder verschwinden.

• Äußerer Abstand oben / links: Legt den Abstand zum Element darüber und links davon fest.

• Hintergrundfarbe:  Du kannst dem Countdown-Element eine Hintergrundfarbe geben. Beachte, dass dies meistens nicht die einzelnen Zahlen, sondern den gesamten Container des Countdowns betrifft.

• Innerer Abstand:  Mit diesen Schiebereglern stellst du den "Padding" ein, also den Abstand zwischen dem Inhalt (den Countdown-Zahlen) und dem Rand des Elements. Das sorgt für mehr "Luft" und ein saubereres Design.

Slider 

• Was es ist: Ein Bilderkarussell oder Slider.

• Wofür es ist: Um mehrere Bilder oder Inhalte auf wenig Platz zu präsentieren. Besucher können durch die Bilder wischen oder klicken. Perfekt für Produktgalerien oder Kundenrezensionen.

Im Beispiel habe ich einen Slider unter den Countdown gesetzt. 

Code 

• Was es ist: Ein Code-Element.

• Wofür es ist: Für fortgeschrittene Nutzer. Hier kannst du eigenen HTML-Code einfügen, um spezielle Funktionen zu implementieren, die nicht standardmäßig im Editor sind.

Im Beispiel habe ich ein Code-Element unter den Slider gezogen und Code eingegeben, welcher dieses Element “Code-Element” anzeigen lässt.

Menü Elemente

Du hast zwei Menü-Optionen für den Landing-Page-Editor. Beide sind für das Drag-and-Drop-System ausgelegt und können in den gewünschten Bereich deiner Seite gezogen werden. Lass uns die beiden Optionen genauer ansehen:

Menü 

Diese Option ist das Hauptmenü für deine Seite. Wenn du es in deinen Editor ziehst, wird ein kompletter Navigationsbereich erstellt. 🗺️ Es ist perfekt, um alle deine wichtigsten Seiten (wie "Über uns", "Dienstleistungen" oder "Kontakt") an einem zentralen Ort zu verlinken.

• Verwendungszweck: Ideal für die obere Leiste (den sogenannten Header) deiner Landing Page, damit Besucher schnell zu anderen Teilen deiner Website navigieren können.

Im Beispiel habe ich ein Menü-Element über die Überschrift gesetzt.

Menü-Eintrag

Das ist ein einzelner Punkt innerhalb eines Menüs.  Stell es dir wie einen Knopf vor, den du in das größere Menü-Feld ziehst. Mit dieser Option kannst du neue Links zu deinem bestehenden Menü hinzufügen.

• Verwendungszweck: Du nutzt es, um dein Hauptmenü zu erweitern. Brauchst du einen zusätzlichen Link für dein neues Blog oder eine Produktseite? Dann ziehst du einfach einen "Menü-Eintrag" in dein Menü. Es ermöglicht dir, die Navigation deiner Seite individuell anzupassen.

Im Beispiel habe ich einen Menü-Eintrag vor den Menü-Punkt 1 gesetzt. 

Formulare

• Opt-in Formular: Ein vollständiges Formular, das alle wichtigen Felder enthält, wie E-Mail-Adresse, Name und einen Senden-Button. Dieses Formular wird typischerweise verwendet, um Kontaktdaten für einen Newsletter oder ähnliche Angebote zu sammeln. 

Im Beispiel habe ich ein Opt-in Formular unter die Unter-Überschrift gezogen.

• Opt-in Inline Formular: Dieses Formular ist etwas minimalistischer und enthält nur die wichtigsten Felder, wie die E-Mail-Adresse und den Senden-Button. Es ist dafür gedacht, direkt in den Inhalt deiner Landingpage eingebettet zu werden (inline), sodass es sich nahtlos in das Design einfügt und den Lesefluss nicht unterbricht.

Im Beispiel habe ich ein Opt-in Inline Formular über die Überschrift gezogen.

Formularfelder

• Formularfeld: Eingang: Das ist ein einzelnes Textfeld. Du benutzt es, um spezifische Informationen zu sammeln, wie zum Beispiel den Namen oder die E-Mail-Adresse. Man kann mehrere davon hinzufügen, je nachdem, welche Daten man braucht.

• Checkbox: Datenübertragung: Mit dieser Checkbox lässt du den Nutzer bestätigen, dass er mit etwas einverstanden ist. Das ist super wichtig für die DSGVO, damit die Leute zustimmen, dass ihre Daten verarbeitet werden dürfen. 

• Absenden: Das ist der Button, den der Nutzer anklickt, um das ausgefüllte Formular abzuschicken. Ohne ihn geht gar nichts! Man kann den Text darauf, wie zum Beispiel "Senden", anpassen.

Hinweis: Formularfelder kannst du nur in bereits bestehende Formulare ziehen.

Jedes Optin-Formular kann entweder mit einem von dir erstellten Opt-In-Prozess oder mit einem HTML-Formular verbunden werden. Nähere Informationen dazu findest du in unserem Tutorial über Opt-in-Prozesse.

Zusammenfassung

So, das war's! Du hast jetzt alle Werkzeuge und Tricks an der Hand, um eine beeindruckende und effektive Landing Page zu gestalten. Denk dran: Regelmäßiges Speichern ist dein bester Freund und experimentier ruhig mit den verschiedenen Elementen und Einstellungen. Mit ein bisschen Übung wirst du schnell zum Profi. Wenn du weitere Fragen hast, schau dir gerne unsere anderen Tutorials an. Viel Spaß beim Bauen deiner nächsten großartigen Seite!