Lesefortschritt:

Link auf Anker im Divi-Theme – Teil 2: Ankerziel knapp verfehlt

16. Januar 2021 | CSS-Stylesheet, Divi-Theme

Trick # 16 | Dieser Beitrag beinhaltet 315 Wörter. – Geschätzte Lesezeit: ca. 2 Minuten.

Hin und wieder trifft Divi das Ankerziel nur so halbwegs und scrollt nicht ganz an die richtige Stelle der Webseite. Falls dies bei Ihrer Word­Press-Site auch der Fall ist, empfehlen wir Ihnen diesen kleinen CSS-Hack.

Fügen Sie im CSS-Stylesheet Ihrer Website folgenden Code ein. Sie erreichen das Stylesheet unter Design/Customizer/Zusätzliches CSS.
#top, #ankerziel {
padding-top: 230px;
margin-top: -230px;
}

Zur Erklärung:

  • Die beiden IDs #top und #ankerziel ersetzen Sie mit den von Ihnen vergebenen Klassen.
  • Die beiden Werte in padding-top und margin-top sollten symmetrisch sein. Der eine Wert positiv, der andere negativ. So entstehen keine Lücken auf der angezeigten Website.
  • Zum Herausfinden der korrekten Werte für padding-top und margin-top orientieren Sie sich am besten an der Höhe des Headers. Dieser ist nämlich dafür verantwortlich, dass die Ankerziele teilweise zugedeckt werden.

 

Dieser CSS-Code ist ein optionales Supplement zum Teil 1 des Anker-Link-Tricks: Link auf Anker im Divi-Theme – Teil 1: So einfach geht’s.

Werbung

Dynamische Inhalte in Divi-Modulen publizieren

Die Divi-Module können nicht nur eingegebene Texte anzeigen; wenn gewünscht bedienen sie sich auch in den weiteren Beitragsfeldern oder stellen Content aus Custom-Taxonomies des jeweiligen Beitrags dar. Die Anzeige dieser dynamischen Daten ...
Keine Inhalte gefunden.

Werbung

 

Pin It on Pinterest

Share This
Überblick über den Datenschutz

Diese Website verwendet Cookies, damit wir Ihnen die bestmögliche Benutzererfahrung bieten können. Cookie-Informationen werden in Ihrem Browser gespeichert und dienen dazu, Sie wiederzuerkennen, wenn Sie auf unsere Website zurückkehren, und unserem Team zu helfen, zu verstehen, welche Bereiche der Website Sie am interessantesten und nützlichsten finden.