How It Works — 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)

How It Works Build Guide — Integra Pool Covers

Page: How It Works (/why-integra/how-it-works/)
Staging: integrapoo1stg.wpenginepowered.com
Template: Avada Full Width (no sidebar)

IMAGES IN THIS FOLDER

Filename Dimensions Size Section Alt Text
mechanism-drive.webp 800x600 17KB Step 01: Motor Drive (Section 3) Integra stainless steel mechanism drive unit — the heart of the automatic pool cover system
rope-pulley-system.webp 800x600 6KB Step 02: Rope & Pulleys (Section 3) Integra 2-inch rope reel and pulley system — reduces friction and extends rope life
torque-limiter.webp 800x600 8KB Step 02 alt / Detail (Section 3) Adjustable torque limiter assembly — protects motor, rope, and fabric from over-tension
aegis-fabric-closeup.webp 800x600 71KB Step 04: Aegis Fabric (Section 3) Integra Aegis fabric extreme close-up showing weave texture — heat-sealed 18-oz vinyl
control-keypad.webp 800x600 36KB Step 05: Controls (Section 3) Integra keypad controller — PIN-secured weatherproof touchpad for pool cover operation
control-rocker.webp 800x600 51KB Step 05: Controls (Section 3) Integra rocker switch control — wall-mounted weatherproof switch for pool cover operation
cover-retracting.webp 1200x800 230KB Hero / Lifestyle (Section 5) Integra automatic pool cover partially retracted showing pool water — demonstrating smooth operation
p2-full-system.webp 1200x600 37KB System Diagram (Section 3) Integra P2 Full System diagram — complete automatic pool cover mechanism layout

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: HERO

What it looks like: Solid navy background with centered white text. No background image.

  1. Add a new Container (Section)
  2. Container Settings:
  3. Background: #003366 (solid color)
  4. Min height: 50vh (desktop), 40vh (mobile)
  5. Padding: 100px top and bottom (desktop), 60px (mobile)

  6. Content alignment: Center

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

  8. Add Text Block element:

  9. Content: <h1>How an Automatic Pool Cover Works — From Mechanism to Motor</h1>
  10. Font color: #FFFFFF
  11. Font size: 44px desktop / 30px mobile
  12. Font weight: 700
  13. Text align: Center
  14. Margin bottom: 20px

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

  16. Add Text Block element:

  17. Content: <p>Five components, one seamless system. Here's how every part of an Integra automatic pool cover works together to protect your pool.</p>
  18. Font color: rgba(255,255,255,0.9)
  19. Font size: 20px desktop / 16px mobile
  20. Text align: Center
  21. Max width: 800px, centered
  22. Animation: Fade In from Bottom, 0.5s delay

SECTION 2: INTRO COPY + SYSTEM DIAGRAM

What it looks like: White background, intro paragraph above, full-width system diagram below.

  1. Add Container
  2. Background: #FFFFFF

  3. Padding: 80px top, 40px bottom

  4. Column: 8/12 width, centered

  5. Text Block:

  6. <h2>The Complete System at a Glance</h2>
  7. Color: #003366
  8. Font size: 32px
  9. Text align: Center

  10. Margin bottom: 20px

  11. Text Block:

  12. Copy: An Integra automatic pool cover is a precision-engineered system where every component serves a purpose. The motor drives the mechanism, the mechanism manages the rope, the rope moves through the tracks, the tracks guide the fabric, and the controls put it all at your fingertips. Here's how each piece works.
  13. Color: #2D2D2D
  14. Font size: 18px
  15. Text align: Center
  16. Line height: 1.7

  17. Margin bottom: 40px

  18. New row — full width column:

  19. Image → p2-full-system.webp
  20. Alt: Integra P2 Full System diagram — complete automatic pool cover mechanism layout
  21. Max width: 1000px, centered
  22. Border: 1px solid #E8E8E8
  23. Border radius: 8px
  24. Padding: 20px (white space around diagram)
  25. Background: #FFFFFF

SECTION 3: FIVE NUMBERED STEP SECTIONS

What it looks like: Five alternating image/text sections, each numbered 01-05 with a large step number.

STEP 01: MOTOR DRIVE

Layout: Image LEFT, Text RIGHT
Background: #F5F5F5

  1. Add Container
  2. Background: #F5F5F5

  3. Padding: 80px top and bottom

  4. 2-column row — 45% left / 55% right

  5. Left column:

  6. Image → mechanism-drive.webp
  7. Alt: Integra stainless steel mechanism drive unit — the heart of the automatic pool cover system
  8. Border radius: 8px

  9. Animation: Fade In from Left, 0.3s

  10. Right column:

  11. Text Block:

    • <span style="font-size:64px; font-weight:800; color:#D6E4F7; line-height:1;">01</span>
    • Margin bottom: 8px

  12. Text Block:

    • <h3>Motor Drive Unit</h3>
    • Color: #003366, font size 26px, margin bottom 16px

  13. Text Block:

    • Copy: The motor is the power source — a sealed, heavy-duty electric motor housed inside the stainless steel mechanism box. It connects to a gear reduction system that converts high-speed motor rotation into the controlled, low-speed torque needed to extend and retract the cover smoothly. The motor operates on standard residential power and is designed for thousands of open/close cycles.
    • Color: #2D2D2D, font size 16px, line height 1.7

STEP 02: ROPE & PULLEYS

Layout: Text LEFT, Image RIGHT
Background: #FFFFFF

  1. Add Container
  2. Background: #FFFFFF

  3. Padding: 80px top and bottom

  4. 2-column row — 55% left / 45% right

  5. Left column:

  6. Text Block:

    • <span style="font-size:64px; font-weight:800; color:#D6E4F7; line-height:1;">02</span>

  7. Text Block:

    • <h3>Rope Reel & Pulley System</h3>
    • Color: #003366, font size 26px, margin bottom 16px

  8. Text Block:

    • Copy: The motor drives a rope reel that manages the continuous loop of rope running through the system. Integra uses 2-inch diameter pulleys — larger than the industry standard — which reduces friction, decreases rope wear, and extends the rope's operational life. The rope connects to the leading edge of the cover fabric, pulling it across the pool surface as the reel turns. An adjustable torque limiter protects the motor, rope, and fabric from over-tension — if the cover encounters an obstruction, the torque limiter disengages before damage occurs.
    • Color: #2D2D2D, font size 16px, line height 1.7

  9. Right column:

  10. Image → rope-pulley-system.webp
  11. Alt: Integra 2-inch rope reel and pulley system — reduces friction and extends rope life
  12. Border radius: 8px
  13. Margin bottom: 20px

  14. Animation: Fade In from Right, 0.3s

  15. Image → torque-limiter.webp

  16. Alt: Adjustable torque limiter assembly — protects motor, rope, and fabric from over-tension
  17. Border radius: 8px
  18. Animation: Fade In from Right, 0.5s

STEP 03: TRACK SYSTEM

Layout: Text centered (no image — icon-based)
Background: #F5F5F5

  1. Add Container
  2. Background: #F5F5F5

  3. Padding: 80px top and bottom

  4. Column: 8/12 width, centered

  5. Text Block:

  6. <span style="font-size:64px; font-weight:800; color:#D6E4F7; line-height:1;">03</span>

  7. Text align: Center

  8. Text Block:

  9. <h3>Track System</h3>

  10. Color: #003366, font size 26px, text align center, margin bottom 16px

  11. Text Block:

  12. Copy: Aluminum tracks are installed along both sides of the pool, recessed into the coping or mounted on the deck surface. The cover's edge ropes ride inside these tracks, keeping the fabric taut and centered as it extends and retracts. The track profile is designed to maintain the tight perimeter seal required by ASTM F1346 — no gaps wider than 2 inches along the entire pool edge. Track end pulleys redirect the rope at the far end of the pool, completing the continuous loop back to the mechanism.
  13. Color: #2D2D2D, font size 16px, line height 1.7, text align center
  14. Max width: 750px, centered

STEP 04: AEGIS FABRIC

Layout: Image LEFT, Text RIGHT
Background: #FFFFFF

  1. Add Container
  2. Background: #FFFFFF

  3. Padding: 80px top and bottom

  4. 2-column row — 45% left / 55% right

  5. Left column:

  6. Image → aegis-fabric-closeup.webp
  7. Alt: Integra Aegis fabric extreme close-up showing weave texture — heat-sealed 18-oz vinyl
  8. Border radius: 8px

  9. Animation: Fade In from Left, 0.3s

  10. Right column:

  11. Text Block:

    • <span style="font-size:64px; font-weight:800; color:#D6E4F7; line-height:1;">04</span>

  12. Text Block:

    • <h3>Aegis Fabric</h3>
    • Color: #003366, font size 26px, margin bottom 16px

  13. Text Block:

    • Copy: The cover fabric is Integra's proprietary Aegis line — 18-oz vinyl, acrylic-coated on both sides, and UV-stabilized for maximum lifespan. The fabric is cut to the exact dimensions of the pool and heat-sealed (not stitched) to the webbing that connects it to the edge ropes. Heat-sealing creates a stronger, watertight bond that eliminates the needle holes inherent in stitched construction. Seven colors are available — all backed by a 7-year fabric warranty.
    • Color: #2D2D2D, font size 16px, line height 1.7

  14. Button:

    • Text: Explore Aegis Fabric Colors →
    • Link: /products/aegis-fabrics/
    • Style: Text link, color #003366, font weight 600

STEP 05: CONTROLS

Layout: Text LEFT, Images RIGHT (2 images stacked)
Background: #F5F5F5

  1. Add Container
  2. Background: #F5F5F5

  3. Padding: 80px top and bottom

  4. 2-column row — 55% left / 45% right

  5. Left column:

  6. Text Block:

    • <span style="font-size:64px; font-weight:800; color:#D6E4F7; line-height:1;">05</span>

  7. Text Block:

    • <h3>Controls</h3>
    • Color: #003366, font size 26px, margin bottom 16px

  8. Text Block:

    • Copy: Integra offers two control options — both weatherproof and designed for outdoor installation. The keypad controller uses a PIN code for security, preventing unauthorized operation. The rocker switch is a simple hold-to-run design — the cover moves only while the switch is held, stopping immediately when released. Both options are UL-listed and mount to any exterior wall or post within reach of the pool. Operation is intuitive: flip the switch or enter your code, and the cover extends or retracts in about 60 seconds depending on pool length.
    • Color: #2D2D2D, font size 16px, line height 1.7

  9. Right column:

  10. Image → control-keypad.webp
  11. Alt: Integra keypad controller — PIN-secured weatherproof touchpad for pool cover operation
  12. Border radius: 8px
  13. Margin bottom: 20px

  14. Animation: Fade In from Right, 0.3s

  15. Image → control-rocker.webp

  16. Alt: Integra rocker switch control — wall-mounted weatherproof switch for pool cover operation
  17. Border radius: 8px
  18. Animation: Fade In from Right, 0.5s

SECTION 4: VIDEO PLACEHOLDER

What it looks like: Dark background with embedded video or video placeholder.

  1. Add Container
  2. Background: #25282A

  3. Padding: 80px top and bottom

  4. Column: 10/12 width, centered

  5. Text Block:

  6. <h2>See It in Action</h2>
  7. Color: #FFFFFF
  8. Font size: 32px
  9. Text align: Center

  10. Margin bottom: 30px

  11. Video element (Avada):

  12. Type: Vimeo
  13. Video ID: 817665812
  14. Aspect ratio: 16:9
  15. Max width: 900px, centered
  16. Border radius: 8px

Alternative: If Avada's video element doesn't support Vimeo natively, use a Code Block with:
```html

```

SECTION 5: INSTALLATION PROCESS

What it looks like: Lifestyle image background with overlaid text explaining installation.

  1. Add Container
  2. Background → Image → Upload cover-retracting.webp
  3. Background position: Center Center
  4. Background size: Cover
  5. Background overlay: #003366 at 60% opacity
  6. Min height: 500px (desktop), 400px (mobile)
  7. Padding: 80px top and bottom

  8. Content alignment: Center

  9. Column: 8/12 width, centered

  10. Text Block:

  11. <h2>Professional Installation</h2>
  12. Color: #FFFFFF
  13. Font size: 36px desktop / 28px mobile
  14. Text align: Center

  15. Margin bottom: 20px

  16. Text Block:

  17. Copy: Integra automatic pool covers are installed exclusively by authorized dealers who are trained on the complete system. Installation typically takes 1-2 days for new construction and 2-3 days for retrofits on existing pools. Your dealer handles track placement, mechanism mounting, electrical connections, fabric fitting, and final testing. Every installation includes a full walkthrough of operation, maintenance, and warranty coverage.
  18. Color: rgba(255,255,255,0.9)
  19. Font size: 17px
  20. Text align: Center
  21. Max width: 750px, centered
  22. Line height: 1.7

SECTION 6: STANDARD VS LOW OFFSET COMPARISON

What it looks like: Two-column comparison on white background.

  1. Add Container
  2. Background: #FFFFFF

  3. Padding: 80px top and bottom

  4. Headline: <h2>Two Mechanism Options, One Standard of Quality</h2> — color #003366, centered, margin bottom 40px

  5. 2-column row — 50/50 with 30px gap

  6. Column 1 — Standard Mechanism (P2):

  7. Container: Background #F5F5F5, border-radius 8px, padding 30px
  8. Text Block: <h3>Standard Mechanism (P2)</h3> — color #003366, margin bottom 16px
  9. Text Block (bullet list):
    html <ul style="list-style:none; padding:0; margin:0;"> <li style="padding:8px 0; border-bottom:1px solid #E8E8E8; color:#2D2D2D;">✓ All-stainless steel construction</li> <li style="padding:8px 0; border-bottom:1px solid #E8E8E8; color:#2D2D2D;">✓ 2-inch diameter rope pulleys</li> <li style="padding:8px 0; border-bottom:1px solid #E8E8E8; color:#2D2D2D;">✓ Adjustable torque limiter</li> <li style="padding:8px 0; border-bottom:1px solid #E8E8E8; color:#2D2D2D;">✓ Fits pools of all sizes</li> <li style="padding:8px 0; border-bottom:1px solid #E8E8E8; color:#2D2D2D;">✓ 24-inch mechanism offset</li> <li style="padding:8px 0; color:#2D2D2D;">✓ 20-year mechanism warranty</li> </ul>

  10. Button:

    • Text: View Standard Mechanism →
    • Link: /products/standard-mechanism/
    • Style: Text link, color #003366, font weight 600
    • Margin top: 20px

  11. Column 2 — Low Offset Mechanism:

  12. Container: Background #F5F5F5, border-radius 8px, padding 30px
  13. Text Block: <h3>Low Offset Mechanism</h3> — color #003366, margin bottom 16px
  14. Text Block (bullet list):
    html <ul style="list-style:none; padding:0; margin:0;"> <li style="padding:8px 0; border-bottom:1px solid #E8E8E8; color:#2D2D2D;">✓ All-stainless steel construction</li> <li style="padding:8px 0; border-bottom:1px solid #E8E8E8; color:#2D2D2D;">✓ 2-inch diameter rope pulleys</li> <li style="padding:8px 0; border-bottom:1px solid #E8E8E8; color:#2D2D2D;">✓ Internal adjustable torque limiter</li> <li style="padding:8px 0; border-bottom:1px solid #E8E8E8; color:#2D2D2D;">✓ Fits pools up to 20' × 50'</li> <li style="padding:8px 0; border-bottom:1px solid #E8E8E8; color:#2D2D2D;">✓ Only 16-inch mechanism offset</li> <li style="padding:8px 0; color:#2D2D2D;">✓ 20-year mechanism warranty</li> </ul>
  15. Button:
    • Text: View Low Offset →
    • Link: /products/low-offset-mechanism/
    • Style: Text link, color #003366, font weight 600
    • Margin top: 20px

SECTION 7: CLOSING CTA

What it looks like: Navy background, centered white text, two buttons.

  1. Add Container
  2. Background: #003366

  3. Padding: 80px top and bottom

  4. Column: 8/12 width, centered

  5. Text Block:

  6. <h2>Ready to See It for Yourself?</h2>
  7. Color: #FFFFFF
  8. Font size: 36px desktop / 28px mobile

  9. Text align: Center

  10. Text Block:

  11. Copy: Your local Integra dealer can demonstrate the system in person and help you choose the right mechanism and fabric for your pool.
  12. Color: rgba(255,255,255,0.85)
  13. Font size: 18px
  14. Text align: Center

  15. Margin bottom: 30px

  16. Button:

  17. Text: Find a Dealer
  18. Link: /for-dealers/find-a-dealer/
  19. Background: #FFFFFF
  20. Text color: #003366
  21. Size: Large
  22. Border radius: 4px

  23. Margin right: 16px

  24. Button:

  25. Text: Contact Us
  26. Link: /contact/
  27. Background: Transparent
  28. Border: 2px solid #FFFFFF
  29. Text color: #FFFFFF
  30. Size: Large
  31. Border radius: 4px

IMAGE UPLOAD CHECKLIST

File to Upload Alt Text to Enter
mechanism-drive.webp Integra stainless steel mechanism drive unit — the heart of the automatic pool cover system
rope-pulley-system.webp Integra 2-inch rope reel and pulley system — reduces friction and extends rope life
torque-limiter.webp Adjustable torque limiter assembly — protects motor, rope, and fabric from over-tension
aegis-fabric-closeup.webp Integra Aegis fabric extreme close-up showing weave texture — heat-sealed 18-oz vinyl
control-keypad.webp Integra keypad controller — PIN-secured weatherproof touchpad for pool cover operation
control-rocker.webp Integra rocker switch control — wall-mounted weatherproof switch for pool cover operation
cover-retracting.webp Integra automatic pool cover partially retracted showing pool water — demonstrating smooth operation
p2-full-system.webp Integra P2 Full System diagram — complete automatic pool cover mechanism layout

STITCH DESIGN NOTES (from stitch-live/how-it-works.html)

Ideas from the Stitch HTML worth considering during build:

NOTES FOR DEV