Lesefortschritt:

    Blog-Modul-Special #2: Gesamte Beitragsvorschau im Divi-Blog-Modul verlinken

    24. Dezember 2022 | CSS-Stylesheet, Divi-Theme

    Trick # 193 | Dieser Beitrag beinhaltet 0 Wörter. – Geschätzte Lesezeit: ca. 0 Minuten.

    Normalerweise wird im Blog-Modul des Divi-Themes nur der Titel, das Bild und (sofern vorhanden) der Read-More-Link mit einer Verknüfung auf den vollständigen Beitrag verlinkt. Das lässt sich aber soweit ändern, dass der gesamte Teaser mit dem Beitrag verlinkt ist.

    Dieses Snippet nimmt den Titel, der normalerweise auf den Beitrag verlinkt, und erstellt einen unsichtbaren Bereich über die gesamte Breite und Höhe des Blogbeitrags. Technisch gesehen wird der Titellink also über die gesamte Beitragsvorschau ausgedehnt.

    Klingt das kompliziert? Ist es aber nicht. Sie benötigen dazu folgende CSS-Zeilen, die Sie in das CSS-Stylesheet Ihrer  Website verfrachten - unter Design/Customizer(Zusätzliches CSS:

    .et_pb_blog_grid .et_pb_post, .et_pb_posts .et_pb_post {
    position: relative;
    }.et_pb_blog_grid .et_pb_post .entry-title a:after, .et_pb_posts .et_pb_post .entry-title a:after {
    position: absolute;
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    }.et_pb_blog_grid .et_pb_post:hover, .et_pb_posts .et_pb_post:hover {
    cursor: pointer;
    }

    Dies ergibt dann folgendes Ergebnis:

    Standard-Variante

    Praktischen Notizblock im Dashboard des Word­Press-Backends einrichten

    Ab und an fällt mir eine Idee für einen Beitrag auf dr-code.ch ein – es fehlt aber oft an der Zeit, den Beitrag sogleich zu texten. Wenn ich mir derlei nicht aufschreibe, geht es vergessen, was mich ärgert. Der kleine Notizzettel auf dem Schreibtisch geht aber leider auch mal verloren, was mich ebenfalls ärgert. Darum habe ich einen kleinen Notizblock in meinem Word­Press-Dashboard angelegt, in welchen ich Blitzideen blitzschnell eintragen kann. Das ist möglicherweise auch für Sie interessant.

    mehr lesen...
    Variante mit CSS-Code

    Praktischen Notizblock im Dashboard des Word­Press-Backends einrichten

    Ab und an fällt mir eine Idee für einen Beitrag auf dr-code.ch ein – es fehlt aber oft an der Zeit, den Beitrag sogleich zu texten. Wenn ich mir derlei nicht aufschreibe, geht es vergessen, was mich ärgert. Der kleine Notizzettel auf dem Schreibtisch geht aber leider auch mal verloren, was mich ebenfalls ärgert. Darum habe ich einen kleinen Notizblock in meinem Word­Press-Dashboard angelegt, in welchen ich Blitzideen blitzschnell eintragen kann. Das ist möglicherweise auch für Sie interessant.

    mehr lesen...

    So wie der Code geschrieben ist, wirkt sich dies auf jedes Blogmodul auf Ihrer Website aus. In den meisten Fällen ist das perfekt. Wenn Sie jedoch möchten, dass dies nur für ein bestimmtes Blog-Modul gilt, können Sie diesem auf der Registerkarte Erweitert im Eingabefeld CSS-Klasse einen benutzerdefinierten Klassennamen geben. Ersetzen Sie dann «.et_pb_posts» (unbedingt die Pluralvariante beachten) im Codeschnipsel durch den Namen Ihrer benutzerdefinierten Klasse.

    Cool. Oder?

    Werbung

    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.