How do I change the colors, fonts or button styles on my site?

How do I change them in a WordPress block theme?

1. Open Styles. Go to Appearance, then Editor, and select the half-shaded circle icon at the top right.
2. Pick colors. Select Colors, then Palette to edit your brand colors. Under Elements, set the colors for background, text, links, headings and Buttons.
3. Pick fonts. Select Typography, choose an element (text, links, headings or buttons) and change the font, size and line height.
4. Style every button at once. Select Blocks, then Button, and set its colors, border and radius.
5. Save. Check the preview, then save your changes.
   • Expected result: every page that uses the theme’s default styles shows the new colors and fonts.

To go back, open the three-dot menu at the top of the Styles panel and choose Reset to defaults. These steps follow WordPress’s Styles overview.

The short version

• Change the look site-wide, in one place: Styles (block themes), the Customizer (classic themes) or Global Styles (Beaver Builder).
• Change one thing at a time, check it on a phone, then save. Each tool has a reset.

What if my site uses a classic theme or Beaver Builder?

Classic theme: go to Appearance, then Customize. The options depend on your theme; many have a Colors panel, and some have fonts. The preview updates as you work. Nothing changes on the live site until you select Publish, as WordPress’s Customizer guide explains.

Beaver Builder: open a page in the builder, open the Tools menu and choose Global Styles. The Colors tab holds your palette. The Elements tab sets text, headings, links and buttons. Beaver Builder’s Global Styles page covers each option.

Why did only some buttons change?

Site-wide styles only reach blocks that haven’t been styled one by one. A button someone colored by hand keeps its own color. In the block editor, select that button and open Advanced, then Apply Globally, or clear its color. In Beaver Builder, clear the color in that module’s own settings.

What are the common mistakes?

• Changing page by page. It’s slower, and pages drift apart. Use the site-wide setting first.
• Light text on a light button. Low contrast is hard to read and can fail accessibility checks. Check it with our color contrast guide.
• Too many fonts. One for headings and one for text is plenty.
• Editing theme files. A theme update can wipe those edits. Use the tools above instead.

What if this didn’t work?

• The change isn’t showing: clear your browser cache or try a private window. See why a change isn’t showing.
• Something looks broken on phones: see why my site looks wrong on phones.
• You want it back the way it was: see how to undo a website change.

How does E-3 handle this?

Send us your brand colors, ideally as hex codes, and the fonts you want, through Request a change. A person at E-3 makes the change, and a site-wide restyle is tested on a staging copy first. Call 814-399-4655 or email support@e3help.me.

Related questions

• How do I edit the text on my website myself?
• How do I change a photo or banner on my site?
• How do I undo a change to my website?