Logo
Logo

Global Styles Overview

Introduction to Global Styles in Breakdance

Learn how to save time and streamline your website design process using the powerful Global Styles feature in Breakdance.

Understanding Global Styles

What are Global Styles?

  1. Global Styles is a feature in Breakdance designed to create consistent styling across a website.
  2. It allows for centralized control of design elements such as colors, typography, and form styles.
  3. Changes made in Global Styles automatically update all associated elements on the website.

Setting Up Global Styles

Color Palette Configuration

  1. Navigate to the Global Settings panel in Breakdance.
  2. Select the ‘Colors’ tab and access the ‘Palette’.
  3. Add your chosen colors to the palette for later use across the site.

Editing Global Styles Interactively

  1. Visit the front-end of the site and find Breakdance > Edit Global Styles in the admin bar.
  2. You’ll now be able to navigate the site while keeping the Global Settings interface open for a quicker workflow.
  3. Set your Global colors for brand, text, and headings.
  4. Configure primary and secondary button styles, including hover effects.
  5. Adjust global typography, selecting fonts for headings and body text.
  6. Set base size and ratio for responsive typography scaling.

Additional Notes

When you change a color in the palette, it updates all elements using that color. Hover effects set for buttons will apply to all buttons of that type.

Advanced Global Style Customizations

Typography Advanced Settings

  1. For granular control, go to Typography > Advanced in the Global Settings panel.
  2. Set specific styles for all headings (H1-H6) and body text.
  3. Adjust font families, colors, and sizes for individual heading levels.

Typography Presets

  1. You can manage typography presets under Typography > Presets in the Global Settings panel.
  2. Access presets from the design tab when editing text elements.
  3. Select from existing presets or create new ones for reuse.
  4. Save custom typography settings as a new preset for future use.

Form Style Customization

  1. You can edit global form styles under Global Settings > Forms.
  2. Adjust the borders, colors, and styles of form fields globally.
  3. Ensure all forms on the site reflect the global form styles set.

WooCommerce Style Adjustments

  1. You can edit global WooCommerce styles under Global Settings > WooCommerce.
  2. Alter specific WooCommerce components like the sale badge.
  3. Changes to styles will be reflected across all WooCommerce elements.

Finalizing Global Styles

  1. Review and tweak global styles as needed for your website.
  2. Use global styles to maintain consistency and save time.

Additional Notes

With Breakdance’s global styles, you can easily ensure a cohesive look and feel throughout your site. Customize once, apply everywhere, and make site-wide design changes with a few clicks.