Eine Anmeldeseite im Standardblau kann neben den eigenen Markenfarben Ihres Shops fehl am Platz wirken. Kunden bemerken das. Eine Schaltfläche, die nicht zu Ihrem Logo passt, oder ein Aktionspanel, das mit Ihrem Header kollidiert, lässt die Seite unfertig wirken. Custom Login for WooCommerce ermöglicht es Ihnen, die Hauptfarben der Anmeldeseite von einem Bildschirm aus festzulegen, ganz ohne Code.
Dieser Artikel zeigt Ihnen, wie Sie die Farben für Panel, Text, Schaltfläche, Link, Eingabe und Aktionsschaltfläche festlegen. Sie wählen auch, wie sich das Aktionspanel auf Mobiltelefonen verhält. Auswahl einer Vorlage, Umbenennen von Formularbeschriftungen und Bearbeiten von Aktionstexten haben jeweils eigene Artikel.
Voraussetzungen
| Anforderung | Details |
|---|---|
| Plugin | Custom Login for WooCommerce installiert und aktiv |
| WooCommerce | Installiert und aktiv |
| Zugriff | Ein Konto, das WooCommerce-Einstellungen verwalten kann |
| Farbwerte | Ihre Markenfarben als Hex-Codes, z. B. #1e40af |
Schritt 1: Öffnen Sie die Registerkarte „Design“
- Gehen Sie in Ihrem WordPress-Admin zu WooCommerce → Custom Login.
- Klicken Sie auf die Registerkarte Design.
Die Farbeinstellungen befinden sich in eigenen Abschnitten: Panel-Farben, Schaltflächenfarben, Aktionsschaltflächenfarben, Linkfarben und Eingabefarben. Mobile Aktionsanzeige befindet sich darunter.
Jede Farbe hat eine Farbprobe und ein kleines Textfeld. Klicken Sie auf die Farbprobe, um eine Farbe visuell auszuwählen. Oder geben Sie einen Hex-Code direkt in das Textfeld ein.
Schritt 2: Panel-Farben festlegen
Der Abschnitt Panel-Farben legt die Hintergrund- und Textfarben für die beiden Seiten einer geteilten Anmeldeseite fest. Die linke Seite enthält Ihr Anmeldeformular. Die rechte Seite enthält Ihre Aktionsmeldung.
| Einstellung | Was es ändert | Standard |
|---|---|---|
| Hintergrund des linken Panels | Hintergrund hinter dem Anmeldeformular | #ffffff |
| Text des linken Panels | Textfarbe auf der Formularseite | #333333 |
| Hintergrund des rechten Panels | Hintergrund hinter der Aktionsmeldung | #1e40af |
| Text des rechten Panels | Textfarbe auf der Aktionsseite | #ffffff |
Wählen Sie einen Hintergrund und eine Textfarbe mit starkem Kontrast. Helle Texte auf dunklem Hintergrund sind beispielsweise gut lesbar, während grauer Text auf einem hellgrauen Hintergrund dies nicht ist.
Schritt 3: Schaltflächenfarben festlegen
Der Abschnitt Schaltflächenfarben gestaltet Ihre Anmeldeschaltfläche. Hover bedeutet der Moment, in dem ein Kunde seine Maus über die Schaltfläche bewegt. Eine andere Hover-Farbe signalisiert ihm, dass die Schaltfläche klickbereit ist.
| Einstellung | Was es ändert | Standard |
|---|---|---|
| Hintergrund der Schaltfläche | Farbe der Anmeldeschaltfläche | #3b82f6 |
| Schaltflächentext | Farbe der Wörter auf dem Button | #ffffff |
| Button-Hintergrund (Hover) | Button-Farbe, wenn die Maus darüber fährt | #2563eb |
Eine Hover-Farbe, die etwas dunkler ist als die Hauptfarbe, funktioniert gut.
Schritt 4: Legen Sie die Farben des Promo-Buttons fest
Der Abschnitt Promo-Button-Farben gestaltet den Button in Ihrem Promo-Panel, z. B. Mehr erfahren. Diese Farben sind nur relevant, wenn das Promo-Panel sichtbar ist. Wenn Sie Promo-Bereich aktivieren im Tab Inhalt deaktiviert haben, können Sie diesen Schritt überspringen.
| Einstellung | Was es ändert | Standard |
|---|---|---|
| Hintergrund des Promo-Buttons | Farbe des Promo-Buttons | #ffffff |
| Text des Promo-Buttons | Farbe der Wörter auf dem Button | #1e40af |
| Hintergrund des Promo-Buttons (Hover) | Button-Farbe, wenn die Maus darüber fährt | #f3f4f6 |
| Rahmen des Promo-Buttons | Umrandung um den Button | #ffffff |
Stellen Sie sicher, dass sich der Button vom Hintergrund des rechten Panels abhebt. Wenn beide die gleiche Farbe haben, verschmilzt der Button mit dem Panel.
Schritt 5: Legen Sie die Linkfarben fest
Der Abschnitt Linkfarben gestaltet den Link Passwort vergessen? unter dem Anmeldeformular.
| Einstellung | Was es ändert | Standard |
|---|---|---|
| Linkfarbe | Farbe des Links | #3b82f6 |
| Linkfarbe (Hover) | Linkfarbe, wenn die Maus darüber fährt | #1d4ed8 |
Schritt 6: Legen Sie die Eingabefelderfarben fest
Der Abschnitt Eingabefelderfarben gestaltet die Felder für E-Mail-Adresse und Passwort.
| Einstellung | Was es ändert | Standard |
|---|---|---|
| Rahmen des Eingabefeldes | Umrandung um jedes Feld | #d1d5db |
| Rahmen des Eingabefeldes (Fokus) | Umrandung, während ein Kunde in das Feld tippt | #3b82f6 |
Fokus bedeutet, dass der Kunde in das Feld geklickt hat. Eine kräftigere Fokusfarbe zeigt ihm, wo er sich im Formular befindet.
Schritt 7: Wählen Sie, wie die Promo auf Mobilgeräten angezeigt wird
Auf einem breiten Bildschirm befindet sich das Promo-Panel neben dem Anmeldeformular. Auf einem Telefon ist kein Platz für beides. Der Abschnitt Mobile Promo Display (Anzeige von Promo-Inhalten auf Mobilgeräten) bestimmt, was stattdessen geschieht.
| Option | Was auf einem Telefon passiert |
|---|---|
| Auf Mobilgeräten ausblenden | Nur das Anmeldeformular wird angezeigt. Dies ist die Standardeinstellung. |
| Unter dem Anmeldeformular stapeln | Das Promo-Panel wird unter dem Anmeldeformular angezeigt. |
Diese Optionen gelten für Bildschirme mit einer Breite von etwa 768 Pixeln oder weniger. Bei Gradient Modern und Warm Organic erfolgt der Wechsel bei 900 Pixeln. Stack below login form (Unter dem Anmeldeformular stapeln) hat nur dann eine Auswirkung, wenn Enable promo section (Promo-Bereich aktivieren) aktiviert ist.
Wählen Sie Hide on mobile (Auf Mobilgeräten ausblenden) für die schnellste und sauberste Anmeldung. Wählen Sie Stack below login form (Unter dem Anmeldeformular stapeln), wenn Ihr Promo-Bereich ein Angebot enthält, das Telefonkäufer sehen sollen.
Schritt 8: Speichern und überprüfen Sie Ihre Anmeldeseite
- Klicken Sie auf Save Settings (Einstellungen speichern).
- Melden Sie sich ab oder öffnen Sie ein privates Browserfenster.
- Besuchen Sie
ihrshop.de/login, um die neuen Farben zu sehen. - Fahren Sie mit der Maus über die Anmeldeschaltfläche, um deren Hover-Farbe zu überprüfen.
- Fahren Sie mit der Maus über den Link Lost your password? (Passwort vergessen?), um dessen Hover-Farbe zu überprüfen.
- Öffnen Sie die Seite auf Ihrem Telefon, um das Layout für Mobilgeräte zu überprüfen.
Welche Farben jede Vorlage verwendet
Jede Vorlage liest Ihre Farbeinstellungen, aber einige Vorlagen legen auch einige eigene Farben fest. Diese Vorlagenfarben überschreiben die entsprechende Einstellung. Classic Split (Klassische Trennung) folgt all Ihren Farben. Die anderen Vorlagen behalten einen Teil ihres integrierten Looks, sodass einige Einstellungen dort keine sichtbare Wirkung haben.
| Einstellung | Classic Split | Centered Card | Gradient Modern | Dark Mode | Warm Organic |
|---|---|---|---|---|---|
| Panel-Hintergründe | Ja | Nein | Nein | Nein | Nein |
| Panel-Text | Ja | Ja | Teilweise | Nein | Nein |
| Button Background (Schaltflächenhintergrund) und Button Hover Background (Schaltflächen-Hover-Hintergrund) | Ja | Ja | Nein | Nein | Nein |
| Schaltflächentext | Ja | Ja | Ja | Nein | Nein |
| Linkfarben | Ja | Ja | Ja | Nein | Nein |
| Rahmen des Eingabefeldes | Ja | Nein | Nein | Nein | Nein |
| Rahmen des Eingabefeldes (Fokus) | Ja | Ja | Nein | Nein | Nein |
| Promo-Schaltflächenfarben | Ja | Nur Telefone, wenn gestapelt | Ja | Ja | Ja |
„Teilweise“ bedeutet, dass die Formularbeschriftungen Ihre Textfarbe verwenden, die Vorlage jedoch ihre eigenen Überschriften- und Promo-Textfarben festlegt. Centered Card (Zentrierte Karte) blendet das Promo-Panel auf breiten Bildschirmen aus, sodass die Promo-Einstellungen dort keine Farbe haben.
Auf jeder Vorlage färbt Button Background (Schaltflächenhintergrund) auch das Remember Me (Angemeldet bleiben)-Kontrollkästchen ein, wenn es aktiviert ist.
Wenn Sie die vollständige Kontrolle über jede Farbe wünschen, wählen Sie Classic Split (Klassische Trennung). Detaillierte Anweisungen finden Sie unter Auswahl einer Anmeldeseiten-Vorlage.
Fehlerbehebung
#, und klicken Sie auf Einstellungen speichern. Das Plugin akzeptiert nur Hex-Codes wie #1e40af. Alles andere, einschließlich eines Farbnamens wie blue oder eines Codes, bei dem das # fehlt, wird verworfen und die Standardfarbe angezeigt.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.
