Ajouter du style à un élément Zloop
Cette méthode vous permet de tester vos modifications en temps réel avant de les appliquer définitivement.
Faites un clic droit sur l'élément Zloop (bouton FAQ, modal, etc.) et sélectionnez "Inspecter l'élément"
L'onglet développeur s'ouvre avec l'élément HTML surligné. Vous voyez maintenant le "code source" de votre élément.
Cliquez sur l'icône "+" dans l'inspecteur pour ajouter une nouvelle règle CSS pour l'élément ciblé (Chrome)
Propriétés CSS essentielles
Voici les propriétés les plus utiles pour personnaliser vos éléments :
color: #FF5733; /* Couleur du texte */
background: #0056FF; /* Couleur de fond /
border-radius: 10px; / Coins arrondis /
font-size: 16px; / Taille de police /
padding: 15px; / Espacement interne /
border: 2px solid #000; / Bordure */Exemple concret : Personnaliser la FAQ
Voici le CSS pour personnaliser la FAQ Zloop aux couleurs de votre marque :
.faq-floating-btn,
.faq-modal-header,
.faq-floating-btn:hover {
background: #0056FF !important;
color: white !important;
}
Vous n'avez qu'a changer le code hexadécimal #0056FF a votre marque.
Déplacer le bouton FAQ à droite
Par défaut, le bouton FAQ se positionne à gauche pour éviter les conflits avec les chats en ligne. Si vous souhaitez le déplacer vers la droite :
.faq-floating-btn {
right: 20px !important;
left: auto !important;
}Intégrer le CSS dans WordPress
Une fois votre CSS testé, voici où l'ajouter selon votre configuration :
Elementor
Tableau de bord > Elementor > Réglages personnalisés > CSS personnalisé
Divi
Divi > Options du thème > CSS personnalisé
GeneratePress
Apparence > Personnaliser > CSS supplémentaire
Solution universelle
Plugin "Simple Custom CSS and JS"CSS personnalisé > Ajouter du CSS
Résolution de problèmes
🚨 Si vos modifications ne s'appliquent pas
Ajoutez !important à la fin de vos propriétés CSS :
background: #0056FF !important;
color: white !important;Cette solution force l'application de vos styles.
0 commentaires