DEV3 Technologies home

DEV3 Gablestone – Free Roofing & Home Improvement WordPress Theme with Roof Estimator for Elementor & WooCommerce

A free WordPress theme for roofers and home improvement contractors: free inspection form with safe photo upload, roof cost estimator, before/after projects, materials and warranty comparison, financing and storm claim help. No 3D.

by DEV3 TechnologiesVerified Author(0) 0 downloads 0 viewsUpdated 06 Nov 2026

DEV3 Gablestone is a free WordPress theme for roofing contractors, siding, gutter and window installers and other home improvement businesses. It looks sharp and trade-honest: Archivo Narrow capitals with Source Sans 3 body text, a warm stone page, charcoal bands with a peaked roofline edge, brick-red actions (#c0392b) and tan highlights (#d4a373), with real photography in every section. Motion is light (reveals, counters, a slow hero drift) and it respects reduced motion. There is no 3D or WebGL in the theme at all.

Sign in to download it for free. There is no public live demo: watch the video tour at the top of this page, or step through the screenshots at desktop, tablet and phone sizes. The demo company, Gablestone Roofing, is fictional and all prices, rates and figures are sample.

Turn visitors into inspections

  • A free inspection form with a photo drop zone. Uploads are checked on the server: type read from the file content, size and count limits, re-encoded to remove hidden data and location, stored under random names outside the Media Library.
  • A roof cost estimator by roof area and material, with pitch, old layers and add-ons. It shows a range with lifespan and warranty and is always labelled as an estimate.
  • A hero estimate bar (material, roof size, ZIP) that opens the estimator with the choices filled in.
  • A storm and emergency banner above the header, with a phone number.

Proof and trust

  • Projects with a draggable before and after slider, facts, scope and results.
  • A materials and warranty comparison: six materials by life, warranty and cost, plus what workmanship, manufacturer and system warranties cover.
  • Financing options with a monthly payment calculator on three sample plans, clearly labelled as not an offer of credit.
  • A storm damage and insurance claim help page with six steps and a plain list of what a roofer can and cannot do.
  • Service areas with a ZIP checker, customer reviews and FAQs with schema markup.

Shop

A small WooCommerce shop for inspection vouchers and yearly maintenance plans, with a slide-out mini cart and checkout.

Built for editing

Every demo page is built in Elementor (free) with the DEV3 Theme Toolkit widgets, including the Photo Hero, and 26 block patterns cover the same sections for the block editor. A child theme is included. Fonts are self-hosted and demo photos are free-licence stock listed in PHOTO-CREDITS.md. Replace every sample price, rate and warranty term with your own before you publish.

#roofing#roofing-contractor#home-improvement#construction#contractor#before-after#price-calculator#elementor#woocommerce#wordpress-theme#free

How it's built

Architecture, stack, key decisions and the quality gates DEV3 Gablestone passed before release.

Our own free WordPress theme for roofers: a roof cost estimator by area and material, a free inspection form with photo upload, before/after projects, warranty comparison, financing and storm claim help, built on the no-3D theme core.

The problem it solves

A homeowner with a leak wants answers fast: roughly what will it cost, can someone look at it soon, and can I trust the crew on my roof. Most roofing themes answer with a phone number and a stock photo. Gablestone had to give a planning range that is honestly labelled as an estimate, take an inspection request with photos without opening a security hole, show proof through before and after projects and warranties, and explain storm and insurance claims without pretending a roofer is an insurer, all editable in Elementor and with no 3D or WebGL code.

Architecture and approach

Gablestone is a classic PHP theme with theme.json, built on DEV3's shared theme core in flat mode: a build gate fails the theme if any three.js or WebGL code reaches its assets.

The DEV3 Theme Toolkit provides the post types (services, projects, reviews) and widgets, including the before and after slider. The estimator turns roof area, material, pitch, old layers and add-ons into a range from filterable sample prices, shows lifespan, warranty and a sample monthly payment and is always labelled as an estimate. The inspection form posts through the toolkit request endpoint; a theme filter then checks every photo (count, size, type read from the content, real image, dimensions), re-encodes it with the WordPress image editor, stores it under a random name in a private folder with script execution denied and adds the links to the request. A financing calculator and a ZIP checker run in a small lazy script.

Quality gates and results

Gablestone ships as a free download with a one-click demo for the fictional Gablestone Roofing, with sample prices and figures, 26 block patterns and a child theme.

It passes PHP lint, WordPress coding standards, Theme Check with no required issues, the WooCommerce checkout flow and an Elementor editor test, and its no-3D gate.

Tech stack

Area Technologies
Frontend DEV3 Motion, Photo Hero, Roof estimator script, Elementor widgets, Block patterns
Platform WordPress 6.0+, PHP 7.4+, WooCommerce, Contact Form 7, DEV3 Theme Toolkit
Delivery phpcs (WPCS 3), Theme Check, No-3D build gate, One-click demo importer

Inside the build

Photo hero slideshow: a full-screen cross-fading roof photo slideshow with a split headline, free inspection and estimate buttons, trust chips and the storm banner. Photo hero slideshow — a full-screen cross-fading roof photo slideshow with a split headline, free inspection and estimate buttons, trust chips and the storm banner.

Roof estimate bar: pick a material, roof size and ZIP under the hero and land on the estimator with your choices filled in. Roof estimate bar — pick a material, roof size and ZIP under the hero and land on the estimator with your choices filled in.

Guides & articles

Practical guides and engineering write-ups for DEV3 Gablestone.

A free roofing WordPress theme: roof estimator and inspection form

Last updated
A free roofing WordPress theme: roof estimator and inspection form: DEV3 Gablestone

A homeowner with a leak wants three things quickly: roughly what a new roof costs, whether someone can look at it soon, and whether they can trust the crew. DEV3 Gablestone is a free WordPress theme built around those questions, with an honest roof estimator, an inspection form that takes photos safely and every page editable in Elementor.

The Gablestone home page: a photo hero of a house under a new roof, the storm banner and a free inspection button

Video tour of the Gablestone demo: services, projects, the roof estimator, the inspection form, financing and the shop

Who Gablestone is for

  • Roofing contractors, from a small crew to a multi-town company.
  • Siding, gutter and window installers who sell exterior upgrades.
  • Agencies and freelancers building a home-services site the client can keep up to date.

Start with an estimate

The hero estimate bar asks for a material, a roof size and a ZIP code, then opens the estimator with those choices filled in.

The estimate bar under the hero with material, roof size and ZIP fields

The estimator adds pitch, old layers and add-ons and shows a range with lifespan, warranty and a sample monthly payment. It is always labelled as an estimate, and the prices are filterable.

The roof cost estimator with the dark estimate card

A free inspection form with safe photo upload

Visitors can attach up to five photos. The server reads the file type from the content, limits size and count, re-saves each photo to remove hidden data and stores it under a random name outside the Media Library.

The free inspection form with concerns, a photo drop zone and a preferred day

Proof and trust

Projects show a before and after slider, the materials page compares six roofs by life, warranty and cost, and the financing page shows monthly payments on three sample plans.

The before and after slider on a Gablestone project page

The materials and warranty comparison table

Storm damage and insurance help

A banner above the header links to a page that explains the steps after a storm, and says plainly what a roofer can and cannot do for an insurance claim.

The storm damage and insurance page with six steps

Set it up in an afternoon

  1. Install the theme and the DEV3 Theme Toolkit, then import the demo from Appearance → DEV3 Demo.
  2. Replace the demo photos with your own project photos and set your own prices with the dev3gbs_pricing filter.
  3. List your service areas, services, projects and reviews.
  4. Set your phone number, storm banner and inspection link under Appearance → Customize.

Gablestone in the Elementor editor with the Photo Hero widget selected

Gablestone is free: sign in on DEV3 to download it. The demo company, Gablestone Roofing, is fictional and every price and rate is a sample.

Frequently asked questions

The complete source code (version 1.0.0) as a download from your account, with the setup and usage guides shown on this page. It is free: sign in to download it.

Buying guides: 3D and motion WordPress themes for Elementor and WooCommerce

More from this author

View all

Related in CMS Extensions

View all