How to Use Global Styling for Your Website

Global styling allows you to set and manage colors and typography across your entire website with just a few clicks. By using global styling, you ensure a consistent look and feel throughout your site while making it easy to update styles later.

1. Accessing Global Styling

• Open the sidebar on the left.
• Click on the paintbrush icon labeled Styling.
• At the top, you will see Presets, which include predefined color schemes and typography settings.

2. Using Presets to Change Styles Quickly

• Click through the available presets to see how they update your website in real-time.
• Presets control both colors and typography, allowing you to experiment with different styles.
• Swatches below the presets show the locked-in colors currently in use.

3. Customizing Colors

• Select a style to modify.
• Enter a hex code or manually adjust the color.
• The changes will automatically apply across all elements using that color.

4. Customizing Typography

• Typography settings allow you to change fonts for Headings (H1-H6) and Paragraphs.
• Choose a font from the list, and all text set to that style will update instantly.
• Additional typography adjustments include:
• Font weight
• Line height
• Letter spacing

5. Device-Specific Styling

• You can adjust typography settings for desktop, tablet, and mobile separately.
• Select the desired device view and make changes to ensure readability across all screen sizes.

6. Creating Custom Typography Presets

• Click Add New at the bottom of the typography section.
• Define custom styles for headings, paragraphs, or other text elements.
• These new styles will appear in the dropdown menu when adding text elements to your page.

7. Applying and Updating Global Styles

• When adding a text element, it will automatically use the paragraph style from global typography.
• From the dropdown menu, select any existing or custom typography style.
• If you need to update a style, return to Global Styling, make changes, and they will reflect across the entire site.

8. HTML Tag Customization for Headings

• Headings (H1-H6) include HTML tags that define their importance in search engines.
• In the Text Toolbar, select the HTML tag option to change heading levels when needed.

By using global styling, you can ensure a professional and cohesive design throughout your website while keeping updates quick and effortless.