Why Integra Hub — Step-by-Step Build Walkthrough

Filename	Dimensions	Size	Section	Alt Text
`hero-why-integra.webp`	1200x800	193KB	Hero reference (not used as bg)	Why choose Integra automatic pool covers — stainless steel mechanisms with ASTM F1346 certification
`stainless-steel-mechanism.webp`	800x600	17KB	Pillar: Stainless Steel (Section 3)	Integra all-stainless steel pool cover mechanism close-up — 20-year warranty
`astm-certification.webp`	800x600	63KB	Pillar: ASTM (Section 3)	ASTM F1346 certified automatic pool cover — independently tested safety standard
`aegis-fabric-premium.webp`	800x600	111KB	Pillar: Aegis Fabric (Section 3)	Integra Aegis premium pool cover fabrics — heat-sealed webbing with 7-year warranty
`card-safety.webp`	600x400	61KB	Nav Card: Safety (Section 4)	Pool safety certification — ASTM F1346 weight test
`card-energy.webp`	600x400	34KB	Nav Card: Energy (Section 4)	Energy efficient automatic pool cover — reduce heating costs 50-70%
`card-how-it-works.webp`	600x400	21KB	Nav Card: How It Works (Section 4)	Automatic pool cover control switch — keypad operation

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

RANK MATH SEO SETTINGS

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

Focus Keyword: why Integra pool covers
Title Tag: Why Choose Integra Pool Covers | Safety, Quality & Performance
Meta Description: Integra automatic pool covers are built with all-stainless steel mechanisms, ASTM F1346 certified, and backed by a 20-year warranty. Discover what sets Integra apart.
Schema Type: WebPage
Canonical URL: https://integrapoolcovers.com/why-integra/

SECTION-BY-SECTION BUILD INSTRUCTIONS

SECTION 1: HERO

What it looks like: Solid navy background with centered white text. No background image — clean, dark hero.

Avada Builder steps:

Add a new Container (Section)
Container Settings:
Background: #003366 (solid color, no image)
Min height: 50vh (desktop), 40vh (mobile)
Padding: 100px top and bottom (desktop), 60px (mobile)
Content alignment: Center
Inside the container, add a Column — set to 10/12 width, centered (1/12 offset each side)
Add Text Block element:
Content: <h1>Why Integra: Engineering That Earns Its Keep</h1>
Design tab → Font color: #FFFFFF
Font size: 48px desktop / 32px mobile
Font weight: 700
Text align: Center
Margin bottom: 20px
Animation: Fade In from Bottom, 0.3s delay
Add Text Block element:
Content: <p>Every decision we make — from the steel we source to the way we seal our fabrics — is engineered to outlast, outperform, and out-protect every other automatic pool cover on the market.</p>
Font color: rgba(255,255,255,0.9)
Font size: 20px desktop / 16px mobile
Text align: Center
Max width: 800px, centered
Animation: Fade In from Bottom, 0.5s delay

SECTION 2: INTRO COPY

What it looks like: White background, centered text block introducing the page's purpose.

Add Container
Background: #FFFFFF
Padding: 80px top and bottom
Column: 8/12 width, centered
Text Block:
<h2>Four Pillars. One Standard: Yours.</h2>
Color: #003366
Font size: 36px desktop / 28px mobile
Text align: Center
Margin bottom: 20px
Text Block:
Copy: Integra automatic pool covers are built around four engineering pillars — stainless steel construction, ASTM F1346 certification, Aegis premium fabrics, and effortless daily operation. Each one exists for a reason: to give pool owners a cover that performs from the day it's installed through every season that follows.
Color: #2D2D2D
Font size: 18px
Text align: Center
Max width: 750px, centered
Separator element
Style: Single solid
Color: #E8E8E8
Width: 60px
Alignment: Center
Margin top: 30px

SECTION 3: FOUR PILLAR SECTIONS (ALTERNATING 2-COL LAYOUTS)

What it looks like: Four content sections, each with an image and descriptive text. Image alternates left/right.

PILLAR 3A: ALL-STAINLESS STEEL MECHANISMS

Layout: Image LEFT, Text RIGHT
Background: #F5F5F5

Add Container
Background: #F5F5F5
Padding: 80px top and bottom
2-column row — 50/50 split
Left column:
Image element → Upload stainless-steel-mechanism.webp
Alt text: Integra all-stainless steel pool cover mechanism close-up — 20-year warranty
Border radius: 8px
Animation: Fade In from Left, 0.3s delay
Right column:
Text Block:
- <h3>All-Stainless Steel Mechanisms</h3>
- Color: #003366
- Font size: 28px
- Margin bottom: 16px
Text Block:
- Copy: While competitors cut costs with aluminum or mixed-metal components, every Integra mechanism is built entirely from stainless steel. Stainless resists the corrosive chlorinated environment around pools better than any alternative — and it's why we back every mechanism with a 20-year limited warranty, the longest in the industry.
- Color: #2D2D2D
- Font size: 16px
- Line height: 1.7
- Margin bottom: 20px
Button:
- Text: Learn More About Our Mechanism →
- Link: /products/standard-mechanism/
- Style: Text link, color #003366, font weight 600

PILLAR 3B: ASTM F1346 CERTIFICATION

Layout: Text LEFT, Image RIGHT
Background: #FFFFFF

Add Container
Background: #FFFFFF
Padding: 80px top and bottom
2-column row — 50/50 split
Left column:
Text Block:
- <h3>Built to ASTM F1346 — The Safety Standard That Matters</h3>
- Color: #003366
- Font size: 28px
- Margin bottom: 16px
Text Block:
- Copy: ASTM F1346 isn't a marketing badge — it's a rigorous, independently verified testing protocol. It requires the cover to support 485+ pounds of static load, eliminate gaps large enough for a child to access the water, and drain surface water safely. Every Integra cover ships with its ASTM certification label because it passes every test, every time.
- Color: #2D2D2D
- Font size: 16px
- Line height: 1.7
- Margin bottom: 20px
Button:
- Text: ASTM F1346 Explained →
- Link: /why-integra/safety/
- Style: Text link, color #003366, font weight 600
Right column:
Image element → Upload astm-certification.webp
Alt text: ASTM F1346 certified automatic pool cover — independently tested safety standard
Border radius: 8px
Animation: Fade In from Right, 0.3s delay

PILLAR 3C: AEGIS PREMIUM FABRICS

Layout: Image LEFT, Text RIGHT
Background: #F5F5F5

Add Container
Background: #F5F5F5
Padding: 80px top and bottom
2-column row — 50/50 split
Left column:
Image element → Upload aegis-fabric-premium.webp
Alt text: Integra Aegis premium pool cover fabrics — heat-sealed webbing with 7-year warranty
Border radius: 8px
Animation: Fade In from Left, 0.3s delay
Right column:
Text Block:
- <h3>Aegis Premium Fabrics</h3>
- Color: #003366
- Font size: 28px
- Margin bottom: 16px
Text Block:
- Copy: Aegis is our proprietary line of 18-oz vinyl pool cover fabrics, acrylic-coated and UV-stabilized for maximum lifespan. Unlike stitched webbing — which creates needle holes that weaken fabric over time — Aegis fabrics use heat-sealed webbing for a stronger, watertight bond. Seven colors. Seven-year fabric warranty.
- Color: #2D2D2D
- Font size: 16px
- Line height: 1.7
- Margin bottom: 20px
Button:
- Text: Explore Aegis Fabrics →
- Link: /products/aegis-fabrics/
- Style: Text link, color #003366, font weight 600

PILLAR 3D: EFFORTLESS DAILY OPERATION

Layout: Text LEFT, no image (icon-based)
Background: #FFFFFF

Add Container
Background: #FFFFFF
Padding: 80px top and bottom
Column: 8/12 width, centered
Icon element:
Icon: fa-toggle-on (Font Awesome)
Icon color: #003366
Icon size: 48px
Alignment: Center
Margin bottom: 20px
Text Block:
<h3>One Switch. Complete Control.</h3>
Color: #003366
Font size: 28px
Text align: Center
Margin bottom: 16px
Text Block:
Copy: Integra covers operate with a single keypad or rocker switch — PIN-secured, weatherproof, and designed for daily use. The motor drives a stainless steel mechanism that extends or retracts the cover smoothly across the pool surface. No complicated setup. No learning curve. Open the pool for a swim, close it when you're done.
Color: #2D2D2D
Font size: 16px
Line height: 1.7
Text align: Center
Max width: 750px, centered
Button:
Text: See How It Works →
Link: /why-integra/how-it-works/
Style: Text link, color #003366, font weight 600
Alignment: Center

SECTION 4: NAVIGATION CARDS GRID

What it looks like: Three image-topped cards linking to sub-pages — Safety, Energy Efficiency, How It Works.

Add Container
Background: #F5F5F5
Padding: 80px top and bottom
Headline row — 1 column, centered:
<h2>Explore What Makes Integra Different</h2> — color #003366, centered
Margin bottom: 40px
3-column row (equal widths, 20px gap)
Each column is a navigation card:

Column 1 — Safety & ASTM Certification:
- Container styling: Background #FFFFFF, border-radius 8px, overflow hidden, box-shadow 0 2px 8px rgba(0,0,0,0.08), hover shadow 0 4px 16px rgba(0,0,0,0.12)
- Image: card-safety.webp (full width of card, no padding, no border radius on image — card handles rounding)
- Alt: Pool safety certification — ASTM F1346 weight test
- Text Block (padding 25px):
- <h3>Safety & ASTM Certification</h3>
- H3 color: #003366, font size 22px
- Copy: How Integra covers meet the strictest safety standard in the industry — ASTM F1346 — and what that means for your family.
- Color: #2D2D2D, font size 15px
- Button (inside padding area):
- Text: Learn About Safety →
- Link: /why-integra/safety/
- Style: Text link, color #003366, font weight 600

Column 2 — Energy Efficiency:
- Same card styling as Column 1
- Image: card-energy.webp
- Alt: Energy efficient automatic pool cover — reduce heating costs 50-70%
- Text Block (padding 25px):
- <h3>Energy Efficiency</h3>
- Copy: The real numbers on evaporation, heating costs, and chemical savings — and how an Integra cover pays for itself.
- Button:
- Text: See the Savings →
- Link: /why-integra/energy-efficiency/

Column 3 — How It Works:
- Same card styling as Column 1
- Image: card-how-it-works.webp
- Alt: Automatic pool cover control switch — keypad operation
- Text Block (padding 25px):
- <h3>How It Works</h3>
- Copy: From motor drive to rope pulleys to Aegis fabric — a complete walkthrough of the Integra automatic pool cover system.
- Button:
- Text: See the Mechanism →
- Link: /why-integra/how-it-works/

Mobile: Stack to 1 column with 20px gap between cards.

SECTION 5: CLOSING CTA

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

Add Container
Background: #003366
Padding: 80px top and bottom
Column: 8/12 width, centered
Text Block:
<h2>Ready to See Integra in Action?</h2>
Color: #FFFFFF
Font size: 36px desktop / 28px mobile
Text align: Center
Text Block:
Copy: Connect with an authorized Integra dealer in your area. They'll measure your pool, walk you through the options, and give you a quote — no obligation.
Color: rgba(255,255,255,0.85)
Font size: 18px
Text align: Center
Margin bottom: 30px
Button:
Text: Find a Dealer
Link: /for-dealers/find-a-dealer/
Background: #FFFFFF
Text color: #003366
Size: Large
Border radius: 4px
Padding: 14px 28px
Margin right: 16px
Button:
Text: Contact Us
Link: /contact/
Background: Transparent
Border: 2px solid #FFFFFF
Text color: #FFFFFF
Size: Large
Border radius: 4px

IMAGE UPLOAD CHECKLIST

When uploading images to WordPress Media Library, set the Alt Text field for each:

File to Upload	Alt Text to Enter
`hero-why-integra.webp`	Why choose Integra automatic pool covers — stainless steel mechanisms with ASTM F1346 certification
`stainless-steel-mechanism.webp`	Integra all-stainless steel pool cover mechanism close-up — 20-year warranty
`astm-certification.webp`	ASTM F1346 certified automatic pool cover — independently tested safety standard
`aegis-fabric-premium.webp`	Integra Aegis premium pool cover fabrics — heat-sealed webbing with 7-year warranty
`card-safety.webp`	Pool safety certification — ASTM F1346 weight test
`card-energy.webp`	Energy efficient automatic pool cover — reduce heating costs 50-70%
`card-how-it-works.webp`	Automatic pool cover control switch — keypad operation

STITCH DESIGN NOTES (from stitch-live/why-integra-hub-page.html)

Ideas from the Stitch HTML worth considering during build:

Dual CTAs on pillar sections: Stitch shows two link options per pillar (e.g., "See the Standard Mechanism" + "See the Low Offset Mechanism" on the steel section). Could add secondary links if it helps routing.
4-card explore grid (2x2): Stitch uses a 2x2 grid with 4 cards instead of our 3 — the 4th card is "ASTM F1346 Explained" linking to the /why-integra/astm-f1346-explained/ page. Consider adding this as a 4th card or keeping 3 for cleaner layout.
Hero subhead copy variant: Stitch uses a longer, more detailed hero subhead that mentions liability insurance and 20-year lifespan. Our version is tighter and better for scan-reading — keep ours.
Section title variant: Stitch uses "Four Reasons Integra Performs Where Others Fall Short" vs. our "Four Pillars. One Standard: Yours." — our version is sharper.

NOTES FOR DEV

All images are WebP format and web-optimized — upload as-is
Hero section uses solid #003366 background — no image upload needed for the hero background
The hero-why-integra.webp image is included in the folder as a reference/optional use but is NOT used as the hero background per design spec
Navigation cards use overflow hidden on the card container so the image fills to the edges while the card itself has rounded corners
Total page image payload: ~500KB
This is a hub page — its primary job is to route visitors to the three sub-pages (Safety, Energy, How It Works) while establishing the four-pillar value proposition