{"id":57380,"date":"2025-05-19T15:53:36","date_gmt":"2025-05-19T12:53:36","guid":{"rendered":"https:\/\/elementor.com\/help\/?p=57380"},"modified":"2025-05-19T15:53:36","modified_gmt":"2025-05-19T12:53:36","slug":"classes-in-elementor","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/classes-in-elementor\/","title":{"rendered":"Classes in Elementor"},"content":{"rendered":"\n

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

As an extra benefit, proper use of classes can also improve your website\u2019s performance. <\/p>\n\n\n\n

Creating a class<\/h2>\n\n\n\n

Creating classes done automatically. You do it every time you add an element to the canvas<\/a>. When you add an element to the canvas, the element options appear in the left panel. At the top of the Style<\/strong> tab, you\u2019ll see the Class<\/strong> field with the class local<\/strong> already filled in. You can now add new classes to the element by following this process:<\/p>\n\n\n\n

    \n
  1. Enter a class name in the text box.
    A dropdown menu appears.
    \"\"<\/li>\n\n\n\n
  2. Select  the class name under Add New Global Class<\/strong>. <\/li>\n<\/ol>\n\n\n\n

    Editing a class<\/h2>\n\n\n\n

    After you create a class, you need to edit it to establish its properties.<\/p>\n\n\n\n

    To edit a class<\/strong>: <\/p>\n\n\n\n

      \n
    1. Create the class.
      \"\"<\/li>\n\n\n\n
    2. 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

      What is a class?<\/h2>\n\n\n\n

      A class is basically 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 Main text<\/strong> with these characteristics. That way, every element that had the class Main text<\/strong>, would use Arial 12 point as their font.     <\/p>\n\n\n\n

      The local class<\/h3>\n\n\n\n

      In Elementor, every element has at least one class – the 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 local<\/strong> class can be different for each element. For instance, you can have one Text widget that uses Arial font in its local<\/strong> class and another Text widget that uses Calibri in its local<\/strong> class. 
      \"\"<\/p>\n\n\n\n

      Class hierarchy<\/h3>\n\n\n\n

      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 local<\/strong> class set the font to New Time Roman, the element would use New Times Roman font.<\/p>\n\n\n\n

      [callout type=”tip”]It\u2019s best to build your classes so there are as few of these conflicts as possible. These conflicts can not only waste your time, they can also slow down your site. [\/callout]<\/p>\n\n\n\n

      Example of building classes<\/h2>\n\n\n\n

      In this example, we\u2019ll look at building a website that will include several buttons. In order to save time and boost performance, we\u2019ll create two classes – one to define important buttons and another to define secondary buttons. <\/p>\n\n\n\n

        \n
      1. Create a page in the Elementor Editor.<\/li>\n\n\n\n
      2. Drag a Button widget<\/strong> to the canvas.
        \"\"
        The options appear in the panel.
        \"\"<\/li>\n\n\n\n
      3. In the panel, click the Style<\/strong> tab.
        \"\"<\/li>\n\n\n\n
      4. In the Classes<\/strong> text box, next to local<\/strong>, enter Main_button<\/strong>.<\/li>\n\n\n\n
      5. In the dropdown menu, select Create new \u201cMain_button\u201d<\/strong>.
        Main button<\/strong> appears in the Classes<\/strong> text box. 
        \"\"
        Note that the text Main_button<\/strong> is in green. That means you\u2019re editing that class.
        \"\"<\/li>\n\n\n\n
      6. Open the Size<\/strong> field.
        \"\"<\/li>\n\n\n\n
      7. Give the button a width of 200 PX and a Height of 50 PX. 
        \"\"<\/li>\n\n\n\n
      8. Open the Background<\/strong> field.
        \"\"<\/li>\n\n\n\n
      9. Select a color for the button. For details, see Style tab – Background<\/a>.\u00a0
        Now let\u2019s create a class for secondary buttons.
        \"\"<\/li>\n\n\n\n
      10. In the Classes<\/strong> text box, delete Main_button<\/strong>.
        Note that the button returns to its default settings.
        \"\"<\/li>\n\n\n\n
      11. In the Classes<\/strong> text box, enter Secondary_button<\/strong>.<\/li>\n\n\n\n
      12. In the dropdown menu, select Create new \u201cSecondary_button\u201d<\/strong>.
        Note the text is in green meaning you\u2019re editing the class.
        \"\"<\/li>\n\n\n\n
      13. Open the Size<\/strong> field.
        \"\"<\/li>\n\n\n\n
      14. Give the button a width of 100 PX and a Height of 50 PX. 
        \"\"<\/li>\n\n\n\n
      15.  Open the Typography<\/strong> field.
        \"\"<\/li>\n\n\n\n
      16. Set the Font Size<\/strong> to 12. <\/li>\n\n\n\n
      17. Open the Background<\/strong> field.
        \"\"<\/li>\n\n\n\n
      18. Select a color for the background. Make sure it\u2019s different than the Main_button<\/strong> background.
        Now test the results.<\/li>\n\n\n\n
      19. Add a new Button element to the canvas.<\/li>\n\n\n\n
      20. Open the Style<\/strong> tab.
        \"\"<\/li>\n\n\n\n
      21. Click the Classes<\/strong> text box and select Main_button <\/strong>from the dropdown menu.
        \"\"
        The button should take on the characteristics of the Main_button class.
        \"\"<\/li>\n\n\n\n
      22. Click the Classes<\/strong> box and select Secondary button <\/strong>from the dropdown menu.
        The button will have most of the characteristics of the 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 Main button<\/strong>, so the Secondary button<\/strong> class determines the font style. 
        \"\"<\/li>\n\n\n\n
      23. In the Classes<\/strong> box, click on the three dots next Secondary_button<\/strong>. <\/li>\n\n\n\n
      24. Select Remove<\/strong> from the dropdown menu.
        The CSS Classes box should now contain just the local<\/strong> and Main_button<\/strong> classes. Notice that the font size returns to the default size because the Secondary_button class is no longer there.
        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 – it changes color when visitors hover over it. 
        \"\"<\/li>\n\n\n\n
      25. Click the three dots next to the local<\/strong> class and select Hover from the dropdown menu.
        By editing the local<\/strong> class, we can change the style of this button without changing other buttons with the Main button<\/strong> class.
        \"\"
        Hover is what is called a state.  When you select it, you determine how the button will look when visitors mouse over it. For details, see         Element States<\/a>.
        \"\"<\/li>\n\n\n\n
      26. Open the Background<\/strong> field.
        \"\"<\/li>\n\n\n\n
      27. Select a different background color.
        \"\"
        Notice that when you move the cursor over the button, it changes colors. <\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"

        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","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":[1509],"tags":[1513],"class_list":["post-57380","post","type-post","status-publish","format-standard","hentry","category-features","tag-v4"],"acf":[],"yoast_head":"\nClasses in Elementor | Elementor<\/title>\n<meta name=\"description\" content=\"Learn everything about Classes in Elementor in this article from Elementor's Knowledge Base. Get Elementor tips & 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\/\" \/>\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's Knowledge Base. Get Elementor tips & more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/help\/classes-in-elementor\/\" \/>\n<meta property=\"og:site_name\" content=\"Help\" \/>\n<meta property=\"article:published_time\" content=\"2025-05-19T12:53:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/1-create-a-new-class-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1468\" \/>\n\t<meta property=\"og:image:height\" content=\"748\" \/>\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=\"5 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\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/classes-in-elementor\/\"},\"author\":{\"name\":\"Cliff Churgin\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3\"},\"headline\":\"Classes in Elementor\",\"datePublished\":\"2025-05-19T12:53:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/classes-in-elementor\/\"},\"wordCount\":1058,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/classes-in-elementor\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/1-create-a-new-class-1.png\",\"keywords\":[\"V4\"],\"articleSection\":[\"Features\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/help\/classes-in-elementor\/\",\"url\":\"https:\/\/elementor.com\/help\/classes-in-elementor\/\",\"name\":\"Classes in Elementor | Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/classes-in-elementor\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/classes-in-elementor\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/1-create-a-new-class-1.png\",\"datePublished\":\"2025-05-19T12:53:36+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\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/help\/classes-in-elementor\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/classes-in-elementor\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/1-create-a-new-class-1.png\",\"contentUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/1-create-a-new-class-1.png\",\"width\":1468,\"height\":748},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/help\/classes-in-elementor\/#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\":\"Features\",\"item\":\"https:\/\/elementor.com\/help\/v4-editor\/features\/\"},{\"@type\":\"ListItem\",\"position\":4,\"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\/","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\/","og_site_name":"Help","article_published_time":"2025-05-19T12:53:36+00:00","og_image":[{"width":1468,"height":748,"url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/1-create-a-new-class-1.png","type":"image\/png"}],"author":"Cliff Churgin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Cliff Churgin","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/help\/classes-in-elementor\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/help\/classes-in-elementor\/"},"author":{"name":"Cliff Churgin","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3"},"headline":"Classes in Elementor","datePublished":"2025-05-19T12:53:36+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/help\/classes-in-elementor\/"},"wordCount":1058,"publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"image":{"@id":"https:\/\/elementor.com\/help\/classes-in-elementor\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/1-create-a-new-class-1.png","keywords":["V4"],"articleSection":["Features"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/help\/classes-in-elementor\/","url":"https:\/\/elementor.com\/help\/classes-in-elementor\/","name":"Classes in Elementor | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/help\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/help\/classes-in-elementor\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/help\/classes-in-elementor\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/1-create-a-new-class-1.png","datePublished":"2025-05-19T12:53:36+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\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/help\/classes-in-elementor\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/classes-in-elementor\/#primaryimage","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/1-create-a-new-class-1.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/1-create-a-new-class-1.png","width":1468,"height":748},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/help\/classes-in-elementor\/#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":"Features","item":"https:\/\/elementor.com\/help\/v4-editor\/features\/"},{"@type":"ListItem","position":4,"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\/57380","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=57380"}],"version-history":[{"count":2,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/57380\/revisions"}],"predecessor-version":[{"id":58695,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/57380\/revisions\/58695"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/media?parent=57380"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/categories?post=57380"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/tags?post=57380"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}