§ 01
Hero
—
Hero with background image, H1 and an extended sub-headline.
Hero · Full-width Background
Background image · #006-F
H1 · 5–9 words
| Element · Label | Spec / Word Count | Custom Value Name | Key |
|---|---|---|---|
| Meta Info | |||
| Meta Title | ≤70 chars | #006-A [Contact] Meta Title | {{custom_values.006a}} |
| Meta Description | ≤165 chars | #006-B [Contact] Meta Description | {{custom_values.006b}} |
| Meta Keywords | 5–15 keywords, comma-separated | #006-C [Contact] Meta Keywords | {{custom_values.006c}} |
| Meta Image | Footer logo URL | [Website] 11: Logo Image URL01 (Footer) | {{custom_values.logo_image_url}} |
| Canonical Link | URL · /contact | Site URL + /contact | {{custom_values.url}}/contact |
| Hero | |||
| H1 Header | 5–9 words | #006-D [Contact] H1 Header | {{custom_values.006d}} |
| H2 Sub-headline | ≈30 words | 6H [Contact] H2 Hero Sub-headline | {{custom_values.006h}} |
| Background Image | 1920×1080 | #006-F [Contact] Background01 | {{custom_values.006f}} |
§ 02
Content Section 01
—
Two-column block — left column houses the headline + image + business contact stack; right column hosts the live estimate form. On mobile the form moves between the headline and the contact stack.
Two-Column Layout
LEFT: H2 + Image + Map + Address + Phone + Email
RIGHT: Estimate form
| Element · Label | Spec / Word Count | Custom Value Name | Key |
|---|---|---|---|
| Content Section 01 — Two-Column | |||
| H2 Bottom Headline (Left col) | 5–9 words | 6I [Contact] H2 Bottom Headline | {{custom_values.006i}} |
| Image (Left col) | 1000×500 desktop · auto mobile | #006-G [Contact] Content01 | {{custom_values.006g}} |
| Image Alt Text | 5–12 words | #006-E [Contact] Image Alt Text | {{custom_values.006e}} |
| Map Embed | iframe | [Website] 16: Map Embed | {{custom_values.client_map_embed}} |
| Address (Line 1 + Line 2) | Business profile | [Business] 05: Address2 Line 1 + 06: Address2 Line 2 | {{custom_values.business_address2_line_1}}{{custom_values.business_address2_line_2}} |
| Directions Link | URL · Google Maps | [N] Directions Google Maps URL | {{custom_values.shop_directions}} |
| Phone (display + tel link) | Phone | [Business] 02: Phone (display) | {{custom_values.client_business_phone_display}} |
| Email (display + mailto link) | [Business] 03: Email (display) | {{custom_values.business_email}} |
|
| Form (Right col) | hard coded | (SEO Website) [Website.com] Estimate (Live) | — |
| Bottom Row — Service CTA Headline | |||
| Bottom H2 | Templated | Hard-coded — interpolates Service01 + Phone | {{custom_values.service1}}{{custom_values.client_business_phone_display}} |
§ 01 / Global Header
Top Bar & Navigation
Global · Sitewide
Fixed header displayed sitewide — logo, primary nav, CTA button, and contact strip.
Global · Sitewide Header
Business Logo
Alt Text: Business Name
HomeServices ▾Service Areas ▾AboutContactBlog
✉ business email
custom html / javascript
☎ phone number
| Element · Label | Spec / Word Count | Custom Value Name | Key |
|---|---|---|---|
| Logo & Branding | |||
| Logo ImageTop-left brand mark · light-background variant | URL · image | [Business] 08: Logo URL02 (Header) {ref:02L} | {{custom_values.logo_image_url__4_light_bg}} |
| Logo Image Alt TextAccessibility / SEO alt text on the logo image | Business Name | [Business] 01: Name | {{custom_values.business_name}} |
| Logo Image Action LinkClicking the logo returns to home | Website URL | [Website] 01: Website URL | {{custom_values.url}} |
| Primary Navigation | |||
| Primary NavigationHome / Services / Service Areas / About / Contact / Blog · dropdowns populated from service + city lists | hard coded | Structural | — |
| Header CTA ButtonOpens Pop-Up on click | 2–4 words | 20I [Global] Global Header Button CTA | {{custom_values.020i}} |
| Contact Strip (red bar) | |||
| Business EmailLeft of contact strip | email address | [Business] 03: Email (display) | {{custom_values.business_email}} |
| Display Phone NumberRight of contact strip | phone | [Website] 02: Business Phone (display) | {{custom_values.client_business_phone_display}} |
| Custom HTML · Social Profile URLsLinks to Google / Facebook / Yelp / Instagram | Social Profile URLs | [Website] 15a / 15b / 15c · Profile URL — Google / Facebook / Yelp [Website] 13: Profile URL — Instagram |
{{custom_values.url_google}}{{custom_values.url_facebook}}{{custom_values.url_yelp}}{{custom_values.ig_url}} |