{"id":58040,"date":"2025-06-11T16:07:44","date_gmt":"2025-06-11T13:07:44","guid":{"rendered":"https:\/\/elementor.com\/help\/?p=57130"},"modified":"2025-09-15T14:49:47","modified_gmt":"2025-09-15T11:49:47","slug":"classes-in-elementor-2","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/classes-in-elementor-2\/","title":{"rendered":"Classes in Elementor"},"content":{"rendered":"\n<p>The Elementor Editor is designed to help web creators work quickly and efficiently. As part of that mission, the Editor adopts the principles of Atomic Design. This system is based on the idea of creating small, reusable elements. In Elementor, these elements are called classes. This is in line with the vocabulary used by CSS.<\/p>\n\n\n\n<p>As an extra benefit, proper use of classes can also improve your website\u2019s performance.&nbsp;<\/p>\n\n\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 title=\"Introducing Editor V4 Alpha! Classes, States, fully responsive style controls, single divs &amp; more!\" width=\"800\" height=\"450\" src=\"https:\/\/www.youtube.com\/embed\/q1pColXTiRI?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\n\n<h2 class=\"wp-block-heading\">Creating a class<\/h2>\n\n\n\n<p>Creating classes is done automatically. You do it every time you add an <a href=\"https:\/\/elementor.com\/help\/add-elements-to-a-page\/\">element to the canvas<\/a>. When you add an element to the canvas, the element options appear in the left panel. <br><img decoding=\"async\" class=\"wp-image-57131\" style=\"width: 150px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/04\/1-the-local-class.png\" alt=\"\"><\/p>\n\n\n\n<p>At the top of the <strong>Style<\/strong> tab, you\u2019ll see the <strong>Class<\/strong> field with the class <strong>local<\/strong> already filled in. You can now add new classes to the element by following this process:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Enter a class name in the text box.<br>A dropdown menu appears.<br><img decoding=\"async\" class=\"wp-image-57132\" style=\"width: 180px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/04\/Create-a-new-class.png\" alt=\"\"><\/li>\n\n\n\n<li>Select the class name under <strong>Create a new class<\/strong>.&nbsp;<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Create a global class from a local class<\/h3>\n\n\n\n<p>After creating an element using just the local class, you may decide that you want to reuse it by turning its properties into a global class. In these cases you can convert the properties of the local class into it a global class.<\/p>\n\n\n\n<p>To create a class from the local class:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Create an element and add several properties to it. For this example, we&#8217;ll create a heading and add alignment, font type and color.<\/li>\n\n\n\n<li>Click the ellipses next to <strong>local<\/strong>.<br><img fetchpriority=\"high\" decoding=\"async\" width=\"280\" height=\"218\" class=\"wp-image-152730\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/09\/Click-the-ellepses-by-local.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/09\/Click-the-ellepses-by-local.png 588w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/09\/Click-the-ellepses-by-local-300x234.png 300w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/li>\n\n\n\n<li>Select <strong>Convert to global class<\/strong> from the dropdown menu.<br><img decoding=\"async\" width=\"280\" height=\"444\" class=\"wp-image-152737\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/09\/Select-Convert-to-global-class.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/09\/Select-Convert-to-global-class.png 586w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/09\/Select-Convert-to-global-class-189x300.png 189w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><br>A global class is created. You can change the class name in the class manager. See <a href=\"https:\/\/elementor.com\/help\/the-elementor-editor-class-manager\/\">The Elementor Editor Class Manager<\/a> for details.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Editing a class<\/h2>\n\n\n\n<p>After you create a class, you need to edit it to establish its properties.<\/p>\n\n\n\n<p><strong>To edit a class<\/strong>:&nbsp;<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Create the class.<br><img decoding=\"async\" class=\"wp-image-57133\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/04\/image-21.png\" alt=\"\"><\/li>\n\n\n\n<li>Check the CSS classes field. The class you\u2019re editing will be pink if it\u2019s a local class. Otherwise it will be green. When the class is pink or green, you\u2019re editing that class.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">What is a class?<\/h2>\n\n\n\n<p>A class is a collection of shared style characteristics. For instance, if you\u2019re building a website and you want the standard text across the site to use Arial 12 point font, you can create a class called <strong>Main text<\/strong> with these characteristics. That way, every element with the class <strong>Main text<\/strong>, would use Arial 12 point as their font.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">The local class<\/h3>\n\n\n\n<p>In Elementor, every element has at least one class &#8211; the <strong>local<\/strong> class. This class defines the particular element that you\u2019re working with. It\u2019s important to note that even though all elements have a local class, the <strong>local<\/strong> class can be different for each element. For instance, you can have one Text widget that uses Arial font in its <strong>local<\/strong> class and another Text widget that uses Calibri in its <strong>local<\/strong> class.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Class hierarchy<\/h3>\n\n\n\n<p>The other important thing to note about classes, is that they work by hierarchies. f classes contradict one another, the Editor knows what characteristics have priority. For instance, if an element contains two classes, one that sets the font to Arial and another that sets the class to Calibri, the editor needs to determine which gets priority. This priority is set in the class manager. However the local class always has top priority. So, in the above case, if the <strong>local<\/strong> class set the font to New Time Roman, the element would use New Times Roman font.<\/p>\n\n\n\n<p>Tip: It\u2019s best to build your classes so there are as few conflicts as possible. These conflicts can not only waste your time, they can also slow down your site.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Example of building classes<\/h2>\n\n\n\n<p>In this example, we\u2019ll look at building a website that includes several buttons. In order to save time and boost performance, we\u2019ll create two classes &#8211; one to define important buttons and another to define secondary buttons.&nbsp;<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Create a page in the Elementor Editor.<\/li>\n\n\n\n<li>Drag a <strong>Button widget<\/strong> to the canvas.<br><img decoding=\"async\" class=\"wp-image-57135\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/04\/3-The-options-appear-in-the-panel-1.png\" alt=\"\"><br>The options appear in the panel.<br><img decoding=\"async\" class=\"wp-image-57136\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/04\/Click-the-Style-tab.png\" alt=\"\"><\/li>\n\n\n\n<li>Click the <strong>Style<\/strong> tab.<\/li>\n\n\n\n<li>In the<strong> Classes<\/strong> text box, next to <strong>local<\/strong>, enter <strong>Main_button<\/strong>.<br><img decoding=\"async\" class=\"wp-image-57137\" style=\"width: 180px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/04\/5-creatht-emain-button-class.png\" alt=\"\"><\/li>\n\n\n\n<li>In the dropdown menu, select <strong>Create new \u201cMain button\u201d<\/strong>.<br><strong>Main_button<\/strong> appears in the<strong> Classes<\/strong> text box.&nbsp;<br><img decoding=\"async\" class=\"wp-image-57138\" style=\"width: 180px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/04\/6-Main-button-is-in-green.png\" alt=\"\"><br>Note that the class name <strong>Main_button<\/strong> is in green. That means you\u2019re editing that class.<br><img decoding=\"async\" class=\"wp-image-57139\" style=\"width: 180px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/04\/7-open-the-size-field.png\" alt=\"\"><\/li>\n\n\n\n<li>Open the <strong>Size<\/strong> field.<br><img decoding=\"async\" class=\"wp-image-57140\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/04\/8-Set-the-size.png\" alt=\"\"><\/li>\n\n\n\n<li>Give the button a width of 200 PX and a Height of 50 PX.&nbsp;<br><img decoding=\"async\" class=\"wp-image-57141\" style=\"width: 180px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/04\/9-open-background.png\" alt=\"\"><\/li>\n\n\n\n<li>Open the <strong>Background<\/strong> field.<br><img decoding=\"async\" class=\"wp-image-57142\" style=\"width: 580px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/04\/10-Choose-a-background-color.png\" alt=\"\"><\/li>\n\n\n\n<li>Select a color for the button. For details, see <a href=\"https:\/\/elementor.com\/help\/style-tab-background\">Style tab &#8211;  Background<\/a>.&nbsp;<br>Now let\u2019s create a class for secondary buttons.<\/li>\n\n\n\n<li>In the <strong>CSS Classes<\/strong> text box, delete <strong>Main button<\/strong>.<br><img decoding=\"async\" class=\"wp-image-57143\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/04\/11-delete-main-button-class.png\" alt=\"\"><br>Note that the button returns to its default settings.<\/li>\n\n\n\n<li>In the<strong> Classes<\/strong> text box, enter <strong>Secondary_button<\/strong>.<br><img decoding=\"async\" class=\"wp-image-57144\" style=\"width: 180px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/04\/12-create-secondary-button.png\" alt=\"\"><\/li>\n\n\n\n<li>In the dropdown menu, select <strong>Create \u201cSecondary button\u201d<\/strong>.<br>Note the class name is in green meaning you\u2019re editing the class.<br><img decoding=\"async\" class=\"wp-image-57145\" style=\"width: 180px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/04\/13-Open-the-size-field-for-secondary.png\" alt=\"\"><\/li>\n\n\n\n<li>Open the <strong>Size<\/strong> field.<br><img decoding=\"async\" class=\"wp-image-57153\" style=\"width: 580px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/04\/14-Set-the-secondary-size-2.png\" alt=\"\"><\/li>\n\n\n\n<li>Give the button a width of 100 PX and a Height of 50 PX.<br><img decoding=\"async\" class=\"wp-image-57148\" style=\"width: 180px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/04\/15-open-typography.png\" alt=\"\">&nbsp;<\/li>\n\n\n\n<li>&nbsp;Open the <strong>Typography<\/strong> field.<br><img decoding=\"async\" class=\"wp-image-57150\" style=\"width: 580px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/04\/16-change-the-typography-1.png\" alt=\"\"><\/li>\n\n\n\n<li>Set the <strong>Font Size<\/strong> to 12.&nbsp;<br><img decoding=\"async\" class=\"wp-image-57151\" style=\"width: 180px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/04\/15-open-secondary-button.png\" alt=\"\"><\/li>\n\n\n\n<li>Open the <strong>Background<\/strong> field.<br><img decoding=\"async\" class=\"wp-image-57152\" style=\"width: 580px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/04\/18-change-background-secondary.png\" alt=\"\"><\/li>\n\n\n\n<li>Select a color for the background. Make sure it\u2019s different than the <strong>Main button<\/strong> background.<br>Now let\u2019s test the results.<br><img decoding=\"async\" class=\"wp-image-57154\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/04\/Add-a-button-element-to-canvas.png\" alt=\"\"><\/li>\n\n\n\n<li>Add a new Button element to the canvas.<\/li>\n\n\n\n<li>Open the <strong>Style<\/strong> tab.<\/li>\n\n\n\n<li>Click the CSS classes box and select <strong>Main button <\/strong>from the dropdown menu.<\/li>\n<\/ol>\n\n\n\n<p>The button should take on the characteristics of the Main button class.<\/p>\n\n\n\n<ol start=\"23\" class=\"wp-block-list\">\n<li>Click the CSS classes box and select <strong>Secondary button <\/strong>from the dropdown menu.<\/li>\n<\/ol>\n\n\n\n<p>The button will have most of the characteristics of the <strong>Main button<\/strong> class. That is because the Main button class is higher on the class hierarchy. However, the font on the button takes on the style of the Secondary button class. That is because we never defined the typography of the <strong>Main button<\/strong>, so the <strong>Secondary button<\/strong> class determines the font style.&nbsp;<\/p>\n\n\n\n<ol start=\"24\" class=\"wp-block-list\">\n<li>In the CSS classes box, click the three dots next to <strong>Secondary button<\/strong>.&nbsp;<\/li>\n\n\n\n<li>Select <strong>Remove<\/strong> from the dropdown menu.<\/li>\n<\/ol>\n\n\n\n<p>The CSS Classes box should now contain just the <strong>local<\/strong> and <strong>Main button<\/strong> classes.&nbsp;<\/p>\n\n\n\n<p>Now let\u2019s say that we want to customize this one button so that it looks like a main button but has one additional feature &#8211; it changes color when visitors hover over it.&nbsp;<\/p>\n\n\n\n<ol start=\"26\" class=\"wp-block-list\">\n<li>Click the three dots next to the <strong>local<\/strong> class.<\/li>\n<\/ol>\n\n\n\n<p>By editing the <strong>local<\/strong> class, we can change the style of this button without changing other buttons with the <strong>Main button<\/strong> class.<\/p>\n\n\n\n<ol start=\"27\" class=\"wp-block-list\">\n<li>Select <strong>Hover<\/strong> from the dropdown menu.<\/li>\n<\/ol>\n\n\n\n<p>Hover is what is called a state.&nbsp; When you select it, you determine how the button will look when visitors mouse over it.&nbsp;<\/p>\n\n\n\n<ol start=\"28\" class=\"wp-block-list\">\n<li>Open the Background field.<\/li>\n\n\n\n<li>Select a different background color.<\/li>\n<\/ol>\n\n\n\n<p>Notice that when you move the cursor over the button, it changes colors.&nbsp;<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Elementor Editor is designed to help web creators work quickly and efficiently. As part of that mission, the Editor adopts the principles of Atomic Design. This system is based on the idea of creating small, reusable elements. In Elementor, these elements are called classes. This is in line with the vocabulary used by CSS. [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_elementor_kustomer_id":[],"footnotes":""},"categories":[1506],"tags":[1513],"class_list":["post-58040","post","type-post","status-publish","format-standard","hentry","category-v4-editor","tag-v4"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Classes in Elementor | Elementor<\/title>\n<meta name=\"description\" content=\"Learn everything about Classes in Elementor in this article from Elementor&#039;s Knowledge Base. Get Elementor tips &amp; more.\" \/>\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\/help\/classes-in-elementor-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Classes in Elementor | Elementor\" \/>\n<meta property=\"og:description\" content=\"Learn everything about Classes in Elementor in this article from Elementor&#039;s Knowledge Base. Get Elementor tips &amp; more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/help\/classes-in-elementor-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Help\" \/>\n<meta property=\"article:published_time\" content=\"2025-06-11T13:07:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-15T11:49:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/03\/Click-the-Replace-URL-tab.png\" \/>\n\t<meta property=\"og:image:width\" content=\"878\" \/>\n\t<meta property=\"og:image:height\" content=\"699\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Cliff Churgin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Cliff Churgin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/help\/classes-in-elementor-2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/classes-in-elementor-2\/\"},\"author\":{\"name\":\"Cliff Churgin\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3\"},\"headline\":\"Classes in Elementor\",\"datePublished\":\"2025-06-11T13:07:44+00:00\",\"dateModified\":\"2025-09-15T11:49:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/classes-in-elementor-2\/\"},\"wordCount\":1159,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/classes-in-elementor-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/04\/1-the-local-class.png\",\"keywords\":[\"V4\"],\"articleSection\":[\"Editor V4\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/help\/classes-in-elementor-2\/\",\"url\":\"https:\/\/elementor.com\/help\/classes-in-elementor-2\/\",\"name\":\"Classes in Elementor | Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/classes-in-elementor-2\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/classes-in-elementor-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/04\/1-the-local-class.png\",\"datePublished\":\"2025-06-11T13:07:44+00:00\",\"dateModified\":\"2025-09-15T11:49:47+00:00\",\"description\":\"Learn everything about Classes in Elementor in this article from Elementor's Knowledge Base. Get Elementor tips & more.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/help\/classes-in-elementor-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/help\/classes-in-elementor-2\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/classes-in-elementor-2\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/03\/Click-the-Replace-URL-tab.png\",\"contentUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/03\/Click-the-Replace-URL-tab.png\",\"width\":878,\"height\":699},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/help\/classes-in-elementor-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Help Center\",\"item\":\"https:\/\/elementor.com\/help\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Editor V4\",\"item\":\"https:\/\/elementor.com\/help\/v4-editor\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Classes in Elementor\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/help\/#website\",\"url\":\"https:\/\/elementor.com\/help\/\",\"name\":\"Elementor\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/help\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/help\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/help\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3\",\"name\":\"Cliff Churgin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g\",\"caption\":\"Cliff Churgin\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Classes in Elementor | Elementor","description":"Learn everything about Classes in Elementor in this article from Elementor's Knowledge Base. Get Elementor tips & more.","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\/help\/classes-in-elementor-2\/","og_locale":"en_US","og_type":"article","og_title":"Classes in Elementor | Elementor","og_description":"Learn everything about Classes in Elementor in this article from Elementor's Knowledge Base. Get Elementor tips & more.","og_url":"https:\/\/elementor.com\/help\/classes-in-elementor-2\/","og_site_name":"Help","article_published_time":"2025-06-11T13:07:44+00:00","article_modified_time":"2025-09-15T11:49:47+00:00","og_image":[{"width":878,"height":699,"url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/03\/Click-the-Replace-URL-tab.png","type":"image\/png"}],"author":"Cliff Churgin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Cliff Churgin","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/help\/classes-in-elementor-2\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/help\/classes-in-elementor-2\/"},"author":{"name":"Cliff Churgin","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3"},"headline":"Classes in Elementor","datePublished":"2025-06-11T13:07:44+00:00","dateModified":"2025-09-15T11:49:47+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/help\/classes-in-elementor-2\/"},"wordCount":1159,"publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"image":{"@id":"https:\/\/elementor.com\/help\/classes-in-elementor-2\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/04\/1-the-local-class.png","keywords":["V4"],"articleSection":["Editor V4"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/help\/classes-in-elementor-2\/","url":"https:\/\/elementor.com\/help\/classes-in-elementor-2\/","name":"Classes in Elementor | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/help\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/help\/classes-in-elementor-2\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/help\/classes-in-elementor-2\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/04\/1-the-local-class.png","datePublished":"2025-06-11T13:07:44+00:00","dateModified":"2025-09-15T11:49:47+00:00","description":"Learn everything about Classes in Elementor in this article from Elementor's Knowledge Base. Get Elementor tips & more.","breadcrumb":{"@id":"https:\/\/elementor.com\/help\/classes-in-elementor-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/help\/classes-in-elementor-2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/classes-in-elementor-2\/#primaryimage","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/03\/Click-the-Replace-URL-tab.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/03\/Click-the-Replace-URL-tab.png","width":878,"height":699},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/help\/classes-in-elementor-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Help Center","item":"https:\/\/elementor.com\/help\/"},{"@type":"ListItem","position":2,"name":"Editor V4","item":"https:\/\/elementor.com\/help\/v4-editor\/"},{"@type":"ListItem","position":3,"name":"Classes in Elementor"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/help\/#website","url":"https:\/\/elementor.com\/help\/","name":"Elementor","description":"","publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/help\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/help\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/help\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3","name":"Cliff Churgin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g","caption":"Cliff Churgin"}}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/58040","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/comments?post=58040"}],"version-history":[{"count":3,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/58040\/revisions"}],"predecessor-version":[{"id":152944,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/58040\/revisions\/152944"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/media?parent=58040"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/categories?post=58040"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/tags?post=58040"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}