Si vous êtes comme moi, vous avez beaucoup d'idées pour votre site Web que vous voulez voir se concrétiser. Et bien qu'Elementor facilite la création de designs uniques grâce aux fonctions de glisser-déposer et aux éléments préconstruits, rien ne peut parfois remplacer la puissance du CSS pur. Dans cet article, nous allons voir comment ajouter des CSS personnalisés dans Elementor pour que vous puissiez aller encore plus loin dans la conception de votre site Web !
Contenu
Toggle3 façons populaires d'ajouter du CSS personnalisé dans Elementor
Il existe plusieurs façons d'ajouter un CSS personnalisé dans Elementor. Jetons un coup d'œil à nos trois meilleures façons de le faire.
- Utilisez le personnalisateur de WordPress
- Utilisez un plugin CSS
- Utilisation du widget HTML
Utilisez le personnalisateur de WordPress.
Pour ajouter du code CSS personnalisé dans Elementor, suivez ces étapes :
- Allez dans Apparence > Personnaliser
- Dans le Customizer de WordPress, cliquez sur Additional CSS.
- La section CSS supplémentaire s'ouvre. Vous pouvez ajouter du code ici en le collant dans la zone de texte ou en cliquant sur le bouton Ajouter CSS personnalisé pour rechercher votre fichier sur votre ordinateur.
Utilisez un plugin CSS
Il existe plusieurs plugins disponibles sur le marché, comme Simple CSS, Custom CSS Pro et CSS Hero, qui vous permettent d'ajouter des CSS personnalisés à Elementor.
Pour commencer, allez dans Custom CSS & JS > Add Custom CSS et cliquez sur Add CSS Code.
Un éditeur CSS de base apparaît sur la gauche. Vous pouvez choisir de charger le code CSS en interne ou dans une feuille de style externe à l'aide des options de configuration situées à droite. En outre, vous pouvez 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 bouton Publier .
Note : Passez à une vue frontale pour voir le code en action.
Utilisation du widget HTML
Vous pouvez utiliser un widget HTML pour ajouter un CSS personnalisé à Elementor. Tout ce que vous devez faire pour cette option est de glisser et déposer le widget HTML et d'ajouter votre code CSS dans une balise Style.
Le CSS personnalisé est un moyen d'ajouter du code personnalisé à votre site Web. Il peut être utilisé à de nombreuses fins, qu'il s'agisse de modifier l'aspect et la convivialité de votre site Web ou d'ajouter des fonctionnalités supplémentaires.
Maintenant que vous savez comment ajouter un CSS personnalisé, vous pouvez l'utiliser sur vos sites Web en suivant les étapes suivantes :
- Ouvrez la fenêtre de l'éditeur d'Elementor et cliquez sur l'icône "+" en haut à gauche.
- Click ‘Custom Code’ and then paste in this piece of code: `.elementor-custom-css{display:none;}`. You can find this under Settings > Custom CSS or Appearance > Theme Options > Custom CSS (depending on which version of WordPress you have).
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. Au lieu de le réparer en modifiant un plugin ou un thème, essayez d'ajouter du code CSS !