{"id":8081,"date":"2022-04-21T20:18:13","date_gmt":"2022-04-21T20:18:13","guid":{"rendered":"https:\/\/picmaticweb.com\/documentation\/docs\/docly-documentation\/elementor-builder\/elementor-custom-css-classes\/"},"modified":"2022-04-21T20:18:39","modified_gmt":"2022-04-21T20:18:39","slug":"elementor-custom-css-classes","status":"publish","type":"docs","link":"https:\/\/picmaticweb.com\/documentation\/docs\/bizwheel-documentation\/elementor-builder\/elementor-custom-css-classes\/","title":{"rendered":"Elementor custom CSS classes"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"8081\" class=\"elementor elementor-8081\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-730d454 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"730d454\" data-element_type=\"section\">\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-5d5e63f\" data-id=\"5d5e63f\" data-element_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-3e0c502 elementor-widget elementor-widget-text-editor\" data-id=\"3e0c502\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Some style properties can not generate with Elementor controls. As like, box-shadow on button hover, anchor tag hover color, rotate effect, box-shadow on Image Carousel images. For this reason, we applied these style properties with some custom CSS class.<\/p><p>Here, we are listing those custom CSS classes as references. You can also use these custom CSS class with the associated Elementor widgets. Go to the\u00a0<strong>Advanced<\/strong>\u00a0tab from the widget editor panel, then put the CSS class in the\u00a0<strong>CSS Classes<\/strong>\u00a0field. See the screenshot below-<\/p><figure class=\"wp-block-image\"><img fetchpriority=\"high\" decoding=\"async\" class=\"wp-image-1778 jetpack-lazy-image jetpack-lazy-image--handled\" src=\"https:\/\/docs.droitthemes.com\/wp-content\/uploads\/2019\/12\/custom_class.jpg\" sizes=\"(max-width: 315px) 100vw, 315px\" srcset=\"https:\/\/docs.droitthemes.com\/wp-content\/uploads\/2019\/12\/custom_class.jpg 315w, https:\/\/docs.droitthemes.com\/wp-content\/uploads\/2019\/12\/custom_class-201x300.jpg 201w\" alt=\"\" width=\"315\" height=\"470\" data-lazy-loaded=\"1\" \/><\/figure><h2 id=\"image-classes\">Image Classes<\/h2><ul><li>Use the\u00a0<code>max-width-none<\/code>\u00a0class if you want to disable the Elementor default image\u00a0<code>max-width: 100%<\/code>\u00a0to\u00a0<code>max-width: none<\/code><\/li><li>Use the\u00a0<code>image-box-shadow<\/code>\u00a0class to apply a box-shadow around an image or images. You can use this class in Image related widgets (Image, Image Carousel, Gallery).<\/li><li>Use the\u00a0<code>rotate_effect<\/code>\u00a0class, if you want to enable rotating on hovering over an image.<\/li><\/ul><h2 id=\"shadow-on-button-hover\">Shadow on button hover<\/h2><ul><li>Use the\u00a0<code>btn-hover-shadow<\/code>\u00a0class, if you want to apply a red color scheme box-shadow on the button hover.<\/li><li>Use the\u00a0<code>yellow-btn-hover-shadow<\/code>\u00a0class, if you want to apply a yellow color scheme box-shadow on the button hover.<\/li><li>Use the\u00a0<code>btn-shadow-none-hover<\/code>\u00a0to disable the box-shadow style from a button.<\/li><li>Use the\u00a0<code>btn-hover-shadow-black_alpha-1<\/code>class to apply black alpha 0.1\u00a0<code>rgba(0, 0, 0, 0.1)<\/code>\u00a0color scheme box-shadow on the button hover.<\/li><\/ul><p><strong>Note:<\/strong>\u00a0Apply these CSS classes in the Elementor\u2019s default Button widget only.<\/p>\t\t\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","protected":false},"excerpt":{"rendered":"<p>Some style properties can not generate with Elementor controls. As like, box-shadow on button hover, anchor tag hover color, rotate effect, box-shadow on Image Carousel images. For this reason, we applied these style properties with some custom CSS class. Here, we are listing those custom CSS classes as references. You can also use these custom [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":8066,"menu_order":3,"comment_status":"open","ping_status":"closed","template":"","doc_tag":[],"class_list":["post-8081","docs","type-docs","status-publish","hentry","no-post-thumbnail"],"acf":[],"_links":{"self":[{"href":"https:\/\/picmaticweb.com\/documentation\/wp-json\/wp\/v2\/docs\/8081","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/picmaticweb.com\/documentation\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/picmaticweb.com\/documentation\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/picmaticweb.com\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/picmaticweb.com\/documentation\/wp-json\/wp\/v2\/comments?post=8081"}],"version-history":[{"count":0,"href":"https:\/\/picmaticweb.com\/documentation\/wp-json\/wp\/v2\/docs\/8081\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/picmaticweb.com\/documentation\/wp-json\/wp\/v2\/docs\/8066"}],"wp:attachment":[{"href":"https:\/\/picmaticweb.com\/documentation\/wp-json\/wp\/v2\/media?parent=8081"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/picmaticweb.com\/documentation\/wp-json\/wp\/v2\/doc_tag?post=8081"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}