{"id":6656,"date":"2021-10-12T06:24:08","date_gmt":"2021-10-12T06:24:08","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=6656"},"modified":"2023-02-22T10:10:48","modified_gmt":"2023-02-22T10:10:48","slug":"how-to-add-custom-css","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/how-to-add-custom-css\/","title":{"rendered":"How to Add Custom CSS [PRO]"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"6656\" class=\"elementor elementor-6656\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-447b7eea thesinglevideo elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"447b7eea\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-22dfe9d0\" data-id=\"22dfe9d0\" 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-55306cbc elementor-widget elementor-widget-video\" data-id=\"55306cbc\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/youtu.be\\\/xv9RjJky720&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\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<section class=\"elementor-section elementor-top-section elementor-element elementor-element-1637ec59 thesinglevideoOver elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"1637ec59\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-11e08345\" data-id=\"11e08345\" 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-7f24adcb elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"7f24adcb\" data-element_type=\"widget\" data-widget_type=\"tabs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-tabs\">\n\t\t\t<div class=\"elementor-tabs-wrapper\" role=\"tablist\" >\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-2131\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-2131\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-2132\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-2132\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t<div class=\"elementor-tabs-content-wrapper\" role=\"tablist\" aria-orientation=\"vertical\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-2131\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-2131\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-2131\" tabindex=\"0\" hidden=\"false\"><p>In this tutorial we learn how to and where to apply it.<\/p><p>The tutorial will cover:<br \/>\u2714\ufe0e What is CSS<br \/>\u2714\ufe0e How to work with CSS in Elementor<br \/>\u2714\ufe0e CSS tips &amp; tricks<br \/>\u2714\ufe0e And much more!<\/p><p>Credits:<br \/><a href=\"https:\/\/codepen.io\/whusterj\/pres\/bdYKop\">Floating Animation CSS<\/a>\u00a0<br \/><a href=\"https:\/\/css-tricks.com\/adding-stroke-to-web-text\/\">Text Stroke CSS<\/a><\/p><p>See Also:<br \/><a href=\"https:\/\/elementor.com\/help\/custom-css-pro\">Help Center Doc<\/a><\/p><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-2132\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-2132\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-2132\" tabindex=\"0\" hidden=\"hidden\"><p>Hey there. its Ash from Elementor.<\/p><p>Today we\u2019re going to learn about CSS, what it is, and how to add it within Elementor.<\/p><p>CSS is the language which allows us to control the presentation of elements, layout, colors, effects, behaviors, and more.<\/p><p>You can learn how to write CSS by visiting <a href=\"http:\/\/w3schools.com\/css\">w3schools.com\/css<\/a>, or by any other resource you find online.<\/p><p>The Elementor editor lets us create amazing websites with ease, while showing us a real time preview. It then automatically creates the necessary code for us in the background.<\/p><p>But how can we achieve a unique design or animation that can\u2019t be done with the editor alone? Like this text stroke here? Or how to add special animations like these floating shapes here?<\/p><p>This is where custom CSS comes in!\u00a0<span>With Elementor Pro, we can add custom CSS to every Section, Column or Widget.<\/span><\/p><p>Okay let\u2019s take a few steps back to the initial state, and start with our first example.<\/p><p>In order to achieve the text stroke effect, I searched for \u201cCSS text stroke\u201d, and found this snippet of CSS.<br \/>This link will also be available for you in this video description.<br \/>Let\u2019s copy the code snippet.<\/p><p>Back on our page, simply select the element you would like to apply the code to, directly, or through the Navigator.\u00a0<span>Now go to Advanced Tab.<\/span><\/p><p>Open \u201cCustom CSS\u201d. Here you can add your code and you\u2019ll see the changes instantly!<\/p><p>OK great, now I\u2019ll just have to dive into the code and change the properties here, let\u2019s replace 1px with 2px, and white instead of black. Magic!<\/p><p>Next, we\u2019ll add the floating animation with CSS.<\/p><p>I searched for \u201cCSS floating animation\u201d and found this piece of CSS. The link for this snippet is also attached in the video description for your convenience.<\/p><p>I can see in the preview here, it animates the grey square and is exactly what I need for my background shapes. So let\u2019s copy it.<\/p><p>Let\u2019s go to our image, Advanced tab, and in Custom CSS, let\u2019s paste in the code.<\/p><p>But nothing is happening. Do not worry. We will make some small adjustments to make it work.<\/p><p>Before we do this however, let first learn how CSS is constructed.<\/p><p>CSS is built from selectors, which tell the browser \u201cHey, search for h1 element\u201d as an example.\u00a0<\/p><p>Right after, we have declarations &#8211; which can be seen in the curly brackets,<\/p><p>These are the rules which are applied to the selector.<\/p><p>Inside we have properties &#8230;and values.<\/p><p>A semicolon (;) is used to separate properties.<\/p><p>If you see a dot, it means \u201cHey, search for an element with a specific class name\u201d<\/p><p>And if you see a Hashtag it means a unique ID name. Which is like a class name, but can\u2019t be used more than once.<\/p><p>We can select every element, go to the advanced tab and give it a class name or unique ID.<\/p><p>Now back in our code.<\/p><p>You can see we have a dot here, which means it\u2019s a class &#8211; going by the name \u2018floating\u2019.<\/p><p>So all we have to do is copy the class name, open the advanced tab, and paste the same class name to our element, here.<\/p><p>An alternate method is to simply replace the class with the word \u2018selector\u2019. This tells the Elementor editor to apply the CSS to this currently selected element. And as you can see it gives us the same result.<\/p><p>And there we have it, you now know what CSS is and how to apply it to every element within the Elementor editor.<\/p><p>How will you use custom CSS in your website? Share with us in the comments below your creations, and don\u2019t forget to like and subscribe to our channel.<\/p><\/div>\n\t\t\t\t\t\t\t<\/div>\n\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","protected":false},"excerpt":{"rendered":"<p>Overview Transcript Overview In this tutorial we learn how to and where to apply it. The tutorial will cover: \u2714\ufe0e What is CSS \u2714\ufe0e How to work with CSS in Elementor \u2714\ufe0e CSS tips &amp; tricks \u2714\ufe0e And much more! Credits: Floating Animation CSS&nbsp; Text Stroke CSS See Also: Help Center Doc Transcript Hey there. [&hellip;]<\/p>\n","protected":false},"author":20,"featured_media":6658,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[41],"class_list":["post-6656","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-layout","tag-guides-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Add Custom CSS [PRO] - Academy<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/academy\/how-to-add-custom-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Add Custom CSS [PRO] - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview In this tutorial we learn how to and where to apply it. The tutorial will cover: \u2714\ufe0e What is CSS \u2714\ufe0e How to work with CSS in Elementor \u2714\ufe0e CSS tips &amp; tricks \u2714\ufe0e And much more! Credits: Floating Animation CSS&nbsp; Text Stroke CSS See Also: Help Center Doc Transcript Hey there. [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/how-to-add-custom-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-10-12T06:24:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-22T10:10:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/10\/custom-css.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1440\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Aviva Darab\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Aviva Darab\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Add Custom CSS [PRO] - Academy","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/academy\/how-to-add-custom-css\/","og_locale":"en_US","og_type":"article","og_title":"How to Add Custom CSS [PRO] - Academy","og_description":"Overview Transcript Overview In this tutorial we learn how to and where to apply it. The tutorial will cover: \u2714\ufe0e What is CSS \u2714\ufe0e How to work with CSS in Elementor \u2714\ufe0e CSS tips &amp; tricks \u2714\ufe0e And much more! Credits: Floating Animation CSS&nbsp; Text Stroke CSS See Also: Help Center Doc Transcript Hey there. [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/how-to-add-custom-css\/","og_site_name":"Academy","article_published_time":"2021-10-12T06:24:08+00:00","article_modified_time":"2023-02-22T10:10:48+00:00","og_image":[{"width":2560,"height":1440,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/10\/custom-css.jpg","type":"image\/jpeg"}],"author":"Aviva Darab","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Aviva Darab","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/how-to-add-custom-css\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/how-to-add-custom-css\/"},"author":{"name":"Aviva Darab","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/6ce87fcf655168e5ac55e43148a99449"},"headline":"How to Add Custom CSS [PRO]","datePublished":"2021-10-12T06:24:08+00:00","dateModified":"2023-02-22T10:10:48+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-add-custom-css\/"},"wordCount":704,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-add-custom-css\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/10\/custom-css.jpg","keywords":["Guides and Tutorials"],"articleSection":["Design \/ Layout"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/how-to-add-custom-css\/","url":"https:\/\/elementor.com\/academy\/how-to-add-custom-css\/","name":"How to Add Custom CSS [PRO] - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-add-custom-css\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-add-custom-css\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/10\/custom-css.jpg","datePublished":"2021-10-12T06:24:08+00:00","dateModified":"2023-02-22T10:10:48+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/how-to-add-custom-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/how-to-add-custom-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/how-to-add-custom-css\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/10\/custom-css.jpg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/10\/custom-css.jpg","width":2560,"height":1440},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/how-to-add-custom-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Elementor","item":"https:\/\/elementor.com\/"},{"@type":"ListItem","position":2,"name":"Academy","item":"https:\/\/elementor.com\/academy\/"},{"@type":"ListItem","position":3,"name":"Design \/ Layout","item":"https:\/\/elementor.com\/academy\/design-layout\/"},{"@type":"ListItem","position":4,"name":"How to Add Custom CSS [PRO]"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/academy\/#website","url":"https:\/\/elementor.com\/academy\/","name":"Elementor Academy","description":"Page Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/academy\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/academy\/#organization","name":"Elementor Academy","alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","url":"https:\/\/elementor.com\/academy\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","width":490,"height":85,"caption":"Elementor Academy"},"image":{"@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/6ce87fcf655168e5ac55e43148a99449","name":"Aviva Darab","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/5456d642d6417c9b72a48f8fbec624cc1336f934ce83732b6fa2358ab0c31bfe?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5456d642d6417c9b72a48f8fbec624cc1336f934ce83732b6fa2358ab0c31bfe?s=96&d=mm&r=g","caption":"Aviva Darab"},"description":"Aviva is a Designer and Educator at Elementor. She\u2019s experienced in web and graphic design and enjoys sharing her knowledge with others. She stays fueled with coffee, dark chocolate, and Pinterest.","url":"https:\/\/elementor.com\/academy\/author\/user-5e36e0380be94\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/6656","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/comments?post=6656"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/6656\/revisions"}],"predecessor-version":[{"id":9334,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/6656\/revisions\/9334"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/6658"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=6656"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=6656"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=6656"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}