en cours d'utilisation Thèmes WoodMartLors de la création d'un site de commerce électronique, la fenêtre contextuelle de connexion/enregistrement est l'une des premières interfaces que les utilisateurs rencontrent. Si son style ne correspond pas à votre image de marque, il peut nuire à la première impression que l'utilisateur a de votre site.WoodMart lui-même offre déjà une fenêtre contextuelle de connexion et d'enregistrement très flexible, que vous pouvez personnaliser en utilisant la fonctionpersonnalisationL'approche stylisée rend ce module plus conforme à la vision de la marque et renforce le sentiment général de professionnalisme et de reconnaissance.

étape 1 : Activer et prévisualiser les fenêtres pop-up de connexion/d'enregistrement

Avant de commencer, assurez-vous que WoodMart est activé dans les paramètres de votre thème !fenêtre contextuelleFonction de connexion :

• Allez dans le backend de WordPress et cliquez sur WoodMart > Paramètres du thème.
• spectacle (un billet) Mon compte Page de configuration.
• tique Onglets Login/Register(Activer la fonction de connexion par pop-up).

• Après l'enregistrement, visitez la page d'accueil de votre site web, cliquez sur l'"ic?ne utilisateur" dans le coin supérieur droit et assurez-vous que la fenêtre contextuelle s'ouvre normalement.

Le style de fenêtre contextuelle que vous voyez à ce stade est l'aspect de base que WoodMart fournit par défaut.

étape 2 : Effectuer des ajustements de style de base à l'aide du panneau "Theme Settings" (paramètres du thème)

La force de WoodMart réside dans le fait que de nombreux styles peuvent être ajustés à travers le panneau du thème sans écrire de code :

• entrer dans WoodMart > Configuration du thème > Style > BoutonsLa couleur, la taille de la police, les coins arrondis, etc. des boutons de la fenêtre contextuelle peuvent être modifiés de manière uniforme.

• partir pour Style > FormulairesVous pouvez modifier le style de la zone de saisie du formulaire, comme la couleur de la bordure, la couleur du texte saisi, la couleur de l'arrière-plan, etc.

• existent Constructeur d'en-tête Dans le cas du portail de connexion pop-up supérieur, vous pouvez également modifier le style de son ic?ne ou la police de son étiquette.

Il est recommandé de veiller à ce que le style de la fenêtre contextuelle soit cohérent avec la palette de couleurs de l'ensemble du site, en mettant en évidence la tonalité principale de la couleur de la marque, tout en prêtant attention au contraste entre le texte du bouton et l'arrière-plan, afin d'éviter que les utilisateurs ne le voient.

Etape 3 : embellir les détails à l'aide de feuilles de style CSS personnalisées

Si la configuration intégrée ne répond pas à la demande, vous pouvez ajouter un peu deCSS personnalisépour effectuer des ajustements de style plus fins. Voici quelques exemples de personnalisations courantes :

Modifier la couleur de fond et les coins arrondis de la fenêtre popup

.wd-popup.popup-login {
  couleur de fond : #ffffff ;
  box-shadow : 0 10px 30px rgba(0,0,0,0,0.1) ;
  box-shadow : 0 10px 30px rgba(0,0,0,0,0.1) ; }
}

Modifier la bordure de la bo?te de saisie et l'état du focus

.woocommerce-form .form-row input.input-text {
  border : 1px solid #ccc ;
  input-text { border : 1px solid #ccc ; border-radius : 6px ;
  input-text { border : 1px solid #ccc ; border-radius : 6px ; padding : 10px ; font-size : 14px ; font-size : 14px
  font-size : 14px ; }
}

.woocommerce-form .form-row input.input-text:focus {
  box-shadow : 0 0 0 1px #162ae8 ; }
  box-shadow : 0 0 0 1px #162ae8 ;
}

Modifier la couleur et la police des boutons

.button.wd-login-submit {
  background-colour : #162ae8 ;
  font-weight : 600 ; font-weight : 600 ; wd-login-submit { background-colour : #162ae8 ; color : #fff ; wd-login-submit
  
  border-radius : 6px ; }
}

.button.wd-login-submit:hover {
  background-color : #0d1cb0 ; } .button.
}

Collez le code CSS ci-dessus dans le fichier WordPress Backend > Appearance > Customisation > Extra CSS , enregistrez-la et rafra?chissez la page d'accueil pour voir l'effet.

étape 4 : Prise en charge des formulaires multilingues ou à plusieurs étapes (facultatif)

Si votre site web s'adresse à des utilisateurs multilingues, vous pouvez tirer parti de l'option WPML peut-être Polylang WoodMart est compatible avec ces plugins et n'a besoin que de traduire le texte du formulaire de connexion/inscription correspondant.

De même, si vous souhaitez que le processus d'enregistrement soit un formulaire en plusieurs étapes, par exemple en remplissant une adresse électronique dans la première étape et en définissant un mot de passe dans la seconde, vous pouvez combiner le formulaire d'enregistrement et le formulaire d'inscription. Shortcode de la fenêtre d'ouverture de session personnalisée Vous pouvez également utiliser un plugin popup tiers intégré à l'application Les pop-ups WoodMartdans la structure de déclenchement.

Conseil : évitez la personnalisation à outrance et veillez à ce que le produit soit simple et utilisable !

Les styles personnalisés peuvent améliorer l'aspect visuel de la marque, mais n'en faites pas trop et ne compromettez pas l'image de marque.formulaire (document)de l'utilisabilité. Voici quelques suggestions :

• Les zones de saisie doivent avoir des limites claires et suffisamment d'espace pour ne pas être trop compactes.
• Il est recommandé que tous les boutons aient un texte clair, des couleurs contrastées et un retour de clic évident.
• Priorité si le contenu des fenêtres pop-up est élevéMobile Responsiveafin d'éviter les déversements.

résumés

Personnaliser le style de la fenêtre contextuelle de connexion/d'enregistrement de WoodMart n'est pas compliqué. Que vous souhaitiez optimiser les polices de couleur de fa?on modeste ou procéder à une unification stylistique visuelle en profondeur, vous pouvez le faire avec des ajustements intégrés et un peu de CSS. Avec une réflexion claire et quelques ajustements, la première impression de votre site web sera encore meilleure.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨詢：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.