Divi-Module per Klick sichtbar machen

11. Aug., 2018CSS, Divi Tutorials

Schritt für Schritte Anleitung um Module mit dem Divi-Theme/Builder sichtbar zu machen.

Du möchtest ein Bild, Video oder einen Text auf deiner Seite nur dann sichtbar machen, wenn man etwas mit der Maus anklickt, wie z.B. einen Button ein Bild oder einen Link?
In dieses Tutorial zeige ich Dir eine Möglichkeiten wie Du es im Divi-Builder und mit etwas Code umsetzen kannst.

Demo

Drück mich um den Inhalt zu sehen!

DRÜCK MICH

Hallo!

Ich bin ein kleiner Blindtext. Und zwar schon so lange ich denken kann. Es war nicht leicht zu verstehen, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Wirklich keinen Sinn. Man wird zusammenhangslos eingeschoben und rumgedreht – und oftmals gar nicht erst gelesen. Aber bin ich allein deshalb ein schlechterer Text als andere?

<style type="text/css"><!-- [et_pb_line_break_holder] -->.spoiler_button.closed:after {content:"\\\\33";}<!-- [et_pb_line_break_holder] -->.spoiler_button.opened:after{content:"\\\\32";}<!-- [et_pb_line_break_holder] --></style><!-- [et_pb_line_break_holder] --><script type="text/javascript"><!-- [et_pb_line_break_holder] --> jQuery(document).ready(function() {<!-- [et_pb_line_break_holder] -->// Hide the div<!-- [et_pb_line_break_holder] -->jQuery('#mein-text').hide();<!-- [et_pb_line_break_holder] -->jQuery('.spoiler_button').click(function(e){<!-- [et_pb_line_break_holder] -->e.preventDefault();jQuery("#mein-text").slideToggle();<!-- [et_pb_line_break_holder] -->jQuery('.spoiler_button').toggleClass('opened closed');<!-- [et_pb_line_break_holder] -->});<!-- [et_pb_line_break_holder] -->});<!-- [et_pb_line_break_holder] --></script>

Anleitung:

1. Zeile (grüner Rahmen) für den sichtbaren Text erstellen

  • Erstelle eine neue Zeile
  • Wähle das “Text-Modul” und fülle es mit etwas Text z.B. eine Überschrift mit Beschreibung

2. Zeile erstellen die per Klick sichtbar werden soll

  • Nun musst Du noch den Bereich erstellen den du später sichtbar machen möchtest. Dafür erstellst Du eine weitere Zeile und füllst sie z.B. mit einem Text oder Bild-Modul
  • In der Zeile unter “Erweitert” musst Du eine “CSS-ID” vergeben, ich habe sie “mein-text” genannt

3. Button erstellen

  • Füge ein “Button-Modul” hinzu
  • Als “Button Link” setzt Du “#” ein
  •  Style den Button nach deinen wünschen
  • Unter “Button Erweitert” musst Du nun eine “CSS-Klasse” vergeben, ich habe ich sie “spoiler_button” genannt. Du musst aber noch eine weitere CSS-Klasse Namens “closed” anfügen damit später der Code auch funktioniert.

4. Code einfügen

  • Jetzt musst Du ein “Code-Modul” hinzufügen und den folgenden “Code” einsetzen.

Du kannst im Code die CSS-Klasse und CSS-ID nach deinen wünschen umschreiben, aber denke daran das Du sie auch in den Zeilen umbenennen musst.
CSS-Codes

Du kannst im Code die CSS-Klasse und CSS-ID nach deinen wünschen umschreiben, aber denke daran das Du sie auch in den Zeilen umbenennen musst.

Du kannst diese Anleitung für “Alle Module” einsetzen!

Viel Spaß beim nachbauen 😉

WP-DIVI-Tutorials
..:: WordPress | Divi | Plugins | CSS | uvm ::..