Ihre Login-Seite ist oft der erste markenbezogene Bildschirm, den ein Kunde nach dem Klicken auf Mein Konto sieht. Ein Layout, das nicht zu Ihrem Shop passt oder Ihre Werbebotschaft verbirgt, kann dazu führen, dass die Seite unvollständig wirkt. Custom Login für WooCommerce bietet Ihnen fünf fertige Vorlagen, sodass Sie das gesamte Erscheinungsbild mit einem Klick ändern können.
Dieser Artikel zeigt Ihnen, wie Sie eine Vorlage auswählen, wie sich die fünf unterscheiden und wie das Split-Layout funktioniert. Das Split-Layout platziert Ihr Login-Formular auf der einen Seite und ein Promo-Panel auf der anderen. Farben, Formularbeschriftungen und Promotion-Texte haben eigene Einstellungen und werden hier nicht behandelt.
Voraussetzungen
| Anforderung | Details |
|---|---|
| Plugin | Custom Login for WooCommerce installiert und aktiv |
| WooCommerce | Installiert und aktiv |
| Zugriff | Ein Konto, das WooCommerce-Einstellungen verwalten kann |
Schritt 1: Öffnen Sie den Vorlagen-Tab
- Gehen Sie in Ihrem WordPress-Admin zu WooCommerce → Custom Login.
- Klicken Sie auf den Tab Vorlage.
Der Tab zeigt eine Überschrift namens Vorlagendesign und fünf Karten. Jede Karte zeigt eine kleine Vorschau, den Vorlagennamen und eine einzeilige Beschreibung. Die Karte für Ihre aktuelle Vorlage ist hervorgehoben.
Schritt 2: Wählen Sie eine Vorlage aus
Klicken Sie auf die Karte für die gewünschte Vorlage. Die Hervorhebung wechselt zu Ihrer Auswahl. Hier ist ein Vergleich der fünf:
| Vorlage | Aussehen und Gefühl | Promo-Panel |
|---|---|---|
| Classic Split | Weißes Formular auf einer Seite, farbiges Promo-Panel auf der anderen | Angezeigt, nebeneinander |
| Centered Card | Weiße Karte zentriert auf dunklem Hintergrund | Versteckt auf breiten Bildschirmen |
| Gradient Modern | Lila Farbverlauf-Hintergrund mit einer schwebenden weißen Karte | Neben der Karte angezeigt |
| Dark Mode | Dunkles Formular und dunkles Promo-Panel mit bernsteinfarbenen Akzenten | Angezeigt, nebeneinander |
| Warm Organic | Warmgelbe Töne, abgerundete Ecken und ein freundliches Gefühl | Angezeigt, überlappt die Karte |
Klassisches Split ist die Standardeinstellung. Wenn Sie noch nichts ausgewählt haben, verwendet Ihre Login-Seite diese.
Sie sind sich nicht sicher, welche Sie wählen sollen? Verwenden Sie dies als Ausgangspunkt:
- Klassisches Split: ein sauberes, vertrautes Layout, das für die meisten Shops funktioniert.
- Zentrierte Karte: ein einfaches, fokussiertes Formular ohne weitere Elemente auf der Seite bei breiten Bildschirmen.
- Farbverlauf Modern: ein kräftiger, farbenfroher Look für Marken mit modernem Charakter.
- Dunkelmodus: ein dunklerer Stil, der zu Tech-, Gaming- oder nachtfreundlichen Marken passt.
- Warm Organisch: ein weicher, zugänglicher Look für Handwerks-, Lebensmittel- oder Lifestyle-Shops.
Schritt 3: Speichern Sie Ihre Auswahl
Klicken Sie auf Einstellungen speichern. Ihre Vorlage wird sofort auf der Login-Seite angewendet.
Schritt 4: Überprüfen Sie Ihre Login-Seite
- Melden Sie sich ab oder öffnen Sie ein privates Browserfenster.
- Gehe zu
deinshop.com/login, um deine neue Vorlage anzuzeigen. - Überprüfe die Seite auch auf einem Handy, da das Promo-Panel auf kleinen Bildschirmen anders funktioniert.
Wie das Split-Layout funktioniert
Ein Split-Layout zeigt zwei Panels: das Login-Formular und ein Promo-Panel. Im Promo-Panel werden deine Überschrift, Nachricht, Schaltfläche und optionales Bild angezeigt. Classic Split ist das klarste Beispiel, mit dem Formular auf der einen Seite und der Promo auf der anderen. Dark Mode teilt den Bildschirm ebenfalls in zwei Hälften. Gradient Modern und Warm Organic behalten das Formular in einer Karte. Gradient Modern platziert das Promo-Panel neben der Karte, und Warm Organic schiebt es teilweise hinter die Karte.
Zwei Einstellungen steuern, ob das Promo-Panel angezeigt wird.
Promo-Bereich aktivieren befindet sich auf der Registerkarte Inhalt und ist standardmäßig aktiviert. Schalte es aus, und die Login-Seite zeigt nur das Formular an, unabhängig davon, welche Vorlage du wählst.
Mobile Promo-Anzeige befindet sich auf der Registerkarte Design. Wähle Auf Mobilgeräten ausblenden, um nur das Formular auf kleinen Bildschirmen anzuzeigen, oder Unter dem Login-Formular stapeln, um die Promo unter dem Formular anzuzeigen. Standardmäßig ist Auf Mobilgeräten ausblenden ausgewählt.
Um zu ändern, was das Promo-Panel anzeigt, siehe den Abschnitt Werbeinhalte auf der Registerkarte Inhalt.
Fehlerbehebung
deinshop.com/login in einem privaten Fenster. Wenn du ein Caching-Plugin oder einen seitenweiten Cache verwendest, leere auch diesen Cache.Häufig gestellte Fragen
Benötigen Sie Hilfe?
Custom Login für WooCommerce ist ein Premium-Plugin. Wenn Sie also Probleme haben, öffnen Sie ein Support-Ticket und unser Team hilft Ihnen bei der Einrichtung.
