Seiten-Editor
Den Editor öffnen Sie im Bereich „Editor“ im Menü der Landingpage. In der Mitte steht die Seite im Telefonrahmen, seitlich erscheint das Einstellungspanel der Seite oder des gewählten Blocks.
Änderungen werden automatisch gespeichert — einen eigenen Button zum Speichern gibt es nicht. Gespeichert wird ein Entwurf: Besucher sehen die Änderungen erst, nachdem Sie auf „Veröffentlichen“ geklickt haben. Mehr dazu auf der Seite Veröffentlichung und eigene Domain.
Der Button „KI-Hilfe“ neben „Veröffentlichen“ öffnet den KI-Chat zu dieser Seite — siehe Landingpage im KI-Chat bauen.
Seiten der Landingpage
Eine Landingpage kann mehrere Seiten haben. Die erste — „Startseite“ — öffnet sich unter der Adresse der Landingpage, die übrigen unter der Adresse der Landingpage mit einem Zusatz, zum Beispiel …/price.
Über dem Telefonrahmen stehen der Name der geöffneten Seite und Symbole:
| Symbol | Was es tut |
|---|---|
| Zahnrad | Öffnet die „Seiteneinstellungen“ |
| Liste | Öffnet das Panel „Seiten“ |
| Pfeil nach außen | Öffnet die veröffentlichte Seite in einem neuen Tab. Das Symbol gibt es nur bei einer veröffentlichten Seite |
Panel „Seiten“
Im Panel stehen die Liste der Seiten mit ihren Adressen und eine Suche. Ein Klick auf eine Seite öffnet sie im Editor.
- „Seite erstellen“ — das Fenster „Seite erstellen“ mit den Feldern „Seitenname“ und „Seitenadresse“. Die Adresse besteht aus lateinischen Buchstaben, Ziffern, Bindestrich und Unterstrich.
- Menü „⋯“ einer Seite: „Bearbeiten“ (Name und Adresse), „Kopie erstellen“, „Löschen“.
Eine Kopie erhält einen Namen mit dem Zusatz „(Kopie)“ und eine Adresse mit der Endung -copy. Die letzte Seite einer Landingpage können Sie nicht löschen.
Achtung
Löschen Sie die „Startseite“ nicht über das Menü „⋯“, wenn die Landingpage weitere Seiten hat: Das Konto lässt es zu, aber ohne Hauptseite öffnet sich die Adresse der Landingpage nicht mehr.
Seiteneinstellungen
| Einstellung | Was sie festlegt |
|---|---|
| „Seitenname“ | Der Name der Seite. Er dient auch als Titel des Browser-Tabs, solange der Titel in den „SEO-Einstellungen“ nicht ausgefüllt ist |
| „URL“ | Die Adresse der Seite innerhalb der Landingpage. Bei der Hauptseite ist das / |
| „Innenabstand der Seite an den Rändern“ | Abstände an den Rändern: ohne Abstand oder eine Größe von XS bis LG |
| „Hintergrundfarbe“ | Der Hintergrund der Seite — getrennt für das helle und das dunkle Design |
| „Standardschriftart“ | Die Schriftart aller Blöcke der Seite, bei denen keine eigene gewählt ist |
| „SEO-Einstellungen“ | „Titel“ — bis zu 80 Zeichen, „Schlüsselwörter“ — bis zu 250, „Beschreibung“ — bis zu 170 |
Die SEO-Felder landen im technischen Teil der veröffentlichten Seite — sie werden von Suchmaschinen und von Diensten gelesen, die eine Linkvorschau erzeugen. Als Bild für soziale Netzwerke dient das Symbol der Landingpage: Ein eigenes Feld für ein solches Bild gibt es nicht. Auf der Website werden die Felder bei der nächsten Veröffentlichung aktualisiert.
Der Button „Löschen“ unten im Panel löscht die Seite. Bei der Hauptseite fehlt er.
Blöcke
Eine Seite besteht aus Blöcken, die von oben nach unten folgen. Es gibt fünf Blöcke: „Textblock“, „Bild“, „Schaltflächen“, „Formular“, „HTML“.
- Hinzufügen. Klicken Sie auf „+“ unter dem letzten Block und wählen Sie die Art des Blocks. Um einen Block über einem vorhandenen einzufügen, klicken Sie auf die Linie darüber und wählen Sie die Art des Blocks.
- Einrichten. Ein Klick auf einen Block öffnet sein Einstellungspanel.
- Verschieben. Ziehen Sie den Block am Symbol links neben ihm.
- Löschen. Der Button „Löschen“ unten im Einstellungspanel des Blocks.
Textblock
Den Text tippen Sie direkt auf der Seite. Markieren Sie einen Teil des Textes — es erscheint eine Leiste: fett, kursiv, unterstrichen, durchgestrichen, Link, Zitat. Die Enter-Taste beginnt einen neuen Absatz, Shift + Enter bricht die Zeile um.
Im Einstellungspanel:
- Ausrichtung und Textfarbe;
- „Texttyp“ — „Überschrift 1“ – „Überschrift 4“ oder „Einfacher Text“;
- „Schriftart“, „Schriftgröße“, „Schriftstärke“, „Zeilenhöhe“, „Zeichenabstand“;
- „Innenabstand oben und unten“, „Innenabstand links und rechts“.
Bild
Klicken Sie auf „Foto auswählen“ und laden Sie ein Bild hoch — JPG, PNG oder GIF. Das Bild können Sie im Rahmen mit der Maus oder dem Finger verschieben, um den sichtbaren Ausschnitt zu wählen.
Im Einstellungspanel gibt es fünf Rahmenvarianten:
| Variante | Wie sie aussieht |
|---|---|
| Mit Rändern | Das Bild in seinen Proportionen, ringsum Abstände |
| Volle Breite | Das Bild in seinen Proportionen, ohne Abstände |
| Quadrat | Ein Quadrat mit Abständen |
| Quadrat in voller Breite | Ein Quadrat ohne Abstände |
| Kreis | Ein Kreis mit Abständen |
Darunter stehen „Radius“ (Abrundung der Ecken), „Größe“ (bei den Varianten mit Abständen), „Maßstab“ (Vergrößerung von 100 bis 300 %) und die Abstände des Blocks.
Schaltflächen
Ein Block mit einem oder mehreren Link-Buttons. So erstellen Sie Links zum Chatbot, zu Messengern, sozialen Netzwerken, zur Website.
Unter dem gewählten Block stehen die Buttons „Schaltfläche hinzufügen“ und „Einstellungen“. Ein neuer Button übernimmt die Gestaltung des vorherigen.
Die Einstellungen des Blocks legen fest, was für alle Buttons gilt: „Standardgröße“, „Standardradius“, „Standardschriftart“ und „Gestaltung“ — wie die Buttons angeordnet sind: jeder in voller Breite in einer eigenen Zeile, kompakt oder zusammenhängend als eine Gruppe (dafür braucht es mindestens zwei Buttons). In der ersten Variante tauschen Sie Buttons durch Ziehen.
Die Einstellungen eines Buttons öffnen Sie mit einem Klick darauf:
| Einstellung | Was sie festlegt |
|---|---|
| „Schaltflächenname“ | Die Beschriftung des Buttons |
| „Link“ | Die Adresse, die sich beim Drücken öffnet. Für einen Anruf tel: und die Nummer, z. B. tel:+4930000000; für eine E-Mail mailto: und die Adresse, z. B. mailto:hello@example.com. Solche Links öffnen das Telefon oder das E-Mail-Programm, keinen neuen Tab |
| „In neuem Tab öffnen“ | Den Link in einem neuen Browser-Tab öffnen |
| „Symbol“ | Ein Messenger- oder YouTube-Symbol neben der Beschriftung oder „Kein Symbol“; „Symbolposition“ — „Links“ oder „Rechts“ |
| „Größe“, „Schriftart“, „Schriftgröße“, „Schriftstärke“, „Zeichenabstand“, „Stil“, „Radius“ | Das Aussehen der Beschriftung und des Buttons selbst. „Standard“ übernimmt den Wert aus den Einstellungen des Blocks |
| „Farbe“ | „Textfarbe“ und „Hintergrundfarbe“; getrennt werden „Farbe beim Überfahren“ und „Farbe beim Drücken“ eingeschaltet |
| „Farbverlauf“, „Rahmen“, „Schatten“ | Werden mit Schaltern eingeschaltet; jeder hat eigene Varianten beim Überfahren und beim Drücken |
Der Schalter „Auf alle im Block anwenden“ in der Zeile „Designeinstellungen“ überträgt die Gestaltung dieses Buttons auf die übrigen Buttons des Blocks. Die Buttons „Stil kopieren“ und „Stil einfügen“ übertragen die Gestaltung zwischen Buttons — auch auf eine andere Seite.
Tipp
Damit ein Button zum Chatbot führt, fügen Sie in das Feld „Link“ den allgemeinen oder einen zusätzlichen Link zum Bot aus dem Bereich „Links zum Chatbot“ ein. Dann landen die Übergänge in der Statistik des Bots. Wo Sie den Link finden, steht im Bereich Links zum Chatbot.
Formular
Ein Formular sammelt die Daten des Besuchers und übergibt sie an den Chatbot. Ein neues Formular enthält bereits ein Eingabefeld, ein Kontrollkästchen für die Einwilligung und den Button „Senden“.
Unter dem gewählten Block stehen „Element hinzufügen“ und „Einstellungen“. Es gibt vier Elemente:
| Element | Was es ist |
|---|---|
| „Eingabefeld“ | Ein Feld mit Beschriftung. „Feldtyp“: „Telefon“, „E-Mail“, „Text“, „Zahlen“, „Mehrzeiliger Text“, „Datum“, „Uhrzeit“, „Datum und Uhrzeit“. Es gibt „Platzhaltertext“ und den Schalter „Pflichtfeld“ |
| „Text“ | Eine Erläuterung innerhalb des Formulars |
| „Kontrollkästchen“ | Ein Häkchen mit Text, zum Beispiel die Zustimmung zur Datenschutzerklärung. „Feldname“ — unter welchem Namen der Wert im Bot ankommt; es gibt „Standardmäßig aktiviert“ und „Pflichtfeld“ |
| „Schaltfläche“ | Der Button zum Absenden. In das Feld „Chatbot-Link“ fügen Sie den Link zum Bot ein |
Ein Klick auf ein Element öffnet seine Einstellungen, Elemente tauschen Sie durch Ziehen. Die allgemeinen Einstellungen des Blocks sind „Standard-Formulargröße“, Abstände, „Standardradius“, „Standardschriftart“.
Wie das Formular die Daten übergibt.
- Der Besucher füllt das Formular aus und drückt den Button. Die Plattform prüft die Pflichtfelder und das Format: E-Mail, Telefon, Zahl, Datum.
- Der Besucher folgt der Adresse aus dem Feld „Chatbot-Link“ und landet im Messenger.
- Der Bot erhält die Werte der Felder als Variablen des Kontakts. Der Name der Variable ist die Beschriftung des Feldes („Name“ in den Einstellungen des Feldes) oder der „Feldname“ beim Kontrollkästchen. Ist keine Beschriftung festgelegt, heißt die Variable
Input 1,Checkbox 1und so weiter. Ein Kontrollkästchen kommt als ✅ oder ❌ an.
Zum Beispiel kommt ein Feld mit der Beschriftung „Telefon“ im Bot als Variable Telefon mit dem Wert +49 000 1234567 an. Wie Sie Variablen in Nachrichten verwenden, steht im Bereich Platzhalter.
Wichtig
Das Formular speichert Anfragen nicht selbst. Im Button muss ein Link zu einem Chatbot dieser Plattform stehen — der allgemeine oder ein zusätzlicher aus dem Bereich „Links zum Chatbot“. Ohne ihn kommen die eingegebenen Daten nirgendwo an.
Damit keine Anfragen verloren gehen, speichern Sie sie im Szenario des Bots: in Variablen des Kontakts, in einer Liste oder im CRM.
HTML
Ein Block für eigenen Code: Im Einstellungspanel gibt es einen Editor, in den Sie HTML einfügen. Im Editor der Seite wird das Ergebnis sofort angezeigt.
Achtung
„Der Block funktioniert nur bei verbundener Domain“ — auf einer Seite unter der Adresse der Plattform wird der Code dieses Blocks nicht ausgeführt. Wie Sie eine Domain verbinden, steht auf der Seite Veröffentlichung und eigene Domain.
Farben für das helle und das dunkle Design
Jede Farbe auf der Seite — für Hintergrund, Text, Buttons, Formularfelder — hat zwei Werte. Im Fenster zur Farbauswahl gibt es zwei Tabs: „Helles Design“ und „Dunkles Design“. Auf dem Button zur Farbauswahl stehen beide Werte nebeneinander — mit einem Sonnen- und einem Mondsymbol.
Die dunkle Variante der Seite schalten Sie in den Einstellungen der Landingpage mit dem Schalter „Dunkles Design“ ein. Solange er ausgeschaltet ist, genügt es, die Farben für das helle Design festzulegen.
Im Editor wird die Seite im Design Ihres Kontos gezeigt: Im hellen Konto sehen Sie die hellen Farben, im dunklen die dunklen.
Schriftarten
In der Liste der Schriftarten stehen „System“ und 14 Schriftarten: Amatic SC, Caveat, Comfortaa, Kelly Slab, Lobster, Merriweather, Montserrat Alternates, Open Sans, Open Sans Condensed, Oswald, Pacifico, Pangolin, PT Mono, Roboto. Die Variante „Standard“ eines Blocks übernimmt die Schriftart der Seite.
Was es im Editor nicht gibt
- Einen Chat-Block. Damit ein Besucher dem Bot schreibt, setzen Sie einen Button mit einem Link zum Bot. Einen Chat direkt auf der Website bauen Sie mit einem Widget.
- Blöcke für Video, Karte, Timer und Zahlung.
Wenn etwas nicht funktioniert
- „Diese Seitenadresse existiert bereits.“ Zwei Seiten einer Landingpage können nicht dieselbe Adresse haben.
- „Die Seitenadresse ist falsch eingegeben“ — in der Adresse sind nur lateinische Buchstaben, Ziffern, Bindestrich und Unterstrich erlaubt.
- „Sie können die letzte Seite nicht löschen.“ In einer Landingpage bleibt immer mindestens eine Seite.
- Der Bot hat die Formulardaten nicht erhalten. Prüfen Sie, dass im Button des Formulars ein Link zum Bot aus dem Bereich „Links zum Chatbot“ steht und dass die Felder Beschriftungen haben. Die Formulardaten warten nur kurz auf den Übergang: Hat der Besucher den Link geöffnet und ist nicht sofort in den Messenger gewechselt, kommen die Werte womöglich nicht an.