gRDV Anchor Transition

Beschreibung

Ankerlinks sind nützlich. Der anschließende plötzliche Sprung oder das schnelle sichtbare Scrollen sind es häufig nicht.

Gestalte standardkonforme Ankerlinks als ruhigen visuellen Übergang – unabhängig davon, ob sie mit dem Block-Editor, einem Theme oder einem Page-Builder erstellt wurden.

Ganz gleich, ob der Browser sofort springt oder ein Theme sichtbar durch die Seite rast: gRDV Anchor Transition verbirgt diese ablenkende Bewegung hinter einem konfigurierbaren visuellen Übergang. Die aktuelle Ansicht wird abgedeckt, der Browser wechselt im Hintergrund sofort zum Ziel und der neue Abschnitt wird eingeblendet. Besucher gelangen an die erwartete Stelle, ohne dabei zuzusehen, wie die gesamte Seite vorbeirauscht.

Das funktioniert bei Links auf derselben Seite, bei Links zu Ankern auf einer anderen internen Seite und bei Nach-oben-Buttons. Es sind weder ein Cloud-Konto noch ein externer Dienst oder ein Page-Builder-spezifisches Widget erforderlich.

Warum gRDV Anchor Transition verwenden?

• Ersetze abrupte Ankersprünge und schnelle Scroll-to-Anchor-Animationen durch einen ruhigeren, bewusst gestalteten Übergang.
• Bewahre bei langen Landingpages, Onepagern, Inhaltsverzeichnissen und Funktionsnavigationen ein stimmiges visuelles Gesamtbild.
• Verwende denselben Effekt für Anker auf der aktuellen Seite und für Ziele auf anderen internen Seiten.
• Nutze einen optionalen Abstand, damit Sticky- oder fixierte Header das Ziel nicht verdecken.
• Verwende einen erkannten Nach-oben-Button des Themes oder Page-Builders weiter.
• Erstelle und gestalte einen eigenen Nach-oben-Button, wenn die Website keinen bereitstellt.
• Finde typische Ankerfehler direkt auf der ausgegebenen Seite, bevor Besucher darauf stoßen.

Ein Übergang, der zur Website passt

Konfiguriere den Effekt unter Einstellungen > Anchor Transition. Passe Folgendes an:

• Abdeckdauer, Haltezeit und Einblenddauer.
• Maximale Deckkraft der Überlagerung.
• Einfarbiger Hintergrund oder linearer Farbverlauf.
• Übergangsverlauf und Verhalten auf Mobilgeräten.
• Automatische Erkennung fixierter Header und einstellbarer Abstand zwischen Ankerziel und oberem Seitenrand.
• Verhalten bei Ankern auf derselben Seite, seitenübergreifenden Ankern und Nach-oben-Buttons.

Der Übergang besteht aus drei klaren Phasen:

1. Abdecken: Die Überlagerung wird eingeblendet und verbirgt die aktuelle Ansicht.
2. Wechseln: Der Browser positioniert das Ziel sofort, während die Seite abgedeckt ist. Eine optionale Haltezeit kann eine bewusste Pause ergänzen.
3. Einblenden: Die Überlagerung wird ausgeblendet und gibt den Blick auf das Ziel frei.

Beginne mit den vorgegebenen Standardwerten und passe anschließend Abdeck- und Einblenddauer gemeinsam an. Eine kurze Haltezeit wirkt direkt; eine längere erzeugt einen deutlicher wahrnehmbaren Szenenwechsel.

Dein eigener Nach-oben-Button, wenn er benötigt wird

WordPress selbst fügt keinen allgemeinen schwebenden Nach-oben-Button hinzu, einige Themes und Page-Builder stellen jedoch einen bereit. Das Plugin sucht zunächst nach einem erkannten vorhandenen Button und führt ihn über den konfigurierten Übergang aus.

Wenn keiner vorhanden ist, kann ein optionaler Ersatz-Button mit folgenden eigenen Einstellungen erstellt werden:

• Positionierung links oder rechts.
• Horizontaler und vertikaler Randabstand in Pixeln.
• Hintergrund- und Symbolfarbe.
• Pfeil-, Winkel-, Dreieck- oder Doppelpfeil-Symbol.
• Runde, abgerundete oder eckige Form.
• Scrollstrecke, ab der der Button sichtbar wird.

Pixelabstände helfen dabei, den Button von Cookie-Steuerelementen, Chat-Bubbles und anderen schwebenden Widgets freizuhalten. Die Gestaltungsoptionen wirken sich nur auf den vom Plugin bereitgestellten Ersatz-Button aus; vorhandene Buttons von Themes und Page-Buildern behalten ihr eigenes Design.

Finde fehlerhafte Anker vor deinen Besuchern

Administratoren erhalten in der Werkzeugleiste der Website den Eintrag „Ankerprüfung“. Dieser untersucht die Seite so, wie sie tatsächlich von WordPress, dem aktiven Theme und dem Page-Builder ausgegeben wird. Die Prüfung meldet:

• Links, deren Ziel-ID auf der aktuellen Seite fehlt.
• Doppelte IDs auf der ausgegebenen Seite.
• IDs, die sich nur durch Groß- und Kleinschreibung unterscheiden.
• Leere ID-Attribute.
• Leere Hash-Links.
• Ungültig codierte Ankerlinks.

Betroffene Elemente können direkt auf der Seite hervorgehoben werden. Die Prüfung bearbeitet keine Inhalte, durchsucht nicht die gesamte Website und speichert keinen Bericht.

Für ausgegebenes HTML entwickelt, nicht für einen bestimmten Page-Builder

Das Plugin arbeitet mit standardmäßigen HTML-Ankerlinks und IDs. Dadurch eignet es sich für den Block-Editor und Block-Themes, klassische Themes sowie Page-Builder wie Divi, Elementor, Bricks, Breakdance, Beaver Builder, Oxygen und WPBakery.

Gängige Tabs, Akkordeons, Pop-ups, responsive Navigationselemente und Bearbeitungsmodi von Page-Buildern behalten ihr ursprüngliches Verhalten. Einzelne Links oder Komponenten können außerdem mit der Klasse grat-no-transition, dem Attribut data-gr-anchor-transition="off" oder einem eigenen CSS-Selektor ausgeschlossen werden.

Bewusst lokal

Das Plugin erfasst, überträgt und speichert keine Besucherdaten dauerhaft. Es verwendet weder Cookies noch Analysedienste, externe APIs, CDNs oder extern geladene Ressourcen.

Bei einem Link zu einem Anker auf einer anderen internen Seite legt das Plugin vorübergehend ausschließlich Zielpfad, Abfrage, Anker und Zeitstempel im Sitzungsspeicher des Browsers ab. Der Eintrag wird entfernt, sobald die Zielseite ihn ausliest, und läuft nach zehn Sekunden ab. Ergebnisse der Ankerprüfung verbleiben im aktuellen Browser-Tab des Administrators und verschwinden, sobald das Panel oder die Seite geschlossen wird.

Barrierefreiheit

Das Plugin berücksichtigt die Einstellung prefers-reduced-motion des Besuchers und überspringt den visuellen Übergang, wenn reduzierte Bewegung gewünscht wird. Nach der Ankernavigation wird der Tastaturfokus auf das Ziel verschoben. Der ersatzweise Nach-oben-Button besitzt eine barrierefreie Beschriftung und einen sichtbaren Tastaturfokus. Das Plugin erhebt keinen Anspruch darauf, die Einhaltung von Barrierefreiheitsanforderungen zu zertifizieren.