Introduction

Setting global colors and fonts in Page Designer allows you to maintain a consistent design throughout your website. This feature enables you to define your site’s color palette and typography settings, ensuring a cohesive and professional look.

Steps to Set Global Colors and Fonts

Step 1: Access Page Designer Site Settings

1. Open Page Designer
   • Navigate to any page or post in your Red OnX Dashboard and click the title of the page to open it with Page Designer.
2. Open Site Settings
   • Click on the hamburger menu (three horizontal lines) in the top-left corner of the Page Designer panel.
   • Select “Site Settings” from the dropdown menu.

Step 2: Setting Global Colors

1. Navigate to Global Colors
   • In the Site Settings panel, click on “Global Colors.”
2. Define Your Color Palette
   • You will see the default global colors: Primary, Secondary, Text, and Accent. Click on each color to change it.
   • Choose your desired colors using the color picker or by entering a hex code.
3. Add New Colors
   • Click “Add Color” to define additional colors for your site.
   • Name your new color and set its value.
4. Apply and Save
   • Click the “Apply” button to save changes.
   • Click “Update” to ensure your global colors are saved.

Step 3: Setting Global Fonts

1. Navigate to Global Fonts
   • In the Site Settings panel, click on “Global Fonts.”
2. Define Typography Settings
   • You will see the default global fonts: Primary, Secondary, Text, and Accent. Click on each to customize.
   • Set the font family, size, weight, transform, style, line-height, letter spacing, and decoration.
3. Add New Fonts
   • Click “Add Font” to define additional typography styles.
   • Name your new font style and set its properties.
4. Apply and Save
   • Click the “Apply” button to save changes.
   • Click “Update” to ensure your global fonts are saved.

Step 4: Apply Global Colors and Fonts to Elements

An element in Page Designer refers to any individual part of your web page, such as a heading, paragraph, image, or button.

1. Open an Element for Editing
   • Edit any element (e.g., Heading, Text, Button) within the Page Designer editor.
2. Apply Global Colors
   • In the Style tab, click on the color option. Select the little globe icon next to the color picker to apply a global color.
3. Override Global Colors
   • If you want to override the global color, click the little box to the right of the globe icon. This allows you to set a specific color for that element only.
4. Apply Global Fonts
   • In the Style tab, click on the typography option. Select the little globe icon next to the font settings to apply a global font.
5. Override Global Fonts
   • To override the global font, click the little box to the right of the globe icon. This allows you to set specific typography settings for that element only.

Conclusion

By setting global colors and fonts in Page Designer, you can ensure design consistency across your site. This streamlined process not only saves time but also enhances your site’s visual coherence.