Funnel für Mobile optimieren

Ziel

In diesem Artikel erfährst du, wie du eine Landingpage für mobile Geräte optimierst. Du lernst, wie der Seitenaufbau in Sektionen funktioniert, wie du zwischen Desktop- und Mobile-Ansicht wechselst und wie du beide Versionen unabhängig voneinander gestaltest.

Warum die Mobile-Version entscheidend ist

Bei einem Webinar kommen erfahrungsgemäß mindestens 80 Prozent deines Traffics über mobile Geräte. Wer eine Anzeige auf Instagram, Facebook, YouTube oder Google sieht, klickt sie in der Regel vom Handy aus an.

Wir haben oft erlebt, dass eine Landingpage in der Desktop-Version hervorragend aussieht, die Mobile-Version aber vernachlässigt wurde. Das kostet dich den größten Teil deines Traffics. Widme der Mobile-Ansicht also mindestens genauso viel Aufmerksamkeit wie der Desktop-Version.

Voraussetzungen

• Eine Landingpage, die du im Page Builder bearbeiten kannst
• Die Desktop-Version sollte fertig gestaltet sein – die Mobile-Optimierung ist der zweite Schritt

Wie eine Seite aufgebaut ist

Eine Landingpage besteht aus Sektionen – zum Beispiel eine für den Header und eine für den Bereich above the fold. Jede Sektion enthält Reihen und darin Spalten (Columns). In den Spalten liegen die einzelnen Elemente wie Headlines, Subheadlines oder Bilder.

Diese Struktur ist die Grundlage für alles Weitere: Sichtbarkeit und Anordnung stellst du auf Ebene der Sektionen ein.

Schritt-für-Schritt Anleitung

1. Seite im Page Builder öffnen

Pfad: Menüleiste → Sites → Funnel → Edit in a New Tab

1. Öffne unter Sites deinen Funnel und wähle den Step aus
2. Klicke auf den Pfeil neben Edit und wähle Edit in a New Tab

2. Seitenstruktur über die Layer ansehen

Pfad: Page Builder → Layers → Page

1. Klicke oben auf Layers
2. Öffne den Bereich Page

Du siehst alle Sektionen deiner Seite und kannst sie aufklappen, um Reihen, Spalten und Elemente zu sehen. Klickst du eine Sektion an, wird sie auf der Seite grün markiert.

Ein Smartphone-Symbol an einer Sektion bedeutet: Diese Sektion ist nur in der Mobile-Ansicht sichtbar. Fehlt es, erscheint die Sektion in beiden Ansichten.

3. In die Mobile-Ansicht wechseln

Pfad: Page Builder → Symbole oben in der Leiste

1. Klicke oben auf das Smartphone-Symbol für den Mobile Mode

Es gibt drei Ansichten: Desktop Mode, Tablet Mode und Mobile Mode. In der Praxis sind vor allem Desktop und Mobile relevant.

In der Mobile-Ansicht stehen Elemente, die auf dem Desktop nebeneinander liegen, automatisch untereinander.

4. Sektion duplizieren

Pfad: Sektion auswählen → Aktionsmenü → Clone

1. Wähle die Sektion aus, die du für mobil separat gestalten willst
2. Öffne das Aktionsmenü der Sektion und klicke auf Clone

Die Sektion liegt nun zweimal auf der Seite. Im nächsten Schritt legst du fest, welche Kopie wo erscheint.

5. Sichtbarkeit festlegen

Pfad: Sektion auswählen → Styles → Visibility

1. Wähle die Sektion aus und öffne rechts den Reiter Styles
2. Lege unter Visibility fest, in welchen Ansichten die Sektion erscheinen soll
3. Wiederhole das für die duplizierte Sektion mit der jeweils anderen Einstellung

Ergebnis: Eine Sektion erscheint nur auf dem Desktop, die andere nur auf dem Smartphone. Beide kannst du jetzt unabhängig voneinander gestalten.

6. Alternative: dieselbe Sektion mit eigenen Werten für Mobile

Pfad: Mobile Mode → Element auswählen → General

1. Wechsle in den Mobile Mode
2. Wähle das Element aus und öffne rechts den Reiter General
3. Passe zum Beispiel die Schriftgröße an

Ein Phone-Symbol neben der Einstellung zeigt dir, dass der Wert nur für die Mobile-Ansicht gilt. Setzt du die Schriftgröße mobil auf 10, bleibt sie in der Desktop-Version bei ihren ursprünglichen 16 Pixel.

So kannst du dieselbe Sektion in beiden Ansichten verwenden und trotzdem unterschiedlich darstellen.

Unsere empfohlene Vorgehensweise

1. Baue die Seite zuerst vollständig in der Desktop-Version
2. Dupliziere die Sektion, die mobil anders aussehen soll, über Clone
3. Stelle das Original auf nur Desktop und die Kopie auf nur Mobile
4. Gestalte die Mobile-Kopie passend für das Smartphone

Am Ende haben beide Versionen denselben Inhalt, unterscheiden sich aber in der Anordnung. So erhältst du praktisch zwei individuell gestaltete Landingpages, die du unabhängig voneinander bearbeiten kannst.