Der Login-Formular-Block ermöglicht es Ihnen, ein voll funktionsfähiges WordPress-Login-Formular direkt zu jeder SeedProd-Seite hinzuzufügen. Dieser Block ist ideal für die Erstellung benutzerdefinierter Login-Seiten, Mitgliederportale und zugangsbeschränkter Bereiche, ohne auf die Standard-WordPress-Login-Seite angewiesen zu sein.
Der Block enthält Benutzername- und Passwortfelder, eine Login-Schaltfläche, ein „Angemeldet bleiben“-Kontrollkästchen, einen Link zum Zurücksetzen des Passworts und die vollständige Kontrolle über Feldstile, Typografie und Farben – alles ohne Code anpassbar.
Hinzufügen des Login-Formular-Blocks zu Ihren Seiten
Befolgen Sie diese Schritte, um einen Login-Formular-Block zu Ihrer SeedProd-Seite hinzuzufügen:
Schritt 1: Block hinzufügen
Ziehen Sie unter Design > Blöcke den Login-Formular-Block per Drag & Drop in den gewünschten Bereich Ihrer Seite.
Schritt 2: Inhaltseinstellungen konfigurieren
Nach dem Hinzufügen klicken Sie auf den Login-Formular-Block, um seine Einstellungen zu öffnen. Der Tab Inhalt ist in vier Abschnitte unterteilt: Felder, Schaltfläche, Erfolgsaktion und Zusätzliche Optionen.
Felder:
- Beschriftung für Benutzerfeld: Passen Sie den Beschriftungstext an, der über dem Feld für Benutzername oder E-Mail angezeigt wird.
- Platzhalter für Benutzerfeld: Legen Sie den Platzhaltertext fest, der im Feld für Benutzername oder E-Mail angezeigt wird, wenn es leer ist.
- Beschriftung für Passwortfeld: Passen Sie den Beschriftungstext an, der über dem Passwortfeld angezeigt wird.
- Platzhalter für Passwortfeld: Legen Sie den Platzhaltertext fest, der im Passwortfeld angezeigt wird, wenn es leer ist.
Schaltfläche:
- Schaltflächentext: Passen Sie die Beschriftung an, die auf der Schaltfläche zum Absenden des Logins angezeigt wird.
Erfolgsaktion:
- Weiterleitungs-URL: Geben Sie eine URL ein, zu der der Benutzer nach erfolgreichem Login weitergeleitet werden soll. Lassen Sie das Feld leer, um das Standardverhalten von WordPress für die Weiterleitung zu verwenden.
- Text für eingeloggte Benutzer: Geben Sie die Nachricht ein, die anstelle des Login-Formulars angezeigt wird, wenn der Benutzer bereits eingeloggt ist. Verwenden Sie
{user}als Platzhalter, und dieser wird durch den Anzeigenamen des Benutzers ersetzt.
Zusätzliche Optionen:
- Beschriftung für „Benutzer merken“: Passen Sie den Beschriftungstext für das Kontrollkästchen „Angemeldet bleiben“ an (z. B. „Angemeldet bleiben“).
- Text für Link „Passwort vergessen“: Passen Sie den Text für den Link „Passwort vergessen“ an, der unter dem Formular angezeigt wird (z. B. „Passwort vergessen?“).
Schritt 3: Vorlage auswählen (Optional)
Der Tab Vorlagen bietet eine Reihe von vordefinierten Feldstil-Vorgaben. Klicken Sie auf eine Vorlage, um eine Kombination aus Einstellungen für Feldhintergrund, Rahmen und Radius sofort anzuwenden. Verfügbare Vorgaben umfassen helle, rahmenlose, breite Rahmen-, graue, dunkle, untere Rahmen- und transparente Eingabefeldstile.
Schritt 4: Design anpassen
Im Tab Erweitert können Sie die Farben, Typografie und Größen aller Formularelemente feinabstimmen. Der Tab ist in vier Abschnitte unterteilt: Farben, Formular, Felder und Schaltfläche.
Farben:
- Linkfarbe: Legen Sie die Farbe der Links „Angemeldet bleiben“ und „Passwort vergessen“ fest.
- Beschriftungstextfarbe: Legen Sie die Farbe des Beschriftungstextes der Felder fest.
- Feldtextfarbe: Legen Sie die Farbe des Textes fest, der in die Eingabefelder eingegeben wird.
- Hintergrundfarbe des Feldes: Legen Sie die Hintergrundfarbe der Eingabefelder fest.
- Rahmenfarbe des Feldes: Legen Sie die Rahmenfarbe der Eingabefelder fest.
- Button-Hintergrundfarbe: Legen Sie die Hintergrundfarbe der Anmeldeschaltfläche fest.
Formular:
- Label-Schriftart: Wählen Sie die Schriftfamilie und die Schriftvariante für die Feld-Labels.
- Label-Textgröße: Legen Sie die Schriftgröße der Feld-Labels von 10 bis 30 Pixel fest.
- Zeilenabstand: Legen Sie den vertikalen Abstand zwischen den Formularzeilen von 0 bis 30 Pixel fest.
- Ausrichtung: Legen Sie die horizontale Ausrichtung des gesamten Formulars fest – Links, Mitte oder Rechts.
Felder:
- Feld-Schriftart: Wählen Sie die Schriftfamilie und die Schriftvariante für den Text innerhalb der Eingabefelder.
- Feldgröße: Legen Sie die Gesamtgröße der Eingabefelder fest – Klein, Mittel oder Groß.
- Feldbreite: Legen Sie die Breite der Eingabefelder als Prozentsatz von 10 bis 100 % fest.
- Label-Abstand: Legen Sie den Abstand zwischen dem Label und dem Eingabefeld von 0 bis 30 Pixel fest.
- Rahmenbreite des Feldes: Legen Sie die Rahmenbreite für jede Seite der Eingabefelder (Oben, Rechts, Unten, Links) unabhängig voneinander fest.
- Feld-Radius: Legen Sie den Eckradius der Eingabefelder von 0 bis 50 Pixel fest.
Schaltfläche:
- Button-Schriftart: Wählen Sie die Schriftfamilie und die Schriftvariante für den Text der Anmeldeschaltfläche.
- Button-Größe: Legen Sie die Gesamtgröße der Anmeldeschaltfläche fest – Klein, Mittel oder Groß.
- Button-Radius: Legen Sie den Eckradius der Anmeldeschaltfläche von 0 bis 50 Pixel fest.
Sie können auch Abstände, benutzerdefinierte CSS-Klassen, Geräte-Sichtbarkeit und Animationen für den Eintritt in den verbleibenden Abschnitten der Registerkarte „Erweitert“ steuern.
Schritt 5: Änderungen speichern
Sobald Sie die Konfiguration des Anmeldeformular-Blocks abgeschlossen und sein Erscheinungsbild angepasst haben, stellen Sie sicher, dass Sie Ihre Arbeit speichern.
Sie haben erfolgreich einen Anmeldeformular-Block zu Ihrer Seite hinzugefügt! Ein gut gestaltetes Anmeldeformular schafft Vertrauen und erleichtert Mitgliedern den Zugriff auf Ihre Inhalte. Verwenden Sie die Registerkarte „Vorlagen“ für schnelle Voreinstellungen für die Feldgestaltung oder tauchen Sie in die Registerkarte „Erweitert“ ein, um jede Farbe, Schriftart und Größe an Ihre Marke anzupassen.