Contact — 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)

Contact Build Guide — Integra Pool Covers

Page: Contact (/contact/)
Staging: integrapoo1stg.wpenginepowered.com
Template: Avada Full Width (no sidebar)

IMAGES IN THIS FOLDER

Filename Dimensions Size Section Alt Text
contact-hero.webp 1200x800 271KB Reference only (not used in hero bg) Contact Integra Pool Covers — Knoxville Tennessee

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. Compact hero — this page is functional, not aspirational.

  1. Add a new Container (Section)
  2. Container Settings:
  3. Background: #003366 (solid color, no image)
  4. Min height: 40vh (desktop), 35vh (mobile)
  5. Padding: 80px top and bottom (desktop), 50px (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>Contact Integra Pool Covers</h1>
  10. Font color: #FFFFFF
  11. Font size: 48px desktop / 32px mobile
  12. Font weight: 700
  13. Text align: Center
  14. Margin bottom: 16px

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

  16. Add Text Block element:

  17. Content: <p>Questions about our products, dealer program, or need technical support? We're here to help.</p>
  18. Font color: rgba(255,255,255,0.9)
  19. Font size: 20px desktop / 16px mobile
  20. Text align: Center
  21. Max width: 700px, centered
  22. Animation: Fade In from Bottom, 0.5s delay

SECTION 2: CONTACT FORM + INFO (2-COLUMN LAYOUT)

What it looks like: White background, two columns — WPForms contact form on the left (60%), contact info card on the right (40%).

  1. Add Container
  2. Background: #FFFFFF

  3. Padding: 80px top and bottom (desktop), 50px (mobile)

  4. 2-column row — 7/12 left, 5/12 right

  5. On mobile: Stack to single column (form first, info second)
  6. Gap: 40px

LEFT COLUMN (60%): CONTACT FORM

  1. Text Block:

  2. <h2 style="color:#003366;font-size:28px;margin-bottom:24px;">Send Us a Message</h2>

  3. Add WPForms element:

  4. Create a new form in WPForms (or use existing) named "Contact — Integra"
  5. Fields:
    • Full Name (required) — Single Line Text
    • Email Address (required) — Email field
    • Phone Number (optional) — Phone field
    • I am a... (required) — Dropdown:
    • Homeowner
    • Pool Builder / Contractor
    • Current Integra Dealer
    • Architect / Designer
    • Other
    • Message (required) — Paragraph Text, min height 150px
  6. Submit button text: "Send Message"
  7. Submit button style: Background #FF6B00, color #FFFFFF, font weight 700, padding 14px 36px, border radius 8px, full width
  8. Confirmation message: "Thank you for contacting Integra. We'll respond within 1 business day."
  9. Notification email: Set to Integra's contact email

  10. Anti-spam: Enable WPForms honeypot + reCAPTCHA if available

  11. WPForms Styling (CSS overrides if needed):

  12. Field border: 1px solid #D0D0D0
  13. Field border radius: 6px
  14. Field padding: 12px 16px
  15. Field font size: 16px
  16. Field focus border: 2px solid #003366
  17. Label color: #003366
  18. Label font size: 14px
  19. Label font weight: 600
  20. Field spacing: 20px

RIGHT COLUMN (40%): CONTACT INFO CARD

  1. Container (nested) or styled div:
  2. Background: #F5F5F5
  3. Padding: 36px

  4. Border radius: 12px

  5. Text Block:

  6. <h3 style="color:#003366;font-size:22px;margin-bottom:24px;">Get in Touch</h3>

  7. Text Block — Contact details:

<div style="margin-bottom:20px;">
  <p style="color:#003366;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;">Address</p>
  <p style="color:#2D2D2D;font-size:16px;line-height:1.6;">Integra Pool Covers<br>Knoxville, Tennessee</p>
</div>

<div style="margin-bottom:20px;">
  <p style="color:#003366;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;">Phone</p>
  <p style="color:#2D2D2D;font-size:16px;"><a href="tel:+18005551234" style="color:#003366;text-decoration:none;">(800) 555-1234</a></p>
</div>

<div style="margin-bottom:20px;">
  <p style="color:#003366;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;">Email</p>
  <p style="color:#2D2D2D;font-size:16px;"><a href="mailto:info@integrapoolcovers.com" style="color:#003366;text-decoration:none;">info@integrapoolcovers.com</a></p>
</div>

<div style="margin-bottom:20px;">
  <p style="color:#003366;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;">Business Hours</p>
  <p style="color:#2D2D2D;font-size:16px;line-height:1.6;">Monday – Friday: 8:00 AM – 5:00 PM ET<br>Saturday – Sunday: Closed</p>
</div>

SECTION 3: DEALER-SPECIFIC CTA

What it looks like: Light blue accent bar directing dealers to the dealer program page.

  1. Add Container
  2. Background: #EBF4FF

  3. Padding: 50px top and bottom

  4. Column 8/12, centered

  5. 2-column row — 8/12 text, 4/12 button (flex, vertically centered)

  6. Left — Text Block:

  7. <h3 style="color:#003366;font-size:24px;margin-bottom:8px;">Are You a Pool Builder or Contractor?</h3>

  8. <p style="color:#2D2D2D;font-size:16px;">Learn about the Integra dealer program — territory protection, training, marketing support, and a product your customers will love.</p>

  9. Right — Button:

  10. Text: "Explore the Dealer Program"
  11. Link: /for-dealers/
  12. Background: #003366
  13. Color: #FFFFFF
  14. Font weight: 700
  15. Padding: 14px 28px
  16. Border radius: 8px

STITCH DESIGN IMPROVEMENTS (from stitch-live/contact.html)

The Stitch prototype adds two useful sections:

  1. "For Pool Builders & Contractors" Section (after Section 3): Full-width bar with H2, descriptive text, and two CTA buttons ("Learn About the Dealer Program" and "Find a Dealer Near You"). More prominent than the build guide's Section 3 dealer CTA — consider using this layout as a replacement or enhancement.

  2. Secondary Support 3-Card Footer (before site footer): Three cards in a row — Warranty Registration (with "Register Now" link), Maintenance Guide (with "Download PDF" link), and Technical Specs (with "Dealer Portal" link). This adds functional utility to the contact page bottom and gives visitors secondary paths. Strongly recommended as a new section before the footer.

IMAGE UPLOAD CHECKLIST

File to Upload Alt Text to Enter
contact-hero.webp Contact Integra Pool Covers — Knoxville Tennessee

Note: The contact hero image is provided as a reference/fallback. The hero section uses solid #003366 background per the standard internal page pattern. The image can be used elsewhere on the page or in social/meta og:image tags if desired.