Skip to content

Branding ​

Branding is the visual layer of your website β€” the colours, the fonts, the logo in the header, the icon in the browser tab. You set it once under Website Builder β†’ Settings β†’ Theme, and every page on your public site (plus the donation form, the visitor form, the sermon player, and every block that respects the theme) picks it up.

Theme customizer panel

TIP

The same theme drives the embedded /give and /visitor flows. So when you set your primary colour here, your donation button on a third-party site also picks it up β€” that's why the GCM giving form looks like your church and not like GCM.

Colours ​

There are five primary colours and three advanced ones. Most teams only touch the primary five.

Primary palette ​

  • Primary β€” the main brand colour. Buttons, links, accents. If you only set one colour, set this.
  • Secondary β€” used for less-prominent buttons and the second half of gradients. Pick something that works alongside primary, not against it.
  • Accent β€” highlight colour for callouts, badges, hover states.
  • Background β€” the page background. Most churches leave this #ffffff or near-white.
  • Text β€” body text colour. Usually a dark grey (#1f2937) rather than pure black for softer reading.

Advanced colours ​

Tucked behind an expandable section so the panel stays approachable:

  • Heading colour β€” overrides text colour for h1–h6 if you want headings darker (or in a brand colour) than body text.
  • Link colour / Link hover colour β€” defaults to your primary, but you can change them if links need to be more visible against a coloured background.

Click any colour swatch to open the picker, or paste a hex code directly (#3b82f6). Changes preview live in the right-hand panel β€” but you still have to click Save theme at the bottom for them to ship to the public site.

Fonts ​

Pick a heading font and a body font from the dropdown. There are 32 Google-fonts-served options ranging from classic (Inter, Roboto, Open Sans) to display (Bebas Neue, Syncopate, Archivo Black) to serif (Playfair Display, Cormorant Garamond, Source Serif 4).

A few combinations that work well:

  • Bold + readable β€” Bebas Neue (heading) + Inter (body).
  • Editorial β€” Playfair Display (heading) + Source Serif 4 (body).
  • Warm + modern β€” Fraunces (heading) + DM Sans (body).
  • Minimal β€” Inter + Inter.

When you change a font, all blocks that respect the theme pick it up β€” no per-block overrides needed.

Upload a PNG, SVG, or JPG. The logo shows up in the header of every page (left-aligned by default β€” configurable under Header & Footer) and as the default Open Graph image on social shares if you don't set one explicitly under SEO.

  • Recommended size: 300px wide minimum, transparent background, SVG preferred.
  • Click Choose from library to reuse an asset you've already uploaded.
  • Don't worry about pixel-perfect dimensions β€” the header scales the image to fit.

If you don't upload a logo, the header falls back to your organization name as text, styled in your heading font.

Favicon ​

The tiny icon in the browser tab. Most churches use a simplified version of their logo β€” a single letter, a symbol, the cross. Upload a .ico, .png, or .svg.

  • Max file size: 100 KB. The uploader rejects anything bigger.
  • Recommended: 32Γ—32 or 64Γ—64 PNG with a transparent background.

The favicon is also used as the iOS/Android home-screen icon when someone "Add to Home Screen"s your site.

Brand subtitle / tagline ​

This isn't on the Theme tab β€” it's set on each individual page under Header & Footer settings. The header can show your organization name with an optional subtitle below it (e.g., "Grace City Church" / "Where heaven meets earth"). Keep the subtitle short β€” under 50 characters works best.

For the homepage hero, the headline and subhead are part of the Hero banner block itself, not the global theme. See Blocks catalog.

Animation style, card style, texture overlay ​

Three global feel knobs at the bottom of the Theme panel:

  • Animation style β€” Subtle (gentle fade-up on scroll, the default), Dynamic (larger movement, faster), or None (everything appears instantly). Affects every block that opts into entrance animations. Per-block overrides are available in each block's Puck props.
  • Card style β€” Flat, Elevated (drop shadow), Bordered, or Glass (frosted glass effect). Drives the look of cards across Blog feed, Sermon feed, Staff directory, Testimonials.
  • Texture overlay β€” None, Grain, Dots, or Lines. Applies a subtle full-page overlay. Most teams leave this off β€” it's a nice touch on minimalist designs.

Saving ​

Click Save theme at the bottom of the panel. The changes ship to your public site immediately β€” no separate publish step for theme changes (unlike pages, which have their own draft/published state in Publishing + drafts).

WARNING

If your site is live and you change the primary colour, every visitor sees the new colour on the next page load. There's no preview-before-publish for theme β€” the diff goes straight to production. If you want to try a colour without committing, swap it back to the old hex if you don't like it.

Where this is stored ​

The theme lives as a JSON object on your org_sites row. Header / footer settings live alongside it. None of this is per-page β€” it's a single source of truth for your whole site.

See also: Website Builder overview, Custom domain, Visitor form.