Ankerlink mit Scroll erstellen

In diesem Leitfaden werden wir sehen, wie du einen Ankerlink mit Scrollen über die Plattform FRAMEWORK360 erstellen kannst.

Was ist ein Ankerlink-Scroll?

Ankerlink-Scrolls sind Links, die in der Seite oder im Menü vorhanden sind und beim Klicken ein Scrollen zu einem bestimmten Abschnitt auslösen.

Jetzt schauen wir uns in wenigen einfachen Schritten an, wie du deine Ankerlinks mit der Plattform FRAMEWORK360 erstellen kannst.

Schritt 1: Fügen wir ein Menü in die Seite ein

Das erste, was zu tun ist, wird sein, ein Menü in die Seite einzufügen, das wir mit Punkten füllen können, die beim Klicken die Seite zu dem Abschnitt bringen, den wir anzeigen möchten.

Zum Beispiel könnten wir einen Header erstellen, also einen Abschnitt, den wir auf allen Seiten unserer Website wiederholen möchten.

Um unseren Header zu erstellen, müssen wir zum Hauptmenü von FRAMEWORK360 gehen und die folgenden Punkte auswählen:

Inhalte > Globale Blöcke

Innerhalb des Eintrags Globale Blöcke werden wir einen Block erstellen, indem wir die Blocktypologie Kopfzeile auswählen, wie in der Abbildung gezeigt:

Screenshot Framework360 - Ankerlink mit Scrollen erstellen

Gut, jetzt haben wir unsere Kopfzeile erstellt, wir müssen nur noch unser Menü innerhalb der erstellten Kopfzeile hinzufügen.

Zuerst sollten wir auf den Eintrag Ziehen Sie einen Inhalt klicken, der in unserer Kopfzeile vorhanden ist.

Screenshot Framework360 - Ankerlink mit Scrollen erstellen

Jetzt erscheint der Bildschirm, auf dem wir den Block auswählen können, den wir einfügen möchten. Wir wählen den Block Navbar und ziehen ihn hinein.

Sobald wir den Block Navbar gezogen haben, wählen wir das zuvor erstellte Menü aus, das wir in den Block einfügen möchten.

Schermata Framework360 - Creare anchor link con scroll

 

Schritt 2: Fügen wir die Einträge in unser Menü ein

Um die Einträge in unser Menü hinzuzufügen, sollten wir auf den Punkt Menü  des Hauptmenüs der Plattform FRAMEWORK360 zugreifen und das Menü auswählen, das wir im vorherigen Schritt innerhalb der Navbar ausgewählt haben.

Gut, jetzt sind wir im Menü, das wir füllen möchten. Jetzt werden wir unsere Ankerlinks in das Menü einfügen.

WICHTIG!

Bei der Erstellung des Ankerlinks werden wir aufgefordert, einen Link einzufügen (wie in der Abbildung gezeigt), hier sollten wir den Link zur Sektion eingeben, auf die uns der Link führen soll, der Link muss mit einem # eingeleitet werden.

Die Wahl des Namens, der den Link bildet, liegt nach unserem Ermessen; in unserem Beispiel haben wir den folgenden Link verwendet: #sektion-1.

Behalte den Link im Kopf, den du eingibst , da dieser Link uns im nächsten Schritt wieder nützlich sein wird!

Sobald wir alle benötigten Ankerlinks eingefügt haben, bleibt uns nur noch, zu speichern.

Schritt 3: Verknüpfen wir den Ankerlink mit dem Abschnitt

Sobald wir unseren Link erstellt haben, müssen wir sicherstellen, dass die Seite beim Klicken auf den Link nach unten scrollt, um zum gewünschten Abschnitt zu gelangen.

Dafür müssen wir zur Seite gehen und auf das Rädchen der Zeile klicken, mit der wir unseren Ankerlink verknüpfen möchten, wie in der Abbildung gezeigt:

Jetzt sind wir im Menü angekommen, das es uns ermöglicht, die von uns ausgewählte Zeile zu ändern. Wir sollten zum Abschnitt Design, gehen, und sobald wir im Abschnitt Design sind, scrollen wir im Menü bis zu Attributen , wo wir den Punkt ID Element finden werden. Zusammenfassend solltest du die folgenden Schritte befolgen:

Design > Attribute > ID Element

An diesem Punkt müssen wir in das Feld ID Element den gleichen Link einfügen, den wir im vorherigen Schritt für die Erstellung des Anchor-Links eingefügt haben; auch hier muss der Link mit # beginnen. In unserem Beispiel erinnern wir uns, dass der Link folgender war: #sezione-1.

Jetzt ist das Spiel é gemacht!

Wir haben unseren Anchor-Link-Scroll erstellt, sodass jedes Mal, wenn wir auf den Link in der Header klicken, die Seite bis zur gewünschten Sektion scrollt.

Teilen Sie diesen Artikel in den sozialen Medien:

Erhalten Nachrichten und branchenspezifische Strategien aus der Welt des digitalen Marketings:

Keine Sorge, wir werden dir niemals Spam senden und deine Daten sicher aufbewahren.