Make your site look uniquely yours by adjusting colors and typography site-wide.
Accessing Global Styles
This is where you control the look and feel of your entire site.
Styles are part of the Site Editor. To locate the Styles panel:
- Go to Appearance → Editor
- Select Styles from the left-side menu.
You can also access Styles while editing within the Site Editor by clicking the Styles icon at the top-right (the icon looks like a black and white circle):
- Go to Appearance → Editor
- Click on any template (like Home)
- In the top right corner, click the Styles icon (half-shaded circle ◐)
Understanding the Styles Panel
You'll see several tabs:
- Typography - Control all fonts
- Colors - Control all colors
- Layout - Control spacing and widths
- Browse styles - Pre-made style variations
Changes made here apply to your entire site, creating consistency.
Changing Colors
Quick Method: Color Palette
- In the Styles panel, click Colors tab
- You'll see Palette at the top
- Click on any color swatch to change it
- Pick your colors - changes apply instantly
Custom Colors for Specific Elements
- In Colors tab, scroll down
- You'll see sections like:
- Background - Overall site background
- Text - Main text color
- Links - Link colors and hover states
- Buttons - Button background and text colors
- Click any color swatch to customize
- Use the color picker or enter a hex code (e.g.,
#FF6B6B)
Changing Fonts
Changing Body Text Font
- In the Styles panel, click Typography tab
- Click on Text
- You'll see font options:
- Font - Choose from available fonts
- Size - Text size (16px recommended)
- Appearance - Regular, Bold, Italic
- Line height - Space between lines
- Adjust as desired
Changing Heading Fonts
- Click on Headings
- Or click specific heading levels (H1, H2, H3, etc.)
- Adjust:
- Font family (different from body text often looks professional)
- Size (hierarchical: H1 largest, H6 smallest)
- Weight (Bold usually works well for headings)
- Line height (1.2-1.4 for headings)
Using Pre-Made Style Variations
Listimia include pre-designed styles:
- In the Styles panel, click Browse styles
- You'll see thumbnail previews of variations
- Hover to preview each one
- Click to apply
- The style is applied immediately
- You can still customize individual elements after applying
Saving Your Changes
- Once happy with your design, click Save in the top right
- Changes apply across your entire site automatically
Previewing Your Changes
Want to see how it looks?
- Click the eye icon in the top right (View Site)
- Or open your site in a new browser tab
- Browse around to see your styles in action
- Go back to the editor to make adjustments
Troubleshooting
Colors not changing:
- Clear browser cache (Ctrl+F5 or Cmd+Shift+R)
- Check if Custom CSS is overriding styles
- Try changing palette colors instead of individual elements
Fonts not appearing:
- Try a different font
- Check browser console for errors (F12)
📚 Learn More
For a deep dive into the WordPress Site Editor, templates, and blocks, check out the official WordPress Documentation Hub. Use the search box to jump directly to the information you're looking for.
Need Help? Please refer to our How to Get Support article for assistance.