Votre page de connexion vendeur est souvent l'un des premiers points de contact pour les partenaires de votre marketplace. Il est essentiel de la rendre soignée et cohérente avec votre marque. Avec le plugin WC Vendors Signup , vous n'avez pas besoin de modifier les fichiers du plugin ou d'écrire du code compliqué pour obtenir un design professionnel.
Avec quelques lignes de CSS, vous pouvez transformer le formulaire de connexion WC Vendors par défaut en une interface élégante et conviviale qui s'aligne parfaitement avec le style visuel de votre site.
Où ajouter du CSS personnalisé
Vous pouvez ajouter en toute sécurité le code de style ci-dessous en utilisant l'une des méthodes suivantes :
1. Via le personnaliseur WordPress (Recommandé)
- Accédez à Apparence → Personnaliser → CSS additionnel dans votre tableau de bord.
- Collez le code et cliquez sur Publier pour voir vos modifications instantanément.
2. Dans un thème enfant
- Si vous utilisez un thème enfant, ouvrez le fichier
style.css. - Ajoutez l'extrait de CSS ici pour vous assurer que vos personnalisations restent intactes même après les mises à jour du thème.
3. Utilisation d'un plugin CSS personnalisé
- Des plugins tels que WPCode Lite vous permettent d'insérer en toute sécurité des extraits sans modifier les fichiers du thème.
- Collez simplement le code dans votre plugin d'extraits de code préféré et enregistrez.
CSS personnalisé pour le formulaire d'inscription WC Vendors
Utilisez le CSS suivant pour moderniser l'apparence de votre formulaire de connexion WC Vendors. Il stylise les champs de saisie, les boutons et les liens pour créer un design cohérent et professionnel.
Comment ces styles transforment votre formulaire de connexion vendeur
Une fois appliqué, ce CSS donne à votre page de connexion un aspect plus épuré et cohérent. Voici ce qui a changé :
- Champs de saisie raffinés : Bords lisses, tons neutres et texte clair pour une lecture facile.
- Design de bouton moderne : Un fond vert foncé avec du texte jaune doux et une transition de survol douce.
- Liens lisibles : Contraste clair entre le fond et le texte, faisant ressortir les liens de mot de passe et d'inscription.
- Typographie cohérente : La police Verdana maintient un design simple et accessible sur tous les navigateurs.
Votre page de connexion sera plus soignée et accueillante. Ce design amélioré aide les vendeurs à se connecter en toute confiance.
Personnalisez le formulaire de connexion vendeur pour qu'il corresponde à votre image de marque
Faites en sorte que votre page de connexion vendeur fasse partie de votre marque en ajustant le CSS :
- Couleurs : Mettez à jour les codes couleur (par exemple,
#00008B,#012b09) pour correspondre à votre palette de couleurs de marque. - Polices : Remplacez la police par défaut (par exemple, Verdana) par la police de votre marque pour maintenir une typographie cohérente.
- Mise en page et espacement : Ajustez les espacements entre les colonnes, les marges ou les tailles de police pour créer un formulaire plus compact ou plus aéré.
- Boutons et effets de survol : Stylisez les boutons pour qu'ils correspondent aux couleurs de votre marque et aux transitions de survol.
Ces changements garantissent que le formulaire de connexion correspond visuellement à votre marketplace, le rendant professionnel et cohérent.
Améliorez votre page de connexion vendeur à l'aide des blocs Gutenberg
Nous vous recommandons d'utiliser l'éditeur de pages Gutenberg pour ajouter du contenu et de la structure à votre page de connexion vendeur au-delà d'un simple style :
- Image : Utilisez un bloc Image au-dessus du formulaire de connexion pour afficher le logo de votre marketplace ou une bannière personnalisée.
- Message de bienvenue : Ajoutez un bloc Titre ou Paragraphe pour accueillir les vendeurs et présenter la voix de votre marque.
- Liens utiles : Utilisez un bloc Liste pour inclure des liens vers votre centre d'aide, vos informations de contact de support ou des conseils pour le mot de passe.
- Structure et lisibilité : Ajoutez des blocs Espaceur ou Séparateur pour organiser les sections et améliorer la lisibilité.
- Appel à l'action : Ajoutez un bloc Bouton ou Appel à l'action reliant à votre page d'inscription des vendeurs, stylisé avec les couleurs de votre marque.
Prévisualiser vos modifications
Découvrez la différence que ces personnalisations peuvent faire sur votre formulaire de connexion vendeur
En stylisant votre formulaire de connexion avec du CSS, vous pouvez créer une expérience professionnelle et conforme à votre marque, qui reflète immédiatement l'identité de votre place de marché et met les vendeurs en confiance et à l'aise.