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…
How to Add Custom CSS in Elementor
Adding custom CSS in Elementor allows you to modify and enhance the design of your WordPress website beyond the default styling options. It gives developers and designers more control over layout, colors, spacing, and other visual elements.
Methods to Add Custom CSS in Elementor
✅ Elementor Advanced Tab – Select a section, column, or widget → Go to Advanced → Custom CSS → Add your CSS code. This applies styling directly to that specific element.
✅ HTML Widget – Drag the HTML widget into your page → Add CSS inside a <style> tag. Useful for adding small pieces of custom styling within a page.
✅ Elementor Site Settings – Open the Elementor menu → Site Settings → Custom CSS → Add CSS. This applies styles globally across the entire website.
✅ WordPress Customizer – Go to Appearance → Customize → Additional CSS in the WordPress dashboard → Add your CSS. This method works outside Elementor and affects the whole site.
Exemple
If you want to customize the appearance of a button in Elementor, you can add custom CSS to modify its style. After selecting the Button widget in the Elementor editor, go to the Onglet Avancé and open the CSS personnalisé field. You can then add CSS code to change the design of that specific button, such as setting the background color to red and the text color to white. You can also increase the padding and add rounded corners to make the button more visually appealing and noticeable on the page.
Résumé
Elementor allows you to add custom CSS at different levels, such as element-level, page-level, or site-wide, so you can control exactly where the styling is applied.
CSS (Cascading Style Sheets) is un rule-based style sheet language used to change the layout and appearance of web pages built with a markup language such as HTML or XML. Using CSS is an efficient way of web design because it keeps both content and style in separate file giving you the most flexibility and ease of use.
Why Should You Add Custom CSS in Elementor Site?
Eh bien, ce n'est pas obligatoire parce que Élémentor itself provides all the customization options you need to create beautiful websites. However, if you are someone who knows how to code and wants to use your creativity to enhance the look of the site, then you can add Custom CSS in Elementor.
- Using custom CSS in Elementor, you can override the theme’s style to implement a new style. Suppose you love the whole look of a page that your theme provides, but you want to change the layout a tiny bit in one section; then you can take the help of Elementor custom CSS to do that.
- 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.
Check how to use the Elementor flexbox container to create device friendly websites
Where to put your CSS in Elementor
Elementor provides multiple ways to include custom CSS, each with its unique advantages depending on the scope of your styling needs. Here are the primary locations where you can put CSS in Elementor:
- Elementor Widgets: Add CSS using the Elementor HTML widget.
- Sections or Columns: Apply CSS to entire sections or columns in the Avancé → CSS personnalisé languette.
- Site-Wide CSS: Add global CSS in Elementor → Site Settings → Custom CSS (Pro only).
- WordPress Customizer: Utiliser Appearance → Customize → Additional CSS for basic site-wide styles.
- Theme Files or External CSS: Add code to
style.cssor use an external.cssfile for advanced needs.
How to Add Custom CSS in Elementor: 4 Different Methods
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. Add CSS using Elementor’s Custom CSS Code Snippets
Elementor provides you with an advanced option to add custom CSS to your sections, columns, and widgets. However, 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, follow the steps –
- Click on the inner section (Six Dots) of the part of the content where you want to apply CSS to go to edit mode.
- Déplacer vers le Onglet Avancé
- Trouver CSS personnalisé. Then, expand the Custom CSS tab and add your custom code.
As an example, here, we’ve written custom CSS to style the background in sky blue.
Similarly, you can add custom CSS in Elementor widgets as well. Here is an example –
- Click on the widget to go to edit mode
- Go to the Advanced tab
- Find Custom CSS and add your custom code by expanding it
Here, we’ve written custom CSS to add a green border around the video widget.
A lire aussi : Comment ajouter du CSS personnalisé à votre bloc Gutenberg
2. Use the HTML Widget to Add Elementor Custom CSS
The second option for adding Elementor custom CSS to your WordPress website is using the HTML widget.
- Rechercher le HTML widget et faites-le glisser et déposez-le
- Add your CSS code within a Style tag
As an example, we’ve written custom CSS here to style the text in purple.
Note: You can add both inline and standalone CSS using the HTML tag. And don’t worry; only the styles will be reflected on the site, the raw code won’t be visible.
3. Add Custom CSS in Elementor Site Settings
You can also add custom CSS in Elementor using the Elementor Panel Menu. Click on the hamburger menu on the top left corner, then under settings, 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. Add Custom CSS in Elementor from WordPress Customization Settings
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.
How to Fix Elementor Custom CSS not Working Issue
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 :
1. Regenerate CSS
Regenerating CSS can solve this issue. To regenerate CSS, follow the steps –
- Aller à Élémentor
- Aller vers Outils sous le Editor option
- Cliquer sur Clear Files & Data. Don’t forget to save the changes.
2. Clear Website Cache & Browser Cache
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.
3. Theme Incompatibility
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é.
4. Using another page builder along with 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.
Note: Si vous souhaitez étendre les fonctionnalités du générateur de pages Elementor sans utiliser un autre générateur de pages, vous pouvez opter pour les modules complémentaires Elementor.
Essayer ElementsKit – l’addon ultime pour Elementor qui vient avec 100+ widgets and 1250+ ready sections afin que vous puissiez créer un site Web Elementor moderne.
More than 2 million les gens utilisent actuellement ce charmant module complémentaire pour créer des sites Web incroyables avec en-têtes et pieds de page avancés.
How to Add Custom CSS in Elementor: Expert’s Insight
Custom CSS becomes valuable when you need deeper control over styling and functionality. It allows developers to modify elements, pages, or the entire website beyond the default design options provided by the builder.
Instead of applying global styles immediately, start by targeting specific elements using Elementor’s element-level CSS controls. This reduces the risk of unintended styling conflicts across the website. Elementor supports applying CSS at three levels such as element, page, and site, and choosing the correct level helps maintain cleaner code and predictable styling behavior.
Additionally, you can use the selector keyword when writing CSS inside Elementor’s Custom CSS field. This automatically targets the selected widget or section without requiring complex selectors. It is easier to apply styles to a specific element without affecting the rest of the page.
Lastly, always keep your CSS minimal and well-structured. Overusing custom CSS or mixing it with multiple page builders can lead to style conflicts or override issues that make debugging difficult.
Vouloir ajouter des formulaires avancés à votre site Web Elementor ? Consultez nos ressources de création de formulaires :
Comment ajouter un formulaire en plusieurs étapes dans WordPress
Comment créer un formulaire logique conditionnel Elementor
Comment créer un formulaire d'enquête WordPress dans 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 :
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.
À partir des options de personnalisation de WordPress, vous pouvez ajouter gratuitement du CSS personnalisé sur le site Web Elementor.
In most cases, small amounts of CSS will not affect website performance. However, very large or poorly optimized CSS files can increase page load times.
To maintain good performance:
– Keep CSS clean and organized
– Remove unused styles
– Minify CSS when possible
– Avoid excessive! Important rules
In almost every case, this isn’t a “bug” in Elementor itself but one of a few common issues:
– incorrect selector
– caching issues
– theme conflicts
– CSS specificity problems
To add HTML in Elementor, use the built-in HTML widget:
– Search “HTML” in the widget panel
– Drag it into your section
– Paste your HTML/CSS/JS code in the box
Wrapping Up with Elementor Custom CSS
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.
Laisser un commentaire