Contents · Trades manual

Setting up

Designs, pages and menus

The three Trades designs (Workshop, Local Pro and Blueprint) and their seven colour palettes, the pages and menu the kit makes for you, and how each page looks on a computer and a phone.

On this page

The Trades theme gives your website one of three designs. Each one is built to turn visitors into phone calls and quote requests: your phone number sits in the header, there are "Get a quote" buttons on every page, and phones get a Call and WhatsApp bar along the bottom. You can change the design at any time without losing any of your services, areas, requests or projects, because those live in the Trades plugin (a plugin is an add-on for WordPress), not in the design.

For the general steps (logo, menus, the sticky menu, the footer) see Your look.

The three designs

DesignWhat it looks likeGood for
WorkshopBold and high contrast: charcoal bands, condensed capitals, hazard stripes and oversized call buttonsPlumbers, roofers, drainage and emergency trades
BlueprintTechnical: a drafting-paper grid, hairlines, dimension lines and monospace labelsBuilders, extensions, lofts, kitchens and surveyors
Local ProFriendly and light: white space, rounded cards, pill buttons and trust badges up frontElectricians, decorators, cleaners and handymen

Workshop

The Workshop home page on a computer: a dark hero with "Broken? Leaking? No heating? We're on it." in large capitals, a yellow call button, accreditation badges on a hazard-stripe band, and a services panel with prices
The Workshop home page on a phone: the logo, a call button and the menu button at the top, the big headline, the call button and the Call, WhatsApp and Get a quote bar

Local Pro

The Local Pro home page on a computer: a light page with the headline "Safe, tidy work from people you'll be glad you let in.", an orange Get a free quote button, four trust cards and a photo of an electrician with a "Free home survey" card
The Local Pro home page on a phone, with rounded cards and the orange quote button

Blueprint

The Blueprint home page on a computer: a drafting-grid background, the headline "Extensions, lofts and renovations. Drawn, priced and built by one team.", a photo of a rear extension with dimension labels, and a schedule of services with typical budgets
The Blueprint home page on a phone, with the grid background and the Book a free survey button

How to change the design and colours

  1. Go to Site Settings → Design & colours.
  2. Under Design, click Workshop, Blueprint or Local Pro.
  3. Under Colour palette, click a palette, or keep The design's own colours. The palettes are Hi-vis, Copper, Safety orange, Navy & red, Emerald, Cobalt and Slate & lime. On the dark Workshop design the background stays dark and the palette colours the buttons, links and highlights.
  4. Under Header, tick Keep the menu at the top when scrolling if you want the menu to stay in view.
  5. Click Preview on the site. The home page opens in a new tab, just for you: visitors still see the old look.
  6. Happy? Click Save.
The Design & colours screen: three design cards (Workshop selected, Blueprint, Local Pro), a row of colour palettes from The design's own colours to Slate & lime, the Keep the menu at the top when scrolling tick box, and the Preview on the site and Save buttons

The pages the kit makes

The setup wizard adds these pages and links them up for you. You can edit the words on any of them under Pages.

PageWhat's on it
HomeYour headline, call and quote buttons, accreditations, services with prices, your work, reviews and the areas you cover
ServicesEvery service with its "from" price and a link to its own page
Our workYour projects, with buttons to show one service at a time
Areas we coverEvery town you cover, a postcode check and a link to each town's page
ReviewsYour score, your testimonials and "Review us" links
ContactPhone, email, address and the contact form
Get a quoteThe quote request form with photos
Privacy policy, Terms and conditions, Cookie policy, Photo creditsStarter legal pages filled in from your settings

Each service, area and project also gets its own page automatically.

Services

The Services page: a heading band, a short introduction and service cards with photos, a one-line description and a "from" price for each
A single service page for Boiler installation, with the price box "from £2,200", what's included and a Get a free quote button

Areas we cover

The Areas we cover page: a Check your postcode box and a list of the six towns covered, Barnsley to Stocksbridge
The Sheffield area page: "Plumbers in Sheffield", a map of nearby areas, a paragraph about working in Sheffield, a note about permit parking, the postcodes covered, the services with prices and two Sheffield projects

Our work

The Our work page: buttons to filter by service (All services, Boiler installation and others) and project cards with photos
A single project, Bathroom refit in a stone terrace, with a before and after photo slider and a short description

Reviews and Contact

The Reviews page: a 4.6 score from 8 reviews with a bar for each star rating, then testimonial cards with the customer's first name, town and service
The Contact page with the phone number, email, address and contact form

Get a quote

The Get a quote page on a computer: four steps across the top, the job questions, a photo upload box, your details and a Send my quote request button, with a "Your request" summary on the right that fills in as the customer types

The menu

The header menu has Services, Our work, Areas, Reviews and Contact, plus a Get a quote button and your phone number. On phones and tablets the menu folds into a menu button.

The phone menu open: Services, Our work, Areas, Reviews and Contact, a yellow Get a quote button and a Call button with the phone number

To change the menu, see Your look.

The footer lists your services, your areas ("Plumbers in Barnsley" and so on), your phone number, email and address, then your company details and the legal links, Cookie settings and Staff sign-in.

The footer in the Workshop design: the logo with the accreditation names, a Services column, an Areas column (Plumbers in Barnsley and so on), a Contact column, and a bottom line with the copyright, company number, VAT number and legal links

The company name, company number and VAT number come from Trades → Settings → Business and Trades → Settings → Quotes. Replace the sample numbers in square brackets with your own.

The Call and WhatsApp bar

On phones, a bar along the bottom of every page has Call, WhatsApp and Get a quote. On computers the demo shows Call and WhatsApp buttons at the side of the screen.

A phone screen with the Services page and the bar at the bottom: a yellow Call button, a green WhatsApp button and a dark Get a quote button
  1. Go to Trades → Settings → Quote requests.
  2. Under Call and WhatsApp button, switch Show the Call and WhatsApp bar on every page on or off. Off: it only shows on pages where you add the "Call and WhatsApp bar" block.
  3. Switch Show the bar on computers too on if you want it on computers as well.
  4. The numbers come from Trades → Settings → Contact. Leave WhatsApp number empty to hide the WhatsApp buttons.
  5. Click Save changes.