{"id":6532,"date":"2021-10-03T20:14:11","date_gmt":"2021-10-03T18:14:11","guid":{"rendered":"https:\/\/lacolmenatecnologica.com\/introduction-to-elementor-custom-css\/"},"modified":"2026-09-02T19:41:17","modified_gmt":"2026-09-02T17:41:17","slug":"introduction-to-elementor-custom-css","status":"publish","type":"post","link":"https:\/\/lacolmenatecnologica.com\/en\/introduction-to-elementor-custom-css\/","title":{"rendered":"Introduction to Elementor Custom CSS"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Step-by-step video<\/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\">In this example, I will 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 to one of the licenses, simply log in to see the step-by-step details. <\/p>\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a9aad83cd292&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a9aad83cd292\" 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 to Elementor Custom CSS\" 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>Insert the <strong>Categories<\/strong> widget into our document<\/li>\n\n\n\n<li>Click on the <strong>Advanced<\/strong> tab<\/li>\n\n\n\n<li>Click on the <strong>Custom CSS<\/strong> section and paste the CSS code<\/li>\n<\/ol>\n\n<h2 class=\"wp-block-heading\" id=\"codigo-css-df35fea5-ebd8-4683-a81c-0b945faec3a5\">CSS Code<\/h2>\n\n<p class=\"wp-block-paragraph\">Copy the code used in this video tutorial.<\/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\">Useful links<\/h2>\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.w3schools.com\/css\/default.asp\" target=\"_blank\" rel=\"noreferrer noopener\">W3Schools &#8211; CSS Tutorial<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Step-by-step video In this example, I will transform the styles of the WordPress Categories widget using the Custom CSS section of the Advanced tab with Elementor. If you are a subscriber to one of the licenses, simply log in to see the step-by-step details. CSS Code Copy the code used in this video tutorial. Useful [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":6533,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_titles_title":"Introduction to Elementor Custom CSS for WordPress","_seopress_titles_desc":"In this example, I will transform the styles of the WordPress Categories widget using the Custom CSS section of the Advanced tab with Elementor...","_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":[384],"tags":[377,386],"class_list":["post-6532","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-elementor","tag-wordpress-customization"],"_links":{"self":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/posts\/6532","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/comments?post=6532"}],"version-history":[{"count":1,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/posts\/6532\/revisions"}],"predecessor-version":[{"id":6534,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/posts\/6532\/revisions\/6534"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/media\/6533"}],"wp:attachment":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/media?parent=6532"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/categories?post=6532"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/tags?post=6532"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}