Une page de connexion en bleu par défaut peut jurer avec les couleurs de votre propre marque. Les clients le remarquent. Un bouton qui ne correspond pas à votre logo, ou un panneau promotionnel qui jure avec votre en-tête, donne une impression d'inachevé à la page. Custom Login for WooCommerce vous permet de définir les couleurs principales de la page de connexion à partir d'un seul écran, sans code.
Cet article vous montre comment définir les couleurs du panneau, du texte, des boutons, des liens, des champs de saisie et des boutons de promotion. Vous choisirez également le comportement du panneau promotionnel sur les téléphones. Choisir un modèle, renommer les étiquettes du formulaire et modifier le texte de la promotion ont chacun leurs propres articles.
Prérequis
| Exigence | Détails |
|---|---|
| Plugin | Custom Login for WooCommerce installé et actif |
| WooCommerce | Installé et actif |
| Accès | Un compte qui peut gérer les paramètres WooCommerce |
| Valeurs de couleur | Vos couleurs de marque sous forme de codes hexadécimaux, tels que #1e40af |
Étape 1 : Ouvrir l'onglet Design
- Allez dans WooCommerce → Custom Login dans votre administration WordPress.
- Cliquez sur l'onglet Design.
Les paramètres de couleur se trouvent dans leurs propres sections : Couleurs du panneau, Couleurs des boutons, Couleurs des boutons de promotion, Couleurs des liens et Couleurs des champs de saisie. Affichage de la promotion sur mobile se trouve en dessous.
Chaque couleur a un échantillon de couleur et une petite zone de texte. Cliquez sur l'échantillon pour choisir une couleur visuellement. Ou tapez un code hexadécimal directement dans la zone de texte.
Étape 2 : Définir les couleurs du panneau
La section Couleurs du panneau définit les couleurs d'arrière-plan et de texte pour les deux côtés d'une page de connexion divisée. Le côté gauche contient votre formulaire de connexion. Le côté droit contient votre message promotionnel.
| Paramètre | Ce qu'il change | Par défaut |
|---|---|---|
| Arrière-plan du panneau gauche | Arrière-plan du côté du formulaire | #ffffff |
| Texte du panneau gauche | Couleur du texte du côté du formulaire | #333333 |
| Arrière-plan du panneau droit | Arrière-plan du message promotionnel | #1e40af |
| Texte du panneau de droite | Couleur du texte sur le côté promotionnel | #ffffff |
Choisissez un arrière-plan et une couleur de texte avec un fort contraste. Par exemple, un texte clair sur un fond sombre reste facile à lire, tandis qu'un texte gris sur un fond gris pâle ne l'est pas.
Étape 3 : Définir les couleurs des boutons
La section Couleurs des boutons personnalise votre bouton de connexion. Survol signifie le moment où un client passe sa souris sur le bouton. Une couleur de survol différente lui indique que le bouton est prêt à être cliqué.
| Paramètre | Ce qu'il change | Par défaut |
|---|---|---|
| Arrière-plan du bouton | Couleur du bouton de connexion | #3b82f6 |
| Texte du bouton | Couleur des mots sur le bouton | #ffffff |
| Arrière-plan de survol du bouton | Couleur du bouton lorsque la souris est dessus | #2563eb |
Une couleur de survol légèrement plus foncée que la couleur principale fonctionne bien.
Étape 4 : Définir les couleurs du bouton promotionnel
La section Couleurs du bouton promotionnel personnalise le bouton de votre panneau promotionnel, tel que En savoir plus. Ces couleurs n'ont d'importance que lorsque le panneau promotionnel est visible. Si vous avez désactivé Activer la section promotionnelle dans l'onglet Contenu, vous pouvez ignorer cette étape.
| Paramètre | Ce qu'il change | Par défaut |
|---|---|---|
| Arrière-plan du bouton promotionnel | Couleur du bouton promotionnel | #ffffff |
| Texte du bouton promotionnel | Couleur des mots sur le bouton | #1e40af |
| Arrière-plan de survol du bouton promotionnel | Couleur du bouton lorsque la souris est dessus | #f3f4f6 |
| Bordure du bouton promotionnel | Contour autour du bouton | #ffffff |
Assurez-vous que le bouton se détache de l'Arrière-plan du panneau de droite. S'ils sont de la même couleur, le bouton se fond dans le panneau.
Étape 5 : Définir les couleurs des liens
La section Couleurs des liens personnalise le lien Mot de passe perdu ? sous le formulaire de connexion.
| Paramètre | Ce qu'il change | Par défaut |
|---|---|---|
| Couleur du lien | Couleur du lien | #3b82f6 |
| Couleur de survol du lien | Couleur du lien lorsque la souris le survole | #1d4ed8 |
Étape 6 : Définir les couleurs des champs de saisie
La section Couleurs des champs de saisie stylise les champs Adresse e-mail et Mot de passe.
| Paramètre | Ce qu'il change | Par défaut |
|---|---|---|
| Bordure des champs de saisie | Contour autour de chaque champ | #d1d5db |
| Bordure de mise au point des champs de saisie | Contour lorsqu'un client tape dans le champ | #3b82f6 |
La mise au point signifie le champ dans lequel un client a cliqué. Une couleur de mise au point plus audacieuse lui indique où il se trouve sur le formulaire.
Étape 7 : Choisir comment la promotion s'affiche sur mobile
Sur un écran large, le panneau de promotion se trouve à côté du formulaire de connexion. Sur un téléphone, il n'y a pas assez de place pour les deux. La section Affichage de la promotion sur mobile vous permet de décider ce qui se passe à la place.
| Option | Ce qui se passe sur un téléphone |
|---|---|
| Masquer sur mobile | Seul le formulaire de connexion s'affiche. C'est le réglage par défaut. |
| Empiler sous le formulaire de connexion | Le panneau de promotion s'affiche sous le formulaire de connexion. |
Ces options s'appliquent aux écrans d'environ 768 pixels de large ou moins. Sur Gradient Modern et Warm Organic, le changement se produit à 900 pixels. Empiler sous le formulaire de connexion n'a d'effet que lorsque Activer la section de promotion est activé.
Choisissez Masquer sur mobile pour une connexion plus rapide et plus propre. Choisissez Empiler sous le formulaire de connexion lorsque votre promotion contient une offre que vous souhaitez que les acheteurs sur téléphone voient.
Étape 8 : Enregistrer et vérifier votre page de connexion
- Cliquez sur Enregistrer les paramètres.
- Déconnectez-vous ou ouvrez une fenêtre de navigateur privée.
- Visitez
votremagasin.com/loginpour voir les nouvelles couleurs. - Survolez le bouton de connexion pour vérifier sa couleur au survol.
- Survolez le lien Mot de passe oublié ? pour vérifier sa couleur au survol.
- Ouvrez la page sur votre téléphone pour vérifier la mise en page mobile.
Quelles couleurs chaque modèle utilise
Chaque modèle lit vos paramètres de couleur, mais certains modèles définissent également quelques couleurs qui leur sont propres. Ces couleurs de modèle l'emportent sur le paramètre correspondant. Classic Split suit toutes vos couleurs. Les autres modèles conservent une partie de leur aspect intégré, de sorte que certains paramètres n'ont aucun effet visible là où ils se trouvent.
| Paramètre | Classique Divisé | Carte Centrée | Moderne Dégradé | Mode Sombre | Organique Chaud |
|---|---|---|---|---|---|
| Arrière-plans des panneaux | Oui | Non | Non | Non | Non |
| Texte du panneau | Oui | Oui | Partiellement | Non | Non |
| Arrière-plan du bouton et Arrière-plan du survol du bouton | Oui | Oui | Non | Non | Non |
| Texte du bouton | Oui | Oui | Oui | Non | Non |
| Couleurs des liens | Oui | Oui | Oui | Non | Non |
| Bordure des champs de saisie | Oui | Non | Non | Non | Non |
| Bordure de mise au point des champs de saisie | Oui | Oui | Non | Non | Non |
| Couleurs des boutons promotionnels | Oui | Téléphones uniquement, lorsqu'ils sont empilés | Oui | Oui | Oui |
« Partiellement » signifie que les étiquettes du formulaire utilisent la couleur de votre texte, mais que le modèle définit ses propres couleurs pour les titres et les textes promotionnels. Carte centrée masque le panneau promotionnel sur les écrans larges, de sorte que les paramètres promotionnels n'ont rien à colorer là.
Sur chaque modèle, Arrière-plan du bouton colore également la case à cocher Se souvenir de moi lorsqu'elle est cochée.
Si vous souhaitez un contrôle total de chaque couleur, choisissez Séparation classique. Pour des instructions détaillées, consultez comment choisir un modèle de page de connexion.
Dépannage
#, et cliquez sur Enregistrer les paramètres. Le plugin n'accepte que les codes hexadécimaux tels que #1e40af. Tout le reste, y compris un nom de couleur comme blue ou un code manquant le #, est ignoré et la couleur par défaut s'affiche à la place.Questions fréquemment posées
Besoin d'aide ?
Custom Login for WooCommerce est un plugin premium, donc si vous rencontrez des problèmes, ouvrez un ticket de support et notre équipe pourra vous aider à vous installer.
