Global Site Styles

Changing Site Colors

  1. When editing a Page or Template, and click Edit with Elementor
    1. You can edit the site styles from any page or template, but we recommend going to Templates > Style Guide and click Edit with Elementor
  2. Click the top left Menu icon

    using global styles 1 menu.png

  3. Click Site Settings

    using global styles site settings.png
  4. Click Global Colors

    using global styles global colors.png
  5. You can change the Global Colors and the Style Kit Colors - both are used to control your entire site. 

    using global styles colors 1.png

Using Global Colors




  1. Click the pencil icon to edit the Widget you want to change.

    using global styles.png

  2. Select the Global Icon anywhere you can change a color.

    using global styles 2.png

  3. Select a color from your Global Colors list 

    using global styles 3.png

  4. Now, if you change that Global Color, anywhere it is synced will also change!

 

Changing Site Fonts

 

  1. When editing a Page or Template, slick Edit with Elementor
    1. You can edit the site styles from any page or template, but we recommend going to Templates > Style Guide and slick Edit with Elementor
  2. Click the top left Menu icon

    using global styles 1 menu.png

  3. Click Site Settings

    using global styles site settings.png
  4. Click Global Fonts

    using global styles global fonts.png
  5. From here you can change the Global Fonts and the Style Kit Fonts - both are used to control your entire site. 

    using global styles fonts 1.png

Using Global Fonts

 

  1. Click the pencil icon to edit the Widget you want to change

    using global fonts.png

  2. Select the Global Icon anywhere you can change typography

    using global fonts 2.png

  3. Select a typography style from your Global Fonts list

    using global fonts 3.png

    Now, if you change that Global Font, anywhere it is synced will also change! Global Fonts update general site styles and Style Kit Fonts control all the specific Heading or Title styles throughout the site.

Changing Button Styles

Your site has 5 button styles. WordPress names these buttons Extra Small, Small, Medium, Large, and Extra Large. Your theme's 5 buttons may vary in size, but they are likely more varied in color, allowing some buttons to work well on dark and some on light backgrounds. Using consistent styles throughout the site will help users easily understand what they can click on. Your site’s Style Guide template has a section with all 5 styles so you can review them as you edit. 

  1. When editing a Page or Template, click Edit with Elementor
    1. You can edit the site styles from any page or template, but we recommend going to Templates > Style Guide and click Edit with Elementor
  2. Click the top left Menu icon

    using global styles 1 menu.png

  3. Click Site Settings

    using global styles site settings.png
  4. Click Style Kits

    using global styles style kits.png
  5. Click Button Sizes

    button sizes.png

  6. From here you can change the 5 button styles. These are labeled as XS, S, M, L, and XL, but you have complete control over size, typography, colors, etc. We recommend you ensure you have a global style to work with dark and light backgrounds.

    button size settings.png

More About Global Styles

Related Help Article
Ready to learn more? Visit Elementor Academy: Use global fonts and colors

Updated

Was this article helpful?

0 out of 0 found this helpful

Have more questions? Submit a request