Mit Divi 5 Interactions eine Weiterlesen-Funktion ohne eine Zeile Code!
Mit den neuen Interactions ist es ganz einfach, beliebige Elemente anzeigen und auch wieder ausblenden zu lassen. In diesem Tutorial zeige ich dir, welche Interactions du benötigst, um die beliebte „weiter lesen“ Funktion zu integrieren.
Tutorial als Video anschauen
Du siehst gerade einen Platzhalterinhalt von Standard. Um auf den eigentlichen Inhalt zuzugreifen, klicke auf den Button unten. Bitte beachte, dass dabei Daten an Drittanbieter weitergegeben werden.
Weitere InformationenVorbereitung
Bereite deinen Text vor, für den du eine „weiterlesen“ Funktion erstellen möchtest
- Erstelle den Text / das Textmodul mit dem Text, der immer sichtbar ist
- Darunter ein Textmodul mit dem Text „weiter lesen“
- Dann folgt der Text, der nach Klick auf weiter lesen angezeigt werden soll
- Und zum Schluss noch ein Texmodul mit dem Text „schließen“
Wie du den Text zum weiter lesen oder schließen benennen möchtest, bleibt natürlich dir überlassen. Für unser Beispiel nutzen wir dies. Designe den Text nach deinen Wünschen – ich habe hier z.B. meine Linkfarbe hinterlegt.
Admin Label vergeben
Um die Interactions richtig zuordnen zu können, müssen wir den Textmodulen, die den Text ein- oder ausblenden ein Admin-Label vergeben, ebenso dem Text, der zunächst ausgeblendet ist:
Achte darauf, dass dein Admin-Label eindeutig ist. Wenn du die „mehr lesen“ Funktion an mehreren Stellen verwendest, ist es wichtig, dass sie voneinander unterscheidbar sind.
- Label für mehr lesen: vergib hier einen Namen, den du eindeutig zuordnen kannst. Wenn du die Interaktion an mehreren Stellen verwenden möchtest, reicht es nicht, als Admin-Label „mehr lesen“ zu verwenden. Wenn du es z.B. für ein Testimonial verwendest, könntest du den Namen noch ergänzen „mehr lesen [Name].
- Gleiches gilt für das Admin Label für den Schließen-Text
- Ein letztes Admin-Label benötigen wir dann noch für den einzublendenden Text. Achte auch hier, auf einen eindeutigen Namen
Interaktionen Schritt für Schritt
Gehe jeweils im Modul in die Einstellungen -> wechsel zum Tab „advanced“ -> klicke auf „Interactions“ -> „add interaction“
Interaktionen im Textmodul mehr lesen
Hier benötigen wir insgesamt 3 Intaktionen:
- Trigger „Click“, der das einzublendende Textmodul sichtbar macht
- Trigger „Click“, der das Textmodul „schließen“ sichtbar macht
- Trigger „Click“, der das Textmodul „mehr lesen“ ausblendet
Unter Target Module werden dir sämtliche Elemente deiner Seite anzeigt – die Liste kann sehr lang sein. Deshalb haben wir ein Admin-Label vergeben, damit du das Modul identifizieren kannst. Ganz oben ist eine Suchleiste, damit findest du schneller das Element.
Interaktion für den einzublendenden Text
Hier benötigen wir lediglich eine Interaktion. Und zwar wollen wir, dass der Text beim Laden der Seite zunächst ausgeblendet bleibt.
Unser Trigger ist diesmal „Load“.
Diesen Text anzuzeigen oder auch wieder über schließen auszublenden, steuern wir über „mehr lesen“ und „schließen“
Interaktion für das Textmodul „schließen“
Hier benötigen wir wieder insgesamt 4 Interaktionen, denn auch dieses Modul muss beim Page Load ausgeblendet sein. Deshalb steht dieser Befehl an erster Stelle:
- Trigger „Load“, der das Element beim Laden der Seite ausblendet
- Trigger „Click“, der das einzublendende Textmodul wieder ausblendet
- Trigger „Click“, der das Textmodul „mehr lesen“ wieder sichtbar macht
- Trigger „Click“, der das Textmodul „schließen“ wieder ausblendet
Wenn die Elemente verschwinden
Auch im Bearbeitungsmodus wird es passieren, dass die Trigger aktiv werden, sprich, Module werden ausgeblendet und du kommst nicht mehr ohne weiteres in die Bearbeitung.
Dann hast du zwei Möglichkeiten:
- Die einfachste Lösung ist es, über die Ebenenansicht (Layers) zu gehen. Dort kannst du anhand deiner Admin-Label die Module schnell finden. Wenn du sie auswählst, werden auch automatisch die Einstellungen des Moduls anzeigt.
- Du kannst auch versuchen, die Seite neu zu laden – natürlich nachdem du vorher gespeichert hast. Besser ist es aber, direkt über die Ebene zu gehen.
Bonus: Mouse-Over für unseren Textlink
Die beiden Textfelder „mehr lesen“ und „schließen“ funktionieren wie ein Link – verhalten sich aber nicht so, wenn wir mit der Maus darüber fahren.
Um das zu erreichen, benötigen wir eine kleine Ergänzung in den beiden Modulen. Gehe dazu
- Gehe dazu in die Einstellungen des jeweiligen Textfeldes.
- Wechsel zum Reiter „Advanced“ und dort zu „Custom CSS“.
- Dort wählst du den 2. Reiter „Module Elements“ und gibst folgendes ein:
cursor: pointer;
Jetzt wird sich unser Mauszeiger wie bei einem Link verhalten!
Fazit zu den Interaktionen mit Divi 5
Diese neue Funktion in Divi 5 eröffnet sehr viele neue Möglichkeiten, für die mit Divi 4 noch zusätzlich Plugins oder Codes notwendig waren.
Welche Möglichkeiten dir damit noch zur Verfügung stehen, kannst du hier nachlesen:
- Mit den Divi 5 Interaktionen einen Blogfilter erstellen
Eine Übersicht über meine Erfahrungen mit Divi 5 (Alpha) findest du hier. Außerdem einen kompletten Rundgang zu Divi 5 mit den neuen Funktionen.
- Divi 5 Alpha im produktiven Einsatz – meine Erfahrungen
- Divi 5 Rundgang – Youtube Video 30 min.
Willst du Divi 5 selbst ausprobieren?
Aktuell gibt es einen großen Summer-Sale mit bis zu 78 % Rabatt.
0 Comments