Comment ajouter du CSS personnalisé dans Elementor : 4 méthodes simples

Vous cherchez des moyens de ajouter du CSS personnalisé dans Elementor ?

Étendre les conceptions déjà étonnantes d'Elementor en ajoutant du CSS personnalisé peut vous donner un avantage imbattable sur vos concurrents.

Alors, pourquoi ne pas utiliser du CSS personnalisé Elementor et vous démarquer dans la foule de ce monde numérique hautement compétitif, n'est-ce pas ?

Il n’y a aucune raison pour que vous ne le fassiez pas.

Mais comment ajouter du CSS personnalisé au générateur de pages Elementor par glisser-déposer ?

Eh bien, vous pouvez ajouter du CSS personnalisé dans Elementor de plusieurs manières. Pour en savoir plus sur comment ajouter du CSS personnalisé dans Elementor keep en lisant…

Qu’est-ce que CSS ?

CSS (Cascading Style Sheets) est un langage de feuille de style basé sur des règles que l'on utilise pour modifier la mise en page et l'apparence des pages Web créées avec un langage de balisage tel que HTML ou XML. L'utilisation de CSS est un moyen efficace de conception Web car elle conserve à la fois le contenu et le style dans un fichier séparé, vous offrant ainsi la plus grande flexibilité et facilité d'utilisation.

Pourquoi devriez-vous ajouter du CSS personnalisé dans le site Elementor?

Eh bien, ce n'est pas obligatoire parce que Élémentor lui-même fournit toutes les options de personnalisation dont vous avez besoin pour créer de magnifiques sites Web. Cependant, si vous savez coder et que vous souhaitez utiliser votre créativité pour améliorer l’apparence du site, vous pouvez ajouter du CSS personnalisé dans Elementor.

• En utilisant du CSS personnalisé dans Elementor, vous pouvez remplacer le style du thème pour implémenter un nouveau style. Supposons que vous aimiez l'apparence générale d'une page fournie par votre thème, mais que vous souhaitiez modifier un tout petit peu la mise en page dans une section, vous pouvez alors utiliser l'aide du CSS personnalisé Elementor pour ce faire.

• De même, vous pouvez également remplacer la conception du modèle prédéfini Elementor à l'aide des extraits de code CSS personnalisés.

• Vous pouvez également concevoir votre site Web sur mesure pour qu'il soit différent sur différents appareils en ajoutant des extraits de code CSS personnalisés à Elementor.

Comment ajouter du CSS personnalisé dans Elementor : 3 méthodes différentes

L'ajout de CSS personnalisés n'est pas du tout une tâche difficile. En fait, vous pouvez ajouter du CSS personnalisé dans Elementor en utilisant diverses méthodes. Ici, je partage avec vous les 4 façons les plus sûres d'ajouter du CSS personnalisé Elementor.

1️⃣ Ajoutez du CSS à l'aide des extraits de code CSS personnalisés d'Elementor

Elementor vous offre une option avancée pour ajouter du CSS personnalisé à vos sections, colonnes ainsi qu'à vos widgets. Cependant, cette option n'est disponible qu'avec Élémentor Pro.

Pour ajouter du CSS personnalisé à n'importe quelle section/section interne de votre site Web Elementor, cliquez sur les six points pour passer en mode édition, puis passez au Onglet Avancé ⇒ CSS personnalisé. Développez maintenant l'onglet CSS personnalisé et ajoutez votre code personnalisé.

De même, vous pouvez également ajouter du CSS personnalisé dans les widgets Elementor. Pour cela, cliquez sur le widget pour passer en mode édition, puis passez à l'onglet Avancé ⇒ CSS personnalisé. Développez maintenant l'onglet CSS personnalisé et ajoutez votre code personnalisé.

2️⃣ Utilisez le widget HTML pour ajouter du CSS personnalisé Elementor

La deuxième option que vous pouvez utiliser pour ajouter du CSS personnalisé Elementor à votre site Web WordPress consiste à utiliser le widget HTML. Pour cette option, il suffit simplement faites glisser et déposez le widget HTML puis ajoutez votre code CSS dans une balise Style. 

Note: Vous pouvez ajouter du CSS en ligne et autonome à l'aide de la balise HTML. Et ne vous inquiétez pas, seuls les styles seront reflétés sur le site, le code brut ne sera pas visible.

3️⃣ Ajouter du CSS personnalisé dans les paramètres du site Elementor

Vous pouvez également ajouter du CSS personnalisé dans Elementor à l'aide de l'option des paramètres du site. Cliquez sur le menu hamburger en haut à gauche puis sous paramètres, cliquez sur l'option Paramètres du site pour accéder aux options de configuration globale du site.

Maintenant faites défiler jusqu'à l'option CSS personnalisé, ouvrez l'onglet et ajoutez vos styles personnalisés ici.

4️⃣ Ajoutez du CSS personnalisé dans Elementor à partir des paramètres de personnalisation de WordPress

Vous n'êtes pas nécessairement obligé d'utiliser les options proposées par Elementor pour ajouter du CSS personnalisé. Vous pouvez également utiliser les options de personnalisation de WordPress pour ajouter du CSS personnalisé.

Pour cela, rendez-vous sur Tableau de bord WordPress ⇒ Apparence ⇒ Personnaliser. 

Vous trouverez maintenant de nombreux paramètres que vous pouvez utiliser pour personnaliser votre Site WordPress. Faites défiler vers le bas et ouvrez le Onglet CSS supplémentaire pour ajouter du CSS personnalisé à votre site.

Comment résoudre le problème CSS personnalisé Elementor qui ne fonctionne pas

Parfois, l'ajout de CSS personnalisés dans Elementor peut ne pas être immédiatement reflété sur le site en raison de problèmes techniques. Voici les étapes que vous pouvez adopter pour résoudre ce problème :

✅Régénérer CSS

La régénération CSS peut résoudre ce problème. Pour régénérer CSS, accédez à Elementor ⇒ Outils et cliquez sur Régénérer CSS et données puis cliquez sur Enregistrer les modifications.

✅ Effacer le cache du site Web et le cache du navigateur

Videz le cache du site Web avec n'importe quel WordPress plugins de cache. Vous pouvez également vider n'importe quel cache au niveau du serveur si vous en avez un. Après avoir vidé le cache du site Web, videz le cache de votre navigateur et actualisez le site pour vérifier si le CSS fonctionne ou non.

✅ Incompatibilité des thèmes

Parfois Thème Elementor une incompatibilité peut être la raison pour laquelle le CSS personnalisé n'apparaît pas sur le front-end. Vous pouvez essayer de passer à n'importe quel thème par défaut pour vérifier si le CSS fonctionne, si le CSS apparaît sur le front-end avec un thème par défaut puis parlez à votre développeur de thème du problème de compatibilité.

✅ Utiliser un autre constructeur de pages avec Elementor

L’utilisation de plusieurs générateurs de pages en même temps peut empêcher votre CSS personnalisé de fonctionner. La raison simple est que les CSS de différents constructeurs de pages peuvent entrer en conflit les uns avec les autres et que l'autre constructeur de pages peut remplacer le CSS personnalisé d'Elementor. Dans de tels cas, vous devez utiliser uniquement le générateur de pages Elementor.

Questions fréquemment posées

Jetez un œil à certaines des questions les plus populaires liées au CSS personnalisé Elementor avec des réponses :

Comment utiliser du CSS personnalisé dans Elementor ?

Vous pouvez ajouter du CSS personnalisé dans Elementor de 4 manières. Ces méthodes utilisent le bloc HTML, l'extrait CSS personnalisé Elementor, les options de personnalisation de WordPress et les paramètres de création de site Elementor.

Comment puis-je ajouter gratuitement du CSS personnalisé à Elementor ?

À partir des options de personnalisation de WordPress, vous pouvez ajouter gratuitement du CSS personnalisé sur le site Web Elementor.

Conclusion avec le CSS personnalisé Elementor

Vous connaissez maintenant 4 façons d’ajouter du CSS personnalisé dans Elementor. Bien que vous puissiez tous les utiliser, vous devez garder à l’esprit la hiérarchie de priorité CSS. Par exemple, un style en ligne aura toujours plus de priorité sur le CSS écrit au niveau de la page ou du site Web.

Je recommanderais donc d’utiliser du CSS personnalisé uniquement lorsque vous connaissez très bien le CSS. Sinon, vous pourriez faire plus de mal que de bien et finir par gâcher l'apparence et la mise en page de votre site Web.

Cela dit, si vous êtes un pro du CSS, alors vous n'avez rien à craindre, n'hésitez pas à utiliser les méthodes décrites dans ce blog pour ajouter votre CSS personnalisé afin de réussir à changer l'apparence de votre site Web.