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