About Our Story — 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)

About / Our Story Build Guide — Integra Pool Covers

Page: About / Our Story (/about/our-story/)
Staging: integrapoo1stg.wpenginepowered.com
Template: Avada Full Width (no sidebar)

IMAGES IN THIS FOLDER

Filename Dimensions Size Section Alt Text
factory-hero.webp 1400x800 104KB Factory hero image (Section 2) Integra Pool Covers manufacturing facility in Knoxville Tennessee — charcoal Aegis fabric at full production length
factory-workers-machine.webp 800x600 39KB Founding story (Section 3) Integra manufacturing team operating production equipment — Knoxville Tennessee factory
factory-worker-assembly.webp 800x600 46KB Stainless Steel section (Section 4) Integra worker hand-assembling pool cover hardware — quality craftsmanship at Knoxville facility
factory-floor-wide.webp 1200x800 107KB Knoxville Facility (Section 5) Integra manufacturing floor — wide view of production facility showing scale of operations
heat-seal-manufacturing.webp 800x600 40KB Gallery (Section 6) Worker operating heat-seal welding machine at Integra factory — Knoxville Tennessee
fabric-rolls-storage.webp 800x600 96KB Gallery (Section 6) Integra Aegis fabric roll storage — dozens of rolls in multiple colors at manufacturing facility
worker-rolling-fabric.webp 800x600 28KB Gallery (Section 6) Integra worker rolling Tan Aegis fabric on production floor — hands-on manufacturing

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, no image)
  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>Made in America. Built to Last Decades.</h1>
  10. Font color: #FFFFFF
  11. Font size: 48px desktop / 32px 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>Every Integra pool cover is designed, manufactured, and assembled in Knoxville, Tennessee — by a team that believes the way something is built matters as much as what it does.</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: FACTORY HERO IMAGE

What it looks like: Full-width factory image immediately below hero.

  1. Add Container
  2. Background: #FFFFFF
  3. Padding: 0 top, 0 bottom

  4. Overflow: Hidden

  5. Column: Full width (1/1)

  6. Add Image element:

  7. Upload: factory-hero.webp
  8. Alt text: "Integra Pool Covers manufacturing facility in Knoxville Tennessee — charcoal Aegis fabric at full production length"
  9. Size: Full width
  10. Max width: 1400px, centered
  11. Border radius: 0

SECTION 3: FOUNDING / STORY SECTIONS (ALTERNATING 2-COL)

What it looks like: Two alternating image-text sections telling the founding and evolution story.

STORY 3A: THE BEGINNING

Layout: Image LEFT, Text RIGHT
Background: #FFFFFF

  1. Add Container — Background #FFFFFF, Padding 80px top/bottom

  2. 2-column row — 50/50 split

  3. Left column — Image:

  4. Upload: factory-workers-machine.webp
  5. Alt: "Integra manufacturing team operating production equipment — Knoxville Tennessee factory"
  6. Border radius: 8px

  7. Box shadow: 0 4px 20px rgba(0,0,0,0.1)

  8. Right column — Text Block:

  9. <h2 style="color:#003366;font-size:32px;margin-bottom:16px;">Built Different From Day One</h2>
  10. <p style="color:#2D2D2D;font-size:17px;line-height:1.8;">Integra was founded on a simple premise: automatic pool covers should be built to last — not built to a price point. From the beginning, every engineering decision has prioritized longevity, safety, and real-world performance over cost-cutting.</p>
  11. <p style="color:#2D2D2D;font-size:17px;line-height:1.8;margin-top:16px;">That philosophy led to decisions that other manufacturers wouldn't make — all-stainless steel mechanisms, heat-sealed fabrics, and independent ASTM testing on every cover model. These aren't marketing features. They're engineering commitments.</p>

STORY 3B: THE PHILOSOPHY

Layout: Text LEFT, Image RIGHT
Background: #F5F5F5

  1. Add Container — Background #F5F5F5, Padding 80px top/bottom

  2. 2-column row — 50/50 split

  3. Left column — Text Block:

  4. <h2 style="color:#003366;font-size:32px;margin-bottom:16px;">Quality Over Quantity</h2>
  5. <p style="color:#2D2D2D;font-size:17px;line-height:1.8;">We don't outsource manufacturing. We don't use aluminum where stainless steel belongs. We don't stitch webbing when heat-sealing is stronger. Every component is chosen for what it does in the field — not what it costs on a spreadsheet.</p>

  6. <p style="color:#2D2D2D;font-size:17px;line-height:1.8;margin-top:16px;">This approach means our covers cost more to build. It also means they perform better, last longer, and generate fewer warranty claims than anything else on the market. For our dealers and their customers, that's the only math that matters.</p>

  7. Right column — Image:

  8. Upload: factory-worker-assembly.webp
  9. Alt: "Integra worker hand-assembling pool cover hardware — quality craftsmanship at Knoxville facility"
  10. Border radius: 8px
  11. Box shadow: 0 4px 20px rgba(0,0,0,0.1)

SECTION 4: THE MOVE TO ALL-STAINLESS STEEL

What it looks like: White background, centered heading with supporting text. Uses existing mechanism image from site (stainless-steel-mechanisms.webp from Existing-Site-Images — already uploaded to WordPress Media Library).

  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:16px;">The Decision That Defined Us</h2>

  7. Font size: 36px

  8. Separator — #E8E8E8, 60px, centered, margin bottom 40px

  9. 2-column row — 50/50 split

  10. Left column — Text Block:

  11. <h3 style="color:#003366;font-size:24px;margin-bottom:12px;">All-Stainless Steel — No Exceptions</h3>
  12. <p style="color:#2D2D2D;font-size:17px;line-height:1.8;">Most pool cover manufacturers use a mix of aluminum, galvanized steel, and stainless steel in their mechanisms. Integra uses 100% stainless steel — every guide, rail, pulley, and structural component.</p>

  13. <p style="color:#2D2D2D;font-size:17px;line-height:1.8;margin-top:16px;">Stainless steel doesn't corrode in chlorine or salt environments. It doesn't weaken over freeze-thaw cycles. It doesn't need to be replaced. That's why we back our mechanisms with a 20-year warranty — because the material earns it.</p>

  14. Right column — Image:

  15. Use the existing stainless-steel-mechanisms.webp from the WordPress Media Library (already uploaded from previous pages)
  16. Alt: "Integra all-stainless steel pool cover mechanism — 20-year warranty"
  17. Border radius: 8px

SECTION 5: THE KNOXVILLE FACILITY

What it looks like: Light gray background, full-width factory floor image with descriptive text.

  1. Add Container
  2. Background: #F5F5F5

  3. Padding: 80px top and bottom

  4. Column 8/12, centered

  5. Text Block:

  6. <h2 style="color:#003366;text-align:center;margin-bottom:16px;">The Knoxville Facility</h2>

  7. Font size: 36px

  8. Text Block:

  9. <p style="color:#2D2D2D;font-size:18px;text-align:center;line-height:1.8;max-width:750px;margin:0 auto 30px;">Every Integra cover is manufactured under one roof in Knoxville, Tennessee. Our facility handles everything — fabric cutting, heat-seal welding, mechanism assembly, quality testing, and final packaging. Nothing is outsourced.</p>

  10. Column Full width (1/1)

  11. Image:

  12. Upload: factory-floor-wide.webp
  13. Alt: "Integra manufacturing floor — wide view of production facility showing scale of operations"
  14. Width: 100%
  15. Max width: 1200px, centered
  16. Border radius: 8px
  17. Box shadow: 0 4px 20px rgba(0,0,0,0.1)

SECTION 6: MANUFACTURING PHOTO GALLERY

What it looks like: Grid of 4-6 factory images using Avada Fusion Gallery element.

  1. Add Container
  2. Background: #FFFFFF

  3. Padding: 80px top and bottom

  4. Column 10/12, centered

  5. Text Block:

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

  7. Font size: 36px

  8. Add Fusion Gallery element:

  9. Layout: Grid
  10. Columns: 3 (desktop), 2 (tablet), 1 (mobile)
  11. Column spacing: 15px

  12. Hover type: Zoom In

  13. Gallery images (upload all to Media Library first):

  14. heat-seal-manufacturing.webp — Alt: "Worker operating heat-seal welding machine at Integra factory — Knoxville Tennessee"
  15. fabric-rolls-storage.webp — Alt: "Integra Aegis fabric roll storage — dozens of rolls in multiple colors at manufacturing facility"
  16. worker-rolling-fabric.webp — Alt: "Integra worker rolling Tan Aegis fabric on production floor — hands-on manufacturing"
  17. factory-workers-machine.webp — Alt: "Integra manufacturing team operating production equipment — Knoxville Tennessee factory"
  18. factory-worker-assembly.webp — Alt: "Integra worker hand-assembling pool cover hardware — quality craftsmanship at Knoxville facility"
  19. factory-floor-wide.webp — Alt: "Integra manufacturing floor — wide view of production facility showing scale of operations"

SECTION 7: WHAT WE BELIEVE — 3-COL CARDS

What it looks like: Three cards on light gray background representing core values.

  1. Add Container
  2. Background: #F5F5F5

  3. Padding: 80px top and bottom

  4. Column 10/12, centered

  5. Text Block:

  6. <h2 style="color:#003366;text-align:center;margin-bottom:40px;">What We Believe</h2>

  7. Font size: 36px

  8. 3-column row — equal width, gap 30px

  9. Card 1 — Quality:

  10. Background: #FFFFFF, padding 30px, border radius 8px
  11. Box shadow: 0 2px 12px rgba(0,0,0,0.08)
  12. <div style="font-size:40px;margin-bottom:16px;">🔧</div> (or use Avada icon element: "wrench" from FontAwesome, color #FF6B00, size 40px)
  13. <h3 style="color:#003366;font-size:22px;margin-bottom:10px;">Quality Without Compromise</h3>

  14. <p style="color:#2D2D2D;font-size:15px;line-height:1.7;">Every material choice, every process, every inspection exists because it makes the product better. We don't cut corners — and we never will.</p>

  15. Card 2 — Safety:

  16. Background: #FFFFFF, padding 30px, border radius 8px
  17. Box shadow: 0 2px 12px rgba(0,0,0,0.08)
  18. Icon: "shield" / #FF6B00 / 40px
  19. <h3 style="color:#003366;font-size:22px;margin-bottom:10px;">Safety as a Standard</h3>

  20. <p style="color:#2D2D2D;font-size:15px;line-height:1.7;">ASTM F1346 isn't a box we check. It's the engineering baseline we build everything on. Every Integra cover is a safety device first.</p>

  21. Card 3 — Support:

  22. Background: #FFFFFF, padding 30px, border radius 8px
  23. Box shadow: 0 2px 12px rgba(0,0,0,0.08)
  24. Icon: "handshake" / #FF6B00 / 40px
  25. <h3 style="color:#003366;font-size:22px;margin-bottom:10px;">Dealers Are Partners</h3>
  26. <p style="color:#2D2D2D;font-size:15px;line-height:1.7;">We succeed when our dealers succeed. Training, technical support, marketing materials, and warranty backing — we're in it together.</p>

SECTION 8: CLOSING CTA

What it looks like: Dark navy background with two CTA buttons.

  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;">See What Integra Can Do for Your Pool</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;">Whether you're a homeowner looking for the best cover or a dealer looking for the best manufacturer — we'd love to hear from you.</p>

  10. Button row — centered, 2 buttons:

  11. Button 1: "Find a Dealer" → /find-a-dealer/
    • 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/about--our-story.html)

The Stitch prototype adds two strong sections not in the original build guide:

  1. "What We Build" Section (after Our Story): Two-column card layout — Mechanisms card (stainless steel details, 20-Year Warranty badge, "Explore Engineering" link) and Fabrics card (Aegis fabric details, 7-Year Warranty badge, "View Fabric Options" link). Followed by a "See Our Products" CTA button. This is a natural bridge from the brand story to the product pages — strongly recommended.

  2. Warranty Overview Table: Clean 3-row table with columns for Component, Term, and Coverage Details. Rows: Mechanism (20 Years / Full replacement on structural stainless steel), Fabric-Aegis (7 Years / 1-3 years full, 4-7 prorated), Electrical (Component Basis / Varies by component). Links to "Full Warranty Terms." This gives the About page more substance and answers a key buyer question early.

Both additions make the About page more functional and less purely narrative. Consider adding between Sections 6 and 7 (Gallery and What We Believe).

IMAGE UPLOAD CHECKLIST

File to Upload Alt Text to Enter
factory-hero.webp Integra Pool Covers manufacturing facility in Knoxville Tennessee — charcoal Aegis fabric at full production length
factory-workers-machine.webp Integra manufacturing team operating production equipment — Knoxville Tennessee factory
factory-worker-assembly.webp Integra worker hand-assembling pool cover hardware — quality craftsmanship at Knoxville facility
factory-floor-wide.webp Integra manufacturing floor — wide view of production facility showing scale of operations
heat-seal-manufacturing.webp Worker operating heat-seal welding machine at Integra factory — Knoxville Tennessee
fabric-rolls-storage.webp Integra Aegis fabric roll storage — dozens of rolls in multiple colors at manufacturing facility
worker-rolling-fabric.webp Integra worker rolling Tan Aegis fabric on production floor — hands-on manufacturing