{"id":23,"date":"2023-08-18T11:02:00","date_gmt":"2023-08-18T08:02:00","guid":{"rendered":"https:\/\/elementor.com\/help\/?p=23"},"modified":"2026-02-02T10:00:35","modified_gmt":"2026-02-02T08:00:35","slug":"theme-style-global-settings","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/theme-style-global-settings\/","title":{"rendered":"Set a Theme Style"},"content":{"rendered":"\n

Theme Style<\/em> settings are global settings that allow you to set default styling options for various elements, such as Backgrounds<\/em>, Headings<\/em>, Buttons<\/em>, Images<\/em>, and Form Fields<\/em>.  These settings override the theme styling settings and takes its place, allowing you to use Elementor to set styles for elements not built by Elementor. By default, this will apply styles only to non-Elementor elements, for example, WooCommerce checkout fields, Contact Form 7 labels, 3rd-party headings and much more.<\/strong> If you prefer, you can force these Theme Style settings to also apply to Elementor-built elements as well. <\/p>\n\n\n\n

Note<\/strong>: Elementor Pro users can also set Global Custom CSS<\/a> which lets you apply custom CSS rules to your entire site. <\/p>\n\n\n\n

To Apply Theme Styles To Elementor Elements:<\/h3>\n\n\n\n

In order to apply the Theme Style settings to most of Elementor’s elements and widgets as well, you will need to disable Elementor\u2019s default colors and fonts.<\/p>\n\n\n\n

To disable Elementor’s default colors and fonts<\/strong>:<\/p>\n\n\n\n

    \n
  1. From WP Admin, navigate to Elementor>Editor>Settings<\/strong>.
    \"\"<\/li>\n\n\n\n
  2. Use the checkboxes to Disable Default Fonts<\/strong> and Disable Default Colors<\/strong>..
    \"\"<\/li>\n\n\n\n
  3. Use the checkboxes to Disable Default Fonts<\/strong> and Disable Default Colors<\/strong>.<\/li>\n<\/ol>\n\n\n\n

    Elementor’s default colors and fonts are disabled, allowing the theme style to override them.<\/p>\n\n\n\n

    How To Set Theme Styles<\/h3>\n\n\n\n

    You can change the theme’s styles from within the Elementor Editor.<\/p>\n\n\n\n

    To change the theme style:<\/p>\n\n\n\n

      \n
    1. Click the Elementor logo on the top toolbar.
      \"\"<\/li>\n\n\n\n
    2. Select Site Settings<\/strong> from the dropdown menu.
      \"\"
      The Site Settings menu appears.
      [callout type=”note”]You can also access Site Settings from WP Admin by navigating to Elementor>Editor<\/strong> and clicking Site Settings<\/strong>.[\/callout]
      \"\"<\/li>\n\n\n\n
    3. Click the element style you would like to change:\n
        \n
      • Typography<\/strong><\/li>\n\n\n\n
      • Buttons<\/strong><\/li>\n\n\n\n
      • Images<\/strong><\/li>\n\n\n\n
      • Form Fields<\/strong> <\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n

        [callout type=”note”]If you’re using the Hello Theme, you can also change the default settings of the theme’s header and footer.[\/callout]<\/p>\n\n\n\n

        Typography Options<\/h3>\n\n\n\n
        \"\"<\/figure>\n\n\n\n

        Text Color<\/strong>: Choose the color of the default text<\/p>\n\n\n\n

        Typography<\/strong>: Change the typography options for the default text<\/p>\n\n\n\n

        Paragraph Spacing<\/strong>: Set the amount of default spacing after a paragraph (margin-bottom)<\/p>\n\n\n\n

        Link<\/h4>\n\n\n\n
        Normal | Hover<\/h5>\n\n\n\n

        Color<\/strong>: Choose the default color of links for both normal and hover states<\/p>\n\n\n\n

        Typography<\/strong>: Change the default typography of links for both normal and hover states<\/p>\n\n\n\n

        H1-H6<\/h4>\n\n\n\n

        Color<\/strong>: Choose the default color for each Heading (H1, H2, H3, H4, H5, and H6)<\/p>\n\n\n\n

        Typography<\/strong>: Set the default typography options for each Heading (H1, H2, H3, H4, H5, and H6)<\/p>\n\n\n\n

        \n\n\n\n

        Buttons Options<\/h3>\n\n\n\n
        \"\"<\/figure>\n\n\n\n

        Typography<\/strong>: Change the default typography for buttons<\/p>\n\n\n\n

        Text Shadow<\/strong>: Set the default text shadow for buttons<\/p>\n\n\n\n

        Normal | Hover<\/h5>\n\n\n\n

        Text Color<\/strong>: Choose the default color for button text<\/p>\n\n\n\n

        Background Color<\/strong>: Choose the default background color of buttons<\/p>\n\n\n\n

        Border Type<\/strong>: Set the default type of border for buttons (None, Solid, Double, Dotted, Dashed, Groove)<\/p>\n\n\n\n

        Box Shadow<\/strong>: Set the default box shadow options for buttons<\/p>\n\n\n\n

        Border Radius<\/strong>: Set the default border radius to control corner roundness of buttons<\/p>\n\n\n\n

        Padding<\/strong>: Change the default button padding settings<\/p>\n\n\n\n

        \n\n\n\n

        Form Fields Options<\/h3>\n\n\n\n
        \"\"<\/figure>\n\n\n\n

        Label<\/h4>\n\n\n\n

        Color<\/strong>: Choose the default text color for the Field Labels<\/p>\n\n\n\n

        Typography<\/strong>: Set the default typography options for Field Labels<\/p>\n\n\n\n

        Field<\/h4>\n\n\n\n

        Typography<\/strong>: Set the default typography options for Input Field text<\/p>\n\n\n\n

        Normal | Focus<\/h5>\n\n\n\n

        Text Color<\/strong>: Choose the default text color for Input Field text<\/p>\n\n\n\n

        Background Color<\/strong>: Choose the default background color for Input Fields<\/p>\n\n\n\n

        Border Type<\/strong>: Set the default type of border for Input Fields (None, Solid, Double, Dotted, Dashed, Groove)<\/p>\n\n\n\n

        Border Radius<\/strong>: Set the default border radius to control corner roundness of Input Fields<\/p>\n\n\n\n

        Box Shadow<\/strong>: Set the default box shadow options for Input Fields<\/p>\n\n\n\n

        Transition Duration (ms) (Focus only)<\/strong>: Set the default amount of time, in milliseconds, for the Focus Transition to take place.<\/p>\n\n\n\n

        Padding<\/strong>: Set the default padding options for Input Fields<\/p>\n\n\n\n

        \n\n\n\n

        Images options<\/h3>\n\n\n\n
        \"\"<\/figure>\n\n\n\n
        Normal | Hover<\/h5>\n\n\n\n

        Border Type<\/strong>: Set the default type of border for Images (None, Solid, Double, Dotted, Dashed, Groove) in both Normal and Hover modes<\/p>\n\n\n\n

        Border Radius<\/strong>: Set the default border radius to control corner roundness of Images in both Normal and Hover modes<\/p>\n\n\n\n

        Opacity<\/strong>: Set the default opacity level of Images in both Normal and Hover modes<\/p>\n\n\n\n

        Box Shadow<\/strong>: Set the default box shadow options for Images in both Normal and Hover modes<\/p>\n\n\n\n

        CSS Filters<\/strong>: Set the default CSS Filters: Blur, Brightness, Contrast and Saturation for images in both Normal and Hover modes<\/p>\n\n\n\n

        Transition Duration (ms) (Hover only)<\/strong>: Set the default amount of time, in milliseconds, for the Hover Transition to take place.<\/p>\n\n\n\n

        \n\n\n\n

        Undo \/ Redo & Draft \/ Publish<\/h3>\n\n\n\n

        Just like any other Elementor editing you might do, Theme Style<\/em> works with the Revisions <\/em>and History <\/em>controls, so you can undo \/ redo any changes, and can always revert back to an earlier version of your Theme Style<\/em> design.<\/p>\n\n\n\n

        Theme Style<\/em> also works with Draft <\/em>and Publish <\/em>modes, so you can test the changes and save them to draft, without having them affect your live site. Your live site will only get the changes applied when you click the Theme Style\u2019s Publish<\/strong> button.<\/p>\n\n\n\n

        \n\n\n\n

        HTML Elements Affected<\/h3>\n\n\n\n

        Note<\/strong>: Some elements won\u2019t get affected because Elementor doesn\u2019t allow editing them (e.g fieldset, input[type=\u201dreset\u201d] and more)<\/p>\n\n\n\n

        Background color:<\/h4>\n\n\n\n

        <body><\/p>\n\n\n\n

        Buttons:<\/h4>\n\n\n\n
          \n
        • button<\/li>\n\n\n\n
        • input[type=”button”]<\/li>\n\n\n\n
        • input[type=”submit”]<\/li>\n\n\n\n
        • .elementor-button<\/li>\n\n\n\n
        • Paragraph spacing:<\/li>\n\n\n\n
        • <p><\/li>\n<\/ul>\n\n\n\n

          Links:<\/h4>\n\n\n\n
            \n
          • <a><\/li>\n<\/ul>\n\n\n\n

            Headings:<\/h4>\n\n\n\n
              \n
            • <h1><\/li>\n\n\n\n
            • <h2><\/li>\n\n\n\n
            • <h3><\/li>\n\n\n\n
            • <h4><\/li>\n\n\n\n
            • <h5><\/li>\n\n\n\n
            • <h6><\/li>\n<\/ul>\n\n\n\n

              Form:<\/h4>\n\n\n\n
                \n
              • label<\/li>\n\n\n\n
              • input:not([type=”button”]):not([type=”submit”])<\/li>\n\n\n\n
              • textarea<\/li>\n\n\n\n
              • .elementor-field-textual<\/li>\n<\/ul>\n\n\n\n

                Images:<\/h4>\n\n\n\n
                  \n
                • <img><\/li>\n<\/ul>\n\n\n\n
                  \n\n\n\n

                  Troubleshooting – All My Theme Styles Disappeared<\/h3>\n\n\n\n

                  This happens when the Default Kit<\/em> is deleted. If you go to Templates > Saved Templates<\/em>, and then select to view All<\/strong> templates, you will see a new template listed there, called Default Kit<\/em>. The Theme Styles are stored in this Saved Template. The Default Kit template, if deleted, will automatically recreate itself, but deleting it will remove all settings stored in the Theme Styles, so only delete this template if your goal is to completely reset your Theme Styles. <\/p>\n\n\n\n