{"id":34726,"date":"2021-10-03T20:14:11","date_gmt":"2021-10-03T18:14:11","guid":{"rendered":"https:\/\/lacolmenatecnologica.com\/elementor-academy-temas\/introduction-au-css-personnalise-delementor\/"},"modified":"2023-03-30T12:22:36","modified_gmt":"2023-03-30T10:22:36","slug":"introduction-au-css-personnalise-delementor","status":"publish","type":"elementor-adedemy","link":"https:\/\/lacolmenatecnologica.com\/fr\/elementor-academy-temas\/introduction-au-css-personnalise-delementor\/","title":{"rendered":"Introduction au CSS personnalis\u00e9 d&#8217;Elementor"},"content":{"rendered":"\n<ul class=\"wp-block-advgb-summary advgb-toc alignnone\"><li class=\"toc-level-1\"><a href=\"#codigo-css-df35fea5-ebd8-4683-a81c-0b945faec3a5\">Code CSS<\/a><\/li><li class=\"toc-level-1\"><a href=\"#enlaces-de-interes-bddda819-da68-41be-bce6-f8d2fb0a551d\">Liens utiles<\/a><\/li><\/ul>\n<p>Dans cet exemple, je vais transformer les styles du widget WordPress <strong>Categories<\/strong> en utilisant la section <strong>Custom CSS<\/strong> de l&#8217;onglet <strong>Advanced<\/strong> avec Elementor. Si vous \u00eates abonn\u00e9 \u00e0 l&#8217;une des licences, il vous suffit de vous connecter pour voir \u00e9tape par \u00e9tape comment proc\u00e9der.<\/p>\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/10\/introduccion-a-css-personalizado-de-Elementor.gif?strip=all&quality=92&webp=92&avif=92&w=2560\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1920\" height=\"944\" src=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/10\/introduccion-a-css-personalizado-de-Elementor.gif?strip=all&quality=92&webp=92&avif=92&resize=1920%2C944\" alt=\"Introduction au CSS personnalis&#xE9; d'Elementor\" class=\"wp-image-17662\"\/><\/a><\/figure>\n<ol class=\"wp-block-list\"><li>Ins\u00e9rer le widget <strong>Cat\u00e9gories<\/strong> dans notre document<\/li><li>Cliquez sur l&#8217;onglet <strong>Avanc\u00e9<\/strong><\/li><li>Cliquez sur la section <strong>Custom CSS<\/strong> et collez le code CSS<\/li><\/ol>\n<h2 class=\"wp-block-heading\" id=\"codigo-css-df35fea5-ebd8-4683-a81c-0b945faec3a5\">Code CSS<\/h2>\n\n<p>Cliquez sur le bouton COPIER LE CODE pour copier le code utilis\u00e9 dans ce tutoriel vid\u00e9o dans le presse-papiers.<\/p>\n\t\t<div data-elementor-type=\"section\" data-elementor-id=\"33357\" class=\"elementor elementor-33357 elementor-17546\" data-elementor-post-type=\"elementor_library\">\n\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-83b8e9d elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"83b8e9d\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-ac89f5c\" data-id=\"ac89f5c\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2dfff7b elementor-widget elementor-widget-dce-copy-to-clipboard\" data-id=\"2dfff7b\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;dce_clipboard_type&quot;:&quot;code&quot;,&quot;dce_clipboard_visible&quot;:&quot;yes&quot;,&quot;animation_on_copy&quot;:&quot;shake-animation&quot;}\" data-widget_type=\"dce-copy-to-clipboard.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n\t\t<div class=\"dce-clipboard-wrapper dce-clipboard-wrapper-code\">\n\t\t\t\t\t<button class=\"elementor-button elementor-size-sm\" type=\"button\" id=\"dce-clipboard-btn-1\" data-clipboard-text=\"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}\">\n\t\t\t<span class=\"elementor-button-content-wrapper dce-flexbox\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-icon elementor-align-icon-left\">\n\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"far fa-clipboard\"><\/i>\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Copier le code<\/span>\n\t\t\t<\/span>\n\t\t<\/button>\n\t\t\t\t<pre class=\"dce-clipboard-code line-numbers\"><code class=\"language-css\">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\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t\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\"><li><a href=\"https:\/\/www.w3schools.com\/css\/default.asp\" target=\"_blank\" rel=\"noreferrer noopener\">W3 School &#8211; Tutoriel CSS<\/a><\/li><\/ul>","protected":false},"featured_media":31612,"template":"","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}}},"class_list":["post-34726","elementor-adedemy","type-elementor-adedemy","status-publish","has-post-thumbnail","hentry"],"uagb_featured_image_src":{"full":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/10\/Introduccion-a-CSS-personalizado-de-Elementor.jpg?strip=all&quality=92&webp=92&avif=92",1901,948,false],"thumbnail":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/10\/Introduccion-a-CSS-personalizado-de-Elementor-150x150.jpg?strip=all&quality=92&webp=92&avif=92",150,150,true],"medium":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/10\/Introduccion-a-CSS-personalizado-de-Elementor-300x150.jpg?strip=all&quality=92&webp=92&avif=92",300,150,true],"medium_large":["https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2021\/10\/Introduccion-a-CSS-personalizado-de-Elementor-768x383.jpg",768,383,true],"large":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/10\/Introduccion-a-CSS-personalizado-de-Elementor.jpg?strip=all&quality=92&webp=92&avif=92",1901,948,true],"1536x1536":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/10\/Introduccion-a-CSS-personalizado-de-Elementor-1536x766.jpg?strip=all&quality=92&webp=92&avif=92",1536,766,true],"2048x2048":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/10\/Introduccion-a-CSS-personalizado-de-Elementor.jpg?strip=all&quality=92&webp=92&avif=92",1901,948,true]},"uagb_author_info":{"display_name":"La Colmena Tecnol\u00f3gica","author_link":"https:\/\/lacolmenatecnologica.com\/fr\/author\/"},"uagb_comment_info":0,"uagb_excerpt":"Dans cet exemple, je vais transformer les styles du widget WordPress Categories en utilisant la section Custom CSS de l&#8217;onglet Advanced avec Elementor. Si vous \u00eates abonn\u00e9 \u00e0 l&#8217;une des licences, il vous suffit de vous connecter pour voir \u00e9tape par \u00e9tape comment proc\u00e9der. Ins\u00e9rer le widget Cat\u00e9gories dans notre document Cliquez sur l&#8217;onglet Avanc\u00e9&hellip;","_links":{"self":[{"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/elementor-adedemy\/34726","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/elementor-adedemy"}],"about":[{"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/types\/elementor-adedemy"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/media\/31612"}],"wp:attachment":[{"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/media?parent=34726"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}