HILFE - SUPPORT

Scrollen Sie zu Elementen oder Abschnitten auf Websites oder in Funnels

Dieser Artikel zeigt Ihnen, wie Sie Schaltflächen, Links oder Menüpunkte automatisch zu bestimmten Abschnitten Ihrer Website oder Funnel-Seiten scrollen lassen. Dies verbessert die Benutzerfreundlichkeit und sorgt für eine reibungslose Navigation.

Was ist Scroll to Element?

Mit der Scroll-to-Element-Funktion können Sie jedes anklickbare Element mit einem bestimmten Abschnitt einer Seite verknüpfen. Dies macht Ihre Seiten dynamischer und benutzerfreundlicher, insbesondere bei Landingpages oder Inhalten im Langformat.

Hauptvorteile von „Zum Element scrollen“

Wenn Sie wissen, wie Sie Scroll-to-Aktionen verwenden, können Sie die Benutzerabläufe optimieren und nahtlose Interaktionen erstellen.

  • Navigationssteuerung: Leiten Sie Benutzer ohne Neuladen zu bestimmten Abschnitten der Seite weiter.

  • Sauberere UX: Hilft, die Absprungrate zu reduzieren, indem Benutzer flüssig durch den Inhalt geführt werden.

  • Benutzerdefinierte Interaktion: Funktioniert für Schaltflächen, Links und Navigationsmenüs.

  • Optimiert für CTAs: Ideal für Schaltflächen wie „Zu den Preisen springen“ oder „Mehr erfahren“.

  • Mobilfreundlich: Scroll-to funktioniert auch geräteübergreifend reibungslos.

Einrichten des Scrollens zum Element

Erfahren Sie, wie Sie mithilfe einer einfachen, selektorbasierten Verknüpfungsmethode zu einem bestimmten Abschnitt scrollen. Nachdem Sie den Selektor kopiert haben, können Sie ihn mit Text, Schaltflächen oder Menüelementen verwenden.

Schritt 1:  Kopieren Sie den CSS-Selektor

Jede Scroll-to-Einrichtung beginnt mit dem Abrufen des Selektors des Abschnitts, zu dem Sie scrollen möchten. Sie fügen diesen Selektor in Schritt 2 am Ende Ihres Links ein.

  1. Öffnen Sie Ihren Funnel oder Ihre Website im Builder.

  2. Klicken Sie auf den Abschnitt, zu dem Sie blättern möchten.

  3. Gehen Sie im rechten Bereich zur Registerkarte „Erweitert“ .

  4. Kopieren Sie den im Feld „CSS-Selektor“ angezeigten Wert .


Schritt 2: Wählen Sie eine Scroll-Methode

Nachdem Sie nun über den CSS-Selektor verfügen, wählen Sie eine der folgenden Methoden aus, um das Bildlaufverhalten zu aktivieren, wenn Benutzer klicken.


Methode 1:  Hyperlink-Text zu einem Abschnitt

Wandeln Sie Text mithilfe des kopierten Selektors in einen anklickbaren Bildlauflink um.

  1. Markieren Sie den gewünschten Text.

  2. Klicken Sie in der Formatierungssymbolleiste auf das Link-Symbol .

  3. Geben Sie die vollständige URL Ihrer Seite sowie den kopierten CSS-Selektor ein. (Beispiel: www.yourdomain.com/ #section_abc12 )

Methode 2:  Verwenden Sie eine Schaltfläche mit einem URL-Link

Blättern Sie zu einem Abschnitt, indem Sie einer Schaltfläche eine direkte URL zuweisen.

  1. Wählen Sie die Schaltfläche im Builder aus.

  2. Klicken Sie unter „Button-Aktionen“ auf das Dropdown-Menü „ Link zu“  und wählen Sie „Website-URL“ aus .

  3. Geben Sie die vollständige URL Ihrer Seite sowie den kopierten CSS-Selektor ein. (Beispiel: www.yourdomain.com/ #section_abc12 )

Methode 3: Verwenden Sie eine Schaltfläche mit der Aktion „Zum Element scrollen“

Blättern Sie mithilfe des integrierten Bildlaufverhaltens von Pilotly.io zu einem Abschnitt.

  1. Wählen Sie die Schaltfläche im Builder aus.

  2. Klicken Sie unter „Button-Aktionen“ auf das Dropdown-Menü „Link zu“  und wählen Sie „Zum Element scrollen“ aus .

  3. Wählen Sie mithilfe der Dropdown-Liste den Abschnitt aus, zu dem die Schaltfläche scrollen soll.

Methode 4: Scrollen eines Navigationsmenüelements

Navigationsmenüs können auch so konfiguriert werden, dass sie zu einem Abschnitt der Seite scrollen.

  1. Wählen Sie das Navigationsmenü .

  2. Klicken Sie auf die drei Punkte neben einem Menüelement.

  3. Ändern Sie das Feld „Gehe zu“ in „Gehe zur Website-URL“ .

  4. Geben Sie die vollständige URL Ihrer Seite sowie den kopierten CSS-Selektor ein. (Beispiel: www.yourdomain.com/ #section_abc12 )

  5. Klicken Sie auf „Senden“ .

Häufig gestellte Fragen

F: Kann ich zwischen verschiedenen Trichterschritten scrollen?
Nein. Scrollen funktioniert nur auf derselben Seite.

F: Funktioniert dies auch auf Mobilgeräten?
Ja, die Scrollfunktion funktioniert auf allen Geräten.


F: Mein Scrollen funktioniert nicht. Was soll ich tun?
Überprüfen Sie, ob Ihr Selektor korrekt ist und mit beginnt#. Aktualisieren Sie die Seite und testen Sie erneut.

F: Was passiert, wenn mehrere Abschnitte denselben CSS-Selektor haben?
Nur die erste Übereinstimmung wird verwendet. Stellen Sie sicher, dass jedes Scrollziel einen eindeutigen Selektor hat.