Template Guide

Complete reference for customizing templates and GHL integration

Template Variations

1. Hero Overlay

Full-screen background with centered text overlay. Most versatile option.

Best for: Grill cleaning, general services

2. Split Screen

Modern 50/50 layout with text on left, media on right.

Best for: Landscaping, before/after showcases

3. Stacked

Mobile-first design with media on top, content below.

Best for: Mobile-heavy traffic, simple layouts

4. Cinematic

Premium full-screen experience with minimal text.

Best for: Pressure washing, dramatic visuals

Variable Reference

All templates use the same variable system. Edit these at the top of the HTML file:

Variable Name	Type	Description	Example
BUSINESS_NAME	string	Company name displayed in header and throughout site	"Austin Grill Pros"
PHONE	string	Click-to-call phone number	"(512) 555-0123"
EMAIL	string	Contact email address	"[email protected]"
PRIMARY_COLOR	color	Main brand color (hex code)	"#0d9488"
SECONDARY_COLOR	color	Accent brand color (hex code)	"#14b8a6"
HERO_TITLE	string	Main headline on hero section	"Professional Grill Cleaning"
HERO_SUBTITLE	string	Supporting text under headline	"Serving Austin Since 2020"
CTA_TEXT	string	Call-to-action button text	"Get Free Quote"
SPECIAL_OFFER	string	Monthly special or promotion	"20% Off First Service"
USE_VIDEO	boolean	Toggle video background on/off	true or false
VIDEO_URL	string	Background video URL (if USE_VIDEO is true)	"https://example.com/video.mp4"
HERO_IMAGE	string	Background image URL (if USE_VIDEO is false)	"https://example.com/hero.jpg"

Image Requirements

Recommended Image Sizes:

Hero Background1920 × 1080px (minimum)

Logo200 × 200px (square)

Service Photos800 × 600px

Before/After600 × 400px (each)

Team Photos400 × 400px (square)

Image Optimization Tips:

Compress images before uploading (use TinyPNG or similar)
Use WebP format when possible for better performance
Keep file sizes under 500KB for fast loading
Ensure images are sharp and professional quality

GoHighLevel Integration Steps

Step-by-Step GHL Setup:

1. Create New Site

In GHL, go to Sites → Add New Site and name it after the client's business

2. Add Custom HTML Page

Click Add Page → Blank Page → Add Section → Custom HTML

3. Paste Template Code

Copy the entire HTML from your chosen template and paste into the Custom HTML element

4. Update Variables

Edit the JavaScript variables at the top with client's information from onboarding JSON

5. Upload Images

Go to Media Library, upload client's photos, and copy the URLs into the template

6. Connect Forms

Link form submissions to GHL CRM by updating form action URLs

7. Test & Publish

Preview on mobile and desktop, test all buttons and forms, then click Publish

Example Form Integration:

<!-- Update form action with GHL webhook URL -->
<form action="https://services.leadconnectorhq.com/hooks/..." method="POST">
  <input type="text" name="name" placeholder="Name" required>
  <input type="email" name="email" placeholder="Email" required>
  <input type="tel" name="phone" placeholder="Phone" required>
  <button type="submit">Get Free Quote</button>
</form>

Advanced Customization Tips

Color Schemes

Use a color picker tool to extract colors from client's logo. Maintain good contrast for readability.

Typography

All templates use Google Fonts. You can change fonts by updating the font-family CSS variable.

Mobile Optimization

Templates are mobile-responsive by default. Always test on mobile devices before going live.