Si vous êtes comme moi, vous avez sans doute plein d'idées pour votre site web que vous aimeriez voir se concrétiser. Et même si Elementor facilite la création de designs uniques grâce à ses fonctionnalités glisser-déposer et ses éléments prédéfinis, rien ne remplace parfois la puissance du CSS pur. Dans cet article, nous verrons comment ajouter du CSS personnalisé dans Elementor pour vous permettre de pousser encore plus loin la conception de votre site web !
3 méthodes populaires pour ajouter du CSS personnalisé dans Elementor
Il existe plusieurs façons d'ajouter du CSS personnalisé dans Elementor. Voici nos trois principales méthodes.
- Utilisez le personnalisateur WordPress
- Utilisez un plugin CSS
- Utilisation du widget HTML
Utilisez l'outil de personnalisation WordPress.
Pour ajouter du code CSS personnalisé dans Elementor, suivez ces étapes :
- Allez dans Apparence > Personnaliser
- Dans l'outil de personnalisation WordPress, cliquez sur CSS additionnel.
- La section CSS additionnelle s'ouvrira. Vous pouvez y ajouter du code en le collant dans la zone de texte ou en cliquant sur le bouton « Ajouter du CSS personnalisé » pour sélectionner votre fichier sur votre ordinateur.
Utilisez un plugin CSS
Il existe différents plugins disponibles sur le marché, tels que Simple CSS, Custom CSS Pro et CSS Hero, qui vous permettent d'ajouter du CSS personnalisé à Elementor.
Pour commencer, allez dans CSS et JS personnalisés > Ajouter du CSS personnalisé et cliquez sur Ajouter du code CSS.
Un éditeur CSS basique s'affiche à gauche. Vous pouvez choisir de charger le code CSS en interne ou depuis une feuille de style externe grâce aux options de configuration à droite. Vous pouvez également choisir si le code doit être placé dans l'en-tête ou le pied de page
Une fois que vous avez terminé de modifier le code CSS, cliquez sur le Publier .
Remarque : Passez à une vue frontale pour voir le code en action.
Utilisation du widget HTML
Vous pouvez utiliser un widget HTML pour ajouter du CSS personnalisé à Elementor. Il vous suffit de glisser-déposer le widget HTML et d'ajouter votre code CSS dans une balise <style>.
Le CSS personnalisé permet d'ajouter du code personnalisé à votre site web. Il peut servir à de nombreuses choses, comme modifier l'apparence de votre site ou ajouter des fonctionnalités supplémentaires.
Maintenant que vous savez comment ajouter du CSS personnalisé, vous pouvez l'utiliser sur vos sites web en suivant ces étapes :
- Ouvrez la fenêtre de l'éditeur Elementor et cliquez sur l'icône « + » en haut à gauche
- Cliquez sur « Code personnalisé », puis collez le code suivant : `.elementor-custom-css{display:none;}`. Vous trouverez cette option dans Réglages > CSS personnalisé ou Apparence > Options du thème > CSS personnalisé (selon votre version de WordPress).
Conclusion
Maintenant que vous savez comment ajouter du CSS personnalisé, vous pouvez profiter de la flexibilité d'Elementor. La prochaine fois qu'un élément ne se comporte pas comme prévu, essayez d'ajouter du code CSS plutôt que de le corriger avec un plugin ou un changement de thème !
Contenu pertinent
- Qu'est-ce que le framework CSS ?
- Comment supprimer le CSS inutilisé dans WordPress ?
