Mit dem Block „Anmeldeformular“ können Sie ein voll funktionsfähiges WordPress-Anmeldeformular direkt zu jeder SeedProd-Seite hinzufügen. Dieser Block eignet sich ideal zum Erstellen benutzerdefinierter Anmeldeseiten, Mitgliederportale und zugangsbeschränkter Bereiche, ohne auf die Standard-Anmeldeseite von WordPress zurückgreifen zu müssen.
Der Block umfasst Felder für Benutzername und Passwort, eine Anmeldeschaltfläche, ein Kontrollkästchen „Angemeldet bleiben“, einen Link für verlorene Passwörter und vollständige Kontrolle über Feldgestaltung, Typografie und Farben – alles ohne Programmierkenntnisse anpassbar.
Hinzufügen des Anmeldeformular-Blocks zu Ihren Seiten
Befolgen Sie diese Schritte, um einen Anmeldeformular-Block zu Ihrer SeedProd-Seite hinzuzufügen:
Schritt 1: Block hinzufügen
Ziehen Sie unter „Design“ > „Blöcke“ den Block „Anmeldeformular“ per Drag & Drop in den gewünschten Bereich Ihrer Seite.
Schritt 2: Inhaltseinstellungen konfigurieren
Klicken Sie nach dem Hinzufügen auf den Block „Anmeldeformular“, um dessen Einstellungen zu öffnen. Die Registerkarte „Inhalt“ ist in vier Abschnitte unterteilt: Felder, Schaltfläche, Erfolgsaktion und zusätzliche Optionen.
Felder:
- Bezeichnung für Benutzerfeld: Passen Sie den Text der Bezeichnung an, der über dem Eingabefeld für den Benutzernamen oder die E-Mail-Adresse angezeigt wird.
- Platzhalter für Benutzerfeld: Legen Sie den Platzhaltertext fest, der im Eingabefeld für den Benutzernamen oder die E-Mail-Adresse angezeigt wird, wenn dieses leer ist.
- Bezeichnung für das Passwortfeld: Passen Sie den Text der Bezeichnung an, der über dem Passworteingabefeld angezeigt wird.
- Platzhalter für das Passwortfeld: Legen Sie den Platzhaltertext fest, der im Passworteingabefeld angezeigt wird, wenn es leer ist.
Schaltfläche:
- Schaltflächentext: Passen Sie die Beschriftung der Schaltfläche zum Absenden der Anmeldedaten an.
Erfolgsmaßnahme:
- Weiterleitungs-URL: Geben Sie eine URL ein, zu der der Benutzer nach erfolgreicher Anmeldung weitergeleitet werden soll. Lassen Sie das Feld leer, um das Standard-Weiterleitungsverhalten von WordPress zu verwenden.
- Angemeldet Text: Geben Sie die Meldung ein, die anstelle des Anmeldeformulars angezeigt wird, wenn der Benutzer bereits angemeldet ist. Verwenden Sie
{user}als Platzhalter und wird durch den Anzeigenamen des Benutzers ersetzt.
Zusätzliche Optionen:
- Benutzernamen speichern: Passen Sie den Text für das Kontrollkästchen „Angemeldet bleiben“ an (z. B. „Angemeldet bleiben“).
- Linktext für verlorenes Passwort: Passen Sie den Text für den Link für verlorene Passwörter an, der unterhalb des Formulars angezeigt wird (z. B. „Passwort vergessen?“).
Schritt 3: Vorlage auswählen (optional)
Die Registerkarte „Vorlagen“ bietet eine Reihe von vordefinierten Feldstil-Voreinstellungen. Klicken Sie auf eine beliebige Vorlage, um sofort eine Kombination aus Einstellungen für Feldhintergrund, Rahmen und Radius anzuwenden. Zu den verfügbaren Voreinstellungen gehören die Eingabefeldstile „Hell“, „Ohne Rahmen“, „Breiter Rahmen“, „Grau“, „Dunkel“, „Unterer Rahmen“ und „Transparent“.
Schritt 4: Design anpassen
Auf der Registerkarte „Erweitert“ können Sie die Farben, die Typografie und die Größe aller Formularelemente feinabstimmen. Die Registerkarte 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.
- Farbe des Beschriftungstextes: Legen Sie die Farbe des Beschriftungstextes fest.
- Feldtextfarbe: Legen Sie die Farbe des in die Eingabefelder eingegebenen Textes fest.
- Hintergrundfarbe des Feldes: Legen Sie die Hintergrundfarbe der Eingabefelder fest.
- Feldrandfarbe: Legen Sie die Randfarbe der Eingabefelder fest.
- Hintergrundfarbe der Schaltfläche: Legen Sie die Hintergrundfarbe der Anmeldeschaltfläche fest.
Formular:
- Beschriftungsschriftart: Wählen Sie die Schriftfamilie und Schriftvariante für die Feldbeschriftungen aus.
- Beschriftungstextgröße: Legen Sie die Schriftgröße der Feldbeschriftungen zwischen 10 und 30 px fest.
- Zeilenabstand: Legen Sie den vertikalen Abstand zwischen den Formularzeilen von 0 bis 30 px fest.
- Ausrichtung: Legen Sie die horizontale Ausrichtung des gesamten Formulars fest – links, zentriert oder rechts.
Felder:
- Feldschriftart: Wählen Sie die Schriftfamilie und Schriftvariante für den Text in den Eingabefeldern aus.
- Feldgröße: Legen Sie die Gesamtgröße der Eingabefelder fest – klein, mittel oder groß.
- Feldbreite: Legen Sie die Breite der Eingabefelder als Prozentsatz zwischen 10 und 100 % fest.
- Etikettenabstand: Legen Sie den Abstand zwischen dem Etikett und dem Eingabefeld zwischen 0 und 30 px fest.
- Feldrandbreite: Legen Sie die Randbreite für jede Seite der Eingabefelder (oben, rechts, unten, links) separat fest.
- Feldrandradius: Legen Sie den Eckenradius der Eingabefelder zwischen 0 und 50 px fest.
Schaltfläche:
- Schriftart der Schaltfläche: Wählen Sie die Schriftfamilie und die Schriftvariante für den Text der Anmeldeschaltfläche aus.
- Schaltflächengröße: Legen Sie die Gesamtgröße der Anmeldeschaltfläche fest – klein, mittel oder groß.
- Button-Eckenradius: Legen Sie den Eckenradius des Anmelde-Buttons zwischen 0 und 50 px fest.
Sie können auch den Abstand, benutzerdefinierte CSS-Klassen, die Sichtbarkeit auf Geräten und Einstiegsanimationen in den übrigen Abschnitten der Registerkarte „Erweitert“ steuern.
Schritt 5: Speichern Sie Ihre Änderungen
Wenn Sie die Konfiguration des Anmeldeformular-Blocks und die Anpassung seines Erscheinungsbilds abgeschlossen haben, speichern Sie Ihre Arbeit.
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 zur Feldgestaltung oder tauchen Sie in die Registerkarte „Erweitert“ ein, um jede Farbe, Schriftart und Größe an Ihre Marke anzupassen.