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

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

L'extension des conceptions Elementor déjà étonnantes 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 page Elementor par glisser-déposer ?

Eh bien, vous pouvez ajouter du CSS personnalisé dans Elementor de plusieurs façons. Pour en savoir plus sur la façon d'ajouter du CSS personnalisé dans Elementor, continuez à lire…

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 construites avec un langage de balisage tel que HTML ou XML. L'utilisation de CSS est un moyen efficace de conception de sites Web, car il conserve à la fois le contenu et le style dans un fichier séparé, ce qui vous offre le plus de flexibilité et de facilité d'utilisation.

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

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

• En utilisant le CSS personnalisé dans Elementor, vous pouvez remplacer le style du thème pour implémenter un nouveau style. Supposons que vous aimiez l'aspect général d'une page fournie par votre thème, mais que vous souhaitiez modifier légèrement la mise en page dans une section, vous pouvez alors vous faire aider par le CSS personnalisé Elementor.

• 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 personnaliser la conception de votre site Web pour qu'il ait un aspect 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é n'est pas du tout un travail difficile. En fait, vous pouvez ajouter du CSS personnalisé dans Elementor en utilisant différentes méthodes. Ici, je partage avec vous les 4 façons les plus sûres d'ajouter du CSS personnalisé Elementor.

Ajouter 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'aux widgets. Cependant, cette option n'est disponible qu'avec Elementor Pro.

Pour ajouter un 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 à l' 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é.

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, faites simplement glisser et déposez le widget HTML , puis ajoutez votre code CSS dans une balise Style.

Remarque : Vous pouvez ajouter des feuilles de style CSS en ligne et autonomes à l'aide de la balise HTML. Et ne vous inquiétez pas, seuls les styles seront répercutés sur le site, le code brut ne sera pas visible.

Ajouter un 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 dans le coin supérieur gauche, puis sous Paramètres, cliquez sur l'option Paramètres du site pour accéder aux options de configuration globales du site.

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

Ajouter du CSS personnalisé dans Elementor à partir des paramètres de personnalisation de WordPress

Vous n'avez pas nécessairement besoin d'utiliser les options fournies 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 dans 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 l' onglet CSS supplémentaire pour ajouter un CSS personnalisé à votre site.

Comment réparer le CSS personnalisé d'Elementor qui ne fonctionne pas

Parfois, l'ajout de CSS personnalisé dans Elementor peut ne pas se refléter immédiatement 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 le CSS

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

Effacer le cache du site Web et le cache du navigateur

Effacez le cache du site Web avec tous les plugins de cache WordPress. Vous pouvez également effacer tout 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é de thème

Parfois, l'incompatibilité du thème Elementor peut être la raison pour laquelle le CSS personnalisé ne s'affiche 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 page avec Elementor

L'utilisation simultanée de plusieurs générateurs de pages peut empêcher votre CSS personnalisé de fonctionner. La simple raison 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é d'Elementor avec des réponses :

Comment utiliser le CSS personnalisé dans Elementor ?

Vous pouvez ajouter du CSS personnalisé dans Elementor de 4 façons. Ces méthodes utilisent le bloc HTML, l'extrait de code CSS personnalisé Elementor, les options de personnalisation WordPress et les paramètres de création du 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é d'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 CSS de priorité. Par exemple, un style en ligne aura toujours plus de priorité que le CSS écrit au niveau de la page ou du site Web.

Donc, je recommanderais d'utiliser uniquement le CSS personnalisé lorsque vous connaissez très bien le CSS. Sinon, vous pouvez 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, 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.