Managing Global Colors in JupiterX

Global colors are a powerful feature in JupiterX that allow you to maintain a consistent color scheme throughout your website. These colors can be set and edited while working on individual pages or accessed directly from the global colors page for a more site-wide approach. This article will guide you through accessing, editing, and adding global colors to your JupiterX site.

Accessing Your Site’s Global Colors

To view your site’s global colors, follow these simple steps:

1. Open the Elementor Editor while editing any page on your site.
2. Navigate to the Site Settings by clicking on the "setting slide" icon located at the top left of the Elementor panel.
3. Once the Site Settings panel opens, select Global Colors to view the colors that have been set for your website.

Note: To see how these global colors affect the elements on your pages, you must activate the Style Guide Preview. This can be turned on from the WordPress dashboard, allowing you to switch between the content area and the style guide preview.

Editing Your Site’s Global Colors

To edit the system colors on your JupiterX site:

1. Go to the Global Colors settings in the Site Settings panel of the Elementor Editor.
2. You will see the System Colors section with a list of color roles such as Primary, Secondary, Text, and Accent, each accompanied by a color swatch.
3. To change a color, click on the color swatch beside the color name. This action opens the color picker.
4. Select the new color of your choice. As you choose a color, the hexadecimal value will automatically update to match your selection.
5. Review the changes in the preview if you have the Style Guide Preview activated.

Remember, these system colors will be used consistently across the entire site, providing a uniform look and feel. Changes made to these colors will reflect wherever the specific color is employed, such as in buttons, headings, links, or background sections.

Custom Colors

1. In the Global Colors section, locate the Custom Colors.
2. Hover over a color to reveal the editing options:
   • To delete a global color, click on the delete icon (the pencil crossed out) next to the color. Remember, you can't delete system colors—only the ones you've added under Custom Colors.
   • To reorder the global colors, click and drag the arrows icon to move the color to your desired position in the list.
   • To change the color itself, click on the color swatch. This will open the color picker, where you can choose a new color.

After making your adjustments, don't forget to click Save Changes to apply the updates to your site.

Changing the Name of a Global Color

If you need to change the name of a global color:

1. Click directly on the name of the global color. This will make the text editable.
2. Type in the new name for the color.
3. Click away or press Enter to confirm the change.

Adding a New Global Color

Adding a new color to your palette is just as easy:

1. Scroll to the bottom of the Global Colors section and click Add Color.
2. A new item box will appear where you can enter a name for the new color.
3. After naming, click on the color swatch to select the color using the color picker.

Once you've selected and named your new color, make sure to save your changes. Now you can select this global color in your widget styling option's color swatches, helping you keep color palettes under global colors to speed up your website design and editing.

Conclusion

By effectively using the Global Colors feature in JupiterX, you can ensure a consistent and harmonious design throughout your website. Whether you're updating a color to refresh your site's look, adding a seasonal color, or simply keeping your color palette organized, JupiterX's Global Colors functionality is an indispensable tool for maintaining your site's aesthetic appeal. Remember to regularly review and update your colors to keep your site looking its best.