Wie kann ich die Shortcodes [visitor] und [student] auf der Kursseite mit dem Divi Builder nutzen?
INHALTSVERZEICHNIS
Das Besondere an der Kursseite ist ja, dass du über die beiden Shortcodes [visitor]...[/visitor] und [student]...[/student] einen Inhalt entweder einem Besucher oder einem Teilnehmer des Kurses ausgeben lassen kannst (mehr dazu erfährst du in dieser Anleitung: Was bedeuten die beiden Shortcodes [visitor] und [student]?)
Standardmäßig fügst du diese Shortcodes im Backend im Bearbeitungsmodus eines Kurses im Standard-Editor ein. Der Divi Builder ist dabei nicht aktiviert:
Hast du nun allerdings auf deiner Kursseite den Divi Builder aktiviert, kannst du diese beiden Shortcodes nur innerhalb eines Moduls (bspw. ein Divi Text Modul) verwenden. Die Shortcodes auf mehrere Module aufzuteilen ist leider nicht möglich.
Gestaltest du deine Kursseite mit mehreren Divi Sektionen und möchtest, dass ein bestimmer Abschnitt nur für Besucher und der andere Abschnitt nur für Kurs-Teilnehmer sichtbar ist, dann ist es besser, die Sichtbarkeit dieser Elemente über einen einfachen CSS-Code zu bestimmen.
1. Divi Builder auf Kursseite aktivieren
Du kannst den Divi Builder auf deiner Kursseite problemlos zum Einsatz bringen. Schaue dir dazu am besten diese Anleitung an, bevor du mit der Gestaltung deiner Kursseite startest:
Ab dem Zeitpunkt, ab dem du den Divi Builder auf deiner Kursseite im Einsatz hast, kannst du auf die beiden Shortcodes [visitor] und [student] komplett verzichten.
Wir werden nun mit Hilfe eines individuellen aber einfachen CSS-Codes die Funktionalität von "visitor" und "student" eigenständig umsetzen.
Dafür benötigst du nur zwei Sektionen.
Solltest du nicht wissen, was eine Sektion, Zeile oder ein Modul ist, wird dies hier erklärt: Der Divi Builder – So funktioniert er im Backend und Der Divi Builder – So funktioniert er im Frontend
Sektion 1 (Visitor):
In die erste Sektion kannst du so viele Zeilen und Module einfügen, wie du möchtest. Die erste Sektion ist quasi dein Visitor-Shortcode-Bereich. Also der Inhalt, welcher nur für den Besucher deiner Kursseite sichtbar sein soll. Oder ein eingeloggter Benutzer, der aber nicht auf den Kurs zugreifen kann, da er in diesen nicht eingeschrieben ist.
Sektion 2 (Student):
In die zweite Sektion kannst du ebenfalls so viele Zeilen und Module einfügen, wie du möchtest. Diese Sektion ist quasi dein Student-Shortcode-Bereich. Also der Inhalt, welcher nur für einen eingeloggten Benutzer sichtbar ist, sofern er in den Kurs eingeschrieben ist.
Erst wenn du mit deinen Design-Anpassungen zufrieden bist, solltest du den nächsten Schritt umsetzen.
2. CSS-Klasse für Sektion 1 und Sektion 2 definieren
Nun müssen wir festlegen, dass die Sektion 1 nur für einen Besucher der Kursseite (Visitor) sichtbar ist und die Sektion 2 nur für einen eingeloggten und eingeschriebenen Kurs-Teilnehmer (Student).
Öffne dazu die Einstellungen der Sektion 1 und gehe in der Registerkarte "Fortgeschritten / Advanced" zur Option "CSS ID & Klassen" > "CSS Klasse":
Trage dort nun folgenden Klassennamen ein:
- visible-visitor
visible-visitor = sichtbar für einen Besucher.
Öffne nun die Einstellungen der Sektion 2 und gehe auch hier in der Registerkarte "Fortgeschritten / Advanced" zur Option "CSS ID & Klassen" > "CSS Klasse".
Trage dort nun folgenden Klassennamen ein:
- visible-student
visible-student = sichtbar für einen eingeloggten Benutzer, welcher in den Kurs eingeschrieben ist.
Nachdem du die Sektionseinstellungen jeweils gespeichert hast, speicherst du die Anpassungen deiner Kursseite über den Button "Speichern" und verlässt den visuellen Builder von Divi.
3. CSS-Code für die Sichtbarkeit der Sektionen einfügen
Gehe nun im Backend deiner Spreadmind Plattform zu "Design" > "Theme Optionen" > Registerkarte "Allgemein" und dort ganz am Ende zu "Eigenes CSS".
Füge in das Feld den folgenden CSS-Code ein:
/* Sichtbarkeit Visitor & Student auf Kursseite */
.user_has_no_access .visible-student,
.user_has_access .visible-visitor { display: none; }
Der CSS-Code prüft den Zustand des Betrachters der Kursseite und führt dann folgendes aus:
- Hat ein Besucher keinen Zugriff auf den Kurs (.user_has_no_access), dann verstecke (display: none;) den Inhalt der Sektion 2 (.visible-student).
- Hat ein eingeloggter Benutzer Zugriff auf den Kurs (.user_has_access), dann verstecke (display: none;) den Inhalt der Sektion 1 (.visible-visitor).
Klicke auf den Button "Änderungen speichern" und überprüfe deine Kursseite.
Hinweis: Als Admin bist du immer in einen Kurs eingeschrieben und wirst somit im eingeloggten Zustand die Sektion 1 (dein Visitor-Bereich) nicht sehen können. Rufe deine Kursseite einfach in einem anderen Browser auf (z.B. Chrome oder Firefox), damit du die Seite aus Sicht eines Besuchers betrachtest.
4. Mehr als 2 Sektion auf der Kursseite nutzen
Hast du auf deiner Kursseite mehr als zwei Sektionen im Einsatz, kannst du selbst bestimmen, welche Sektionen jeweils einem Besucher und einem eingeloggten Kurs-Teilnehmer angezeigt werden sollen. Du kannst die beiden CSS-Klassen visible-visitor und visible-student so oft innerhalb deines Designs verwenden, wie du möchtest.
Du kannst diese CSS-Klassen sowohl in den Einstellungen einer Sektion als auch bei einer Zeile oder sogar bei einem Modul hinterlegen. Am CSS-Code selbst brauchst du keine Änderungen vorzunehmen.
Eine Sektion inkl. ihrer Zeilen und Modulen, welche keine der beiden CSS-Klassen aufführt,ist dann für alle sichtbar: sowohl für Besucher als auch für eingeloggte Kurs-Teilnehmer.