Möchten Sie Ihre Besucher mit nur einem Klick direkt zu einem bestimmten Teil Ihrer Seite führen, wie z. B. Produktdetails, FAQs oder ein Kontaktformular? Genau das ist es Ankerlinks sind für.
In diesem Handbuch erfahren Sie, wie Sie Smooth-Scrolling-Links erstellen in GemPages Version 7, indem Sie Schaltflächen, Bilder oder Textelemente verwenden, um zu jedem Abschnitt Ihrer Seite zu scrollen – keine Codierung erforderlich.
Was ist ein Ankerlink?
An Ankerlink (auch „Scroll-to-Link“ genannt) ermöglicht es Ihnen, Besucher zu einem bestimmten Abschnitt derselben Seite zu schicken – ohne die Seite neu zu laden oder Benutzer zum manuellen Scrollen zu zwingen.
GemPages vereinfacht die Einrichtung dieser Funktion, indem es Ihnen ermöglicht, jedes anklickbare Element (wie eine Schaltfläche oder Überschrift) mit einem Abschnitts-ID auf der Seite.
Bevor Sie beginnen: Ermitteln Sie die Abschnitts-ID
Um einen Ankerlink zu erstellen, benötigen Sie zunächst den Abschnitts-ID des Ziels, zu dem die Nutzer scrollen sollen.
So finden Sie die Abschnitts-ID:
- Bewegen Sie den Mauszeiger über den Abschnitt, auf den Sie im Editor verlinken möchten.
- Klicken Sie mit der rechten Maustaste auf den Abschnitt.
- Wählen „Klasse kopieren“ Aus dem Dropdown-Menü.
- Sie erhalten eine Klasse wie .gp0XsMH_MS. Um es in eine ID umzuwandeln, ersetzen Sie einfach das Punkt (.) mit einem Hash (#).
Ejemplo: .gp0XsMH_MS → #gp0XsMH_MS
Sie verwenden diese Abschnitts-ID beim Einrichten des Links.
Wie man Ankerlinks in GemPages erstellt
In GemPages können Sie Ankerlinks auf zwei einfache Arten erstellen:
- Verwendung einer Schaltfläche oder eines Bildes: Sie können eine Schaltfläche, Bild oder Hero-Banner in einen anklickbaren Link, der Besucher zu einem bestimmten Abschnitt auf derselben Seite weiterleitet. Dies eignet sich besonders für klare Handlungsaufforderungen wie „Produktdetails ansehen“, „Zu den FAQs“ oder „Kontaktieren Sie uns“.
- Verwendung von Text (Ankertext): Sie können auch direkt Ankerlinks hinzufügen Text innerhalb von Überschriften oder TextblöckenWenn Besucher auf den Text klicken, scrollt die Seite zum entsprechenden Abschnitt. Diese Option eignet sich gut für lange Seiten, Inhaltsverzeichnisse oder dezente Navigationslinks.
Die einzelnen Schritte der jeweiligen Methode werden im Folgenden erläutert:
Option 1: Erstellen eines Ankerlinks mithilfe einer Schaltfläche oder eines Bildes
Befolgen Sie diese Schritte, um eine Schaltfläche oder ein Bild zu erstellen, auf das Benutzer klicken können, um zu einem bestimmten Teil Ihrer Seite zu scrollen. Diese Anweisungen gelten für das Schaltflächenelement, können aber auch für die Hero-Banner- und Bildelemente verwendet werden.
Schritt 1: Zurück Nach Shopify-Admin > Apps und wählen Sie GemPages-Ersteller zugreifen GemPages Dashboard. Navigieren Sie zum Abschnitt „Seiten“ und wählen Sie Ihre bevorzugte Vorlage aus, um auf den Editor zuzugreifen.
Schritt 2: Ziehen Sie eine Taste Element auf Ihre Seite.
Schritt 3: Klicken Sie auf das Schaltflächenelement, um die Konfiguration in der linken Seitenleiste anzuzeigen. Aktivieren Sie die Schaltfläche „Link“.
Schritt 4: Aktion „Nach Klick“ auswählen: Wählen Sie eine Aktion aus, die ausgelöst wird, wenn auf den Link geklickt wird:
- Seite öffnen: Eine andere Seite/URL öffnen.
- Blättern Sie zu: Zu einem bestimmten Abschnitt auf der Seite blättern.
- Popup öffnen: Öffnen Sie ein bestimmtes Popup.
- E-Mail schicken: Senden Sie eine E-Mail an eine bestimmte E-Mail-Adresse.
- Telefonieren: Tätigen Sie einen Telefonanruf, während Sie auf Ihrem Mobiltelefon oder Tablet surfen.
In diesem Fall wählen wir Blättern Sie zu.
Schritt 5: Fügen Sie das ein Abschnitts-ID Sie haben es zuvor kopiert, oder wählen Sie ein Ziel aus der Liste aus.
Schritt 6: Schlagen Sie das Blau Gespeichert Klicken Sie anschließend auf Gespeichert als auch Veröffentlichen um das Ergebnis auf der Live-Seite zu überprüfen.
Ihre Schaltfläche scrollt jetzt beim Klicken reibungslos zum Abschnitt.
Option 2: Einen Ankerlink mithilfe von Text erstellen (Ankertext)
Wenn Sie lieber Textlinks anstelle von Schaltflächen oder Bildern verwenden möchten, können Sie Ankerlinks direkt in Textelementen erstellen.
Schritt 1:: In dem GemPages Dashboard, öffnen Sie Ihre Vorlage und geben Sie die Herausgeber.
Schritt 2:: In dem Herausgeber, ziehen Sie ein textbasiertes Element auf Ihre Seite, z. B. ein Überschriftenelement.
Schritt 3:: Wählen Sie den Text aus, dem Sie einen Ankerlink hinzufügen möchten, um das Inline-Textfeld zur weiteren Anpassung auszulösen.
Schritt 4:: Klicken Sie auf das Kettensymbol, um ein eigene URL Feld.
Schritt 5:: Fügen Sie die ein Abschnitts-ID des Zielortes in das Feld ein und klicken Sie auf Link zu dieser URL.
Schritt 6:: Gespeichert als auch Veröffentlichen die Seite, um das Ergebnis auf Ihrer Live-Seite zu überprüfen.
Häufig gestellte Fragen
1. Kann ich einen Ankerlink direkt zu einem Element (z. B. einer Schaltfläche oder einem Bild) erstellen?
Derzeit funktionieren Ankerlinks in GemPages nur mit Abschnitte or Reihen, nicht mit einzelnen Elementen.
Wenn Sie direkt auf ein Element verlinken möchten, müssen Sie dieses Element in einer Zeile platzieren. Kopieren Sie anschließend die Klasse der Zeile (und konvertieren Sie sie in eine ID), um sie als Scrollziel zu verwenden.
2. Warum scrollt mein Ankerlink nicht zum richtigen Element?
Meistens liegt es daran, dass sich das Element nicht in einem Abschnitt oder einer Zeile befindet. Stellen Sie sicher, dass das Zielelement in einer Zeile eingeschlossen ist, und verwenden Sie die Abschnitts-ID dieser Zeile für reibungsloses Scrollen.
3. Kann ich Ankerlinks für Popups oder externe URLs verwenden?
Nein. Ankerlinks sind nur für das Scrollen innerhalb derselben Seite gedacht. Für Aktionen wie das Öffnen eines Popups oder das Verlinken auf eine externe Seite sollten Sie die entsprechenden Optionen im Menü „Aktion nach Klick“ nutzen.
4. Kann ich eine Schaltfläche so konfigurieren, dass sie zum Ende meiner Seite scrollt?
Vielen Dank für Ihre Kommentare