SOP: Landingpages in Funnelspot für die mobile Ansicht optimieren

Ziel

Diese SOP beschreibt, wie du eine bestehende Seite in Funnelspot speziell für die mobile Ansicht optimierst.
Dabei werden Layout, Schriftgrößen, Abstände und einzelne Elemente so angepasst, dass sie auf Smartphones optimal dargestellt werden – ohne die Desktop-Version zu verändern.

Voraussetzungen

• Bestehender Funnel in Funnelspot

• Zugang zum Funnelspot Page Builder

• Alle Inhalte für die Desktop-Version sind bereits fertig

Grundprinzip

Funnelspot unterscheidet zwischen:

• Desktop-Elementen (Symbol: Monitor)

• Mobile-Elementen (Symbol: Handy)

Jedes Element kann für Desktop, für Mobile oder für beide Ansichten aktiviert werden.
Für echtes Responsive-Design ist es oft notwendig, Elemente zu duplizieren und jeweils nur auf einer Ansicht aktiv zu lassen.

Schritt-für-Schritt-Anleitung

1. Seite öffnen

1. Logge dich in Funnelspot ein.

2. Gehe zu „Funnel“.

3. Wähle den gewünschten Funnel.

4. Öffne die gewünschte Seite mit „Bearbeiten“.
   
   
   

2. Geräteansicht umschalten

1. Oben im Editor findest du zwei Ansichten:

   • Monitor-Symbol = Desktop

   • Handy-Symbol = Mobile

2. Wechsle in die Mobile-Ansicht, um das Endergebnis zu kontrollieren.
   
   

3. Bestehende Sektionen prüfen

1. Öffne links den Bereich „Schichten“.

2. Prüfe, welche Elemente aktuell:

   • nur Desktop

   • nur Mobile

   • oder beides anzeigen

3. Lösche ggf. Standard-Mobile-Sektionen, die du nicht brauchst.
   
   

4. Desktop-Elemente für mobile Nutzung duplizieren

1. Wähle das Element aus (z. B. Text oder Bild).

2. Klicke auf Duplizieren.

3. Lege fest:

   • Original → nur Desktop anzeigen

   • Kopie → nur Mobile anzeigen

4. Jetzt kannst du die mobile Version unabhängig anpassen.
   
   

   

5. Mobile Darstellung anpassen

Typische Anpassungen:

Du erkennst mobile-spezifische Einstellungen an dem Handy-Symbol im Editor.

6. Reihenfolge gezielt anpassen (mobile-only)

Wenn du Bilder oder Texte in der mobilen Version an eine andere Stelle verschieben willst:

1. Kopiere das Element.

2. Setze die Kopie auf „Nur Mobile“.

3. Verschiebe es an die gewünschte Stelle.

4. Das ursprüngliche Element bleibt für Desktop unverändert.

7. Finaler Check

1. Oben in der Navigation Desktop-Ansicht kontrollieren.

2. Mobile Ansicht erneut prüfen.

3. Speichern & veröffentlichen.

Best Practices

• Immer zuerst Desktop fertig bauen
  → Dann auf mobile Version optimieren

• Nur notwendige Elemente duplizieren

• Mobile Schriftgrößen 2–4 Punkte kleiner wählen

• Bilder in Mobile oft einspaltig und schmaler

• Auf Abstand oben/unten achten (Buttons, Headlines)

Häufige Fehler & Lösungen