For Dealers Hub — Step-by-Step Build Walkthrough

Integra Pool Covers Website Redesign — integrapoo1stg.wpenginepowered.com

Also in this folder: Visual Build Guide (photos + copy bars) Page Preview (how it'll look) Copy File (paste-ready text)

For Dealers Hub Build Guide — Integra Pool Covers

Page: For Dealers Hub (/for-dealers/)
Staging: integrapoo1stg.wpenginepowered.com
Template: Avada Full Width (no sidebar)

IMAGES IN THIS FOLDER

Filename Dimensions Size Section Alt Text
dealer-hero.webp 2400x1200 605KB Dealer Hero (Section 1) Luxury residential pool installation with retracted Integra cover — dealer program opportunity
dealer-card-why-partner.webp 600x400 24KB Nav Cards (Section 4) Integra manufacturing team — why pool builders partner with Integra
dealer-card-program.webp 600x400 33KB Nav Cards (Section 4) Integra manufacturing facility with signage — dealer program details
dealer-card-training.webp 600x400 26KB Nav Cards (Section 4) Integra installer attaching hardware to pool cover — dealer installation training

WILL'S LAYOUT CLASSES (USE THESE FIRST)

Will Roberts set up CSS classes on the staging site that handle layout, spacing, and responsive behavior automatically. Use these instead of manual Avada builder settings wherever possible.

Layout Type How to Apply What It Does
Hero Add ID hero to the container Full-width hero with overlay, responsive height, centered content
Intro/Subheading Add class introheader Styled heading typography for section intros
Two-Column Add class two-column Split layout, image stacks above text on mobile
Mosaic Add class mosaic Text + 4-image grid, auto-cropped aspect ratios

You do NOT need to manually set: padding values, column widths, mobile breakpoints, or min-heights for sections using these classes. The CSS handles it all. Just add the class/ID, drop in your content and images.

Only set manual Avada values for: colors, background images, button styles, icon choices, and any custom sections not covered by the four classes above.

Staging reference: integrapoo1stg.wpenginepowered.com/new-layouts/ — shows all four layout types in action.

RANK MATH SEO SETTINGS

Set these in the Rank Math panel on the page editor:

SECTION-BY-SECTION BUILD INSTRUCTIONS

SECTION 1: DEALER HERO (BACKGROUND IMAGE)

What it looks like: DIFFERENT from all other internal pages. This hero uses a background IMAGE with a #003366 overlay at 60% opacity. The lifestyle shot of the pool with fireplace and hills creates an aspirational feel for potential dealers.

  1. Add a new Container (Section)
  2. Container Settings:
  3. Background Image: Upload dealer-hero.webp
  4. Background Position: Center Center
  5. Background Size: Cover
  6. Background Repeat: No Repeat
  7. Background Overlay: #003366 at 60% opacity (use the overlay option in Avada container settings)
  8. Min height: 60vh (desktop), 45vh (mobile)
  9. Padding: 120px top and bottom (desktop), 80px (mobile)

  10. Content alignment: Center

  11. Inside the container, add a Column — set to 10/12 width, centered

  12. Add Text Block element:

  13. Content: <h1>The Integra Dealer Program — Automatic Pool Covers That Sell Themselves</h1>
  14. Font color: #FFFFFF
  15. Font size: 48px desktop / 32px mobile
  16. Font weight: 700
  17. Text align: Center
  18. Margin bottom: 20px
  19. Text shadow: 0 2px 8px rgba(0,0,0,0.3)

  20. Animation: Fade In from Bottom, 0.3s delay

  21. Add Text Block element:

  22. Content: <p>ASTM-certified safety. All-stainless steel construction. A 20-year mechanism warranty. Give your customers the cover that sets your business apart.</p>
  23. Font color: rgba(255,255,255,0.95)
  24. Font size: 20px desktop / 16px mobile
  25. Text align: Center
  26. Max width: 800px, centered

  27. Animation: Fade In from Bottom, 0.5s delay

  28. Add Button element:

  29. Text: "Apply to Become a Dealer"
  30. Link: /for-dealers/apply/
  31. Background: #FF6B00
  32. Color: #FFFFFF
  33. Font weight: 700
  34. Padding: 16px 40px
  35. Border radius: 8px
  36. Margin top: 24px
  37. Alignment: Center
  38. Animation: Fade In, 0.7s delay

SECTION 2: INTRO COPY

What it looks like: White background, centered text explaining the business opportunity.

  1. Add Container
  2. Background: #FFFFFF

  3. Padding: 80px top and bottom

  4. Column: 8/12 width, centered

  5. Text Block:

  6. <h2 style="color:#003366;text-align:center;margin-bottom:20px;">Why Pool Builders Choose Integra</h2>

  7. Font size: 36px desktop / 28px mobile

  8. Text Block:

  9. <p style="color:#2D2D2D;font-size:18px;text-align:center;line-height:1.8;max-width:750px;margin:0 auto;">Automatic pool covers are the highest-margin add-on in the pool industry — and Integra makes it easy to offer one with every build. Our covers install faster, last longer, and give your customers something they'll actually use every day. You get a product that sells itself and a manufacturer that backs you up.</p>

  10. Separator — single solid, #E8E8E8, 60px wide, centered, margin top 30px

SECTION 3: BUSINESS CASE STATS ROW

What it looks like: 4 stat boxes on light gray background.

  1. Add Container
  2. Background: #F5F5F5

  3. Padding: 60px top and bottom (desktop), 40px (mobile)

  4. 4-column row — equal width (3/12 each)

  5. On mobile: 2x2 grid

  6. Each column gets a Text Block:

  7. Column 1: <div style="text-align:center;"><span style="font-size:44px;font-weight:800;color:#FF6B00;">$12K+</span><br><span style="font-size:15px;color:#2D2D2D;text-transform:uppercase;letter-spacing:2px;">Avg Revenue Per Install</span></div>
  8. Column 2: <div style="text-align:center;"><span style="font-size:44px;font-weight:800;color:#FF6B00;">20-Year</span><br><span style="font-size:15px;color:#2D2D2D;text-transform:uppercase;letter-spacing:2px;">Mechanism Warranty</span></div>
  9. Column 3: <div style="text-align:center;"><span style="font-size:44px;font-weight:800;color:#FF6B00;">Training</span><br><span style="font-size:15px;color:#2D2D2D;text-transform:uppercase;letter-spacing:2px;">Included for Your Team</span></div>
  10. Column 4: <div style="text-align:center;"><span style="font-size:44px;font-weight:800;color:#FF6B00;">National</span><br><span style="font-size:15px;color:#2D2D2D;text-transform:uppercase;letter-spacing:2px;">Authorized Dealer Network</span></div>

SECTION 4: THREE DEALER NAV CARDS

What it looks like: Three clickable cards with images, each linking to a sub-page under /for-dealers/. White background, cards have subtle shadow.

  1. Add Container
  2. Background: #FFFFFF

  3. Padding: 80px top and bottom

  4. Column 8/12 centered — header

  5. Text Block:

  6. <h2 style="color:#003366;text-align:center;margin-bottom:40px;">Explore the Dealer Program</h2>

  7. Font size: 36px

  8. 3-column row — equal width (4/12 each), gap 30px

  9. Card 1 — Why Partner with Integra:

  10. Image: dealer-card-why-partner.webp
    • Alt: "Integra manufacturing team — why pool builders partner with Integra"
    • Width: 100%, border radius 8px 8px 0 0
  11. Content area below image:
    • Background: #FFFFFF
    • Border: 1px solid #E8E8E8
    • Border radius: 0 0 8px 8px
    • Padding: 24px
    • Box shadow: 0 2px 12px rgba(0,0,0,0.08)
  12. Text Block: <h3 style="color:#003366;font-size:20px;margin-bottom:8px;">Why Partner with Integra</h3>
  13. Text Block: <p style="color:#666;font-size:15px;line-height:1.6;">All-stainless steel construction, ASTM certification, and a product your customers will love. See what sets Integra apart from every other cover manufacturer.</p>

  14. Button: "Learn More →" → /for-dealers/why-partner/

    • Style: text link, color #FF6B00, font weight 600

  15. Card 2 — Program Details:

  16. Image: dealer-card-program.webp
    • Alt: "Integra manufacturing facility with signage — dealer program details"
  17. Text Block: <h3 style="color:#003366;font-size:20px;margin-bottom:8px;">Dealer Program Details</h3>
  18. Text Block: <p style="color:#666;font-size:15px;line-height:1.6;">Territory protection, co-op marketing, pricing structure, and dealer portal access. Everything you need to know about partnering with Integra.</p>

  19. Button: "View Program →" → /for-dealers/program-details/

  20. Card 3 — Installation Training:

  21. Image: dealer-card-training.webp
    • Alt: "Integra installer attaching hardware to pool cover — dealer installation training"
  22. Text Block: <h3 style="color:#003366;font-size:20px;margin-bottom:8px;">Installation Training</h3>
  23. Text Block: <p style="color:#666;font-size:15px;line-height:1.6;">On-site and virtual training for your installation team. Certification process, ongoing technical support, and troubleshooting resources.</p>
  24. Button: "See Training →" → /for-dealers/training/

SECTION 5: ALREADY A DEALER?

What it looks like: Light blue background card with dealer portal login link.

  1. Add Container
  2. Background: #EBF4FF

  3. Padding: 60px top and bottom

  4. Column 8/12, centered

  5. Text Block:

  6. <h2 style="color:#003366;text-align:center;margin-bottom:12px;">Already an Integra Dealer?</h2>

  7. Font size: 32px

  8. Text Block:

  9. <p style="color:#2D2D2D;font-size:18px;text-align:center;margin-bottom:24px;">Access your dealer portal for order forms, marketing materials, installation guides, and technical documentation.</p>

  10. Button — centered:

  11. Text: "Go to Dealer Portal"
  12. Link: /dealer-portal/ (or external portal URL)
  13. Background: #003366
  14. Color: #FFFFFF
  15. Font weight: 700
  16. Padding: 16px 36px
  17. Border radius: 8px

SECTION 6: CLOSING CTA

What it looks like: Dark navy background with CTA.

  1. Add Container
  2. Background: #003366

  3. Padding: 80px top and bottom

  4. Column 8/12, centered

  5. Text Block:

  6. <h2 style="color:#FFFFFF;text-align:center;margin-bottom:16px;">Ready to Add Integra to Your Product Line?</h2>

  7. Font size: 36px

  8. Text Block:

  9. <p style="color:rgba(255,255,255,0.85);text-align:center;font-size:18px;margin-bottom:30px;">Join the growing network of authorized Integra dealers. We'll set you up with everything you need to start selling and installing.</p>

  10. Button row — centered, 2 buttons:

  11. Button 1: "Apply Now" → /for-dealers/apply/
    • Background: #FF6B00, color #FFFFFF, font weight 700
    • Padding: 16px 36px, border radius 8px
  12. Button 2: "Contact Us" → /contact/
    • Background: transparent, border 2px solid #FFFFFF, color #FFFFFF
    • Padding: 16px 36px, border radius 8px

STITCH DESIGN IMPROVEMENTS (from stitch-live/for-dealers-hub.html)

The Stitch prototype includes several layout improvements worth considering:

  1. Dealer Program Includes Checklist (between Sections 3 and 4): A two-column section — left side has an H2 "What the Integra Dealer Program Includes" with a checklist of 5 items (Product Training & Certification, Installation Certification Programs, Dedicated Territory Consideration, Comprehensive Warranty Parts Program, Marketing Materials & Dealer Portal Access). Right side has a 2-image mosaic grid. This is a strong addition — consider adding as a new section between the stats row and the nav cards.

  2. Installation Training Feature Section: A dedicated section with an H2, descriptive paragraph, "View Training Calendar" button, and a large training image. More impactful than burying training as a nav card — consider featuring it prominently.

  3. Dealer Locator / Find a Dealer Section: Blue background section with H2 "Already an Integra Dealer? Help Homeowners Find You." and a map placeholder for the dealer locator. Bridges existing dealers and homeowner lead generation. Consider merging with or replacing Section 5 (Already a Dealer?) for a richer dealer-facing section.

IMAGE UPLOAD CHECKLIST

File to Upload Alt Text to Enter
dealer-hero.webp Luxury residential pool installation with retracted Integra cover — dealer program opportunity
dealer-card-why-partner.webp Integra manufacturing team — why pool builders partner with Integra
dealer-card-program.webp Integra manufacturing facility with signage — dealer program details
dealer-card-training.webp Integra installer attaching hardware to pool cover — dealer installation training