{"id":36068,"date":"2023-08-04T14:59:30","date_gmt":"2023-08-04T11:59:30","guid":{"rendered":"https:\/\/elementor.com\/help\/?p=36068"},"modified":"2026-09-25T14:20:20","modified_gmt":"2026-09-25T11:20:20","slug":"css-classes-in-elementor","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/css-classes-in-elementor\/","title":{"rendered":"CSS classes in Elementor"},"content":{"rendered":"\n\n

Classes let you group different elements so you can apply one style to them at once. Instead of styling widgets separately, you control them with a single label. This keeps your design consistent.<\/p>\n\n\n\n

Add a CSS class to an element<\/h2>\n\n\n\n

Elementor greatly simplifies creating CSS classes. To add elements to a class:<\/strong><\/p>\n\n\n\n

  1. Select an element on your canvas.<\/p><\/li>

  2. In the panel, open the Advanced<\/strong> tab.
    <\/p>

    <\/figure><\/li>

  3. Enter your class name in the CSS Classes<\/strong> field.<\/p><\/li><\/ol>\n\n\n[callout type=”note”]Note<\/strong>: When creating a class, do NOT add a period before the class name.[\/callout]\n\n\n

    When naming your classes, you must begin with a letter. You can use hyphens or underscores to separate words. Do not use spaces or special characters.<\/p>\n\n\n\n

    1. Repeat for every element you want to include in the class.<\/p><\/li><\/ol>\n\n\n\n

      Write the CSS code (Elementor Pro)<\/h2>\n\n\n\n

      Elementor Pro lets you write CSS directly inside the editor. You see the changes immediately.<\/p>\n\n\n\n

      1. Go to Site Settings > Custom CSS<\/strong> to apply the style globally across your site.<\/p><\/li>

      2. Alternatively, write the code in the Advanced > Custom CSS<\/strong> tab of the widget itself.<\/p><\/li>

      3. Write your CSS rules starting with a period before the class name (e.g., .change-color { color: green; }<\/code>).<\/p><\/li><\/ol>\n\n\n\n

        Write the CSS code (Elementor Free)<\/h2>\n\n\n\n

        Elementor Free does not include the Custom CSS panel inside the editor. You must add the code elsewhere. The WordPress Customizer handles this natively.<\/p>\n\n\n\n

        1. Save your Elementor page.<\/p><\/li>

        2. Navigate to Appearance > Customize > Additional CSS<\/strong> in the WordPress dashboard.<\/p><\/li>

        3. Write your CSS rules there, making sure to include the leading period for the class name.<\/p><\/li><\/ol>\n\n\n\n

          Target elements inside the widget wrapper<\/h2>\n\n\n\n

          Elementor applies your custom class to the outer HTML wrapper of the widget. It affects the whole container. If your style does not apply to the specific text or image inside, append the HTML tag to your CSS rule.<\/p>\n\n\n\n

          For example, use .change-color h2<\/code> to target a heading inside the widget, or .change-color img<\/code> for an image.<\/p>\n\n\n\n

          Example:<\/h2>\n\n\n\n

          Alex wants to create a site where every week they can change the color of select text. When building the site, Alex labels all the text elements they want to change with the CSS Class \u2013 \u201cchange-color\u201d<\/em>.  In Site Settings, Alex adds the CSS:
          .change-color {
              color: green;
          }<\/code><\/p>\n\n\n\n

          Now, every time Alex wants to change the color of these elements, they just have to replace green <\/em>with their selected color.<\/p>\n\n\n\n

          Related articles<\/h2>\n\n\n\n