BuddyX
Get BuddyX Pro

Recipe: Match the demo design

Free & Pro

What you'll build: a site that looks like the published BuddyX Pro demo at buddyxpro.wbcomdesigns.com - same color palette, typography pairing, header layout, footer structure.

Time: ~30 minutes Prerequisites: theme installed and activated (see Installation if not yet)

This recipe is the fastest way to get a finished-looking site if you're not sure where to start with colors / fonts / layout. Apply the demo as a baseline, then tweak from there to make it yours.

The 4 ingredients of the demo look

Looking at the published demo, four customizer choices drive 90% of the visual identity:

  1. Color preset - the demo uses a clean light palette (Default Light) with a coordinated dark variant
  2. Typography preset - the demo uses a modern sans-serif pairing
  3. Header layout - the demo uses Layout 1 (logo left, menu right)
  4. Demo content - the demo's home, about, services, and pricing pages

Pick all four and your site will look like the demo. The rest of the customizer can stay default.

Step 1 - Load the demo content (5 minutes)

This creates the starter pages (Home, About, Services, Pricing, FAQ, Contact, Journal) that the demo uses.

  1. Go to Appearance → Customize
  2. The first time you open Customize on a fresh install, BuddyX Pro shows starter content (this is the "Demo Importer" feature)
  3. If the starter pages are already loaded (you ran Demo Importer before), skip to Step 2
  4. If not, follow the Demo Content guide to import them

The starter content adds:

  • 7 pre-built pages
  • A primary menu linking them
  • A homepage set to the Home page (not latest posts)

Step 2 - Apply the Default Light color preset (3 minutes)

  1. In Customizer, open Site Skin
  2. Find the Style preset card grid (visual swatches near the top)
  3. Click Default Light
  4. The live preview updates immediately - you'll see the demo's red-orange accent (#ee4036) replace any prior color choices
  5. Click Publish at the top of the Customizer

If you want to match the demo's dark mode too:

  • The Default Light preset auto-pairs with a dark variant. When you (or your visitors) toggle dark mode, the dark side comes from the same preset - no extra picking needed.

If you prefer a different accent color (Sapphire blue, Coral orange, Carbon black, etc.), pick that preset instead. The demo's structural look stays the same; only the accent shifts. See Color Presets for all 14.

Step 3 - Apply the Default typography preset (2 minutes)

  1. In Customizer, open Typography
  2. Find the Typography Preset picker
  3. Pick Default - the system-ui baseline (no preset applied). On macOS this renders as San Francisco; on Windows as Segoe UI; on most Linux distros as the system default sans-serif. This matches the demo's stripped-down typographic look.
  4. Click Publish

If you want a different feel:

  • Inter - clean, neutral (works anywhere)
  • Geist - modern, technical (good for SaaS)
  • IBM Plex - corporate, dependable
  • DM Sans - friendly, approachable
  • Humanist - warm, readable
  • Editorial - sophisticated serif (good for long-form content)
  • Magazine - bold display + readable body (news / blog sites)

See Typography Presets for the full reference.

The demo uses Default (system-ui) specifically. Other presets give you a structurally identical layout with different typographic personality.

Step 4 - Set Header Layout 1 (2 minutes)

  1. In Customizer, open Header → Header Layout
  2. Pick Layout 1 (logo on left, menu on right) - the demo's choice
  3. Click Publish

If the demo content didn't include a primary menu yet, set one up:

  1. Go to Appearance → Menus
  2. Add the demo pages (Home, About, Services, Pricing, Journal, Contact) as menu items
  3. Set the menu's location to Primary Menu
  4. Save

Step 5 - Configure the footer (5 minutes)

The demo footer has 3 widget columns plus a copyright bar.

  1. Go to Appearance → Widgets
  2. You'll see Footer 1, Footer 2, Footer 3 widget areas (the demo uses all three)
  3. Drop widgets into each:
    • Footer 1: a Text widget with a short site description / about blurb
    • Footer 2: a Custom HTML widget with social media links, or a Navigation Menu widget linking to About / Contact / Privacy
    • Footer 3: a Recent Posts widget showing your 3 latest articles
  4. Save

Set the copyright bar:

  1. In Customizer, open Site Footer → Copyright
  2. Edit the copyright text (e.g. "© 2026 Your Brand Name. All rights reserved.")
  3. Click Publish

Step 6 - Verify the result (3 minutes)

Visit your site (yoursite.com/) logged out. Compare to the demo:

Element Demo Your site (should match)
Header background White White
Header layout Logo left, menu right Logo left, menu right
Accent color Red-orange #ee4036 Red-orange #ee4036
Body text color Dark blue-grey #003049 headings, mid-grey #505050 body Same
Font Default preset (system-ui baseline) Same
Home page Hero + features + pricing + testimonials Same (from demo content)
Footer 3 widget columns + copyright bar Same

If anything doesn't match, double-check:

  • Did you click Publish on each Customizer change?
  • Did you hard-reload your front-end (Cmd+Shift+R / Ctrl+F5)?
  • If you have a caching plugin, purge its cache

Step 7 - Make it yours (10 minutes)

Now that you have the demo baseline, customize the parts that should reflect your brand:

  • Logo: replace the demo logo with yours at Customize → Site Identity → Logo
  • Site title + tagline: update at Customize → Site Identity
  • Demo page content: edit each starter page (Pages → All Pages → click a page) and replace placeholder text with your own copy
  • Primary color: if you want a different accent, change site_primary_color at Customize → Site Skin → Primary Color

The visual structure (header / footer / typography / preset) stays demo-matched; only the specific content + logo are now yours.

Common questions

The demo accent color (#ee4036) doesn't match my brand. Can I keep the demo look but change just the accent? Yes. After Step 2, open Customize → Site Skin → Primary Color and replace #ee4036 with your brand hex. The rest of the preset stays in place. The downside: the per-cluster colors (button bg / link colors / etc.) won't auto-adjust to coordinate with your new primary - you may want to also override those manually.

Can I match the demo's dark mode look? Yes - the Default Light preset auto-pairs with a dark variant. Just turn on Customize → Site Skin → Color Mode → Auto and visitors with dark-mode OS preferences see the dark variant automatically. Or set Color Mode to Dark to force everyone to dark.

The demo has block patterns I want - how do I add them to my pages? When editing a page, click + to add a block, then click the Patterns tab. BuddyX Pro ships 87 patterns (hero sections, pricing tables, contact forms, etc.). See Block Patterns for the catalog.

Do I have to use the demo content's pages? I want different page names. No - the demo content is a starting point, not a requirement. You can delete the starter pages and create your own. The visual styling (preset / typography / header / footer) doesn't depend on the demo content existing.

Related

Got a question? We're a friendly team - drop us a line at support@wbcomdesigns.com.