Wie kann ich die Kursseite mit dem Divi Builder aufbauen?

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 über diese beiden Shortcodes erfährst du in unserem Handbuch hier: Was bedeuten die beiden Shortcodes [visitor] und [student]?

Standardmäßig nutzt du diese Shortcodes im Standard-Editor. Der Divi Builder ist dabei nicht aktiviert:

Allerdings hast du bei dieser Variante nicht viel Möglichkeiten, die Kursseite gestalterisch ansprechend zu designen. 

Denn: Der Shortcode Visitor oder Student kann immer nur in einem Text-Modul genutzt werden. Vielmehr müssen beide Teile des Shortcodes [visitor] und [/visitor] in einem Text-Modul auftauchen. Den Shortcode auf mehrere Module aufzuteilen ist leider nicht möglich. 

Aber genau dafür haben wir eine andere Lösung geschaffen.


Aufbau der Kursseite mit Divi

Sobald der Divi Builder auf der Kursseite aktiviert ist (klicke dafür auf den Button "Den Divi Builder benutzen") 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

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. 

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. 

Wir raten dir, beide Sektionen so zu gesalten, wie du es möchtst. Rufe dazu deine Kursseite gerne auch im Frontend auf und aktivere dort den visuellen Builder. 

Erst wenn du mit deinen Design-Anpassungen zufrieden bist, solltest du den nächsten Schritt umsetzen.

Sektion 1 = Visitor / Sektion 2 = Student

Nun müssen wir festlegen, dass die Sektion 1 nur für einen Visitor sichtbar ist und die Sektion 2 nur für einen 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. Im Backend klickst du dafür bei der Optionen-Box "Veröffentlichen" auf "Aktualisieren". Im Frontend im visuellen Builder klickst du rechts unten auf "Speichern".

Benuzterdefiniertes CSS einfügen

Gehe nun im Backend deiner Spreadmind Webseite zu "Design" > "Theme Optionen" > Registerkarte "General" und dort ganz am Ende zu "Benutzerdefiniertes CSS".

Füge in das Feld den folgenden CSS-Code ein:

.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.

Brauchst du noch weitere Hilfe? Kontaktiere das Spreadmind Support Team Kontaktiere das Spreadmind Support Team