Trick # 59 | 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