Mastering Global Theme Styling in JupiterX

In web design, consistency is key, and JupiterX’s Global Theme Styling feature is your one-stop solution for implementing a cohesive design language across your website. Whether it's backgrounds, headings, buttons, images, or form fields, Global Theme Styling overrides individual settings and applies a uniform style across all relevant elements. Let’s uncover how you can harness this feature to ensure your website’s typography and elements align perfectly with your brand.

Accessing Global Theme Styles

Start by opening the Elementor Editor:

Click the Site Settings icon in the top left corner of the Widget Panel.
From the dropdown, navigate to Site Settings > Theme Style.

You'll find yourself in the command center for global styling, where you can make broad changes that affect various elements across your entire site.

Editing Theme Styles

Within the Theme Style settings, you have the autonomy to edit various font and element styles:

Typography: From your base text color and typography to individual heading styles, you have expansive control. Adjust color, font family, size, weight, transform, style, and decoration to perfect the typographical elements of your site.
Buttons: Set the default typography and shadows for buttons, as well as normal and hover state styles. This includes text color, background color, border type and radius, box shadow, and padding.
Form Fields: Customize label colors and typography, field text colors, and styles for normal and focus states. Adjust border types, radius, padding, and box shadows to ensure your forms are also in line with your stylistic choices.
Images: Define how your images should appear and behave, both normally and on hover, by setting default borders, shadows, opacity, transitions, and CSS filters.

Applying Theme Styles to JupiterX Widgets

To ensure that these Global Theme Styles apply to JupiterX widgets as well:

Go to Elementor > Settings.
Check the boxes next to Disable Default Colors and Disable Default Fonts. This ensures that your global settings take precedence.

Undo/Redo and Draft/Publish Controls

The Theme Style feature is integrated with Elementor’s Revisions and History tools, meaning you can step back in time to previous settings if needed. It also supports Draft and Publish modes, allowing you to experiment with different styles in draft form before making them live on your site.

HTML Elements Affected

The Theme Style settings have a wide reach and affect most of the fundamental HTML elements used throughout your site, such as:

<body>: The background color setting in Theme Styles will impact the site’s body tag.
<p>: Control paragraph spacings globally.
<a>: Links' properties can be styled uniformly.
<h1> - <h6>: Heading tags will follow the styles set in Theme Styles.
<label>, <input>, <textarea>, <img>: Form fields and images are also within the scope of these adjustments.

Note: Remember that some elements are not editable through JupiterX’s Theme Style due to the platform's constraints, ensuring stability and compatibility across different browsers and devices.