Trick # 190 | Dieser Beitrag beinhaltet 650 Wörter. – Geschätzte Lesezeit: ca. 4 Minuten.
Das Blog-Modul des Divi-Themes verlinkt standardmässig den Titel des Beitrags mit der Detailseite dessen, die Kategorie mit der entsprechenden Übersicht und den/die AutorIn mit der persönlichen Übersicht des/der Verfasserin. Das ist oft nützlich – es gibt aber Situationen, in welchen man dies nicht möchte. Mit wenig CSS-Code ist auch dies möglich.
Wir beginnen mit dem Hinzufügen einer benutzerdefinierten CSS-Klasse zum Divi Blog-Modul. Die Verwendung einer solchen benutzerdefinierten Klasse stellt sicher, dass unser Code nur das betreffende Modul beeinflusst und in anderen Blog-Module auf Ihrer Website nicht greift.
Bearbeiten Sie also das betreffende Divi-Blog-Modul und klicken Sie im Tab «Erweitert» auf «CSS-ID & Klassen». Unter CSS-Klasse geben Sie «blog-no-links» ein.
Nun benötigen Sie ein paar Zeilen CSS-Code. Diesen kopieren Sie in das Stylesheet Ihrer Website – im Backend unter Design/Customizer/Zusätzliches CSS:
/* Link im TITEL deaktivieren */
.blog-no-links .et_pb_post .entry-title a {
pointer-events: none;
}
/* Link auf AUTOR-IN deaktivieren */
.blog-no-links .et_pb_post .post-meta span.author.vcard a {
pointer-events: none;
}
/* Link auf KATEGORIE deaktivieren */
.blog-no-links .et_pb_post .post-meta a {
pointer-events: none;
}Der vollständige Code schaltet den Link im Beitragstitel, den AutorInnen-Link und die Kategorie-Verlinkung ab. Wenn Sie nicht alle, sondern nur einzelne Verlinkungen unterbinden möchten, lassen Sie einfach den CSS-Block weg, der nicht zu deaktivierende inks anspricht.
Den Effekt des kleinen Hacks zeigen wir Ihnen hier:
Standard:
Textlinks highlighten und beim hovern animieren
Links in Lauftexten sind beliebt, um weiterführende Infos bereitzustellen. Mit ein wenig CSS lassen sich solche Verknüpfungen auch ganz einfach hervorheben und sogar animieren, wenn der Mauszeiger über den Link bewegt wird.
Deaktivierte Links:
Textlinks highlighten und beim hovern animieren
Links in Lauftexten sind beliebt, um weiterführende Infos bereitzustellen. Mit ein wenig CSS lassen sich solche Verknüpfungen auch ganz einfach hervorheben und sogar animieren, wenn der Mauszeiger über den Link bewegt wird.
Ein Zusatztipp: Den obigen CSS-Code können Sie natürlich noch gut anpassen, damit die Links auch optisch wie normaler Text daherkommen.
Werbung
Werbung
