Soutenu par un motif génial.
Pour en savoir plus, consultez notre Seahawk Blog.

Comment ajouter un CSS personnalisé dans Elementor ?

Comment ajouter un CSS personnalisé dans Elementor

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 !

3 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 : 

ajouter des css personnalisés dans wordpress

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 !

Contenu pertinent

Articles connexes

A well-crafted WordPress business site can give potential customers a peek into your company’s values

Web development involves many different services to create a complete website. First, you need a

Picture this: you’re a restaurant owner whose menu is a hot mess. There are dishes

Komal Bothra 21 mars 2024

Les meilleurs sites pour embaucher des développeurs et designers WordPress en 2024

Si vous cherchez à embaucher le meilleur développeur WordPress ou un expert en sites web WordPress

WordPress
Komal Bothra 21 mars 2024

Elementor bloqué sur l'écran de chargement ? Voici plus de 25 méthodes pour y remédier !

Elementor simplifie le processus de développement de pages de sites Web dans WordPress. Cependant, vous pouvez occasionnellement rencontrer

WordPress
Komal Bothra 19 mars 2024

Comment configurer votre adresse e-mail professionnelle GoDaddy sur Gmail (étapes simples)

Jongler avec plusieurs comptes de messagerie en même temps peut être accablant. Si vous vous noyez dans les

Tech

Démarrer avec Seahawk

Inscrivez-vous dans notre application pour consulter nos tarifs et obtenir des réductions.