Le bloc de formulaire de connexion vous permet d'ajouter un formulaire de connexion WordPress entièrement fonctionnel directement à n'importe quelle page SeedProd. Ce bloc est idéal pour créer des pages de connexion personnalisées, des portails membres et des zones à accès restreint sans dépendre de la page de connexion WordPress par défaut.
Le bloc comprend des champs pour le nom d'utilisateur et le mot de passe, un bouton de connexion, une case à cocher « Se souvenir de moi », un lien « Mot de passe oublié » et un contrôle total sur le style des champs, la typographie et les couleurs — le tout personnalisable sans écrire de code.
Ajouter le bloc de formulaire de connexion à vos pages
Suivez ces étapes pour ajouter un bloc de formulaire de connexion à votre page SeedProd :
Étape 1 : Ajouter le bloc
Sous Design > Blocs, faites glisser le bloc Formulaire de connexion dans la section souhaitée de votre page.
Étape 2 : Configurer les paramètres de contenu
Une fois ajouté, cliquez sur le bloc Formulaire de connexion pour ouvrir ses paramètres. L'onglet Contenu est organisé en quatre sections : Champs, Bouton, Action de succès et Options supplémentaires.
Champs :
- Libellé du champ Utilisateur : Personnalisez le texte du libellé affiché au-dessus du champ de saisie du nom d'utilisateur ou de l'e-mail.
- Texte de remplacement du champ Utilisateur : Définissez le texte de remplacement affiché à l'intérieur du champ de saisie du nom d'utilisateur ou de l'e-mail lorsqu'il est vide.
- Libellé du champ Mot de passe : Personnalisez le texte du libellé affiché au-dessus du champ de saisie du mot de passe.
- Texte de remplacement du champ Mot de passe : Définissez le texte de remplacement affiché à l'intérieur du champ de saisie du mot de passe lorsqu'il est vide.
Bouton :
- Texte du bouton : Personnalisez le libellé affiché sur le bouton de soumission de connexion.
Action de succès :
- URL de redirection : Entrez une URL vers laquelle rediriger l'utilisateur après une connexion réussie. Laissez vide pour utiliser le comportement de redirection par défaut de WordPress.
- Texte si connecté : Entrez le message affiché à la place du formulaire de connexion lorsque l'utilisateur est déjà connecté. Utilisez
{user}comme espace réservé et il sera remplacé par le nom d'affichage de l'utilisateur.
Options supplémentaires :
- Libellé Se souvenir de l'utilisateur : Personnalisez le texte du libellé de la case à cocher « Se souvenir de moi » (par exemple, « Se souvenir de moi »).
- Texte du lien Mot de passe oublié : Personnalisez le texte du lien mot de passe oublié affiché sous le formulaire (par exemple, « Mot de passe oublié ? »).
Étape 3 : Choisir un modèle (facultatif)
L'onglet Modèles propose un ensemble de préréglages de style de champ prédéfinis. Cliquez sur n'importe quel modèle pour appliquer instantanément une combinaison de paramètres de fond, de bordure et de rayon pour les champs. Les préréglages disponibles incluent les styles de champ Clair, Sans bordure, Bordure large, Gris, Foncé, Bordure inférieure et Champ de saisie transparent.
Étape 4 : Personnaliser la conception
Dans l'onglet Avancé, vous pouvez affiner les couleurs, la typographie et la taille de tous les éléments du formulaire. L'onglet est organisé en quatre sections : Couleurs, Formulaire, Champs et Bouton.
Couleurs :
- Couleur du lien : Définissez la couleur des liens « Se souvenir de moi » et « Mot de passe oublié ».
- Couleur du texte du libellé : Définissez la couleur du texte du libellé du champ.
- Couleur du texte du champ : Définissez la couleur du texte saisi dans les champs de saisie.
- Couleur d'arrière-plan des champs : Définissez la couleur d'arrière-plan des champs de saisie.
- Couleur de bordure des champs : Définissez la couleur de bordure des champs de saisie.
- Couleur d'arrière-plan du bouton : Définissez la couleur d'arrière-plan du bouton de connexion.
Formulaire :
- Police des étiquettes : Choisissez la famille de polices et la variante de police pour les étiquettes des champs.
- Taille du texte des étiquettes : Définissez la taille de la police des étiquettes des champs de 10 à 30 pixels.
- Espacement des lignes : Définissez l'espacement vertical entre les lignes du formulaire de 0 à 30 pixels.
- Alignement : Définissez l'alignement horizontal de l'ensemble du formulaire — Gauche, Centre ou Droite.
Champs :
- Police des champs : Choisissez la famille de polices et la variante de police pour le texte à l'intérieur des champs de saisie.
- Taille des champs : Définissez la taille globale des champs de saisie — Petit, Moyen ou Grand.
- Largeur des champs : Définissez la largeur des champs de saisie en pourcentage de 10 à 100 %.
- Espacement des étiquettes : Définissez l'espacement entre l'étiquette et le champ de saisie de 0 à 30 pixels.
- Épaisseur de bordure des champs : Définissez indépendamment l'épaisseur de bordure pour chaque côté des champs de saisie (Haut, Droite, Bas, Gauche).
- Rayon des bords des champs : Définissez le rayon des coins des champs de saisie de 0 à 50 pixels.
Bouton :
- Police du bouton : Choisissez la famille de polices et la variante de police pour le texte du bouton de connexion.
- Taille du bouton : Définissez la taille globale du bouton de connexion — Petit, Moyen ou Grand.
- Rayon des bords du bouton : Définissez le rayon des coins du bouton de connexion de 0 à 50 pixels.
Vous pouvez également contrôler l'espacement, les classes CSS personnalisées, la visibilité sur les appareils et les animations d'entrée dans les sections restantes de l'onglet Avancé.
Étape 5 : Enregistrer vos modifications
Une fois que vous avez terminé de configurer le bloc de formulaire de connexion et de personnaliser son apparence, assurez-vous de sauvegarder votre travail.
Vous avez ajouté avec succès un bloc de formulaire de connexion à votre page ! Un formulaire de connexion bien conçu renforce la confiance et permet aux membres d'accéder facilement à votre contenu. Utilisez l'onglet Modèles pour des préréglages de style de champ rapides, ou plongez dans l'onglet Avancé pour faire correspondre chaque couleur, police et taille à votre marque.