In diesem Tutorial erstellen wir gemeinsam von Anfang bis Fertig einen kostenlosen Mitgliederbereich. In einem meiner kommenden Tutorials geht es dann um einen bezahlten Mitgliederbereich mit automatischen monatlichen Abbuchungen und so weiter. Das geht dann ganz einfach, wenn wir den Grundstein einmal gelegt haben – und das machen wir mit diesem Video.
Wir arbeiten mit dem Pagebuilder Elementor Pro und die Website für den Verein hierzu haben wir eingerichtet mit Cloud86.
Die beiden Videos hierzu – bis zu dem Startpunkt im obigen Video findest du hier:

Hosting einrichten: Günstiges Webhosting & WordPress Schritt-für-Schritt Anleitung
Die eigene Website beginnt mit dem richtigen Hosting. Lass uns also Schritt für Schritt günstiges Webhosting sowie einen Mail-Account einrichten und auch gleich WordPress installieren.

Website für Verein erstellen – Teil 1: Grundlagen, Über uns & Kontakt
Website für Verein erstellen – Anleitung Teil 1: wir treffen grundlegende Einstellungen und bauen die ersten Seiten inklusive Formular und Spendenfunktion.
Warum du einen WordPress Mitgliederbereich brauchst ...
… kannst du dir selbst wahrscheinlich am besten beantworten. Dennoch möchte ich gern ein wenig Lust auf die Umsetzung machen, denn ein geschützter Mitgliederbereich ist einfach klasse.
Du kannst exklusive Inhalte bereitstellen, die nur für registrierte Mitglieder sichtbar sind. Das schafft nicht nur Zusammenhalt, sonder wird dir auch unglaublich viel Aufwand im Bereich der Organisation ersparen. Bedeutet: mehr Zeit für das, was Spaß macht!
Gerade für Vereine ist ein interner Bereich Gold wert:
- Wichtige Dokumente sicher bereitstellen
- Mitglieder einfach und zentral über Events, Neuigkeiten und Änderungen informieren
- Interne Abstimmungen und Umfragen durchführen
- Trainingspläne, Protokolle und exklusive Inhalte teilen
Einfach mitmachen - Schritt für Schritt
In der Anleitung oben erstelle ich mit dir gemeinsam einen kompletten WordPress Mitgliederbereich. Von den Grundeinstellungen, Aufbau aller Seiten, Anpassung der Meldungen, Mitgliederrollen über die Registrierung bis hin zum Login und dem finalen Mitgliederbereich.
Kurzum: einmal Alles. Und das Beste? Wir nutzen ein kostenloses Plugin: Simple Membership.
Bessere Darstellung der geschützten Seite 'Mitglieder', wenn User nicht eingeloggt und/ oder kein Mitglied ist
Nachfolgend, wie im Video versprochen, der Custom CSS Code für Copy und Paste bei der Seite Mitglieder (/mitglieder). Einfach Seite mit Elementor bearbeiten, Klick oben in der Mitte auf das Zahnrad „Seite Einstellungen“, Erweitert, Eigene CSS und einmal einfügen.
.swpm-post-not-logged-in-msg {
max-width: 800px;
margin: 100px auto 150px; /* Mehr Abstand nach unten */
padding: 50px; /* Mehr Innenabstand für eine größere Box */
text-align: center;
background: #f8f8f8;
border-radius: 8px;
font-size: 18px;
line-height: 1.8;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.05);
}
/* Sicherstellen, dass Zeilenumbrüche korrekt sind */
.swpm-post-not-logged-in-msg p {
display: block;
margin-bottom: 20px; /* Mehr Abstand zwischen den Absätzen */
}
/* Optional: Links noch deutlicher hervorheben */
.swpm-post-not-logged-in-msg a {
font-weight: bold;
color: #ff6600;
text-decoration: none;
display: inline-block;
margin-top: 10px; /* Extra Abstand über den Links */
}
.swpm-post-not-logged-in-msg a:hover {
text-decoration: underline;
}
Ich wünsche dir nicht nur viel Erfolg mit deinem neuen Mitgliederbereich, sondern auch und vor Allem viel Freude beim einrichten. 😊