Complete visual design reference for the rebuilt WordPress / Elementor site. Use this document throughout the build to ensure consistency across all pages and sections.
Client Gary Coyle
Business Tai Chi & Kung Fu Scotland
Location Glasgow, Scotland
Platform WordPress + Elementor + PRO Elements
Foundation
Brand Overview
Logo status: Gary's main dragon/phoenix logo is not suitable for use as a site header logo — mismatched styles, photographic elements, and Comic Sans-adjacent typography undermine credibility at small sizes. Use a text-based logo (Cinzel typeface) in the header. The main logo can appear on the About page as a personality/authenticity element. The Chi in the Park circular badge (pixelcut-export.png) is usable for that sub-brand.
Brand Voice
Authentic, not corporate. Gary has 30+ years of genuine expertise and a humble, community-minded teaching philosophy. The site should feel warm and personal — not like a franchise gym. Avoid generic martial arts clichés (action silhouettes on fire, aggressive red/black). Lead with community, accessibility, and genuine tradition.
Tone of copy: First-person where Gary is speaking. Direct, plain English. No jargon. The Philosophy copy on the About page ("You don't want to do martial arts") is the benchmark for voice — keep everything at that warmth level.
Two Audiences — One Site
Community / Wellness
Older adults, health-focused individuals, community group participants. Motivated by wellbeing, accessibility, social connection. Drawn to Chi in the Park. Price-sensitive — free classes matter.
Serious Martial Arts Student
Individuals wanting private tuition in Kung Fu, Tai Chi forms, or weapons. Motivated by skill, tradition, authentic lineage. Willing to pay for 1-to-1 expert instruction. Gary's 30-year lineage matters to them.
Section alternation rule: Sections alternate between dark (#0E0E0E or #1C2333) and warm-white (#F2EDE4) backgrounds. The cobalt blue band is used sparingly — only for the final CTA band on each page. Never use pure white (#FFFFFF) as a background; always use the warm-white tone.
Overlay Values
Use
Value
Hero video/image overlay
rgba(14,14,14,0.55)
Chi in the Park section overlay
rgba(14,14,14,0.60)
Page hero overlay (half-height)
rgba(14,14,14,0.55)
Discipline icons (fill)
#C8901A (gold)
Section gold rule divider
#C8901A, 1px height, 40px wide
Foundation
Typography System
H1 — Page Heroes
Tai Chi, Kung Fu & Chi Gung in Glasgow
Font: Cinzel
Size: 52px desktop / 36px mobile
Weight: 600
Color: #FFFFFF on dark · #0E0E0E on light
H2 — Section Headings
30 Years. Dozens of Teachers. One Practical Approach.
Font: Cinzel
Size: 38px desktop / 28px mobile
Weight: 600
H3 — Card & Column Headings
Tai Chi · Private Tuition · Chi Gung
Font: Cinzel
Size: 26px desktop / 20px mobile
Weight: 400
Eyebrow Label — Above Section Headings
GLASGOW · EST. 30+ YEARS
Font: Cinzel
Size: 11px
Letter-spacing: 4px
Color: #C8901A (always gold)
Body Text
Gary Coyle has dedicated over 30 years to mastering Shaolin Temple Kung Fu. His training spans both Northern and Southern styles, and he has explored everything from hard and soft Chi Gung to open-hand forms, weapons techniques, free-style sparring, and push hands.
Font: Inter
Size: 17px
Weight: 400
Line-height: 1.8
Color: #F2EDE4 on dark · #1C2333 on light
Testimonial Quote — Cormorant Garant Italic
"Gary makes learning Tai Chi so enjoyable. He is friendly and welcoming — an excellent teacher, explaining and demonstrating throughout the class."
Font: Cormorant Garant Italic
Size: 18–20px
Use: Testimonial quotes and pull-quotes only
Google Fonts to Install
Add to WordPress via Elementor Site Settings → Custom Fonts or using a fonts plugin:
↑ Replace background with Gary tai chi day .mp4 as looping muted video. Fallback image: IMG_20250126_123411.jpg
Testimonial Card
"Gary makes learning Tai Chi so enjoyable. He is friendly and welcoming — an excellent teacher, explaining and demonstrating throughout. He never makes you feel awkward; in fact he welcomes questions and is keen to help you understand."
Sherril
Hermitage Park · Chi in the Park
Use Elementor Testimonial Carousel widget (PRO Elements). Background: #0E0E0E section.
Discipline Card (Three-Column Strip)
☯
Tai Chi
24-step Yang style. Gentle, flowing, and deeply effective for health and wellbeing.
✦
Kung Fu
Shaolin Temple tradition. Northern and Southern styles, open-hand forms and weapons.
◎
Chi Gung
Breathing and energy work. The foundation of all practice — accessible to everyone.
Transparent on load → #0E0E0E at 95% opacity on scroll. Mobile: hamburger menu, full-screen overlay.
Pages
Page Structure
Home
Hook visitor, establish credibility, direct to enquiry
About Gary
Build personal trust and connection
Classes
Explain all offerings and pricing
Chi in the Park
Free community classes — SEO & community hub
Contact
Form + phone number — get the enquiry
No WooCommerce shop for regular classes. Bookings are handled by phone/message. WooCommerce stays installed but is only activated for specific one-off events (workshops, visiting masters). The Contact form is the primary conversion point.
Pages
Home Page Wireframe
TAI CHI & KUNG FU SCOTLAND
AboutClassesChi in the ParkContact
Book a Session
Section 1 — Video Hero (Full viewport height)
BG VIDEO: Gary tai chi day .mp4 · Overlay: rgba(14,14,14,0.55) · Fallback: IMG_20250126_123411.jpg
GLASGOW · EST. 30+ YEARS
Tai Chi, Kung Fu & Chi Gung with Shifu Gary Coyle
Traditional Shaolin Temple arts taught one-to-one and in community classes across Glasgow.
Enquire About Lessons
Chi in the Park — Free Classes
Section 2 — Three Disciplines Strip
Tai Chi
24-step Yang style. Gentle, flowing, deeply effective.
This page targets "free tai chi Glasgow", "outdoor tai chi Glasgow", "tai chi in the park Glasgow". Make it content-rich, include location names prominently, and ensure the class schedule is readable text (not an image). This is the highest SEO-value page on the site.
Free Tai Chi & Chi Gung classes in Glasgow's parks. Everyone welcome.
Section 2 — The Story (Warm white · max-width 740px centred)
How It Started
During the Covid-19 lockdowns, when indoor venues closed, Gary took his classes outside. People were allowed to meet in parks for exercise — so that's exactly what he did. Chi in the Park began as a way to keep the community moving and connected. It never stopped.
Section 3 — Current Sessions (Dark slate · structured content NOT image)
📍 LOCATION 1
Kelvin River Fitness Park
Sunday · Time TBC
Check Facebook for current schedule
📍 LOCATION 2
Glasgow Green Fitness Park
Thursday · 11:00–12:00
Glasgow Green, Glasgow G40
Sessions run year-round, weather permitting. Check Gary's Facebook page for any cancellations.
No booking needed. Free. Comfortable shoes. All welcome.
All Abilities
Complete beginners to experienced practitioners. Gary adapts to the group.
All Weather
Sessions run rain or shine. This is Glasgow — bring a layer.
Section 6 — Testimonials (2–3 Chi in the Park specific)
"What a wonderful experience tai chi in the park is — fresh air adds to the session, and with a teacher like Gary whose patience and clear instructions make it thoroughly enjoyable."
Anonymous · Chi in the Park
CTA — link to Contact
Want private lessons with Gary?
Get in Touch →
Pages
Contact Page — Wireframe
TAI CHI & KUNG FU SCOTLAND
Book a Session
Section 1 — Simple Hero (No background image)
Get in Touch
Gary is happy to talk through what you're looking for before you commit to anything.
Section 2 — Form + Contact Info
Name *
Email *
Phone (optional)
What are you interested in? ▾ (dropdown)
Message
Send Message
[Gary's Phone Number]
Calls & WhatsApp welcome
[Email address]
Based in Glasgow — Gary travels to you
Facebook →
Google Map embed Glasgow area (not home address)
Assets
Image Assignment Map
All files are from the Gary Media files zip unless noted. Compress all images through ShortPixel or Smush before uploading to WordPress (target: under 200KB for full-width, under 80KB for card images).
Gary tai chi day .mp4
Hero background video
Home — Section 1 (looping, muted, autoplay)
IMG_20250126_123411.jpg
Hero fallback image (mobile)
Home — Section 1 (when video disabled)
36d47f7e-1c7b-494d-a077-04db0ae83f8a-1.jpg
Gary on hillside, low stance
Home — About Teaser (left column image)
IMG_20250126_121402.jpg
Gary leading group in park
Chi in the Park — Hero BG · Home — Section 4 BG
2f3876a5-fefb-4573-adbd-503f2167accf-1.jpg
Backlit silhouette, "Chi in the Park" text
Classes — Chi Gung discipline card
663d9a7a-a7e1-4b79-ba04-c7d961c1a142-1.jpg
Gary in form pose (tall portrait)
About — Page Hero background
f9548216-da3e-498e-8c8b-ad8a7b431744-1.jpg
Gary in black, Kung Fu stance
Classes — Kung Fu discipline card
f75ffb74-f347-4137-96b4-cc1d594ca3f9-1.jpg
Gary by punchbag (crop text overlay)
Home — Private Tuition section (right col)
fb_img_17420431958904172706631242922970.jpg
Gary with staff / spear — weapons form
Classes — Weapons discipline card
FB_IMG_1739984448985.jpg
Gary leaping in orange jacket
About — Bio section (personality photo)
185fe7d1-9acd-47c1-9fc2-70c24427f4b4-1.jpg
Indoor + outdoor class collage
Classes — Page Hero background
f1c430e0-e7d1-4735-9980-2462bf0425ae-1.jpg
6-panel: Hand Forms, Chi-gung, Weapons, Push Hands
Classes — Group & Community section
pixelcut-export.png
Chi in the Park circular logo badge
Chi in the Park — Hero (above H1) · Footer (Chi in the Park col)
fb_img_17420432629433950281566302565025.jpg
Gary in park, low stance, green bg
About — Disciplines section or Classes teaser
IMG_20250126_120634_1.jpg + chi1–chi7 series
Group class photos (8+ images)
Chi in the Park — Gallery section
Avoid using: GridArt_20250219_175106318.jpg (promotional schedule graphic), FB_IMG_1739990093070.jpg (tiny resolution), FB_IMG_1739990029929.jpg (main collage logo — About page only if at all), any image with overlaid text graphics (believe.webp, the "Never Give Up" graphic, "By knowing your limits" graphic) — use the underlying photo concept but not the graphic treatment.
Assets
SEO Targets
Set these via Rank Math or Yoast Free. Each page needs a unique title tag and meta description. Install LocalBusiness schema for the Contact page.
PageTitle Tag (under 60 chars)Meta Description (under 155 chars)
HomeTai Chi & Kung Fu Lessons Glasgow | Gary Coyle30 years of Tai Chi, Kung Fu and Chi Gung in Glasgow. Private lessons, community classes, all abilities welcome. Shifu Gary Coyle.
AboutAbout Gary Coyle | Tai Chi & Kung Fu ScotlandMeet Shifu Gary Coyle — 30+ years of Shaolin Temple Kung Fu, trained under renowned masters. Now teaching in Glasgow.
ClassesTai Chi, Kung Fu & Chi Gung Classes GlasgowPrivate lessons, couples tuition, and group sessions in Glasgow. Tai Chi, Kung Fu, Chi Gung and weapons. From £30/hr.
Chi in the ParkFree Tai Chi Classes Glasgow | Chi in the ParkFree outdoor Tai Chi and Chi Gung classes in Glasgow's parks. All abilities, no booking needed. Kelvin River & Glasgow Green.
ContactContact Gary Coyle | Book a Tai Chi LessonGet in touch with Shifu Gary Coyle to book a private Tai Chi or Kung Fu lesson in Glasgow. Happy to discuss your goals.
Technical SEO Checklist
☐ One unique H1 per page — never use H1 more than once
☐ All images have descriptive alt text including location (e.g. "Gary Coyle teaching Tai Chi at Glasgow Green Fitness Park")
☐ Fix Services page slug from /home-2-2-2/ to /classes/
☐ Install LocalBusiness JSON-LD schema via Rank Math — set location to Glasgow
☐ Submit XML sitemap to Google Search Console post-launch
☐ Compress all images before upload (ShortPixel or Smush free tier)
☐ Enable caching plugin (LiteSpeed Cache free or W3 Total Cache)
☐ Video hero: add preload="none" on video tag, load after page renders
☐ Add Facebook page URL to Contact page and footer
☐ 301 redirect old /home-2-2-2/ slug to /classes/
Build
Plugin List
Kept deliberately lean. Every plugin here earns its place — no bloat. Gary won't use the backend, so plugins that require ongoing admin have been avoided. Total: 10 plugins.
Required — Core Build
REQUIRED
Elementor (Free)
Page builder. Use for all page layouts. Keep as free version — PRO Elements provides the Pro widget library.
REQUIRED
PRO Elements 3.35.0
Already installed. Provides Testimonial Carousel, Pricing Table, Form widget, Popup Builder, Theme Builder. Use instead of Elementor Pro.
REQUIRED
WooCommerce
Already installed. Keep dormant — only activate products for specific ticketed events (workshops). Don't build a permanent shop.
REQUIRED
Rank Math SEO (Free)
Best free SEO plugin. Sets title tags, meta descriptions, generates XML sitemap, adds LocalBusiness schema. Replaces Yoast. Set and forget after initial setup.
Required — Performance
REQUIRED
LiteSpeed Cache (Free)
Best free caching plugin. Handles page caching, CSS/JS minification, lazy loading images. If host doesn't use LiteSpeed server, use W3 Total Cache instead. Essential for portfolio speed scores.
REQUIRED
ShortPixel Image Optimizer (Free)
Compresses and WebP-converts images on upload. Free tier: 100 images/month — enough for this site. Dramatically improves load times. Run bulk optimisation after all images are uploaded.
Required — GDPR & Legal
Yes, you need a GDPR cookie plugin. The site will use a contact form (which stores submitted data), potentially Google Fonts (loaded externally), and Google Maps embed. Under UK GDPR (which still applies post-Brexit via the UK GDPR framework), you need prior consent for non-essential cookies and data processing. The contact form's data retention also needs covering in a Privacy Policy.
REQUIRED
Complianz — GDPR/CCPA Cookie Consent (Free)
Best free GDPR plugin for UK sites. Generates cookie banner, Privacy Policy, and Cookie Policy automatically based on a setup wizard. Integrates with Elementor forms. Blocks scripts (Google Maps, etc.) until consent given. Free tier is sufficient for this site — no paid features needed.
FREE
WP Legal Pages (Free) — Optional
Generates boilerplate Privacy Policy and Terms pages. Complianz handles the cookie policy, but WP Legal Pages is useful for a quick Privacy Policy first draft to customise. Optional if you write the policy manually.
Optional — Useful Additions
OPTIONAL
WP Mail SMTP (Free)
Ensures the Elementor contact form actually delivers emails reliably. Without it, WordPress's default PHP mail often ends up in spam. Connect to a free Brevo (formerly Sendinblue) SMTP account. Strongly recommended — a contact form that silently fails is the worst outcome for Gary.
OPTIONAL
UpdraftPlus (Free)
Automated backups to Google Drive or Dropbox. Free tier does scheduled backups. Given Gary can't maintain the site himself, automated backups are cheap insurance. Set to weekly backup, keep 4 copies.
Do Not Install
✗ Any booking/reservation plugin (Bookly, Amelia, etc.) — Gary takes bookings by phone. A booking system no-one uses is dead weight. ✗ Any social media auto-post plugin — Gary posts manually and this adds maintenance overhead. ✗ Any page speed plugin beyond LiteSpeed Cache — stacking caching plugins causes conflicts. ✗ Any membership plugin — no member area needed. ✗ Contact Form 7 or Gravity Forms — PRO Elements includes a Form widget, use that instead. ✗ Jetpack — bloated, phone-home, unnecessary for this site. ✗ Any slider plugin — Elementor handles carousels natively via PRO Elements.
Build
Build Order
Follow this sequence to avoid rework. Each step builds on the last — global settings before pages, high-impact pages before secondary ones.
1
Install & configure plugins
Rank Math SEO, LiteSpeed Cache, ShortPixel, WP Mail SMTP, Complianz, UpdraftPlus. Configure each before building pages — especially Rank Math (set site-wide settings) and Complianz (run setup wizard).
2
Elementor Global Settings
Site Settings → set all 6 palette colours as globals. Set primary font (Inter) and secondary font (Cinzel). Set default body size to 17px. Add Cormorant Garant as third font for testimonials.
3
Theme Builder: Header
Build the sticky transparent→dark header first. Text logo in Cinzel, nav links, "Book a Session" CTA button. Test on desktop and mobile before touching any pages.
4
Theme Builder: Footer
Dark slate background, three-column layout, text logo, quick links, contact info. Copyright bar. Set footer to display on all pages.
5
Upload & compress all media
Upload all images and the hero video to WordPress Media Library. ShortPixel will auto-compress images on upload. Rename files descriptively before uploading (gary-coyle-tai-chi-glasgow.jpg, not IMG_20250126_123411.jpg). Add alt text to every image.
6
Home Page
Build to portfolio quality. Video hero first — get this right before anything else. Then sections 2–7 in order. This is the showcase page.
7
Chi in the Park Page
Highest SEO value. Content-rich — write the origin story properly. Ensure class schedule is readable text, not an image. Set up gallery section with all park photos.
8
About Gary Page
Existing copy is good — tighten it. Add lineage list as styled component. Make philosophy section visually distinct. Link back to Classes and Contact.
9
Classes Page
Build four discipline cards with assigned images. Add FAQ accordion for private lesson questions. Group/community section. Pricing clear and prominent.
10
Contact Page
Elementor Form widget — configure email delivery via WP Mail SMTP. Test form submission end-to-end. Add Google Maps embed (requires consent via Complianz). Add Gary's phone number prominently.
11
SEO Meta Data
Set title tags and meta descriptions for all 5 pages via Rank Math. Add LocalBusiness schema to Contact page. Fix /home-2-2-2/ slug to /classes/ and set 301 redirect.
12
GDPR & Legal Pages
Complianz will have generated Cookie Policy and Privacy Policy pages. Review and customise with Gary's actual contact details. Ensure footer links to both. Configure cookie banner appearance to match site palette.
13
Mobile QA Pass
Test every page on mobile viewport in Elementor's responsive editor. Check: hero text readable, nav hamburger works, columns stack correctly, buttons large enough to tap, form fields usable on phone.
14
Speed & Launch Check
Run PageSpeed Insights on Home and Chi in the Park pages. Target 80+ on mobile. Check video preload setting. Submit XML sitemap to Google Search Console. Set up UpdraftPlus backup schedule.
Portfolio Case Study Note
For your portfolio case study, document before/after screenshots, PageSpeed scores, and the specific technical decisions made (video hero implementation, GDPR compliance approach, low-maintenance architecture rationale). The constraint-driven decisions (no booking system, text logo, static schedule) are actually strong portfolio talking points — they show you think about client needs, not just technical implementation.