Blöcke einfügen und sortieren

Jeder Schritt besteht aus Bausteinen, den Blöcken. So fügst du sie ein und sortierst sie.

Bausteine einfügen

Es gibt drei Wege, einen Baustein in einen Schritt zu bekommen. Alle drei öffnen dieselbe Auswahl: ein Raster aus Kacheln mit Symbol und Namen, dazu oben ein Suchfeld. Getippt wird der Name oder ein Stichwort, zum Beispiel Quiz für die Auswahl.

• Über die schmale Leiste links. Das Plus-Symbol Block hinzufügen öffnet die Auswahl. Der Baustein wird ans Ende des aktuellen Schritts angehängt.
• Zwischen zwei Bausteinen. Fährst du in der Vorschau zwischen zwei Blöcke, erscheint eine Einfügelinie mit einem Plus. So setzt du den Baustein genau an diese Stelle.
• Am Ende eines Schritts. Unter dem letzten Baustein steht + Block hinzufügen.

Aus der Auswahl heraus kannst du eine Kachel auch in die Vorschau ziehen. Beim Ziehen zeigt eine Marke, wo der Block landen wird, auch in einen Abschnitt hinein.

Welche Blöcke es gibt

Die Palette ist nach Zweck in vier Gruppen geteilt.

• Inhalt: Überschrift, Text, Aufzählung, Testimonial, Bewertung, Ergebnis-Balken, Fallstudie, Vorteile, Vergleich, FAQ, Logo
• Medien: Bild, Video, Logo-Leiste
• Interaktion: Button, Auswahl, Freitext, Formular, Kontaktwahl, Soziale Profile, Termin, Countdown, Ladeanimation, HTML-Code (ab Pro)
• Struktur: Abschnitt, Trenner, Abstand

Der Block Logo zeigt immer das Logo des Funnels, er hat kein eigenes Bildfeld. Termin bindet einen Calendly-Kalender ein; steht ein Formular davor, landet die Buchung am Lead im CRM (wie das geht). Abschnitt gruppiert andere Blöcke und trägt einen Hintergrund, dazu gibt es einen eigenen Artikel.

Der Vorteile-Block

Vorteile zeigt bis zu acht Karten nebeneinander, jede mit einem Zeichen, einem Titel und einem kurzen Text: drei Gründe für dich, vier Leistungen, sechs Schritte. Der Titel ist Pflicht, der Text darf fehlen. Als Zeichen wählst du ein Emoji oder ein Icon aus der Bibliothek; ohne eigene Farbe zeichnet es sich in der Akzentfarbe des Funnels, Farbe und Hintergrund des Zeichens lassen sich aber auch getrennt einstellen. Am Schreibtisch stehen zwei, drei oder vier Karten in einer Reihe, auf dem Telefon untereinander. Unter Stil wählst du zwischen Karten mit Rahmen und einer schlichten Fassung ohne Kasten.

Der Aufmerksamkeits-Effekt am Button

Ein Button kann alle paar Sekunden kurz anlaufen: Wackeln, Pulsieren oder Glanz. Sobald du einen Effekt gewählt hast, erscheint darunter Wie oft mit den Stufen häufig, normal und selten. Es ändert sich dabei nur die Pause dazwischen, der Effekt selbst dauert auf jeder Stufe genau gleich lang.

Setz „häufig" sparsam ein: ein dauerzappelnder Button wirkt schnell billig, und für den Haupt-CTA reicht meist „normal". Wer im Betriebssystem weniger Bewegung eingestellt hat, sieht gar keinen Effekt.

Der Case-Study-Block

Ein Testimonial sagt, was jemand über dich denkt. Eine Case Study zeigt, was dabei herausgekommen ist. Deshalb ist es ein eigener Block, und deshalb gehört er direkt vor den Aufruf zum Handeln: dort entscheidet sich, ob jemand klickt.

Es gibt zwei Bauformen. Der Umschalter steht ganz oben in den Block-Eigenschaften, und darunter siehst du nur die Felder, die diese Form auch rendert.

„Kennzahlen" für ein starkes Zahlenergebnis

Dunkle Karte über die volle Breite, links die Zahlen, rechts ein Bild oder Video. Sie funktioniert genau dann, wenn es die Zahlen wirklich gibt: drei große Werte tragen den Block, und ohne sie ist er leer.

Du füllst aus: Kunde und Ort, eine Überschrift mit dem Ergebnis, bis zu drei Kennzahlen, ein Zitat und die Person.

Der Wert einer Kennzahl darf Zeichen enthalten. „13,6 %", „~15x" und „65.000 €" sind alle in Ordnung. Beim Scrollen zählt nur die Zahl hoch, das Prozentzeichen und das „~" stehen still.

Höchstens drei Kennzahlen. Das ist keine technische Grenze: vier nebeneinander sind auf einem Telefon vier Zeilen, und die vierte liest niemand mehr.

Mit Davon farbig hervorheben setzt du einen Teil der Überschrift in die Akzentfarbe. Trag dort genau die Wörter ein, die auch in der Überschrift stehen, zum Beispiel „65.000 €". Stimmt der Text nicht überein, bleibt die Überschrift einfarbig.

„Problem/Lösung" für eine Veränderung

Heller Aufbau, links die Stimme mit Bild, Sternen und Zitat, rechts drei Abschnitte: Problem, Lösung, Resultate. Die Überschriften kannst du umbenennen.

Diese Form trägt auch dann, wenn sich das Ergebnis nicht in eine Zahl fassen lässt. Darunter passen bis zu drei Ergebnis-Zeilen im Format „Bezeichnung: Wert".

Wann welche

Zahlen, die du belegen kannst

Praktisch heißt das: frag deinen Kunden, ob du die Zahl nennen darfst, und halt seine Zustimmung fest. Wenn er nicht möchte, nimm eine Spanne („mehr als [Anzahl] Anfragen") oder die Variante Problem/Lösung.

Solange du noch keine echten Zahlen hast, lass die eckigen Klammern stehen. Sie sind sichtbar Platzhalter und fallen jedem auf, der die Seite vor dem Livegang ansieht. Eine erfundene Zahl fällt niemandem auf, und genau das ist das Problem.

Video statt Bild

Beides geht, und du hast drei Möglichkeiten:

• Bild: füllt die Spalte.
• Video-Datei: wird hochgeladen und läuft mit den normalen Bedienelementen. Nicht im Verkaufs-Player, denn wer eine Kundenstimme ansieht, will spulen können.
• YouTube oder Vimeo: lädt erst, wenn der Besucher auf den Knopf klickt. Vorher geht keine Anfrage an den Anbieter. Ein Vorschaubild lohnt sich hier besonders, sonst ist die Fläche vor dem Klick leer.

Auf dem Telefon steht das Medium oben und der Text darunter, in beiden Bauformen. Man soll etwas sehen, bevor man liest.

Drei Gestaltungs-Optionen

Im Reiter Design des Blocks stehen unter Bauform drei Schalter.

• Rahmen auf „randlos" nimmt die eingebaute Karte weg, der Inhalt liegt dann direkt auf dem Hintergrund. Was du unter Rahmen, Radius und Schatten eingestellt hast, gilt weiter.
• Hintergrund über die volle Breite lässt die Fläche bis an die Bildschirmränder laufen. Zusammen mit „randlos" wirkt die Case Study wie ein eigener Abschnitt. Das greift, wenn der Block direkt auf der Seite liegt: steckt er in einem Abschnitt, bestimmt der Abschnitt die Breite.
• Inhaltsseite und Medienseite geben den beiden Hälften eigene Farben, zum Beispiel links Nachtblau und rechts eine helle Fläche hinter dem Video. Leer heißt: beide zeigen den gemeinsamen Hintergrund. Die Schriftfarbe passt sich der Helligkeit von selbst an, hell auf dunkel und umgekehrt.

Brauchst du ein Layout, das der Block nicht hergibt, nimm einen zweispaltigen Abschnitt: dort lassen sich Bild und Inhalt frei kombinieren (siehe Abschnitte und Hintergründe). Der Case-Study-Block bleibt der schnelle Weg für den Standardfall.

Reihenfolge ändern

Wählst du einen Block an, erscheint oben an seiner Kante eine kleine Werkzeugleiste. Sie nennt links den Blocktyp und trägt rechts die Knöpfe:

• Nach oben und Nach unten verschieben den Block um eine Position.
• Duplizieren legt eine Kopie direkt darunter.
• Löschen entfernt ihn. Der Hinweis unten hat einen Rückgängig-Link, sieben Sekunden lang.

Verschieben geht auch über den Schritte-Baum links: dort ziehst du einen Eintrag an seinem Griff an eine andere Stelle, auch in einen Abschnitt oder eine Spalte hinein. Ziehst du einen Block in der Vorschau über einen Block in einem Abschnitt, landet er ebenfalls in diesem Abschnitt.

Auf der Tastatur: Entf löscht den gewählten Block, Strg + D dupliziert ihn, Esc hebt die Auswahl auf. Strg + Z nimmt jeden Schritt zurück.

Auf dem Telefon

Unter 780 Pixel Breite füllt die Vorschau die ganze Breite. Den Schritte-Baum holst du über das Ebenen-Symbol oben rechts, die Eigenschaften kommen als Blatt von unten. Die Werkzeuge am Block gibt es dort nicht. Stattdessen steht ganz unten eine Aktionsleiste mit den Knöpfen Text, Design, Pfeil hoch, Pfeil runter, Duplizieren, Löschen und Plus.

Ist nichts ausgewählt, bleibt nur ein Knopf stehen: Block. Er öffnet die Auswahl als Blatt von unten.

Zwei Gesten sind auf dem Telefon anders. Der erste Tipp auf einen Text wählt ihn nur aus, erst der zweite setzt den Cursor hinein. Und zum Ziehen hältst du den Finger erst kurz auf dem Ziehgriff, sonst rollt die Seite.

Grenzen

Ein Frage-Schritt trägt bis zu 60 Blöcke, eine Seite bis zu 120. Blöcke innerhalb eines Abschnitts zählen mit. Wird es mehr, lässt sich der Schritt nicht mehr speichern.