{"id":6853,"date":"2021-10-03T20:14:11","date_gmt":"2021-10-03T18:14:11","guid":{"rendered":"https:\/\/lacolmenatecnologica.com\/introduction-au-css-personnalise-delementor\/"},"modified":"2026-09-02T22:49:01","modified_gmt":"2026-09-02T20:49:01","slug":"introduction-au-css-personnalise-delementor","status":"publish","type":"post","link":"https:\/\/lacolmenatecnologica.com\/fr\/introduction-au-css-personnalise-delementor\/","title":{"rendered":"Introduction au CSS personnalis\u00e9 d&rsquo;Elementor"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Vid\u00e9o pas \u00e0 pas<\/h2>\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Introducci\u00f3n a CSS personalizado en Elementor\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/r5AesXg2TXQ?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n<p class=\"wp-block-paragraph\">Dans cet exemple, je vais transformer les styles du widget <strong>Cat\u00e9gories<\/strong> de WordPress en utilisant la section <strong>CSS personnalis\u00e9<\/strong> de l&rsquo;onglet <strong>Avanc\u00e9<\/strong> avec Elementor. Si vous \u00eates abonn\u00e9 \u00e0 l&rsquo;une des licences, il vous suffit de vous connecter pour voir en d\u00e9tail pas \u00e0 pas comment proc\u00e9der. <\/p>\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a9abaeb55268&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a9abaeb55268\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"944\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/introduccion-a-css-personalizado-de-Elementor.gif\" alt=\"Introduction au CSS personnalis&#xE9; d'Elementor\" class=\"wp-image-4893\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n<ol class=\"wp-block-list\">\n<li>Ins\u00e9rez le widget <strong>Cat\u00e9gories<\/strong> dans votre document<\/li>\n\n\n\n<li>Cliquez sur l&rsquo;onglet <strong>Avanc\u00e9<\/strong><\/li>\n\n\n\n<li>Cliquez sur la section <strong>CSS personnalis\u00e9<\/strong> et collez le code CSS<\/li>\n<\/ol>\n\n<h2 class=\"wp-block-heading\" id=\"codigo-css-df35fea5-ebd8-4683-a81c-0b945faec3a5\">Code CSS<\/h2>\n\n<p class=\"wp-block-paragraph\">Copiez le code utilis\u00e9 dans ce tutoriel vid\u00e9o.<\/p>\n\n<pre class=\"wp-block-code\"><code>selector h5 {\n    display: none;\n}\n\nselector li {\n    list-style: none;\n    display: inline-block;\n    margin-bottom: 20px;\n}\n\nselector li a {\n    border: 2px solid blue;\n    padding: 7px 15px;\n    margin: 5px;\n    border-radius: 50px;\n    color: blue;\n    text-transform: uppercase;\n}\n\nselector li a:hover {\n    color: white;\n    background-color: blue;\n}\n\nselector ul {\n    margin: 0;\n    padding: 0;\n    text-align: center;\n}<\/code><\/pre>\n\n<h2 class=\"wp-block-heading\" id=\"enlaces-de-interes-bddda819-da68-41be-bce6-f8d2fb0a551d\">Liens utiles<\/h2>\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.w3schools.com\/css\/default.asp\" target=\"_blank\" rel=\"noreferrer noopener\">W3 School \u2013 Tutoriel CSS<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Vid\u00e9o pas \u00e0 pas Dans cet exemple, je vais transformer les styles du widget Cat\u00e9gories de WordPress en utilisant la section CSS personnalis\u00e9 de l&rsquo;onglet Avanc\u00e9 avec Elementor. Si vous \u00eates abonn\u00e9 \u00e0 l&rsquo;une des licences, il vous suffit de vous connecter pour voir en d\u00e9tail pas \u00e0 pas comment proc\u00e9der. Code CSS Copiez le [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":6854,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_titles_title":"CSS personnalis\u00e9 Elementor : guide pour vos pages","_seopress_titles_desc":"Dans cet exemple, je vais transformer les styles du widget Cat\u00e9gories de WordPress en utilisant la section CSS personnalis\u00e9 de l'onglet Avanc\u00e9 avec Elementor\u2026","_seopress_robots_index":"","_seopress_robots_follow":"","_seopress_robots_imageindex":"","_seopress_robots_snippet":"","_seopress_robots_primary_cat":"none","_seopress_robots_breadcrumbs":"","_seopress_robots_freeze_modified_date":"","_seopress_robots_custom_modified_date":"","_seopress_robots_canonical":"","_seopress_social_fb_title":"","_seopress_social_fb_desc":"","_seopress_social_fb_img":"","_seopress_social_fb_img_attachment_id":0,"_seopress_social_fb_img_width":0,"_seopress_social_fb_img_height":0,"_seopress_social_twitter_title":"","_seopress_social_twitter_desc":"","_seopress_social_twitter_img":"","_seopress_social_twitter_img_attachment_id":0,"_seopress_social_twitter_img_width":0,"_seopress_social_twitter_img_height":0,"_seopress_redirections_value":"","_seopress_redirections_enabled":"","_seopress_redirections_enabled_regex":"","_seopress_redirections_logged_status":"both","_seopress_redirections_param":"","_seopress_redirections_type":301,"_seopress_analysis_target_kw":"","_seopress_news_disabled":"","_seopress_video_disabled":"","_seopress_video":[],"_seopress_pro_schemas_manual":[],"_seopress_pro_rich_snippets_disable_all":"","_seopress_pro_rich_snippets_disable":[],"_seopress_pro_schemas":[],"footnotes":"","_bricks_page_content_2":[],"_bricks_page_header_2":[],"_bricks_page_footer_2":[]},"categories":[454],"tags":[442,428],"class_list":["post-6853","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-elementor","tag-personnalisation-de-wordpress"],"_links":{"self":[{"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/posts\/6853","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/comments?post=6853"}],"version-history":[{"count":1,"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/posts\/6853\/revisions"}],"predecessor-version":[{"id":6855,"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/posts\/6853\/revisions\/6855"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/media\/6854"}],"wp:attachment":[{"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/media?parent=6853"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/categories?post=6853"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/tags?post=6853"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}