Exemples de boutons

Dans cet article, vous trouverez différents exemples d'affichage de bouton Weglot et vous aurez des astuces pour améliorer le vôtre.


1. N'hésitez pas à vous inspirer de différents styles!


2. paramètres de conception par défaut du Weglotsélecteur

Allez dans votre WordPress/Shopify WeglotDashboard > Apparence des boutons de langue et sélectionnez les Weglotparamètres du sélecteur que vous souhaitez pour le sélecteur sur votre site Web.

Sur WordPress, le panneau de paramètres est le suivant :

Sur Shopify, le panneau de réglages est le suivant :

Si vous cherchez à changer le nom de l'utilisateur Weglot position de l'interrupteur, tu vois : WordPress : Comment puis-je changer la position du Weglotbouton ? Magasiner : Comment puis-je changer la position du Weglotbouton ?

3. Code CSS personnalisé

Vous avez également la possibilité d'ajouter votre propre code CSS personnalisé pour personnaliser encore plus le Weglotswitcher sur votre site web !

Pour ce faire, vous devez aller dans votre WordPress/Shopify dashboard> Override CSS et ajouter les règles CSS que vous souhaitez appliquer.

Les codes CSS suivants sont des exemples de codes personnalisés que vous pouvez appliquer au Weglotcommutateur.

Ajoutez un parchemin vers le bas dans le dropdown du commutateur :

.wg-drop.country-selector:not(.closed) ul {
    max-height: 300px;
}

Faire un bouton transparent sans bordure et écriture blanche:

.wg-drop.country-selector {
    background-color: transparent!important;
}
.wg-drop.country-selector .wgcurrent {
    border: none!important;
}
.wg-drop.country-selector ul {
    background-color: transparent!important;
    border: none!important;
}
.country-selector a {
    color: white!important;
}

Ajoutez des majuscules et modifiez la police de vos langues (ici 'CustomFont'):

.country-selector a {
    text-transform: uppercase;
    font-family: CustomFont, sans-serif;
}

  Enlevez la flèche du bouton et changez la couleur de la flèche en blanc:

.wg-drop.country-selector .wgcurrent:after {
    display: none!important;
}
		
.wg-drop.country-selector .wgcurrent:after {
    filter: invert(100%)!important; 
}
		

Vous avez encore besoin d’aide? Contactez-nous Contactez-nous