Website guidesEditing your website
Edit your contractor website and check it before launch
A practical editor walkthrough covering text, images, colours, sections, enquiry email, mobile checks and the difference between a saved preview and a tested live website.
A website is ready to download when the details are accurate, the layout remains readable and the main actions lead where customers expect. Work through one section at a time, save deliberate changes and inspect the full preview before moving on.
This guide covers WebsiteGeneratorHub's visual editor for roofing and HVAC websites. It also separates checks you can make in the preview from the enquiry-delivery test that must happen on the live host.
Open the editor and make one change at a time
Your completed website opens as a preview first. Choose Edit website to reveal the editing controls. Click the element you want to change and use its properties; double-click text to edit the words directly.
Start at the top and work down. Replace the business name and opening copy, then services, project descriptions, reviews and contact details. Keep headings concise enough to fit without forcing very small type. Explain one service per card rather than turning a short description into a long list of every job you accept.
Use Undo if a change produces an unwanted result and Redo if you want to restore the undone change. Choose Save changes after finishing a useful group of edits, and wait for confirmation before leaving. Keyboard shortcuts include Ctrl/Command + Z for undo and Ctrl/Command + S for saving.
Saving, previewing and publishing are different actions. Wix's editor help addresses the same common distinction, but follow this product's controls rather than assuming another builder's autosave or version-history features apply here.
Change words and destinations together
A button has two jobs: explain the action and take the visitor to the right place. Changing “Call us” to “Request a quote” without changing its destination leaves a confusing interaction.
| Element | Check the visible content | Check the destination or setting |
|---|---|---|
| Phone link | Correct business number | The telephone link uses that same number |
| Email link | Correct public email | The email link opens a message to it |
| Quote button | Clear action, such as Request an estimate | It reaches the intended enquiry section |
| Navigation | Names match the sections that remain | Each link still lands at a useful place |
| External link | The destination is understandable | It opens the intended business page or resource |
The link field supports website addresses, telephone links, email links and page-section anchors. After removing or renaming a section, test the navigation and every button that previously pointed to it.
Check the enquiry email separately
The editor's Send enquiries to field controls the business enquiry destination. Editing an email address printed inside the page does not change that setting. Check both, save the changes and keep a note of the mailbox that should receive enquiries.
This distinction matters when a business displays a general address but sends quotes to an office manager. Both can be valid, provided the setup is intentional and the receiving mailbox is monitored.
Forms are inactive in the design preview. You can inspect their position, labels and styling there, but you cannot prove email delivery. After hosting the downloaded website, configure its enquiry endpoint and submit a real test from the live URL. Confirm receipt in the business mailbox, including spam checks, before sharing the site with customers.
Replace photographs without stretching them
Use Photos or the selected image controls to replace a picture. Image uploads accept PNG, JPG and WebP files up to 8 MB. Choose an image with a shape close to the space it fills: a wide project shot usually suits a landscape card better than a narrow phone portrait.
The image properties include height and fit. Cover fills the available space by cropping; Contain keeps the complete image visible and may leave space around it. Use the preview to decide which is appropriate. A logo usually needs its complete mark visible, while a wide job photograph can often tolerate a modest crop.
Add an Image description based on its purpose. W3C's image decision tree distinguishes meaningful images from decoration. For a relevant project photo, describe what the visitor needs to understand, such as the roofing material and completed work.
Do not describe a stock photo as your completed project. Replace project photographs and captions together so the image, location and work description remain consistent.
Adjust colours and sections carefully
The Colours controls cover the accent, dark and page-background colours, with an option to restore the original colours. Start there before overriding many individual elements. If you change text or background colours in Properties, inspect that element in each section state, including hover and focus where applicable.
W3C's minimum contrast guidance specifies at least 4.5:1 for normal text and 3:1 for qualifying large text. Check text against its actual background, including button states.
Add, move or remove sections according to the information customers need. Remove unsupported demonstration claims, including reviews or credentials. After moving a section, read the transition from the section before it: a process explanation should not refer to an estimate form the visitor cannot locate.
For a different starting composition, compare the roofing templates or HVAC templates before applying another design. Keep important custom wording separately and check the complete replacement before saving.
Run three practical preview checks
Desktop: use Preview website, scroll the entire page and follow the main customer route. Look for repeated information, empty space caused by removed content and inconsistent headings.
Tablet and mobile: use the device controls, then check a real phone when a shareable or live URL is available. Read the opening, operate the menu, inspect photo crops and reach the contact action. Style changes made in the editor apply across screen sizes, so a desktop improvement can create a mobile problem.
Keyboard and zoom: check visible focus while tabbing through controls, and inspect the page at 200% zoom. W3C's Easy Checks explains these initial checks; a full accessibility evaluation goes further.
| Problem | First correction to try |
|---|---|
| A photo dominates the section | Reduce its height and inspect fit and crop |
| A headline wraps awkwardly | Shorten the wording before reducing its size |
| Button text disappears on hover | Check foreground and background colours in both states |
| An empty block remains | Inspect its parent section rather than deleting nearby content blindly |
| A menu link stops working | Restore its destination or remove the obsolete link |
Save once more after corrections. Then follow the download and sharing guide, or the launch guide for hosting and final live checks.
Frequently asked questions
How do I undo a change without starting again?
Use Undo in the editor toolbar, or Ctrl/Command + Z. Redo restores an undone action. Check the result before saving. These controls help with editing actions; do not assume they provide a permanent history of every version across separate visits.
Does Save changes publish the site on my domain?
No. It saves the edited project in WebsiteGeneratorHub. Your downloaded files still need to be uploaded to your hosting. If you change a site after publishing it yourself, download the updated files and update the hosted copy as appropriate.
Why does changing an email on the page not redirect enquiries?
The visible text and the enquiry recipient are separate. Open the enquiry settings, update Send enquiries to and save. Also update any visible email and its mailto link if needed. Test delivery on the configured live site, not in the inactive preview form.
Can I change desktop styles without affecting mobile?
The editor warns that style changes apply at every screen size. Check Desktop, Tablet and Mobile after adjusting font size, padding, image height or width. Prefer a shorter headline or a suitable image crop over a large fixed size that only works on desktop.
What should I write in an image description?
Explain the useful information the image adds. A linked image may need its action or destination described; pure decoration can use an empty alternative. Follow the W3C image decision tree linked above.
Why does the quote form not send from the preview?
Preview forms are inactive. The downloaded enquiry endpoint needs compatible hosting and its email and security configuration. After setup, submit a test on the live URL and confirm that the business receives it; a success-looking form layout alone does not prove delivery.
Sources & further reading
Sources checked .
