Lesefortschritt:

Blog-Modul-Special #9: Ein «Load more»-Button für das Divi-Blog-Modul

17. Dezember 2022 | Divi-Theme, Scripts

Trick # 186 | Dieser Beitrag beinhaltet 695 Wörter. – Geschätzte Lesezeit: ca. 4 Minuten.

Elegant-Themes hat zwar dem Divi-Blog-Modul eine Paginierung spendiert, mit welcher die gelisteten Beiträge durchforstet werden können. Es geht aber noch hübscher: Mit einem «Load more»-Button.

Zunächst fügen Sie an der gewünschten Stelle Ihrer Website ein Blogmodul ein. Nehmen Sie die Einstellungen vor: Layout, Anzahl gezeigter Artikel, Kategorienauswahl usw.

Anschliessend sind für unseren Hack zwei Schritte notwendig:

  • Vergeben Sie eine CSS-Klasse namens «blog-load-more». Das können Sie unter Erweitert/CSS-ID & Klassen/CSS-Klasse.
  • Weiter schalten Sie die Paginierung des Blogmoduls aus. Das geschieht im Inhalt-Tab unter «Elemente». Achtung: Die Paginierung nennt sich im deutschsprachigen Divi-Theme nicht ganz einleuchtend «Nummmerierung».

Button-Modul einfügen

Direkt im Anschluss an das Blogmodul fügen Sie nun ein Button-Modul auf der Seite ein. Beschriften Sie den Button z.B. mit «weitere Beiträge anzeigen».

Wechseln Sie nun im Buttonmodul auf den Tab «Erweitert», wählen Sie «CSS-ID & Klassen» und fügen Sie als CSS-ID-Name (NICHT als CSS-Klasse) «load_more» ein.

JQuery-Script einfügen

Nun benötigen Sie das untenstehende Script. Sie können es in ein Code-Modul direkt auf der aktuellen Seite einfügen oder aber im Backend unter Divi/Theme-Optionen/Integration in den <head>-Bereich Ihrer Website setzen:

<script>
jQuery(document).ready(function(){
    // Für Mobilanzeigen
    if (window.matchMedia('(max-width: 767px)').matches) {
        var initial_show_article = 3;
    var article_reveal = 2;
    jQuery(".blog-load-more article").not( ":nth-child(-n+"+initial_show_article+")" ).css("display","none");
    jQuery("#load_more").on("click", function(event){
        event.preventDefault();
        initial_show_article = initial_show_article + article_reveal;
        jQuery(".blog-load-more article").css("display","block");
        jQuery(".blog-load-more article").not( ":nth-child(-n+"+initial_show_article+")" ).css("display","none");
        var articles_num = jQuery(".blog-load-more article").not('[style*="display: block"]').length
            if(articles_num == 0){
            jQuery(this).css("display","none");    
            }   
    })
    } else {
        // Für Desktop-Monitore
        var initial_row_show = 1;
        var row_reveal = 2;
        var total_articles = jQuery(".blog-load-more article").length;
        jQuery(".blog-load-more article").not( ":nth-child(-n+"+initial_row_show+")" ).css("display","none");
        
        jQuery("#load_more").on("click", function(event){
            event.preventDefault();
            initial_row_show = initial_row_show + row_reveal;
            jQuery(".blog-load-more article").css("display","block");
            jQuery(".blog-load-more article").not( ":nth-child(-n+"+initial_row_show+")" ).css("display","none");
            var articles_num = jQuery(".blog-load-more article").not('[style*="display: block"]').length
            if(articles_num == 0){
            jQuery(this).css("display","none");    
            }    
        })
    } 
})
</script>

Modifizieren lässt sich das Script auf den Zeilen 5 und 6 (für Mobilanzeigen), sowie auf Zeilen 20 und 21 für die Desktop-Ansicht.

  • In der jeweils ersten Zeile des Codes steht am Ende die Zahl der zunächst anzuzeigenden Blogzeilen.
  • In der zweiten Code-Zeile (wieder am Ende) ist die Zahl der Blogzeilen eingetragen, die bei einem Klick auf den Load-more-Button zusätzlich angezeigt werden.

Das war’s schon. Eine Darstellung wie nebenan müsste nun das Resultat sein.

Werbung

«Back to top»-Button im Divi-Theme stylen

Im Divi-Theme lässt sich ein «Back to top»-Button anzeigen. Wenn man auf einer Seite hinunterscrollt wird dieser Button unten rechts angezeigt und ermöglicht es BesucherInnen, mit einem Klick wieder bis ganz nach oben zu scrollen. Ein nettes ...

Werbung

 

Pin It on Pinterest

Share This