Skip to main content

Customizing Colors and Fonts

Updated

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.


editor-styles.png

 

Styles are part of the Site Editor. To locate the Styles panel: 

  1. Go to Appearance → Editor
  2. 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):

styles-site-editor-icon.png
  1. Go to Appearance → Editor
  2. Click on any template (like Home)
  3. 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

  1. In the Styles panel, click Colors tab
  2. You'll see Palette at the top
  3. Click on any color swatch to change it
  4. Pick your colors - changes apply instantly

Custom Colors for Specific Elements

  1. In Colors tab, scroll down
  2. 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
  3. Click any color swatch to customize
  4. Use the color picker or enter a hex code (e.g., #FF6B6B)

 

Changing Fonts

Changing Body Text Font

  1. In the Styles panel, click Typography tab
  2. Click on Text
  3. You'll see font options:
    • Font - Choose from available fonts
    • Size - Text size (16px recommended)
    • Appearance - Regular, Bold, Italic
    • Line height - Space between lines
  4. Adjust as desired

 

Changing Heading Fonts

  1. Click on Headings
  2. Or click specific heading levels (H1, H2, H3, etc.)
  3. 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:

  1. In the Styles panel, click Browse styles
  2. You'll see thumbnail previews of variations
  3. Hover to preview each one
  4. Click to apply
  5. The style is applied immediately
  6. You can still customize individual elements after applying

 

Saving Your Changes

  1. Once happy with your design, click Save in the top right
  2. Changes apply across your entire site automatically

 

Previewing Your Changes

Want to see how it looks?

  1. Click the eye icon in the top right (View Site)
  2. Or open your site in a new browser tab
  3. Browse around to see your styles in action
  4. 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.