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

Products Hub Build Guide — Integra Pool Covers

Page: Products Hub (/products/)
Staging: integrapoo1stg.wpenginepowered.com
Template: Avada Full Width (no sidebar)


IMAGES IN THIS FOLDER

Filename Dimensions Size Section Alt Text
product-standard-mechanism.webp 800x600 17kb Product Card Grid Integra standard P2 stainless steel mechanism — automatic pool cover drive system
product-low-offset.webp 800x600 82kb Product Card Grid Integra low offset mechanism — compact 16-inch offset automatic pool cover system
product-aegis-fabric.webp 800x600 111kb Product Card Grid Integra Aegis premium pool cover fabric — heat-sealed webbing with 7-year warranty
product-colors.webp 800x600 31kb Product Card Grid Integra pool cover color options — seven Aegis fabric colors available

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


SECTION-BY-SECTION BUILD INSTRUCTIONS

SECTION 1: HERO

Standard internal page hero — solid navy background, no image.
- Container: 100% width
- Background color: #003366 (solid)
- Padding: 70px top, 70px bottom
- Column layout: single column, 8/12 width, centered

Elements:
1. Breadcrumbs (Text Block)
- Content: <p>Home / Products</p>
- Font: Open Sans, 13px, color #AACCEE
- Margin: 0 0 15px 0
2. H1 (Text Block)
- Content: <h1>Integra Automatic Pool Cover Products</h1>
- Font: Montserrat, 42px, weight 700, color #FFFFFF, line-height 1.2
- Text-align: center
3. Subheadline (Text Block)
- Content: <p>Every Integra pool cover system is built from two primary components: the mechanism that drives it and the fabric that covers your pool. All stainless steel. All ASTM F1346 certified. All backed by industry-leading warranties.</p>
- Font: Open Sans, 18px, weight 400, color rgba(255,255,255,0.85), line-height 1.6
- Text-align: center
- Margin: 15px 0 0 0


SECTION 2: INTRO COPY

White background, centered text block.
- Container: white background #FFFFFF
- Padding: 50px top, 30px bottom
- Inner: max-width 800px, centered

Elements:
1. Body copy (Text Block)
- Content: <p>Integra designs and manufactures three core product lines — two mechanism systems and one premium fabric system. Every component is engineered for durability, safety, and long-term performance. Whether you're building a new pool or retrofitting an existing one, there's an Integra system designed for your configuration.</p>
- Font: Open Sans, 17px, color #333333, line-height 1.7
- Text-align: center


SECTION 3: PRODUCT CARD GRID

4-column responsive grid of product cards.
- Container: white background #FFFFFF
- Padding: 20px top, 60px bottom
- Inner: max-width 1200px, centered
- Column layout: 4 equal columns, 25px gap
- Responsive: 2 columns on tablet, 1 column on mobile

Card styling (all four cards):
- Background: #FFFFFF
- Border: 1px solid #E5E5E5
- Border-radius: 8px
- Overflow: hidden (for image border-radius at top)
- Box-shadow: 0 2px 8px rgba(0,0,0,0.06)
- Hover: box-shadow 0 4px 16px rgba(0,0,0,0.12), transform translateY(-2px)
- Transition: all 0.3s ease

Card 1: Standard Mechanism
1. Image (Image element)
- File: product-standard-mechanism.webp
- Alt: "Integra standard P2 stainless steel mechanism — automatic pool cover drive system"
- Width: 100%, height auto
- Border-radius: 8px 8px 0 0
2. Card body — padding 25px
3. Card title (Text Block)
- Content: <h3>Standard Mechanism</h3>
- Font: Montserrat, 20px, weight 600, color #003366
- Margin: 0 0 10px 0
4. Card description (Text Block)
- Content: <p>The P2 full-system mechanism. All stainless steel construction with 2-inch pulleys, adjustable torque limiter, and BISON E2000 motor. Pools up to 24 x 60 feet. 20-year warranty.</p>
- Font: Open Sans, 14px, color #555555, line-height 1.6
- Margin: 0 0 20px 0
5. Button (Button element)
- Text: Learn More
- URL: /products/standard-mechanism/
- Style: background #003366, color #FFFFFF, font Open Sans 14px weight 600
- Padding: 10px 24px
- Border-radius: 4px
- Width: 100%
- Text-align: center
- Hover: background #004C99

Card 2: Low Offset Mechanism
1. Image: product-low-offset.webp
- Alt: "Integra low offset mechanism — compact 16-inch offset automatic pool cover system"
2. Card title: <h3>Low Offset Mechanism</h3>
3. Card description: <p>Designed for pools with limited deck space. Only 16 inches of offset required. Handles pools up to 20 x 50 feet. Same stainless steel engineering, smaller footprint. 20-year warranty.</p>
4. Button: Learn More → /products/low-offset-mechanism/

Card 3: Aegis Fabric System
1. Image: product-aegis-fabric.webp
- Alt: "Integra Aegis premium pool cover fabric — heat-sealed webbing with 7-year warranty"
2. Card title: <h3>Aegis Fabric</h3>
3. Card description: <p>Integra's proprietary pool cover fabric. Heat-sealed webbing, reinforced leading edge, UV-stabilized with 7 color options. Designed for automatic cover mechanisms. 7-year warranty.</p>
4. Button: Learn More → /products/aegis-fabric/

Card 4: Color Options
1. Image: product-colors.webp
- Alt: "Integra pool cover color options — seven Aegis fabric colors available"
2. Card title: <h3>Color Options</h3>
3. Card description: <p>Seven Aegis fabric colors to complement any pool design — Black, Charcoal, Light Gray, Mocha, Navy Blue, Royal Blue, and Tan. All colors available in standard and reinforced weights.</p>
4. Button: View Colors → /products/colors/


SECTION 4: EVERY INTEGRA SYSTEM INCLUDES

Feature checklist section with light gray background.
- Container: background #F5F5F5
- Padding: 60px top, 60px bottom
- Inner: max-width 900px, centered

Elements:
1. Heading (Text Block)
- Content: <h2>Every Integra System Includes</h2>
- Font: Montserrat, 30px, weight 700, color #003366
- Text-align: center
- Margin: 0 0 35px 0
2. Two-column checklist — 2 columns, 30px gap
- Column layout: 6/12 + 6/12

Left column (Text Block):

<ul style="list-style:none;padding:0;">
  <li style="padding:10px 0;border-bottom:1px solid #E0E0E0;font-size:16px;color:#333;">&#10003; &nbsp; All stainless steel mechanism components</li>
  <li style="padding:10px 0;border-bottom:1px solid #E0E0E0;font-size:16px;color:#333;">&#10003; &nbsp; ASTM F1346 safety certification</li>
  <li style="padding:10px 0;border-bottom:1px solid #E0E0E0;font-size:16px;color:#333;">&#10003; &nbsp; Adjustable torque limiter</li>
  <li style="padding:10px 0;border-bottom:1px solid #E0E0E0;font-size:16px;color:#333;">&#10003; &nbsp; Aluminum track system</li>
  <li style="padding:10px 0;border-bottom:1px solid #E0E0E0;font-size:16px;color:#333;">&#10003; &nbsp; Weatherproof control options</li>
  <li style="padding:10px 0;font-size:16px;color:#333;">&#10003; &nbsp; Professional authorized dealer installation</li>
</ul>

Right column (Text Block):

<ul style="list-style:none;padding:0;">
  <li style="padding:10px 0;border-bottom:1px solid #E0E0E0;font-size:16px;color:#333;">&#10003; &nbsp; Heat-sealed Aegis fabric</li>
  <li style="padding:10px 0;border-bottom:1px solid #E0E0E0;font-size:16px;color:#333;">&#10003; &nbsp; 20-year mechanism warranty</li>
  <li style="padding:10px 0;border-bottom:1px solid #E0E0E0;font-size:16px;color:#333;">&#10003; &nbsp; 7-year fabric warranty</li>
  <li style="padding:10px 0;border-bottom:1px solid #E0E0E0;font-size:16px;color:#333;">&#10003; &nbsp; Precision rope reel system</li>
  <li style="padding:10px 0;font-size:16px;color:#333;">&#10003; &nbsp; Full installation documentation</li>
</ul>

SECTION 5: CLOSING CTA

Standard CTA block.
- Container: background #003366
- Padding: 60px top, 60px bottom
- Inner: max-width 700px, centered, text-align center

Elements:
1. Heading (Text Block)
- Content: <h2>Ready to Specify Integra?</h2>
- Font: Montserrat, 30px, weight 700, color #FFFFFF
- Margin: 0 0 15px 0
2. Body (Text Block)
- Content: <p>Contact us for product specifications, pricing, or to connect with an authorized Integra dealer in your area.</p>
- Font: Open Sans, 17px, color rgba(255,255,255,0.85), line-height 1.6
- Margin: 0 0 25px 0
3. Button row — 2 buttons side by side, 15px gap
- Button 1: Text "Contact Us", URL /contact/, style: background #FFFFFF, color #003366, font Montserrat 15px weight 600, padding 14px 35px, border-radius 4px
- Button 2: Text "Find a Dealer", URL /dealer-locator/, style: background transparent, color #FFFFFF, border 2px solid #FFFFFF, font Montserrat 15px weight 600, padding 12px 35px, border-radius 4px, hover background rgba(255,255,255,0.1)


IMAGE UPLOAD CHECKLIST

File to Upload Alt Text to Enter
product-standard-mechanism.webp Integra standard P2 stainless steel mechanism — automatic pool cover drive system
product-low-offset.webp Integra low offset mechanism — compact 16-inch offset automatic pool cover system
product-aegis-fabric.webp Integra Aegis premium pool cover fabric — heat-sealed webbing with 7-year warranty
product-colors.webp Integra pool cover color options — seven Aegis fabric colors available