Fallstudie: Kurswebsite mit Thrive Theme Builder + Digimember erstellen

In diesem Blogartikel werden wir mal so richtig praktisch! Ich habe nämlich eine neue Website für mein Angebot erstellt und nehme dich jetzt mit hinter die Kulissen.

Wie starte ich ein solches Projekt? Welche Tools habe ich verwendet und warum? Wie bin ich konkret bei der Erstellung der Seite vorgegangen?

All das schauen wir uns in diesem Blogartikel an.

Du kannst dir die Fallstudie auch im Video anschauen - hier gehe ich ebenfalls die einzelnen Schritte durch:

Schritt 1: Die Vorbereitung

Bevor ich mich bei neuen Websites in WordPress stürze, Tools raussuche usw., bereite ich das erstmal etwas vor.

Ich weiß ja, was für eine Seite ich am Ende gerne hätte, und überlege mir dann, wie genau die denn aussehen soll.

Tatsächlich mache ich es dann so, dass ich mir das ganze erstmal ganz analog mit Stift auf Papier aufmale! Die allererste Vorbereitung findet also in meinem Notizbuch statt.

Mir hilft es total, meine Ideen wirklich klar zu visualisieren und auf's Papier zu bringen - so wird aus einer groben Vorstellung eine konkrete Vorlage. Das macht die Umsetzung in WordPress tausendmal leichter!

So sah die erste Skizze für meine Kurswebsite aus:

Ich wollte also einen Header mit Login-Button haben, links an der Seite das vertikale Menü und dann natürlich den Inhaltsbereich selber, in dem ich Texte, Videos etc. einfügen kann.

Wie du gleich sehen wirst, sieht die Seite jetzt auch fast genauso aus! Eigentlich habe ich nur noch die Menüstruktur etwas angepasst.

Das ist für mich also bei neuen Websites immer der erste Schritt: Meine groben Ideen zu visualisieren und zu konkretisieren! Am liebsten einfach auf Papier gemalt.

Du kannst den Schritt natürlich auch digital machen und den Entwurf deiner Website z.B. mit einem Programm wie Adobe InDesign machen, wenn du dich damit auskennst.

Bonus-Tipp: Dein Swipe-File

Damit du zum Start solcher Projekte nicht bei null anfangen musst, sondern dir schon mal ein paar Inspirationen holen kannst, solltest du dir ein Swipe File erstellen!

Das ist im Prinzip eine Sammlung mit Screenshots von Websites, die dir gut gefallen. Für mein Swipe File nutze ich Eagle, damit kann ich auch Screenshots von kompletten Seiten machen (nicht nur von einzelnen Ausschnitten) und in passenden Ordnern speichern. 

Du musst dafür aber nicht mal unbedingt ein extra Tool nutzen - das geht auch problemlos in Ordnern auf deiner Festplatte oder so! Falls du Eagle nutzen möchtest, schau dir hier den Guide an.

Schritt 2: Tools

Wenn der erste Entwurf steht, kannst du im zweiten Schritt überlegen, welche Tools du benötigst, um das Ganze umzusetzen!

#1 WordPress

Mir war klar, dass ich meine Kurswebsite mit WordPress erstellen möchte. Das hatte drei Gründe:

• Ich wollte meine Kursinhalte nicht auf "externen" Kursplattformen hochladen, sondern wirklich bei mir liegen haben (kleiner Kontrollzwang). 
• Das hat außerdem den Vorteil, dass für Kund:innen wirklich nur meine Kurse zu sehen sind, wenn sie sich einloggen, und nicht noch andere, die sie ggf. ebenfalls über diese Anbieter gekauft haben.
• Ich wollte wenn möglich Tools nutzen, die ich eh schon kenne und benutze, anstatt mich wieder in etwas Neues einzuarbeiten. So war die Umsetzung für mich schneller und günstiger.

Um mit WordPress zu arbeiten, brauchte ich natürlich eine Domain. Auch hier war für mich von vornherein klar, welche das sein sollte, nämlich eine Subdomain meiner Website: kurse.leagiltjes.de konnte ich bei meinem Hosting-Anbieter HostEurope schnell einrichten.

Darüber habe ich auch ein SSL-Zertifikat bestellt.

Alternativen

Dazu kurz noch ein Hinweis für dich: Es gibt auch einige wirklich gute, deutsche Tools, mit denen du deinen Kursbereich ganz unabhängig von deiner eigenen Website erstellen kannst! Das macht Sinn, wenn du dich weniger mit der Technik auseinandersetzen möchtest.

Ich kann dir da z.B. Coachy oder Elopage empfehlen. Mehr Infos dazu findest du in meinem Vergleich von Onlinekurs-Tools.

#2 Thrive Theme Builder

Wie du weißt, braucht jede WordPress-Website ein Theme. Hier habe ich mich dafür entschieden, mit dem Thrive Theme Builder zu arbeiten!

So habe ich nämlich die größtmögliche Flexibilität, was das Design meiner Seiten, Kurse usw. angeht. Außerdem hatte ich bei der Thrive Suite eh noch eine Menge freie Lizenzen und wollte schon lange mal ein Projekt mit dem Theme Builder umsetzen.

Den Theme Builder nutze ich, um das Grunddesign der Seite zu erstellen (z.B. Header mit Login-Button, vertikales Menü auf der linken Seite). 

#3 Thrive Architect

Der Thrive Architect als Page Builder ist ebenfalls Teil der Thrive Suite, hier wusste ich also, dass das super mit dem Theme Builder harmoniert.

Hiermit erstelle ich dann die tatsächlichen Inhalte der Kursseiten (während der Theme Builder ja wie gesagt für das Drumherum zuständig ist).

Thrive Theme Builder und Thrive Architect sind übrigens nur zwei von insgesamt 10 Tools, die in der Thrive Suite enthalten sind. Den gesamten Überblick findest du hier.

#4 DigiMember

Jetzt ist es ja so, dass die Inhalte nicht frei zugänglich sein sollen, sondern wirklich immer nur für die Leute, die das entsprechende Produkt gekauft haben.

Diese Zugänge regelst du mit einem sog. Membership Plugin. Ich habe mich für DigiMember entschieden - zum einen kannte ich das bereits von einer Kundin, zum anderen ist es für ein Produkt auch erstmal kostenlos.

Mit DigiMember kann ich die einzelnen Seiten dann diesem Produkt zuordnen und so sagen: Nur wer den Strategietag gebucht hat, kriegt Zugriff auf diese Seiten!

Und das war es auch schon an Tools. Die habe ich also alle installiert und dann ging es an die tatsächliche Erstellung der Website.

Schritt 3: Theme-Templates erstellen

Im dritten Schritt ging es also darum, die einzelnen Templates mit dem Thrive Theme Builder zu erstellen. Das umfasst folgende Punkte:

• Header
• Footer
• die Kursseiten

Dazu nochmal kurz der Blick auf meine Skizze - der rot umrandete Teil ist das, was im Theme Builder erstellt wird, da das ja für die einzelnen Unterseiten gleich ist:

Hierfür habe ich im Theme Builder ein neues Seiten-Template angelegt. Du kannst dann theoretisch aus jeder Menge Vorlagen auswählen, was ich in dem Fall aber nicht gemacht habe, da mein Seitenaufbau ja sehr spezifisch ist.

Das Menü habe ich in die Sidebar gebaut, und für dieses spezifische Element dann wiederum ein Template verwendet - so war alles direkt vertikal eingestellt, wie ich es haben wollte.

Hinweis: Um es so anschaulich wie möglich zu machen, kannst du dein Menü anlegen, bevor du dich ans Template machst. Dazu musst du die enthaltenen Seiten schon erstellen und veröffentlichen, aber natürlich noch nicht mit Inhalt füllen.

Ingesamt ist die Seite so ja recht simpel aufgebaut, sodass ich hier abgesehen vom Menü in der Sidebar recht wenig Anpassungen vornehmen musste.

Ich habe nur unterhalb des Content-Bereichs noch ein Kommentarfeld eingefügt, sodass Kund:innen ihre Fragen direkt loswerden können.

Schritt 4: Kursseiten erstellen

Als das Template für die Seiten stand, habe ich mich an die Erstellung des Inhalts gemacht. Angelegt hatte ich die Seiten ja schon, damit ich das Menü erstellen konnte.

Ich habe eine "Hauptseite" Strategietag angelegt, und die anderen Seiten sind jeweils Unterseiten davon. Das macht es  übersichtlicher.

Außerdem lege ich für jede einzelne Seite fest, dass hier das Strategietag-Template verwendet werden soll und wähle das Produkt auch in den DigiMember-Einstellungen.

Den Seiteninhalt an sich habe ich dann mit dem Thrive Architect erstellt. Das ist relativ unspektakulär - ich habe hauptsächlich Textfelder eingefügt sowie Videos und Buttons für die Downloads.

Schritt 5: Weitere Seiten erstellen

Neben den Seiten für den Kurs brauchte ich natürlich auch noch eine Startseite und eine Login-Seite. Auch hierfür habe ich den Thrive Architect genutzt.

Hier ist der Ablauf also im Prinzip der gleiche, nur dass ich natürlich nicht das Strategietag-Template verwendet habe.

Stattdessen gibt es einfach Header und Footer und dazwischen den Inhalt:

Was bei Thrive ebenfalls ganz cool ist: Ich habe z.B. bei der Startseite mit dynamischem Content gearbeitet, sodass nach dem Login auch immer der Vorname angezeigt wird. Das macht's persönlicher.

Schritt 6: Zugänge in DigiMember

So habe ich also die Website an sich erstellt: Erst das generelle Seiten-Template im Theme Builder, dann die einzelnen Seiten im Thrive Architect! Zum Abschluss musste ich nur noch mit Digimember die Zugänge für meine bestehenden Kund:innen einrichten.

Prinzipiell kannst du DigiMember mit einem Zahlungsanbieter wie Digistore24 verknüpfen, sodass die Zugangsdaten nach dem Kauf automatisch verschickt werden.

Jetzt hatte ich aber bereits einige Kund:innen, die den Strategietag in der Vergangenheit bereits gemacht hatten und die trotzdem noch den Zugang zum Kursbereich erhalten sollten.

Für diesen Fall kannst du Bestellungen auch manuell hinzufügen! Dazu gibst du einfach Name und E-Mail-Adress ein und wählst das entsprechende Produkt aus:

Dann wird ebenfalls die E-Mail mit den Zugangsdaten verschickt, was ich sehr praktisch finde. Die Texte für diese E-Mails kannst du unter dem entsprechenden Menüpunkt ebenfalls individuell festlegen!

Fazit

Fassen wir also nochmal zusammen, wie ich meine Kurswebsite erstellt und aufgebaut habe:

1. Vorbereitung: Skizze anfertigen
2. Subdomain erstellen, WordPress installieren
3. Theme-Templates mit dem Thrive Theme Builder anlegen
4. Seiteninhalte erstellen: Kursseiten, Startseite, Login-Seite
5. Zugänge über DigiMember anlegen und verschicken

Ich hoffe, diese kleine Fallstudie hat dir gefallen und du konntest einen guten Eindruck davon kriegen, wie so ein Projekt bei mir aussieht!

Generell kann ich die Thrive Suite für deine Website (egal, was für eine) wirklich empfehlen, die Arbeit damit macht mir jedes Mal Spaß und alles funktioniert genauso, wie es soll. Die Kombination mit DigiMember funktioniert in dem Fall hervorragend!

_______________

Hinweis: Bei den Links zu den Tools handelt es sich um Affiliate Links. Wenn du darüber etwas kaufst, erhalte ich eine Provision – für dich ändert sich am Preis natürlich überhaupt nichts!