Getting Started
Applying Style Variations

Applying Style Variations

AlonePro includes 13 curated Style Variations. Each variation transforms your entire website's design in a single click by applying a specialized color palette and typographic pairing optimized for a specific nonprofit sector.

How to Switch Variations in the Site Editor

  1. In your WordPress dashboard, go to Appearance → Editor.
  2. Click anywhere inside the canvas or select Styles in the left sidebar to open the editor.
  3. In the top-right toolbar, click the Styles icon (the black and white circle).
  4. In the Styles sidebar, click Browse styles (represented by a grid / preview icon).
  5. You will see thumbnail cards for all 13 AlonePro style variations:
    • Salado (Default amber/warm charity theme)
    • Medical (Cyan/teal clinical & healthcare theme)
    • Children (Coral/salmon child sponsorship theme)
    • Education (Purple learning & literacy theme)
    • Clean Water (Vibrant cyan water sanitation theme)
    • Disaster (High-urgency red emergency relief theme)
    • Poverty (Warm peach community aid theme)
    • Refugees (Terracotta displaced persons theme)
    • Animal Welfare (Golden-brown wildlife protection theme)
    • Environment (Forest green conservation theme)
    • Food Bank (Warm orange hunger relief theme)
    • Disability (Accessible blue inclusive care theme)
    • Pumori (Alpine royal blue expeditionary cause theme)
  6. Click any style card to preview it instantly on your site canvas.
  7. Click the blue Save button in the top toolbar to apply the style globally.

What Changes When You Apply a Variation?

  • Global Palette Tokens: CSS custom properties (--wp--preset--color--primary, --wp--preset--color--secondary, etc.) update globally. All custom AlonePro blocks and pattern containers adjust their accent colors immediately.
  • Font Families: Body and heading fonts change to the paired typography (e.g. Montserrat Alternates, Inter, Nunito, Poppins).
  • Background & Surface Tones: Neutral backgrounds, surface cards, and border tones adjust to complement the primary color.

Note on Manual Block Overrides: If you have manually set a specific custom color on an individual block via its block inspector, that manual override will take precedence over global variation tokens.

To see exact color codes, preview hex values, and font pairings for each variation, visit the Style Variations Catalog.

Cloud TemplatesHomepage Setup