CBK-005 Text

Eine kurze Anleitung rund um den Ankerpunkt für einzelne Seiten. Hier sind genaue Einstellungen zu beachten.

Direkt in Aktion testen? Auf zum Beispielanker

Zunächst muss für die ausgewählte Seite festgelegt werden, welcher Seitenteil zu welchem neuen Abschnitt springen soll. Dieser Ziel-Abschnitt wird zuerst bearbeitet.

Im Zielabschnitt sollte am besten ganz vorne der Ziel-Anker festgelegt sein. Zur einfacheren Handhabung und späterem Wiederfinden des Anchors empfiehlt sich ein Wort oder mehrere Wörter zu markieren mit dem Anchor.

Anschließend in den Formatierungsoptionen der Text-Komponente das Anchor-Symbol auswählen.

Es öffnet sich ein Feld in dem eine sogenannte Anchor ID vergeben werden muss. Diese ID sollte kleingeschrieben sein sowie kurz und knapp.

Falls mehrere Anchor-IDs vergeben werden für mehrere Absprünge dürfen sich die Anchor-IDs für die jeweilige Seite nicht doppeln. Das heißt, eine Anchor-ID für die jeweilige Seite ist einzigartig.

In diesem Beispiel heißt die Anchor-ID: beispielanker

Nach der Vergabe der Anchor-ID geht es zurück zu dem Abschnitt, von dem der Absprung erfolgt. Der Absprung wird über einen Link gesetzt. Anstelle einer internen oder externen Seite, wird hier jedoch die Anchor-ID als Linkpfad eingetragen zusammen mit einem Hashtag. In diesem Beispiel: #beispielanker

Der Link zur Anchor-ID wird gespeichert. Anschließend ist der Absprung direkt bereit. 

Bei Klick auf den Absprung wird die URL der Seite am Ende per Parameter um den Hashtag und die Anchor-ID erweitert.

Wichtig

• Die Anchor-ID hat keinen Hashtag, ist dafür kurz, knapp, kleingeschrieben
• Der Link zur Anchor-ID muss einen Hashtag enthalten und exakt wie die Anchor-ID geschrieben sein.

Eine Verankerung kann jederzeit gelöst werden. Dazu über die Text-Komponente den gesetzten Anker über das Anker-Symbol markieren und entfernen. 

Wichtig ist hierbei alle Querverweise von oder zu diesem Anchor ebenfalls zu entfernen. Es entstehen sonst Logiklücken in der Userführung, d.h. die Verlinkung läuft ins Leere.

• Absprung 1
• Absprung 2

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 

Hier führt der erste Absprung hin! Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 

Hier führt der zweite Absprung hin. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 

Dieser Text ist ziemlich lang. Wir wollen nicht scrollen, sondern direkt wieder zum Anfang der Seite.

Das geht ganz leicht über diesen Sprung nach oben.