{"id":59705,"date":"2022-07-18T09:39:18","date_gmt":"2022-07-18T08:39:18","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=59705&preview=true&preview_id=59705"},"modified":"2024-09-17T14:51:46","modified_gmt":"2024-09-17T13:51:46","slug":"css-personnalise-elementor","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/css-personnalise-elementor\/","title":{"rendered":"Comment ajouter un CSS personnalis\u00e9 \u00e0 Elementor (5 m\u00e9thodes)"},"content":{"rendered":"

L’un des plus grands arguments de vente de l’utilisation de constructeurs de pages<\/a> tels qu’Elementor est que vous avez acc\u00e8s \u00e0 des \u00e9l\u00e9ments de page pr\u00e9-construits, ou \u00ab widgets \u00bb. Les widgets d’Elementor comprennent de nombreuses options de personnalisation et de style. Cependant, la seule fa\u00e7on d’appliquer un style particulier est parfois d’utiliser des feuilles de style en cascade (CSS)<\/a>.<\/p>\n

Le CSS vous donne un degr\u00e9 de contr\u00f4le incroyable sur chaque composant de votre site Web. Leur ajout \u00e0 WordPress est simple si vous \u00eates familier avec ce langage. Elementor offre \u00e9galement plusieurs options pour ajouter des CSS personnalis\u00e9s.<\/p>\n

Dans cet article, nous parlerons de ce qu’est le CSS et de la fa\u00e7on dont vous pouvez ajouter un style personnalis\u00e9 \u00e0 Elementor<\/a>. Enfin, nous discuterons des meilleures pratiques d’utilisation des CSS dans WordPress. C’est parti !<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Qu’est-ce que le CSS ?<\/h2>\n

CSS est ce qu’on appelle un langage de \u00ab feuille de style \u00bb. Vous pouvez utiliser les feuilles de style CSS pour ajouter un style personnalis\u00e9 aux documents HTML ou XML<\/a>. En utilisant CSS, vous pouvez prendre une page HTML de base et la transformer en un design d’apparence moderne<\/a>.<\/p>\n

Consid\u00e9rez le CSS comme un langage qui d\u00e9crit comment les \u00e9l\u00e9ments doivent appara\u00eetre sur un navigateur. Il fonctionne sur tous les navigateurs et c’est l’un des principaux langages de l’Internet.<\/p>\n

Par exemple, voici le code CSS que vous utiliseriez pour attribuer une couleur d’arri\u00e8re-plan au corps d’un document HTML :<\/p>\n

body {\n\nbackground-color: red;\n\n}<\/code><\/pre>\n
Vous pouvez utiliser CSS pour appliquer des styles \u00e0 des composants, des classes et des ID sp\u00e9cifiques en HTML. Par exemple, l’extrait suivant appliquerait une couleur de texte et un alignement sp\u00e9cifiques \u00e0 tous les H2 d’une page :<\/p>\n
h2 {\n\ncolor: black;\n\ntext-align: left;\n\n}<\/code><\/pre>\n
En g\u00e9n\u00e9ral, lorsque vous chargez une page HTML, elle charge \u00e9galement une feuille de style s\u00e9par\u00e9e qui comprend tout le code CSS. Cela signifie que vous pouvez r\u00e9utiliser les feuilles de style sur plusieurs pages.<\/p>\n
Vous \u00eates libre d’appliquer le code CSS directement \u00e0 n’importe quelle page HTML<\/a>. Vous pouvez \u00e9galement l’utiliser \u00ab\u00a0en ligne\u00a0\u00bb. Il s’agit d’un terme faisant r\u00e9f\u00e9rence au code CSS qui s’applique \u00e0 un seul \u00e9l\u00e9ment HTML et qui r\u00e9side dans ce fichier.<\/p>\n
Voici un exemple de CSS en ligne pour un en-t\u00eate H2 sp\u00e9cifique :<\/p>\n
<h2 style=\"color:black;text-align:center;\">This is where the heading text goes<\/h1><\/code><\/pre>\n
Il est consid\u00e9r\u00e9 comme une meilleure pratique d’ajouter le CSS<\/a> dans une feuille de style s\u00e9par\u00e9e. Cependant, l’un des nombreux avantages de l’utilisation de WordPress et d’Elementor<\/a> est que vous pouvez ajouter du CSS sans modifier les fichiers manuellement. Voyons de plus pr\u00e8s comment cela fonctionne.<\/p>\n\n
Options CSS personnalis\u00e9es dans Elementor<\/h2>\n
Si vous \u00eates familier avec Elementor, vous savez que le constructeur utilise des sections, des colonnes et des widgets pour vous aider \u00e0 cr\u00e9er des pages. Les sections contiennent une ou plusieurs colonnes, et chaque colonne peut avoir plusieurs modules :<\/p>\n
\"Colonnes
Colonnes et modules dans Elementor<\/figcaption><\/figure>\n
L’une des meilleures parties de l’utilisation d’Elementor est que vous pouvez ajouter du code CSS s\u00e9par\u00e9 au niveau de la section, de la colonne et du widget. Lorsque vous survolez une section, vous pouvez s\u00e9lectionner l’ic\u00f4ne \u00e0 six points pour ouvrir le menu Modifier la section <\/strong>sur le c\u00f4t\u00e9 gauche de l’\u00e9cran :Colonnes et modules dans Elementor<\/p>\n
\"Ajouter
Ajouter du code CSS s\u00e9par\u00e9 au niveau de la section, de la colonne et du widget.<\/figcaption><\/figure>\n
Si vous passez \u00e0 l’onglet Avanc\u00e9 <\/strong>dans le menu Modifier la section <\/strong>, vous verrez une section\u00a0 une section CSS personnalis\u00e9 <\/strong>. \u00c0 l’int\u00e9rieur, vous trouverez un champ qui vous permet d’ajouter du code pour cette section sp\u00e9cifique :<\/p>\n
\"L'option
L’option Custom CSS se trouve sous l’onglet Advanc\u00e9<\/figcaption><\/figure>\n
Lorsque vous modifiez les colonnes et les widgets, vous remarquerez que vous avez acc\u00e8s aux trois m\u00eames onglets dans leurs menus de r\u00e9glages respectifs. Les sections, les colonnes et les widgets comprennent tous des r\u00e9glages de mise en page, de style et des r\u00e9glages avanc\u00e9s.<\/p>\n
Pour ajouter un CSS personnalis\u00e9 \u00e0 une colonne, survolez-la et s\u00e9lectionnez l’ic\u00f4ne \u00e0 deux colonnes dans le coin sup\u00e9rieur droit de l’\u00e9l\u00e9ment. Ensuite, acc\u00e9dez \u00e0 l’option Avanc\u00e9 <\/strong>et ouvrez la section CSS personnalis\u00e9 <\/strong>:<\/p>\n
\"Ajouter
Ajouter un CSS personnalis\u00e9 \u00e0 une seule colonne<\/figcaption><\/figure>\n
Vous pouvez suivre le m\u00eame processus pour ajouter un CSS personnalis\u00e9 \u00e0 un widget Elementor. Il suffit de s\u00e9lectionner le widget que vous souhaitez personnaliser et de passer directement \u00e0 l’onglet Avanc\u00e9 > CSS personnalis\u00e9 <\/strong>:<\/p>\n
\"Vous
Vous pouvez \u00e9galement ajouter du CSS \u00e0 un widget<\/figcaption><\/figure>\n
L’ajout de CSS personnalis\u00e9s \u00e0 des \u00e9l\u00e9ments sp\u00e9cifiques dans le constructeur de pages Elementor est tr\u00e8s simple. Cependant, gardez \u00e0 l’esprit que le style ne s’appliquera qu’\u00e0 ces \u00e9l\u00e9ments. Si vous souhaitez ajouter un CSS personnalis\u00e9 qui affecte l’ensemble de votre site, vous devrez utiliser une approche diff\u00e9rente.<\/p>\n
Comment ajouter un CSS personnalis\u00e9 \u00e0 l’aide d’Elementor (5 m\u00e9thodes)<\/h2>\n
Dans cette section, nous allons explorer d’autres fa\u00e7ons d’ajouter du CSS personnalis\u00e9 Elementor. Nous couvrirons les m\u00e9thodes qui appliquent le CSS \u00e0 l’ensemble de votre site web, \u00e0 des pages sp\u00e9cifiques et aux widgets Elementor.<\/p>\n
M\u00e9thode 1 : utiliser le widget HTML d’Elementor<\/h3>\n
Elementor vous permet d’ajouter du CSS personnalis\u00e9 \u00e0 n’importe lequel de ses widgets. Toutefois, dans certains cas, vous voudrez peut-\u00eatre ajouter des \u00e9l\u00e9ments manuellement \u00e0 l’aide de HTML<\/a> et de CSS. Dans ces cas, vous devrez utiliser le widget HTML <\/strong>:<\/p>\n
\"Utiliser
Utiliser le widget HTML<\/figcaption><\/figure>\n
Le widget HTML <\/strong>peut analyser le HTML, le CSS et le JavaScript<\/a>. Vous pouvez ajouter le code que vous voulez dans le champ Code HTML <\/strong>et s’il est valide, Elementor l’affichera comme un widget :<\/p>\n
\"Ajouter
Ajouter n’importe quel code \u00e0 l’int\u00e9rieur du widget<\/figcaption><\/figure>\n
Le widget HTML <\/strong>prend en charge les CSS en ligne et autonomes. Tout code que vous ajoutez \u00e0 l’aide du widget n’affectera que cet \u00e9l\u00e9ment unique.<\/p>\n
M\u00e9thode 2 : Utiliser le menu des r\u00e9glages du site Elementor<\/h3>\n
Elementor comprend une collection de r\u00e9glages globaux qui ressemblent aux options que vous pouvez trouver dans la personnalisation de WordPress. Pour acc\u00e9der au menu R\u00e9glages du site <\/strong>Elementor, ouvrez l’\u00e9diteur et cliquez sur le menu hamburger dans le coin sup\u00e9rieur gauche de l’\u00e9cran :<\/p>\n
\"Cliquez
Cliquez sur le menu hamburger disponible<\/figcaption><\/figure>\n
Sur la page suivante, s\u00e9lectionnez l’option R\u00e9glages du site <\/strong>:<\/p>\n
\"Cliquez
Cliquez sur l’option R\u00e9glages du site<\/figcaption><\/figure>\n
\u00c0 l’int\u00e9rieur, vous verrez une collection de r\u00e9glages qui vous permettent de personnaliser le style de votre site. Toute modification apport\u00e9e dans ce menu s’appliquera \u00e0 l’ensemble de votre site, m\u00eame si, techniquement, vous ne modifiez qu’une seule page.<\/p>\n
Vous pouvez lire comment utiliser le menu R\u00e9glages du site<\/strong><\/a> pour personnaliser votre page sur le site officiel d’Elementor. Pour l’instant, la seule section qui nous int\u00e9resse est l’onglet CSS personnalis\u00e9 <\/strong>. Ouvrez-le et vous verrez un champ qui ressemble aux options CSS personnalis\u00e9es pour les sections, les widgets et les colonnes :<\/p>\n
\"L'ajout
L’ajout de CSS personnalis\u00e9 ici affectera l’ensemble du site<\/figcaption><\/figure>\n
Tout CSS personnalis\u00e9 que vous ajoutez ici affectera l’ensemble de votre site web. Si vous avez uniquement l’intention de personnaliser des \u00e9l\u00e9ments sp\u00e9cifiques, nous vous recommandons d’utiliser une approche plus cibl\u00e9e (comme l’ajout de CSS directement dans un widget).<\/p>\n
M\u00e9thode 3 : Utiliser la personnalisation de WordPress<\/h3>\n
La personnalisation de WordPress vous permet \u00e9galement d’ajouter des CSS personnalis\u00e9s \u00e0 l’\u00e9chelle du site. Pour cela, allez dans Apparence > Personnaliser <\/strong>et s\u00e9lectionnez l’option CSS suppl\u00e9mentaire <\/strong>dans le menu de gauche :<\/p>\n
\"Utilisez
Utilisez la personnalisation de WordPress pour ajouter du CSS<\/figcaption><\/figure>\n
Toutefois, il convient de noter que les champs de code d’Elementor sont plus conviviaux que ceux disponibles dans la personnalisation. Si vous utilisez d\u00e9j\u00e0 Elementor pour la cr\u00e9ation de votre site, il n’y a aucune raison d’ajouter du CSS personnalis\u00e9 via la personnalisation.<\/p>\n
M\u00e9thode 4 : Mettre en file d’attente les fichiers CSS personnalis\u00e9s<\/h3>\n
Si vous \u00eates \u00e0 l’aise pour modifier les fichiers WordPress et acc\u00e9der \u00e0 votre site web via un client FTP (File Transfer Protocol)<\/a>, vous pouvez mettre en file d’attente une feuille de style CSS \u00e0 charger avec Elementor. Cette approche n\u00e9cessite que vous ajoutiez du code au fichier functions. php<\/strong> de WordPress.<\/p>\n
Pour acc\u00e9der au fichier functions.php <\/strong>, connectez-vous \u00e0 votre site web via FTP et allez dans le dossier racine <\/strong>de WordPress. Ouvrez le dossier, trouvez le fichier functions.php <\/strong>, et modifiez-le.<\/p>\n
Voici un exemple du code que vous voulez ajouter au fichier :<\/p>\n
add_action( 'elementor\/frontend\/before_enqueue_scripts', function() {\n\nwp_enqueue_script(\n\n'custom-stylesheet',\n\nget_stylesheet_uri()\n\n);\n\n} );<\/code><\/pre>\n
Ce code utilise le hook before_enqueue_scripts <\/strong>pour charger une feuille de style appel\u00e9e custom-stylesheet<\/strong>.<\/em> Nous utilisons \u00e9galement la fonction get_stylesheet_urifunction <\/strong>pour pointer vers l’emplacement de la feuille de style dans le serveur.<\/p>\n
Id\u00e9alement, vous ajouterez la feuille de style personnalis\u00e9e dans le r\u00e9pertoire de votre th\u00e8me enfant ou dans le dossier Themes <\/strong>lui-m\u00eame. La feuille de style peut contenir tout code CSS Elementor que vous souhaitez. L’extrait que vous avez ajout\u00e9 \u00e0 functions.php <\/strong>garantit que le code ne se charge que lorsqu’Elementor est actif sur votre site web.<\/p>\n
M\u00e9thode 5 : Utiliser un plugin CSS<\/h3>\n
Il existe plusieurs extensions qui vous permettent d’ajouter du CSS personnalis\u00e9 \u00e0 votre site web sans utiliser la personnalisation ou les constructeurs de pages<\/a>. L’un de nos outils pr\u00e9f\u00e9r\u00e9s pour ce travail s’appelle Simple Custom CSS and JS<\/a>:<\/p>\n
\"Simple
Simple Custom CSS and JS<\/figcaption><\/figure>\n
Avec Simple Custom CSS and JS, vous avez la possibilit\u00e9 d’ajouter du code directement dans les \u00e9l\u00e9ments d’en-t\u00eate et de pied de page de votre th\u00e8me. Pour commencer, allez dans Custom CSS & JS > Ajouter du CSS personnalis\u00e9 <\/strong>et cliquez sur Ajouter du code\u00a0 CSS.<\/strong><\/p>\n
Un \u00e9diteur CSS de base s’affiche sur la gauche. \u00c0 droite, vous pouvez configurer le chargement du code CSS dans une feuille de style externe<\/a> ou en interne. Vous pouvez \u00e9galement d\u00e9cider si le code doit \u00eatre plac\u00e9 dans l’en-t\u00eate ou le pied de page :<\/p>\n
\"Charger
Charger le code sur une feuille de style externe<\/figcaption><\/figure>\n
Lorsque vous avez fini de modifier le code CSS, appuyez sur le bouton Publier <\/strong>. Vous devrez peut-\u00eatre passer \u00e0 une vue frontend pour voir le code en action.<\/p>\n
Meilleures pratiques pour la cr\u00e9ation de CSS personnalis\u00e9s avec Elementor<\/h2>\n
Lorsque vous avez affaire \u00e0 un CSS personnalis\u00e9 ou \u00e0 l’ajout de tout type de code \u00e0 votre site web, vous avez tout int\u00e9r\u00eat \u00e0 garder \u00e0 l’esprit les meilleures pratiques suivantes. Commen\u00e7ons par l’utilisation d’un th\u00e8me enfant.<\/p>\n
Utiliser un th\u00e8me enfant WordPress<\/h3>\n
Si vous souhaitez modifier une partie du style de votre th\u00e8me<\/a> \u00e0 l’aide de CSS, nous vous recommandons d’utiliser un th\u00e8me enfant<\/a>. Un th\u00e8me \u00ab enfant \u00bb est un mod\u00e8le qui h\u00e9rite de tous les styles d’un th\u00e8me d\u00e9sign\u00e9.<\/p>\n
De cette fa\u00e7on, si vous apportez des modifications au th\u00e8me original, elles n’auront pas d’impact sur les personnalisations que vous ajoutez au th\u00e8me enfant. De plus, lorsque vous mettez \u00e0 jour votre th\u00e8me, celui-ci conservera ces modifications.<\/p>\n
Utilisez un pr\u00e9-processeur de code pour faciliter l’\u00e9criture<\/h3>\n
L’un des plus grands d\u00e9fis de l’ajout de code dans WordPress ou en utilisant Elementor est que vous n’avez pas acc\u00e8s \u00e0 toutes les fonctionnalit\u00e9s que les \u00e9diteurs de code modernes offrent. Au lieu de vous d\u00e9battre avec du code \u00e0 l’aide d’\u00e9diteurs de base sur place, nous vous recommandons d’utiliser votre pr\u00e9-processeur pr\u00e9f\u00e9r\u00e9<\/a>. Ensuite, vous pouvez simplement copier et coller votre code dans WordPress.<\/p>\n
Pensez \u00e0 utiliser un site de staging<\/h3>\n
Lorsque vous envisagez d’apporter des modifications importantes \u00e0 WordPress, nous vous recommandons d’utiliser un site de staging. Les sites de staging vous permettent de tester les changements de style et de fonctionnalit\u00e9 sans risquer de casser quoi que ce soit sur votre site r\u00e9el.<\/p>\n
Certains h\u00e9bergeurs vous permettent d’acc\u00e9der \u00e0 la fonctionnalit\u00e9 de staging depuis votre panneau de configuration. Si vous utilisez Kinsta, vous pouvez s\u00e9lectionner votre site web \u00e0 l’aide du tableau de bord MyKinsta<\/a> et basculer entre les environnements live et staging :<\/p>\n
\"L'environnement
L’environnement de staging dans MyKinsta<\/figcaption><\/figure>\n
Si votre h\u00e9bergeur ne propose pas de fonctionnalit\u00e9 de staging<\/a>, vous pouvez utiliser un environnement de d\u00e9veloppement WordPress local tel que DevKinsta<\/a> \u00e0 des fins de test. Sinon, vous pouvez envisager de changer d’h\u00e9bergeur.<\/p>\n\n
R\u00e9sum\u00e9<\/h2>\n
L’ajout de CSS personnalis\u00e9s Elementor est plus facile que vous ne l’imaginez. Le constructeur de pages propose plusieurs m\u00e9thodes pour ajouter du code aux sections, colonnes, widgets et pour l’ensemble de votre site web.<\/p>\n
Pour r\u00e9capituler, voici les cinq principales fa\u00e7ons d’ajouter du CSS personnalis\u00e9 \u00e0 Elementor (ou \u00e0 votre site web en g\u00e9n\u00e9ral) :<\/p>\n
    \n
  1. Utilisez le widget HTML d’Elementor.<\/li>\n
  2. Utilisez le menu R\u00e9glages du site d’Elementor.<\/li>\n
  3. Utilisez la personnalisation de WordPress.<\/li>\n
  4. Mettez en file d’attente les fichiers CSS personnalis\u00e9s.<\/li>\n
  5. Utilisez une extension CSS.<\/li>\n<\/ol>\n
    Chez Kinsta, nos plans sont con\u00e7us pour vous aider \u00e0 construire le site de vos r\u00eaves avec des constructeurs de pages comme Elementor. Consultez nos plans<\/a> ou contactez le service commercial pour trouver le plan qui vous convient le mieux.<\/p>\n","protected":false},"excerpt":{"rendered":"
    L’un des plus grands arguments de vente de l’utilisation de constructeurs de pages tels qu’Elementor est que vous avez acc\u00e8s \u00e0 des \u00e9l\u00e9ments de page pr\u00e9-construits, …<\/p>\n","protected":false},"author":117,"featured_media":59706,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[417,464,698],"topic":[1028],"class_list":["post-59705","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-css","tag-elementor","tag-page-builder","topic-developpement-wordpress"],"yoast_head":"\nComment ajouter du CSS personnalis\u00e9 \u00e0 Elementor (5 m\u00e9thodes)<\/title>\n<meta name=\"description\" content=\"Vous ne savez pas o\u00f9 ajouter le CSS personnalis\u00e9 d'Elementor ? D\u00e9couvrez comment ajouter des feuilles de style CSS personnalis\u00e9es \u00e0 Elementor pour que votre site se d\u00e9marque.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/fr\/blog\/css-personnalise-elementor\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Comment ajouter un CSS personnalis\u00e9 \u00e0 Elementor (5 m\u00e9thodes)\" \/>\n<meta property=\"og:description\" content=\"Vous ne savez pas o\u00f9 ajouter le CSS personnalis\u00e9 d'Elementor ? D\u00e9couvrez comment ajouter des feuilles de style CSS personnalis\u00e9es \u00e0 Elementor pour que votre site se d\u00e9marque.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/fr\/blog\/css-personnalise-elementor\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstafrance\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-07-18T08:39:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-17T13:51:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/07\/elementor-custom-css.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Salman Ravoof\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Vous ne savez pas o\u00f9 ajouter le CSS personnalis\u00e9 d'Elementor ? D\u00e9couvrez comment ajouter des feuilles de style CSS personnalis\u00e9es \u00e0 Elementor pour que votre site se d\u00e9marque.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/07\/elementor-custom-css.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@salmanravoof\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Salman Ravoof\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/css-personnalise-elementor\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/css-personnalise-elementor\/\"},\"author\":{\"name\":\"Salman Ravoof\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\"},\"headline\":\"Comment ajouter un CSS personnalis\u00e9 \u00e0 Elementor (5 m\u00e9thodes)\",\"datePublished\":\"2022-07-18T08:39:18+00:00\",\"dateModified\":\"2024-09-17T13:51:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/css-personnalise-elementor\/\"},\"wordCount\":2420,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/css-personnalise-elementor\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/07\/elementor-custom-css.jpg\",\"keywords\":[\"css\",\"Elementor\",\"page builder\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/css-personnalise-elementor\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/css-personnalise-elementor\/\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/css-personnalise-elementor\/\",\"name\":\"Comment ajouter du CSS personnalis\u00e9 \u00e0 Elementor (5 m\u00e9thodes)\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/css-personnalise-elementor\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/css-personnalise-elementor\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/07\/elementor-custom-css.jpg\",\"datePublished\":\"2022-07-18T08:39:18+00:00\",\"dateModified\":\"2024-09-17T13:51:46+00:00\",\"description\":\"Vous ne savez pas o\u00f9 ajouter le CSS personnalis\u00e9 d'Elementor ? D\u00e9couvrez comment ajouter des feuilles de style CSS personnalis\u00e9es \u00e0 Elementor pour que votre site se d\u00e9marque.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/css-personnalise-elementor\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/css-personnalise-elementor\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/css-personnalise-elementor\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/07\/elementor-custom-css.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/07\/elementor-custom-css.jpg\",\"width\":1460,\"height\":730,\"caption\":\"Comment ajouter un CSS personnalis\u00e9 \u00e0 Elementor (5 m\u00e9thodes)\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/css-personnalise-elementor\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"D\u00e9veloppement WordPress\",\"item\":\"https:\/\/kinsta.com\/fr\/sujets\/developpement-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Comment ajouter un CSS personnalis\u00e9 \u00e0 Elementor (5 m\u00e9thodes)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/fr\/#website\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solutions d'h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstafrance\/\",\"https:\/\/x.com\/kinsta_fr\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\",\"name\":\"Salman Ravoof\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g\",\"caption\":\"Salman Ravoof\"},\"description\":\"Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.\",\"sameAs\":[\"https:\/\/salmanravoof.com\",\"https:\/\/www.linkedin.com\/in\/salman-ravoof-5a749133\/\",\"https:\/\/x.com\/salmanravoof\"],\"url\":\"https:\/\/kinsta.com\/fr\/blog\/author\/salmanravoof\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Comment ajouter du CSS personnalis\u00e9 \u00e0 Elementor (5 m\u00e9thodes)","description":"Vous ne savez pas o\u00f9 ajouter le CSS personnalis\u00e9 d'Elementor ? D\u00e9couvrez comment ajouter des feuilles de style CSS personnalis\u00e9es \u00e0 Elementor pour que votre site se d\u00e9marque.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/fr\/blog\/css-personnalise-elementor\/","og_locale":"fr_FR","og_type":"article","og_title":"Comment ajouter un CSS personnalis\u00e9 \u00e0 Elementor (5 m\u00e9thodes)","og_description":"Vous ne savez pas o\u00f9 ajouter le CSS personnalis\u00e9 d'Elementor ? D\u00e9couvrez comment ajouter des feuilles de style CSS personnalis\u00e9es \u00e0 Elementor pour que votre site se d\u00e9marque.","og_url":"https:\/\/kinsta.com\/fr\/blog\/css-personnalise-elementor\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_published_time":"2022-07-18T08:39:18+00:00","article_modified_time":"2024-09-17T13:51:46+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/07\/elementor-custom-css.jpg","type":"image\/jpeg"}],"author":"Salman Ravoof","twitter_card":"summary_large_image","twitter_description":"Vous ne savez pas o\u00f9 ajouter le CSS personnalis\u00e9 d'Elementor ? D\u00e9couvrez comment ajouter des feuilles de style CSS personnalis\u00e9es \u00e0 Elementor pour que votre site se d\u00e9marque.","twitter_image":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/07\/elementor-custom-css.jpg","twitter_creator":"@salmanravoof","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Salman Ravoof","Dur\u00e9e de lecture estim\u00e9e":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/fr\/blog\/css-personnalise-elementor\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/blog\/css-personnalise-elementor\/"},"author":{"name":"Salman Ravoof","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987"},"headline":"Comment ajouter un CSS personnalis\u00e9 \u00e0 Elementor (5 m\u00e9thodes)","datePublished":"2022-07-18T08:39:18+00:00","dateModified":"2024-09-17T13:51:46+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/css-personnalise-elementor\/"},"wordCount":2420,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/css-personnalise-elementor\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/07\/elementor-custom-css.jpg","keywords":["css","Elementor","page builder"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/fr\/blog\/css-personnalise-elementor\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/fr\/blog\/css-personnalise-elementor\/","url":"https:\/\/kinsta.com\/fr\/blog\/css-personnalise-elementor\/","name":"Comment ajouter du CSS personnalis\u00e9 \u00e0 Elementor (5 m\u00e9thodes)","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/css-personnalise-elementor\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/css-personnalise-elementor\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/07\/elementor-custom-css.jpg","datePublished":"2022-07-18T08:39:18+00:00","dateModified":"2024-09-17T13:51:46+00:00","description":"Vous ne savez pas o\u00f9 ajouter le CSS personnalis\u00e9 d'Elementor ? D\u00e9couvrez comment ajouter des feuilles de style CSS personnalis\u00e9es \u00e0 Elementor pour que votre site se d\u00e9marque.","breadcrumb":{"@id":"https:\/\/kinsta.com\/fr\/blog\/css-personnalise-elementor\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/fr\/blog\/css-personnalise-elementor\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/blog\/css-personnalise-elementor\/#primaryimage","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/07\/elementor-custom-css.jpg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/07\/elementor-custom-css.jpg","width":1460,"height":730,"caption":"Comment ajouter un CSS personnalis\u00e9 \u00e0 Elementor (5 m\u00e9thodes)"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/fr\/blog\/css-personnalise-elementor\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/fr\/"},{"@type":"ListItem","position":2,"name":"D\u00e9veloppement WordPress","item":"https:\/\/kinsta.com\/fr\/sujets\/developpement-wordpress\/"},{"@type":"ListItem","position":3,"name":"Comment ajouter un CSS personnalis\u00e9 \u00e0 Elementor (5 m\u00e9thodes)"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/fr\/#website","url":"https:\/\/kinsta.com\/fr\/","name":"Kinsta\u00ae","description":"Solutions d'h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es","publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/fr\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstafrance\/","https:\/\/x.com\/kinsta_fr","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987","name":"Salman Ravoof","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g","caption":"Salman Ravoof"},"description":"Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.","sameAs":["https:\/\/salmanravoof.com","https:\/\/www.linkedin.com\/in\/salman-ravoof-5a749133\/","https:\/\/x.com\/salmanravoof"],"url":"https:\/\/kinsta.com\/fr\/blog\/author\/salmanravoof\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/59705","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/users\/117"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/comments?post=59705"}],"version-history":[{"count":9,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/59705\/revisions"}],"predecessor-version":[{"id":61384,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/59705\/revisions\/61384"}],"alternate":[{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/59705\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/59705\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/59705\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/59705\/translations\/de"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/59705\/translations\/es"},{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/59705\/translations\/en"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/59705\/translations\/nl"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/59705\/translations\/jp"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/59705\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/59705\/translations\/dk"},{"href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/59705\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media\/59706"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media?parent=59705"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/tags?post=59705"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/topic?post=59705"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}