Abschnitte und Hintergründe

Mit dem Block Abschnitt gibst du einer Landing Page Struktur und farbige Bänder.

Wozu ein Abschnitt gut ist

Ein Abschnitt ist ein Behälter. Er nimmt andere Blöcke auf und trägt einen eigenen Hintergrund. So entsteht der typische Aufbau einer Landing Page: ein farbiger Kopfbereich, darunter ein helles Band mit den Vorteilen, danach ein dunkles Band mit Kundenstimmen.

Du findest ihn in der Palette unter Struktur. Blöcke ziehst du danach einfach hinein.

Hintergrund

Im Eigenschaften-Panel steht ganz oben Hintergrund mit vier Stellungen.

• keiner. Der Abschnitt ist durchsichtig, es gilt der Seitenhintergrund.
• Farbe. Eine Fläche in einer Farbe deiner Wahl.
• Verlauf. Zwei Farben (Von und Nach) plus die Richtung als Winkel in Grad. 0 läuft nach oben, 90 nach rechts, 180 nach unten, 270 nach links. Voreingestellt sind 180 Grad.

• Bild. Ein hochgeladenes Bild, siehe den nächsten Abschnitt.

Hintergrundbild

Wählst du Bild, suchst du eine Datei aus deiner Medien-Bibliothek aus oder lädst eine hoch. Darunter stehen vier Einstellungen.

• Bildausschnitt. „Füllend" legt das Bild über die ganze Fläche und schneidet ab, was nicht passt. Das ist der Normalfall. „Einpassen" zeigt das ganze Bild und lässt dafür Rand frei, etwa bei einer Produktabbildung, bei der nichts fehlen darf.
• Position senkrecht und Position waagerecht. Zusammen ergeben sie neun Punkte. Sie legen fest, welcher Teil des Bildes stehen bleibt, wenn zugeschnitten wird. Bei einem Bild mit Personen ist das meist oben.
• Beim Scrollen fixiert. Das Bild bleibt stehen, der Inhalt zieht darüber hinweg. Auf dem Telefon ist der Effekt immer aus, dort ruckelt er. Deine Einstellung bleibt trotzdem gespeichert.
• Schleier. Eine Farbe oder ein Verlauf über dem Bild, plus Deckkraft von 0 bis 100 Prozent.

Der Schleier ist von Anfang an da

Sobald du ein Bild einsetzt, liegt ein dunkler Schleier mit 40 Prozent darüber. Ohne ihn steht dein Text direkt auf dem Foto und ist auf hellen Stellen kaum zu lesen. Du kannst die Farbe ändern, einen Verlauf nehmen oder die Deckkraft auf 0 stellen, wenn du das Bild wirklich pur willst.

Unter 40 Prozent bekommst du einen Hinweis am Regler. Ab 85 Prozent deckt der Schleier das Foto so weit ab, dass wir den Kontrast wirklich ausrechnen können, und dann sagen wir dir die Zahl.

Alternativtext gibt es hier nicht

Ein Hintergrundbild ist Schmuck, kein Inhalt. Ein Vorleseprogramm soll es überspringen und stattdessen den Text des Abschnitts vorlesen. Deshalb fragen wir hier nicht danach. Trägt dein Bild echte Information, nimm dafür einen Bild-Block im Abschnitt, und dort trägst du den Alternativtext ein.

Ladezeit

Wir liefern dein Hintergrundbild automatisch in der Größe aus, die das Gerät gerade braucht, und im Format WebP. Ein Foto, das als Datei 88 KB hat, kommt auf dem Telefon mit rund 7 KB an. Du musst dafür nichts einstellen.

Volle Breite

Der Haken Hintergrund über die volle Breite zieht die Farbe bis an beide Bildschirmränder. Der Inhalt bleibt trotzdem in der Spalte stehen.

Ohne den Haken endet die Farbe an der Inhaltsbreite, und links und rechts bleibt der Seitenhintergrund sichtbar. Genau das führt zu der Rückmeldung „da ist ein weißer Balken über meinem Abschnitt". Das ist der Seitenhintergrund, kein Fehler. Setz den Haken, dann ist er weg.

Polsterung und Textfarben

Polsterung oben/unten hat fünf Stufen: 0, S, M, L und XL. Sie bestimmt, wie viel Luft zwischen der Kante des Abschnitts und seinem Inhalt liegt. Ein Abschnitt ohne Polsterung sieht schnell aus wie ein Fehler.

Abstand außen oben/unten hat dieselben fünf Stufen und meint die Luft ZWISCHEN diesem Abschnitt und dem nächsten. In der Lücke siehst du den Hintergrund der Seite. Ohne Angabe stoßen zwei Abschnitte direkt aneinander, ohne Lücke, auch wenn einer davon über die volle Breite läuft.

Textfarben hat drei Stellungen: Theme, hell und dunkel. Damit stellst du alle Texte im Abschnitt gemeinsam um. Auf einem dunklen Verlauf wählst du hell, dann musst du nicht jeden Block einzeln umfärben. Blöcke mit einer eigenen Farbe behalten ihre.

Innenbreite

Inhaltsbreite hat vier Stellungen: Erbt, Schmal, Normal und Breit. Damit läuft ein Kopfbereich breit und das Formular darunter schmal, ohne dass du das Design des ganzen Funnels anfasst.

Zwei Dinge dazu:

• Erbt nimmt die Breite aus dem Design-Bereich. Das ist die Voreinstellung.
• Ein Abschnitt darf nur enger stellen, nie breiter. Steht der Funnel auf „Schmal", bleibt auch ein Abschnitt auf „Breit" innerhalb dieser Grenze.

Schmaler wird dabei nur der Inhalt. Der Hintergrund behält seine Breite, sonst würde er mitten auf der Seite abreißen.

Zweispaltige Abschnitte und die erste Frage auf der Startseite

Der Umschalter Spalten stellt einen Abschnitt von einer auf zwei Spalten. Damit baust du den Aufbau, den man von guten Landing Pages kennt: links die Aussage, rechts eine helle Karte mit der ersten Frage.

Warum das mehr Anfragen bringt

Der übliche Weg ist: Überschrift lesen, scrollen, Knopf finden, klicken, dann kommt die erste Frage. Das sind drei Entscheidungen, bevor überhaupt etwas passiert.

Steht die erste Frage schon auf der Startseite, entfällt das. Sie ist ohne einen einzigen Klick sichtbar und beantwortbar. Das ist die niedrigste Einstiegshürde, die es gibt, und eine beantwortete Frage ist bereits ein kleines Ja: wer einmal geklickt hat, klickt den zweiten Schritt deutlich eher.

Der Rest funktioniert wie auf jedem anderen Schritt: Die Antwort wird gespeichert, das Lead-Scoring zählt sie mit, eine Verzweigung an der Antwort führt zum passenden nächsten Schritt, und im CRM steht später der Antworttext und nicht ein Kürzel.

Zwei Dinge bleiben bewusst wie vorher:

• Die Startseite zählt nicht als Frage im Fortschrittsbalken. Sie ist eine Seite, kein Frage-Schritt.
• Der Knopf weiter unten auf der Seite bleibt sinnvoll. Wer erst liest und dann entscheidet, soll nicht wieder nach oben scrollen müssen.

Die Einstellungen

Umschalten verliert nichts. Deine bisherigen Blöcke liegen danach in der linken Spalte, die rechte ist leer. Schaltest du zurück auf eine Spalte, wird die rechte nicht angezeigt.

Auf dem Telefon

Zwei Spalten nebeneinander gibt es nur, wenn genug Platz ist. Darunter stehen sie untereinander, und Auf dem Telefon zuerst entscheidet, welche oben steht.

Der Builder schreibt unter den Abschnitt, welche Spalte auf dem Telefon zuerst kommt, damit du es beim Bauen siehst.

So baust du den Aufbau nach

1. Abschnitt einfügen, Spalten auf Zwei stellen.
2. Verhältnis auf 60/40 und Rechte Spalte auf Als Karte.
3. Auf dem Telefon zuerst auf Rechte Spalte.
4. Links: Überschrift, zwei bis drei Zeilen Text, darunter eine Kundenstimme.
5. Rechts: eine kleine Überschrift mit der Frage und darunter einen Block Auswahl mit drei bis vier Antworten.

Schneller geht es mit der Vorlage Solar-Potenzial-Check oder Produkt-Empfehlungs-Quiz: beide bringen den Aufbau fertig mit, du tauschst nur die Texte.

Was in einer Spalte nicht geht

Ein Abschnitt in einer Spalte ist nicht möglich, genau wie ein Abschnitt in einem Abschnitt. Beim Ziehen wird das verweigert.

Blöcke lassen sich frei zwischen den Spalten hin und her ziehen.

Was nicht geht

Ein Abschnitt in einem Abschnitt ist nicht möglich. Ziehst du einen Abschnitt, werden alle anderen Abschnitte für die Dauer des Zugs gesperrt und zeigen einen Hinweis. Zwei Ebenen reichen für jede Seite, die dieses Werkzeug baut.

Löschen und Duplizieren

Duplizieren kopiert den Abschnitt samt seinem Inhalt.

Entfernen stellt bei einem gefüllten Abschnitt eine Rückfrage mit zwei Antworten: Nur Abschnitt auflösen lässt die Blöcke an ihrer Stelle stehen und nimmt nur die Hülle weg. Die andere Antwort löscht den Abschnitt mit Inhalt.