Website guidesGetting started
Choose a contractor template that fits your business
Compare complete roofing and HVAC layouts, choose the right starting route and replace demonstration details without losing the design you liked.
Choose a contractor website template by the information it helps you explain, not only by the hero photograph. The best fit is a layout that can hold your real services, photographs and contact details without forcing you to invent content or rebuild every section.
WebsiteGeneratorHub has separate roofing template and HVAC template collections. You can preview a design, use it, edit it and download the finished files free. Ready-made template use does not spend a generated-design request.
Start with the job the page must do
Write one sentence about your main customer and the decision they need to make. A roof-repair business might need homeowners to explain a leak and arrange an inspection. An HVAC installer might need homeowners to understand replacement options before requesting a survey. Those jobs call for different emphasis, even if both firms like dark blue.
Pick the content that supports that decision. A repair-led roofer may need prominent contact details, a clear list of repair services and convincing project photographs. A maintenance-led HVAC business may need a simple explanation of servicing, the systems it works on and how to arrange a visit. Do not select a layout because its demo promises suit a larger company.
Templates provide structure and demonstration content. That distinction is useful beyond this product: Wix's explanation of templates also separates the starting design from the content and settings you customise. A polished demo is a starting point, not evidence about your business.
Compare three complete previews
Open a small shortlist in separate tabs. Scroll each from the header to the footer, then inspect its mobile view. Comparing three complete pages is more useful than comparing thirty thumbnail images.
Use this simple scorecard. Give each candidate one point per row it handles comfortably with the content you already have.
| Check | Ask yourself | A warning sign |
|---|---|---|
| Opening | Can my real headline fit without becoming tiny? | The design needs a very short slogan, but my offer needs explanation |
| Services | Can customers distinguish the work I actually offer? | All cards say nearly the same thing |
| Photography | Do I have suitable images for the visible shapes? | A narrow portrait photo is required to fill a wide hero |
| Evidence | Can I replace every review, statistic and badge honestly? | The page relies on claims I cannot support |
| Contact | Is the phone or enquiry route easy to locate? | Attractive decoration pushes the next step far away |
| Mobile | Can I read the copy and operate the menu comfortably? | Buttons, cards or long names become cramped |
This is a selection aid, not a technical test or ranking score. If two layouts fit equally well, prefer the one needing fewer structural changes. You can spend the saved effort on better photographs and clearer service explanations.
Check content length before choosing colours
Try your real business name and a realistic headline mentally against the preview. “Roof repairs in Leeds” occupies far less space than a long company name followed by a detailed service promise. A compact header may not suit a wide wordmark.
Read the demonstration service descriptions for length, not wording to copy. If each card allows two short sentences, plan two useful sentences: what problem you address and what happens next. Put a detailed explanation elsewhere instead of shrinking text until it fits.
Do the same with reviews. A short quotation can sit comfortably in a card; a full-page account may need editing with the customer's approval or a different layout. Keep names, sources and quoted wording accurate. If there are no genuine reviews, remove the demo claims and use another helpful section.
Use the template with the right starting option
Choose Use this template. The setup popup lets you start by editing it yourself, adding business details or using available information from a Google Maps business listing.
| Starting option | Use it when | Your next task |
|---|---|---|
| Edit it yourself | You want to work directly with the chosen design | Replace every demonstration business detail in the editor |
| Add your details | You have the business information ready | Check the populated preview, then refine wording and photos |
| Google Maps listing | The correct business has a useful listing | Check imported details and supply the required enquiry email |
Where the popup offers logo upload, it is optional. A clear transparent logo often fits a coloured header more naturally than a logo surrounded by a large white rectangle. Check both header and footer after uploading; do not assume one background suits every logo version.
You arrive at a preview before editing. Read the page first, then choose Edit website for changes. The first website guide explains the information routes in more detail.
Personalise the page in a controlled order
Make four passes rather than changing everything at once.
- Identity and contact: business name, phone, visible email, address, hours and link destinations. Separately check the editor's enquiry delivery email.
- Services and proof: remove work you do not provide; replace demo reviews, team members, credentials and project claims.
- Photography: use your own suitable work images where possible. Keep relevant subjects visible when images crop on smaller screens.
- Brand styling: adjust colours and type only after the content fits, then review desktop, tablet and mobile again.
There is no requirement to redesign the template. Keeping its spacing, type hierarchy and section composition is often the most effective way to preserve the reason you chose it. A recognisable company name, relevant photography and specific service copy can make the finished page feel like your business without changing every card.
Check edited text against W3C's contrast guidance, including buttons and dark sections. A favourite brand colour does not automatically work on every background.
Avoid these common template mistakes
| Mistake | What to do instead |
|---|---|
| Publishing the demonstration company story | Write the actual history, or remove the history section |
| Keeping an irrelevant service to fill a card | Replace it with a real service or remove the card |
| Using a stock photo as proof of a completed job | Use it as general illustration; reserve project claims for actual work |
| Changing colours one element at a time without a plan | Start with the editor's coordinated colour controls and review contrast |
| Assuming a new design preserves every manual edit | Keep a copy of important wording and review the full result before saving |
A template cannot guarantee search visibility. Google's helpful content guidance emphasises original, useful information. Explain your actual work instead of merely rewriting demonstration paragraphs.
Finish with the editing and quality-check guide, then follow the download instructions. Check the whole page again after a major design change; a good first screen does not prove the footer, links or enquiry form are ready.
Frequently asked questions
Will another contractor be able to choose the same template?
Yes. These are shared ready-made designs, not exclusive commissioned layouts. Your photographs, service descriptions, branding and verified business details distinguish your finished website. Do not represent a shared layout as an exclusive design.
Can I choose a different template after I have started editing?
The editor supports choosing another available template for your industry. Review the replacement before saving it. Keep a copy of important custom wording first: business details and manually edited page content are different things, so do not assume every manual change transfers into the new layout.
Can I download the template and use my own hosting?
Yes. WebsiteGeneratorHub supplies downloadable website files. Upload the complete package and follow its setup instructions. The enquiry endpoint needs suitable PHP hosting, outgoing email configuration and your own form security settings; downloading does not configure those services.
Should the mobile layout look identical to desktop?
No. A smaller screen can rearrange content while keeping the same meaning and actions. Check reading order, photo crops, menus and buttons. In this editor, style changes can affect every screen size, so review all three device views after changing typography or dimensions.
Can I keep the sample reviews, licences and project results?
Only use factual claims that genuinely apply to your business. Replace demonstration reviews with genuine reviews you can use, and remove unsupported licence, warranty, team or project claims. A design preview does not verify the truth of its demonstration content.
Why is the template preview not opening in a new tab?
Check whether your browser blocked the new tab or popup and allow it for WebsiteGeneratorHub if appropriate. Try the Preview link again. If the page still fails to open, note the template name and report the broken preview instead of repeatedly submitting the setup form.
Sources & further reading
Sources checked .
