Wie erstelle ich einen eigenen Mitgliederbereich, wenn der Kurs-Zugriff über das Integrationstool (Tags) verwaltet wird?

Auf deiner Spreadmind Plattform ist auf der Seite "Mein Konto" bereits ein Standard Mitgliederbereich eingerichtet. In manchen Fällen kann es vorkommen, dass dieser Standard-Aufbau für Auslieferung oder Zugriffsverwaltung deiner Online Kurse nicht passend ist. Dies ist vor allem dann der Fall, wenn du den Zugriff auf deine Kurse über das Integrationstool und somit dem Tag-Management verwaltest. 

Du kannst den Standard-Aufbau und -Design der "Mein Konto" Seite jederzeit mit Divi anpassen und ganz individuell, passend für dich gestalten. 

Wir möchten dir diesen Design-Part abnehmen und stellen dir daher in dieser Anleitung ein weiteres Spreadmind Layout zur Verfügung, welches du auf deiner Spreadmind Plattform importieren und auf deine Inhalte anpassen kannst:

1. Standard Mitgliederbereich vs. benuzterdefinierten Mitgliederbereich

Wie anfangs erwähnt, verfügt deine Spreadmind Plattform über einen bereits vollständig eingerichteten Standard Mitgliederbereich. Dabei sieht die Seite "Mein Konto" für einen eingegloggten Benutzer bspw. so aus:

Ein eingeloggter Benutzer sieht in dieser Übersicht all jene Kurse, in welche eingeschrieben ist – und nur diese. Hast du bspw. 5 Online Kurse und ein Käufer hat den "Kurs A" gekauft, so taucht nur dieser Kurs in der Übersicht auf. 

Voraussetzung dafür ist, dass die Kurs-Zugriffs-Einstellung auf "Einschreibungspflichtig" gesetzt und der Kurs mit einem Produkt verknüpft ist. 

Wenn du aber nun mit dem Integrationstool arbeitest und die Kursinhalte über einen Tag freischaltest, dann ist in der Regel die Kurs-Zugriffs-Einstellung auf "Offen" gesetzt und der Kurs mit einem Tag extra geschützt. 

Das Problem dabei ist nun, dass einem eingeloggten Benutzer alle "offenen" Kurse in der Übersicht angezeigt werden. Auch dann, wenn er eigentlich gar keinen Zugriff darauf hat. Das kann natürlich sehr verwirrend sein und dem Benutzer ist nicht auf Anhieb klar, auf welchen Kurs er denn zugreifen kann. 

Das Tolle an dem Integrationstool ist aber, dass du auch andere Inhalte über Tags schützen kannst. Und auf genau diese Funktionalität greifen wir bei dem Aufbau für den benutzerdefinierten Mitgliederbereich zurück: Ein neuer Aufbau des Mitgliederbereichs, bei dem nur die Kurse angezeigt werden sollen, auf welche ein eingeloggter Benutzer Zugriff hat.

So wird der neue Mitgliederbereich aussehen:

Wir haben hier alle Kurse untereinander aufgelistet und dabei die Divi-Zeilen mit dem entsprechenden Kurs-Tag geschützt. Somit sieht ein eingeloggter Benutzer, der einen (oder mehrere) Kurs-Tag(s) hat, nur die Kurse, auf welche er auch wirklich zugreifen kann bzw. darf.

Die Darstellung der Zeilen ist in der mobilen Ansicht auf Tablet & Handy leicht angepasst: 

Dieses Layout kannst du dir im nächsten Abschnitt dieser Anleitung herunterladen und auf deiner eigenen "Mein Konto" Seite importieren.

2. Vorbereitungen treffen

Damit auch du das neue Design des Mitgliederbereiches nutzen kannst, sind zuvor ein paar wichtige Vorbereitungen und Einstellungen zu treffen. 

2.1 Integrationstool aktivieren und Tags erstellen

Das Integrationstool kannst du ab dem ACADEMY Paket im Backend deiner Spreadmind Plattform unter "Einstellungen" > "Integration" aktivieren und entsprechend einrichten. Solltest du das noch nicht gemacht haben, emfehlen wir dir, zuerst die folgenden Anleitungen gründlich durchzulesen, in welcher wir dir das Integrationstool und dessen Funktionalität vorstellen: 

• Wie richte ich das Integrationstool ein?
• Wichtige Grundeinstellungen für das Integrationstool

In unserem Beispiel haben wir das Integrationstool mit dem externen Anbieter Quentn verknüpft. Für die beiden Online Kurse "Kurs A" und "Kurs B" haben wir zwei Tags erstellt, über welche die Sichtbarkeit der Kurse auf der neuen "Mein Konto" Seite dargestellt wird:

• "Zugriff Kurs A"
• "Zugriff Kurs B"

Hinweis: Je nach Anbieter kannst du mit Tags, Listen oder Gruppen arbeiten und somit den Zugriff auf deine Webseiten Inhalte steuern. Der Einfachheit halber sprechen wir meistens von "Tags".

2.2 Kurs/Produkt Einstellungen vornehmen

Grundsätzlich kann ein Kurs-Zugriff über diese beiden Wege stattfinden:

• Produkt-Kurs-Verknüpfung
• Sichtbarkeit des Kurses mit Tag geschützt

Bei einer Produkt-Kurs-Verknüpfung ist der Kurs-Zugriff auf "Einschreibungspflichtig" gesetzt und der Kurs wird mit dem Produkt fest verknüpft. Es wird kein Tag in den Kurs-Einstellungen hinterlegt. Die Kurs-Einschreibung erfolgt daher nur über den Produkt-Kauf.

Wird die Sichtbarkeit der Kursseite mit einem Tag geschützt, so ist der Kurs-Zugriff auf "Offen" gesetzt. Der Kurs wird nicht mit dem Produkt verknüpft, da bei einem auf offen gesetzten Kurs autoamtisch alle Benutzer auf den Kurs Zugriff haben, da keine Einschreibung an sich stattfindet.

In der Regel entscheidest du dich für dein Kurs-Konzept, ob du einschreibungspflichtige oder offene Kurse (Sichtbarkeit mit Tags geschützt) nutzt. 

Bei unserem neuen Layout der "Mein Konto" Seite kannst du sogar mit beiden Kurs-Zugriffs-Varianten arbeiten. 

Einzige Bedinung ist, dass der eingeloggte Benutzer immer einen bestimmten Tag haben muss, damit er seine Kurse sehen kann, auf welche er Zugriff hat. 

Das bedeutet, dass bei einem Kauf immer eine Produkt-Tag-Vergabe stattfinden muss, bei welcher der Benutzer den passenden Tag erhält, um seinen Kurs auf der Seite "Mein Konto" sehen zu können. Wie du eine Produkt-Tag-Vergabe einrichtest, kannst du hier unter 1. nachlesen: Wie vergebe ich Zugriffsrechte über das Integrationstool?

2.3 Spreadmind Layout herunterladen und importieren

Wenn du unser Layout für deine neue "Mein Konto" Seite nutzen möchtest, kannst du diese Layout Vorlage über den folgenden Link herunterladen:

• Download als ZIP: spreadmind-layout-benutzerdefinierter-mitgliederbereich-layout01.json.zip
• Nach Download: ZIP-Datei lokal entpacken, damit die JSON-Datei für den Import verwendet werden kann.

Besonderer Aufbau des Layouts: 

• Zwei Sektionen
• In Sektion 1 mit zwei 3-spaltige Zeilen und einem vollflächigen Hintergrundbild in der Spalte 1
• In Sektion 2 mit einer Zeile, welche eine Übersicht der Bestellungen des Kunden angezeigt

Die JSON-Datei kannst du dann über den visuellen Divi Builder auf deiner Seite importieren, wie wir hier unter 1.2 zeigen: Wie exportiere / importiere ich ein Divi Layout?

3. Spreadmind Layout für eigenen Bedarf anpassen

Wir haben die Layout Variante für den benutzerdefinierten Mitgliederbereich mit zwei Sektionen aufgebaut. In der ersten Sektion werden alle Kurse (einer pro Zeile) aufgeführt. Die zweite Sektion zeigt eine Übersicht der abgeschlossenen Bestellungen des eingeloggten Benutzers an. 

Nachfolgend erfährst du, wie du unsere Beispiel-Inhalte durch deine eigenen ersetzen kannst. Unter dem Abschnitt 5 dieser Anleitung erklären wir dir Schritt für Schritt, wie wir die Vorlage aufgebaut und welche benutzerdefinierten Einstellungen wir vorgenommen haben. 

Folgendes muss angepasst werden:

1. Kursbild austauschen ↓
2. Kurstitel & -beschreibung austauschen ↓
3. Kurs-Fortschrittsbalken mit Kurs-ID hinterlegen ↓
4. Button-Link austauschen ↓
5. Sichtbarkeit der Zeile mit Tag einstellen ↓

3.1 Kursbild austauschen

In Spalte 1 der Zeile haben wir ein Bild als Hintergrundbild eingefügt, welches den kompletten verfügbaren Bereich der Spalte 1 ausfüllt. Außerdem haben wir in die Spalte 1 ein Bild-Modul eingebunden, welches nur auf der Tablet- und Handy-Ansicht sichtbar ist. 

Um unsere Beispiel-Bilder durch dein eigenes Kurs-Bild zu ersetzen, sind also 2 Schritte notwendig: 

1. Hintergrundbild Spalte 1 austauschen
2. Bild im Bild-Modul Spalte 1 austauschen

Öffne zuerst die Einstellungen der Zeile und gehe danach in die Einstellungen der Spalte 1:

Gehe nun unter dem Reiter "Inhalt" zur Option "Hintergrundbild" und füge in der Desktop-Ansicht dein Kurs-Bild aus der Mediathek ein:

Überprüfe, dass bei der Tablet- und Handy-Ansicht kein Hintergrundbild hinterlegt ist – denn wir wollen für diese Ansichten das Kurs-Bild im Bild-Modul darstellen:

Speicher die Einstellungen an der Zeile und schließe das Einstellungs-Fenster der Zeile. 

Nun tauschen wir noch das Kurs-Bild im Bild-Modul in der Spalte 1 aus. 

Dieses Modul wird dir leicht transparent dargestellt, da die Sichtbarkeit des Moduls wie folgt eingestellt ist:

• Desktop = deaktiviert (nicht sichtbar)
• Tablet = aktiviert (sichtbar)
• Handy = aktiviert (sichtbar)

Öffne die Einstellungen des Moduls über das Zahnrad-Symbol:

Klicke einfach auf unser Beispiel-Bild, um dein eigenes Kurs-Bild aus der Mediathek einzubinden: 

Speicher und schließe die Modul-Einstellung rechts unten über den grünen Button (Häkchen) im Modul.

3.2 Kurstitel & -beschreibung austauschen

In Spalte 2 nutzen wir ein Text-Modul, über welches du den Kurs-Titel und deine Kurs-Beschreibung eintragen kannst:

Den Text "Kurs A" haben wir als Überschrift 2 formatiert. Du kannst gerne die Formatierung ändern, wenn du möchtest: 

Der Inhalt dieses Moduls wird nicht dynamisch befüllt. 

Wir empfehlen dir daher, dich bei der Beschreibung des Kurses relativ kurz zu halten, da sich die Zeilenhöhe automatisch an der Größe/Länge deines Inhalts orientiert. Nach wie vor sollte die Seite "Meine Modul" übersichtlich gehalten werden.

3.3 Kurs-Fortschrittsbalken mit Kurs-ID hinterlegen

Ebenfalls in Spalte 2 haben wir ein Code-Modul im Einsatz, welcher einen Shortcode aufführt, der den Kurs-Fortschritt eines Benutzers für diesen speziellen Kurs anzeigt:

Öffnest du auch hier über das Zahnrady-Symbol die Modul-Einstellungen, siehst du den Shortcode [learndash_course_progress] mit einer eigenen course_id:

Ersetze in diesem Shortcode bei course_id="1961" die Kurs-ID 1961 durch die ID deines Kurses, welche du im Backend unter "Online Kurs" > "Kurse" findest, sobald du in den Bearbeitungsmodus des Kurses gehst. Die Kurs-ID wird dir in der Browser-Adresszeile angezeigt:

3.4 Button-Link austauschen

In der Spalte 3 haben wir nun ein Button-Modul eingebunden. In dessen Einstellungen verwenden wir bei der Option "Link-URL des Buttons" anstelle des Kurs-Permalinks die Option "Dynamischer Inhalt als Link" und verlinken somit direkt auf den Online Kurs. Der Vorteil dabei ist, dass sich zu einem späteren Zeitpunkt der Peramlink (URL) des Kurses jederzeit ändern könnte. 

Um deinen eigenen Kurs zu verknüpfen, klicke bitte auf das Zahnrad-Icon unter "Link-URL des Buttons":

Dnyamischer Inhalt als Link anstelle eines Permalinks

Wähle als nächstes über das DropDown deinen eigenen Kurs aus und klicke auf das grüne Häkchen, um die Auswahl zu speichern:

Speicher und schließe die Modul-Einstellung rechts unten über den grünen Button (Häkchen) im Modul.

3.5 Sichtbarkeit der Zeile mit Tag einstellen

Damit nun die komplette Zeile für den "Kurs A" nur einem eingoggten Benutzer angezeigt werden soll, der auf diesen Kurs zugreifen darf, müssen wir die 1. Zeile mit dem Tag "Zugriff Kurs A" schützen. 

Öffne dazu die Einstellungen der ersten Zeile: 

Dehe direkt unter dem Reiter "Erweitert" zur Option "Sichtbarkeit" und trage bei der Option NAME den exakten Namen deines Tags ein – in unserem Beispiel vergeben wir beim Kauf des Produktes den Quentn-Tag "Zugriff Kurs A":

Somit ist die Zeile nur für eingeloggte Benutzer sichtbar, welche den Tag "Zugriff Kurs A" haben.

Die 2. Zeile ist auf gleiche Weise geschützt, allerdings hinterlegen wir dort einfach den Tag "Zugriff Kurs B" geschützt.

4. Weitere Zeilen hinzufügen

Klicke bei der letzten Zeile einfach auf Duplizieren, damit du den Aufbau der Zeile für deine weiteren Kurse verwenden kannst:

Nehme anschließend die gewünschten inhaltlichen Anpassungen vor, wie weiter oben unter Punkt 3.2 bis 3.6 gezeigt.

5. Ausführliche Erklärung: Aufbau der Sektionen 1 und 2

Nachfolgend erklären wir dir ausführlich den Aufbau der beiden Sektionen, welche einmal die Kurse darstellen und am Ende der Seite der eingeloggte Benutzer eine Übersicht seiner Bestellungen findet.

Kurze Zusammenfassung der Einstellung für die Zeilen, welche die Kurse darstellen:

• Spaltenhöhe ausgleichen
• Abstände (innen und außen) definieren
• Design Umrandung
• Benutzerdefiniertes CSS in Spalte 2 + 3

5.1 Allgemeine Informationen zum Aufbau der Zeile für die Kurse

Wir haben ein paar benutzerdefinierten Einstellungen an der Zeile vorgenommen, damit alle Inhalte vertikal zentriert zueinander ausgerichtet werden. Deutlich zu erkennen ist dies bspw. am Button "Zum Kurs" in der 3. Spalte, welcher mittig ausgerichtet ist.

Solltest du unsere Layout-Vorlage importiert haben und nutzen und benötigst weitere Zeilen für deine Kurse, kannst du diese einfach duplizieren und den Inhalt anpassen. 

Nachfolgend möchten wir dir dennoch einen Einblick in die Grundeinstellungen der Zeile und Spalten geben, damit du den Aufbau besser nachvollziehen kannst.

Du kannst den nachfolgenden Teil auch überspringen und direkt zum nächsten Abschnitt 3.2 gehen, um damit beginnen, deine eigenen Inhalte einzubinden.

5.1.1 Spaltenhöhe ausgleichen

Damit wir später die Inhalte mittig ausrichten können, muss die Option "Spaltenhöhe ausgleichen" für die Zeile aktiviert sein. Dies haben wir bereits in unseren beiden Layout Vorlagen für dich entsprechend eingestellt. Du findest dies in den Zeilen-Einstellungen unter dem Reiter "Design" > Option "Größe einstellen" > Spaltenhöhe ausgleichen: 

5.1.2 Abstände definieren

Ebenfalls in den Zeilen Einstellungen unter dem Reiter "Design" > Option "Zwischenraum" haben wir jeweils einen Außenabstand (Margin) von 25px definiert:

Ferner haben wir der Zeile für die Desktop-Ansicht einen Innenabstand (Padding) von 0px vergeben:

Und für die Tablet- und Handy-Ansicht einen Innenabstand (Padding) von 25px: 

5.1.3 Design Umrandung

Unserer Zeile haben wir zusätzlich abgerundete Ecken und eine Rahmenkante gegeben. Diese Einstellungen findest du ebenfalls unter dem Reiter "Design" bei der Option "Rand":

5.1.4 Benutzerdefiniertes CSS in Spalte 2 + 3

Damit nun alle Inhalte in der Spalte 2 + 3 mittig ausgerichtet werden, haben wir diesen Spalten jeweils einen CSS-Befehl margin: auto; hinzugefügt. margin beschreibt den Abstand eines Elementes nach außen zu anderen Elementen. Dadurch wird das Element selbst mittig ausgerichtet.

Gehe dazu in die Einstellungen der Zeile und öffne die Einstellungen für die Spalte 2:

Gehe nun in den Spalten-Einstellungen zum Reiter "Erweitert". Unter "Benutzerdefiniertes CSS" haben wir dem Hauptelement den CSS-Code hinzugefügt:

Gleiches gilt auch für die Spalten 3 der gleichen Zeile.

5.2 Sektion 2: Informationen zur Übersicht der abgeschlossenen Bestellungen

In die 2. Sektion unseres Layouts haben wir eine einfache 1-spaltige Zeile und ein Text-Modul eingebunden. Inhalt des Text-Moduls ist ein Shortcode, welcher einem eingeloggten Benutzer eine Übersicht seiner Transaktionen zeigt:

Hier brauchst du keine weiteren Anpassungen vorzunehmen. Möchtest du die gestalterische Änderungen umsetzen, ist dies natürlich kein Problem. Achte aber bitte darauf, dass der Shortcode nicht verändert wird, damit ein Benutzer immer seine bisherigen Bestellungen sowie auch aktive Abonnements angezeigt bekommt.

Das war's :-) Viel Spaß mit deinem neuen benutzerdefinierten Mitgliederbereich!