Copperline Plumbing & Heating — Corporate Plumbing Pricing Page for Divi 5

Full Landing Plumbing Corporate

See clear, flat-rate plumbing prices before any work begins. Standard visits, 24/7 emergency call-outs, and a monthly care plan with priority booking and 10% off repairs.

Rate this element

Be the first to rate

Download this section, free

Divi 5 JSON, imports in seconds
Commercial license included
No account needed

Part of a theme pack

This page ships inside Copperline: Plumbing & Home Services Theme (6 Pages), 6 coherent pages that share one brand.

$12.00one-time, commercial license

See everything in the pack

Click to view the full page

Overview

The layout opens with a two-column header section on a muted slate background (#f2f5fa). The left column carries the H1 "Pricing" at 52px (scaling to 32px on phone) alongside a 13px uppercase breadcrumb. The right column, narrower at 8/24 grid units, holds a single reassurance sentence at 18px. A 1px bottom border in #d3dbe8 closes the section as a deliberate visual step, not a seam, so the eye moves cleanly into the card grid below.

The core of the page is a three-column pricing grid: Standard visit at $129 per visit, Care plan at $19 per month, and Emergency call-out at $249 per call. All three cards share a 6px border radius and 28px internal padding with identical vertical rhythm, but the Care plan card is visually elevated by a solid #1c4a94 navy background, inverted white typography throughout, and a "Best value" pill badge. Each card's feature list pairs a 15px Font Awesome checkmark icon with 16px body text in a flex row using alignItems: flex-start, so multi-line copy never floats away from its icon. The card row uses alignItems: stretch, ensuring all three columns grow to the same height regardless of copy length, with the feature list group set to flexGrow so the CTA button is always pushed to the card's base.

Below the cards, a four-column CSS grid with a #d3dbe8 background and 1px column and row gaps produces a comparison table without border declarations on individual cells. The colored background shows through the gaps as grid lines. The Care plan column carries a #f2f5fa tint to echo the card hierarchy above, and a primary "Book a plumber" button in navy closes the section.

The FAQ section pairs a header column (H2 "About our pricing" at 40px) with an inline phone CTA button, then a two-column Q&A grid of six questions. Each item opens with a 2px solid navy top border and 20px top padding, a typographic accent that signals structure without requiring an accordion interaction. The layout closes on a full-bleed navy (#1c4a94) CTA banner using a horizontal flex layout with justifyContent: space-between: the H2 headline sits at 48px with textWrap: balance on the left, and a light-background button group sits on the right. On phone the row stacks column-first so the headline leads.

What’s inside

Three pricing cards (Standard visit / Care plan / Emergency call-out) built with `alignItems: stretch` on the row so cards always share the same height regardless of copy length
Highlighted Care plan card in #1c4a94 navy with a "Best value" pill badge, inverted white typography, and a semi-transparent top divider line separating the feature list from the pricing block
Icon + text feature rows inside each card using Font Awesome checkmarks (fa f00c, 15px) in flex rows with `alignItems: flex-start`, keeping icons anchored when feature copy wraps
Four-column CSS grid comparison table using `gridColumnCount: 4` and 1px gaps on a #d3dbe8 background to produce visible grid lines without borders on every cell
Six-question FAQ in a two-column layout, each question marked by a 2px solid #13233f top border with 20px top padding as a structural accent
Full-bleed navy CTA banner with `justifyContent: space-between` flex row (headline left, button group right on desktop; stacked on phone)
Breadcrumb + H1 header section with an inline value-proposition subhead and a bottom-border section divider, all within a single two-column row
Four distinct Button modules ("Book a visit", "Join the plan", "Call now", "Book a plumber") with 6px radius and 14px/28px padding, each styled to its card context

Who it’s for

Independent and regional plumbing contractors, HVAC companies, and home-services trades that sell tiered pricing or service plans. It suits a single-van operator building trust through price transparency just as well as a multi-crew company that needs one clear conversion page. Web designers and agencies building WordPress sites for plumbers, heating engineers, drain specialists, boiler-service companies, or any skilled trade that quotes work by the job (electricians, locksmiths, appliance repair) will find the three-tier structure and comparison table immediately adaptable without changing the layout's underlying architecture.

Customization tips

Start with the two brand colors: replace #1c4a94 (navy) used in the Care plan card background and the final CTA section, and #f2f5fa (slate tint) used in the outer card backgrounds and FAQ section. Updating these in Divi 5's global preset system lets both propagate across all five sections at once. The price figures are standalone Text modules at 44px/700 weight; keep the currency symbol and the period/unit label ("/ visit", "/ month") in separate Text modules so the size contrast between price and unit is preserved when you update the numbers. The comparison table is a flex-grid group of 28 individual group cells; to add a row, duplicate any four-cell row and update each cell's Text or Icon module. FAQ answers are Text modules at 16px/1.6 line height; up to about 80 words per answer fits without breaking the two-column symmetry. The CTA headline uses textWrap: balance at 48px; keep it under 50 characters so the balanced wrap reads correctly on tablet. The phone number button in the FAQ header is a plain Button module: update the label text and set the link to tel:+1XXXXXXXXXX.

How to install this layout

Download the layout JSON file from this page.
Open the target page in the Divi 5 builder.
Open the portability panel (up/down arrows icon) and choose the Import tab.
Upload the JSON. Tick “replace existing content” only for full-page imports.
Check the page at desktop and mobile widths, then swap in your copy and images.

Full walkthrough with troubleshooting: How to Import a Divi 5 Layout.

Questions about Copperline Plumbing & Heating — Corporate Plumbing Pricing Page for Divi 5

Do the three pricing cards stay the same height if my feature list is longer than the original?

Yes. The card row sets `alignItems: stretch` in Divi 5's row layout options, so all three columns grow to the tallest card. The feature list group inside each card also has `flexGrow` and `flexShrink` applied, which pushes the button to the bottom of the card regardless of how many bullet rows you add.

How is the comparison table built? Are those actual cell borders?

No borders are declared on the individual cells. The outer group uses Divi 5's CSS grid layout (`gridColumnCount: 4`) with 1px column and row gaps and a #d3dbe8 background. The colored background shows through the 1px gaps, creating the appearance of grid lines. Each cell is its own group module with a white or #f2f5fa background.

On mobile, in what order do the three pricing cards appear?

The row switches to `flexDirection: column` on phone, so the cards stack in DOM order: Standard visit first, Care plan (navy) second, Emergency call-out third. If your most important offer should lead, move its column to the first position in the row.

Is there a background image anywhere in this layout?

No. Every section uses a flat color background applied directly to the section's decoration settings. There are no image modules, no Blob assets, and no background image URLs to replace. To change the overall palette, update the color values in the section and card backgrounds.

What is the minimum edit to make this page match a real business?

The three price figures (44px Text modules: $129, $19, $249), the phone number in the FAQ header button ("Call (503) 555-0162"), and the CTA headline ("Get a fixed price before we begin.") are the four highest-impact text modules. Update those first, then adjust the feature-list copy inside each card.

Does the FAQ section use an accordion or toggle module?

No. Each FAQ item is a group with a 2px solid top border and a Heading module (H3, 21px) above a Text module (16px). There is no expand/collapse interaction. If you need accordion behavior, replace each group with Divi 5's Toggle module and apply the same border styling.

Which Divi version does this layout need?

Divi 5. The layout is generated natively for Divi 5 and validated against its real module structure before publication, so it imports clean into the current builder.

Can I use this layout on client websites?

Yes. Every download includes a commercial license covering unlimited sites you own or build for clients. Only reselling or redistributing the layout file itself is prohibited.