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:
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.
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.
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.
