{"id":34721,"date":"2021-10-03T20:14:11","date_gmt":"2021-10-03T18:14:11","guid":{"rendered":"https:\/\/lacolmenatecnologica.com\/elementor-academy-temas\/introduction-to-elementor-custom-css\/"},"modified":"2023-03-30T12:22:36","modified_gmt":"2023-03-30T10:22:36","slug":"introduction-to-elementor-custom-css","status":"publish","type":"elementor-adedemy","link":"https:\/\/lacolmenatecnologica.com\/en\/elementor-academy-temas\/introduction-to-elementor-custom-css\/","title":{"rendered":"Introduction to Elementor Custom CSS"},"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\">CSS Code<\/a><\/li><li class=\"toc-level-1\"><a href=\"#enlaces-de-interes-bddda819-da68-41be-bce6-f8d2fb0a551d\">Links of interest<\/a><\/li><\/ul>\n<p>In this example I&#8217;m going to transform the styles of the WordPress <strong>Categories<\/strong> widget using the <strong>Custom CSS<\/strong> section of the <strong>Advanced<\/strong> tab with Elementor. If you are a subscriber of one of the licenses, just log in to see step by step how it is done.<\/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 to Elementor Custom CSS\" class=\"wp-image-17662\"\/><\/a><\/figure>\n<ol class=\"wp-block-list\"><li>Insert the <strong>Categories<\/strong> widget to our document<\/li><li>Click on the <strong>Advanced<\/strong> tab<\/li><li>Click on the <strong>Custom CSS<\/strong> section and paste the CSS code<\/li><\/ol>\n<h2 class=\"wp-block-heading\" id=\"codigo-css-df35fea5-ebd8-4683-a81c-0b945faec3a5\">CSS Code<\/h2>\n\n<p>Click the COPY CODE button to copy the code used in this video tutorial to the clipboard.<\/p>\n\t\t<div data-elementor-type=\"section\" data-elementor-id=\"33348\" class=\"elementor elementor-33348 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\">Copy 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\">Links of interest<\/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; CSS Tutorial<\/a><\/li><\/ul>","protected":false},"featured_media":31611,"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-34721","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\/en\/author\/"},"uagb_comment_info":0,"uagb_excerpt":"In this example I&#8217;m going to transform the styles of the WordPress Categories widget using the Custom CSS section of the Advanced tab with Elementor. If you are a subscriber of one of the licenses, just log in to see step by step how it is done. Insert the Categories widget to our document Click&hellip;","_links":{"self":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/elementor-adedemy\/34721","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/elementor-adedemy"}],"about":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/types\/elementor-adedemy"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/media\/31611"}],"wp:attachment":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/media?parent=34721"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}