How do I use global fonts and colors

What are global settings? 

Global settings enable you to change a property that is common across multiple widgets or features. Global fonts and global colors allow you to maintain a consistent look across your site and quickly update a design. For example, if you decide to change your font color from blue to pink, you can simply change the global font instead of editing every page.

Using global fonts and colors 

If you want to update items globally, you have to be tagged to add them to a group. Once tagged, you can modify the group using that global name.

You have four default groups of fonts and colors: Primary, Secondary, Text, and Accent. 

In the example below, we’ll modify all items labeled Primary on your site, including the title. First, let’s create a headline for the title.

Create the headline

To add a heading you need to select where you want the headline.  To do so:

  1. Drag the Heading widget to the canvas.
  2. Edit the title text in the panel and select Update.
Image of the Edit Heading menu where you can change the text of the heading.
Edit Heading allows you to change the text before modifying the text or color.

Change a global font 

  1. Navigate to hamburger menu in the upper left of the panel and select Site Settings.
    The Site menu with Site Settings selected
    Select Site Settings

  2. Click Global Fonts
  3. Go to the font labeled Primary
  4. Select the Pencil icon
  5. Change attributes in the Typography menu. 
  6. Close the menu.
Screenshot of Global Fonts and primary typography settings.

To change a global color

  1. Click Global Colors
  2. Go to a font label called Primary.
  3. Click the color swatch to open the Color Picker
  4. Select the color you want from the Color Picker. 
  5. Close the menu.
Screenshot of the Color Picker under System Colors.
Use the Color Picker to customize the look and feel of your site.

If you want to create the global fonts and colors first, the shortcut described in the Setting Global Fonts and Colors article is useful. 

Final words 

You’re now well on your way to creating a stunning website using global fonts and colors. To become even more proficient with the Elementor Editor, check out this tutorial on creating a design system.

To get the most out of Elementor, check out the Elementor Academy for helpful learning resources. If you come across any issues or need help, please contact our Support Center.

在社交網絡上分享它

今天開始使用Elemenor

加入數百萬專業人士,使用Elementor更快、更好地構建WordPress網站

本頁內容