Resources 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)

Resources Hub Build Guide — Integra Pool Covers

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

IMAGES IN THIS FOLDER

Filename Dimensions Size Section Alt Text
resource-astm-guide.webp 600x400 48KB Resource Card Grid (Section 3) ASTM F1346 pool safety standard guide — Integra Pool Covers
resource-cost-guide.webp 600x400 37KB Resource Card Grid (Section 3) Automatic pool cover cost guide — what to expect in 2026
resource-faq.webp 600x400 64KB Resource Card Grid (Section 3) Automatic pool cover FAQ — 30+ questions answered
resource-gallery.webp 600x400 50KB Resource Card Grid (Section 3) Integra pool cover installation gallery — real pools, real installs
resource-fence-guide.webp 600x400 65KB Resource Card Grid (Section 3) Pool cover vs pool fence — state-by-state safety guide

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. Standard internal page hero.

  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>Integra Pool Cover Resources</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>Buying guides, safety standards, cost breakdowns, and answers to your most common questions — everything you need to make an informed decision about automatic pool covers.</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

What it looks like: White background, centered text introducing the resources section.

  1. Add Container
  2. Background: #FFFFFF

  3. Padding: 60px top, 40px bottom

  4. Column: 8/12 width, centered

  5. Text Block:

  6. <p style="color:#2D2D2D;font-size:18px;text-align:center;line-height:1.8;max-width:750px;margin:0 auto;">We believe the best purchase decisions come from understanding the product. These resources cover everything from safety certification to cost analysis — so you know exactly what you're getting with an Integra pool cover.</p>

SECTION 3: RESOURCE CARD GRID

What it looks like: 5 resource cards in a 3x2 grid layout (3 top row, 2 bottom row centered). Each card has an image, title, short description, and CTA link.

  1. Add Container
  2. Background: #F5F5F5

  3. Padding: 80px top and bottom

  4. Column 10/12, centered

Row 1 — 3 cards (4/12 each):

  1. Card 1 — ASTM F1346 Explained:
  2. Image: resource-astm-guide.webp
    • Alt: "ASTM F1346 pool safety standard guide — Integra Pool Covers"
    • Width: 100%, border radius 8px 8px 0 0
  3. Card body:
    • Background: #FFFFFF
    • Padding: 24px
    • Border: 1px solid #E8E8E8
    • Border radius: 0 0 8px 8px
    • Box shadow: 0 2px 12px rgba(0,0,0,0.06)
  4. Text Block: <span style="font-size:12px;text-transform:uppercase;letter-spacing:2px;color:#FF6B00;font-weight:700;">Safety Guide</span>
  5. Text Block: <h3 style="color:#003366;font-size:20px;margin:8px 0 10px;">ASTM F1346 Explained</h3>
  6. Text Block: <p style="color:#666;font-size:15px;line-height:1.6;">What the ASTM F1346 safety standard actually requires, how covers are tested, and why certification matters for your family's safety.</p>

  7. Link: <a href="/resources/astm-f1346-explained/" style="color:#FF6B00;font-weight:600;font-size:15px;display:inline-block;margin-top:12px;">Read Guide →</a>

  8. Card 2 — Pool Cover Cost Guide:

  9. Image: resource-cost-guide.webp
    • Alt: "Automatic pool cover cost guide — what to expect in 2026"
  10. Tag: <span style="...">Cost Guide</span>
  11. Text Block: <h3 style="color:#003366;font-size:20px;margin:8px 0 10px;">Automatic Pool Cover Cost Guide</h3>
  12. Text Block: <p style="color:#666;font-size:15px;line-height:1.6;">What an automatic pool cover costs in 2026, what affects the price, and how to calculate the long-term return on your investment.</p>

  13. Link: <a href="/resources/pool-cover-cost-guide/" style="color:#FF6B00;font-weight:600;font-size:15px;display:inline-block;margin-top:12px;">Read Guide →</a>

  14. Card 3 — Pool Cover vs Pool Fence:

  15. Image: resource-fence-guide.webp
    • Alt: "Pool cover vs pool fence — state-by-state safety guide"
  16. Tag: <span style="...">Safety Comparison</span>
  17. Text Block: <h3 style="color:#003366;font-size:20px;margin:8px 0 10px;">Pool Cover vs Pool Fence</h3>
  18. Text Block: <p style="color:#666;font-size:15px;line-height:1.6;">Can an automatic pool cover replace a fence? State-by-state regulations, safety comparisons, and what building codes actually require.</p>
  19. Link: <a href="/resources/pool-cover-fence-alternative/" style="color:#FF6B00;font-weight:600;font-size:15px;display:inline-block;margin-top:12px;">Read Guide →</a>

Row 2 — 2 cards centered (4/12 each with 2/12 offset each side):

  1. Card 4 — FAQ:
  2. Image: resource-faq.webp
    • Alt: "Automatic pool cover FAQ — 30+ questions answered"
  3. Tag: <span style="...">FAQ</span>
  4. Text Block: <h3 style="color:#003366;font-size:20px;margin:8px 0 10px;">Automatic Pool Cover FAQ</h3>
  5. Text Block: <p style="color:#666;font-size:15px;line-height:1.6;">30+ answers covering safety, installation, maintenance, cost, warranties, and dealer questions. Everything homeowners and pool builders ask.</p>

  6. Link: <a href="/resources/faq/" style="color:#FF6B00;font-weight:600;font-size:15px;display:inline-block;margin-top:12px;">View FAQ →</a>

  7. Card 5 — Installation Gallery:

  8. Image: resource-gallery.webp
    • Alt: "Integra pool cover installation gallery — real pools, real installs"
  9. Tag: <span style="...">Gallery</span>
  10. Text Block: <h3 style="color:#003366;font-size:20px;margin:8px 0 10px;">Installation Gallery</h3>
  11. Text Block: <p style="color:#666;font-size:15px;line-height:1.6;">Real Integra installations from across the country. See how our covers look on different pool shapes, deck materials, and in different settings.</p>
  12. Link: <a href="/resources/gallery/" style="color:#FF6B00;font-weight:600;font-size:15px;display:inline-block;margin-top:12px;">View Gallery →</a>

SECTION 4: 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;">Ready to Learn More?</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;">Connect with an authorized Integra dealer to see our covers in person, get a quote, or schedule an installation consultation.</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/resources-hub.html)

The Stitch prototype adds one key section and a layout refinement:

  1. Featured Resource Section (between card grid and closing CTA): An asymmetric bento-style layout highlighting "The Complete Guide to Automatic Pool Covers" — the main pillar page. Left side has a "Featured Resource" tag, H2, descriptive paragraph about the 50-page guide, and a "Download the Full Guide" button. Right side shows a tilted document preview mockup. This is a strong content marketing play — elevates the most important resource above the grid cards. Recommended.

  2. Card Grid Layout: The stitch uses a 6-card grid (3x2) instead of the build guide's 5-card asymmetric layout. The 6th card is the Complete Guide itself, plus a Gallery card and FAQ card. Consider whether 5 or 6 cards works better — the 6-card grid is visually cleaner than 3+2.

IMAGE UPLOAD CHECKLIST

File to Upload Alt Text to Enter
resource-astm-guide.webp ASTM F1346 pool safety standard guide — Integra Pool Covers
resource-cost-guide.webp Automatic pool cover cost guide — what to expect in 2026
resource-faq.webp Automatic pool cover FAQ — 30+ questions answered
resource-gallery.webp Integra pool cover installation gallery — real pools, real installs
resource-fence-guide.webp Pool cover vs pool fence — state-by-state safety guide