Lesefortschritt:

Beliebige Divi-Module, -Zeilen oder -Sektionen per Button-Klick anzeigen oder verstecken

24. April 2024 | CSS-Stylesheet, Divi-Theme, Scripts

Dieser Beitrag beinhaltet 651 Wörter. – Geschätzte Lesezeit: ca. 4 Minuten.

Der Divi-Button lässt sich auch verwenden, um Module auf der Divi-Website per Klick anzuzeigen oder zu verbergen. Dasselbe funktioniert auch mit Zeilen oder ganzen Sektionen. Wie Sie dies einrichten und umsetzen, zeigen wir Ihnen hier.

Nebenan sehen Sie ein Beispiel eines Buttons, welcher ein verstecktes Divi-Textmodul aktiviert:

 

Alles, was Sie dazu brauchen, ist ein wenig CSS-Code und JavaScript.

 

 

Verstecktes Textmodul

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Beginnen wir mit letzterem: Das nachfolgende Script fügen Sie in den <head>-Bereich Ihrer Website ein. Dies tun Sie im Backend unter Divi/Theme-Optionen/Integration:

<script type="text/javascript">
 jQuery(document).ready(function() {
jQuery('#reveal').hide();
jQuery('.rv_button').click(function(e){
e.preventDefault();jQuery("#reveal").slideToggle();
jQuery('.rv_button').toggleClass('opened closed');
});
});
</script>

Die gewünschte Funktion ist damit bereits aktiv. Nun müssen Sie noch ein paar CSS-Klassen und -IDs eintragen:

  • Button-Modul: Fügen Sie Ihrer Seite einen Button hinzu und geben Sie im Feld CSS-Klasse (unter dem Tab «Erweitert», «CSS-ID und Klassen» und «CSS-Klasse») die Klassennamen «rv_button closed» ein.
  • Modul, Zeile oder Sektion: Gehen Sie nun zu dem Divi-Element, das Sie zunächst ausblenden möchten und per Klick aktivieren wollen.. Geben Sie ihm die ID «reveal». Diese ID geben Sie im Tab «Erweitert», «CSS-ID und Klassen» und «CSS-ID» ein.

Das ganze sollte nun bereits funktionieren. Nicht wahr?

 

Wenn Sie wollen, können Sie den Button zudem etwas stylen. Das ist aber optional. Wenn Sie mögen, können Sie den folgenden CSS-Code ins CSS-Stylesheet Ihrer Website einfügen – unter Design/Customizer/Zusätzliches CSS:

.rv_button.closed:after {content:"\33";}
.rv_button.opened:after{content:"\32";}

Das war dann auch schon alles.

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