Lesefortschritt:

Divi-Elemente nach Zufallsprinzip ein- oder ausblenden

28. Februar 2021 | Divi-Theme, Scripts

Dieser Beitrag beinhaltet 498 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.

Vielleicht haben Sie in Ihrem Divi-Theme Module, Zeilen oder gar ganze Sektionen, welche Sie nach dem Zufallsprinzip anzeigen wollen. Ein Headerbild vielleicht, das bei jedem Seitenaufruf zufällig erscheint oder ein Handlungsaufruf (Call to action). Auch das kriegen wir hin. Es ist ganz einfach.

Zunächst vergeben Sie den zufällig auszuwählenden Divi-Elementen eine CSS-Klasse. Auf dieser Website betrifft es den Call-to-action-Button, der mal auf den Newsletter hinweist, mal auf den Domainmarket und mal nach Themenwünschen fragt. Entsprechend heisst die CSS-Klasse in unserem Beispiel

cta_randomizer

Diese Klasse weisen Sie nun allen Divi-Elementen zu, die für den Randomizer in Frage kommen. Das erledigen Sie innerhalb des jeweiligen Moduls, der Zeile oder Section.

  • Rufen Sie Advanced (oder Erweitert) auf.
  • Dann klicken Sie auf CSS-ID und Klassen
  • Im Feld CSS-Klasse fügen Sie nun den von Ihnen gewünschten Klassennamen (auf dieser Website: cta_randomizer) ein.
  • Wiederholen Sie den Schritt für alle Elemente, welche nach Zufallsprinzip dargestellt werden sollen.

Nun wechseln Sie ins <head>-Eingabefeld. Dieses erreichen Sie via Divi/Theme-Optionen/Integration/Code dem < head > Ihres Blogs hinzufügen. Im Textfenster fügen Sie nachfolgenden Script-Schnipsel ein:

<script>
(function($) {
    $(document).ready(function() {
var random = Math.floor(Math.random() * jQuery('.cta_randomizer').length);
jQuery('.cta_randomizer').hide().eq(random).show();
    });
})(jQuery)
</script>

Die Klasse .cta_randomizer (in Zeile 5) ersetzen Sie hier mit dem Klassennamen, welchen Sie in den obigen Schritten vergeben haben. Beachten Sie, dass nun noch ein Punkt . vor dem Klassennamen benötigt wird.

Testen Sie den Effekt auf Ihrer Live-Seite. Aktualisieren sie diese einige Male. Sie sehen, dass die Divi-Elemente nun zufällig angezeigt werden.

So funktioniert es

Das Script sucht, zählt und nummeriert zunächst alle Elemente welche die betreffende Klasse aufweisen. Dann startet es den Zufallsgenerator und wählt eine beliebige Zahl aus. Dieses Element wird dann angezeigt.

Das bedeutet: Die betreffende Seite wird zunächst mit allen – also auch den nicht angezeigten – Elementen geladen. Erst dann greift der Randomizer. Verwenden Sie also nicht Dutzende «schwerer» Elemente, weil dies die Ladezeit der Website beeinträchtigen könnte.

Werbung

Werbung

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.






Vielen Dank.

Pin It on Pinterest

Share This