Lothian Vulcanising: Lovable Prototype To An Elementor WordPress Site For A Conveyor Belt Specialist

The Challenge

This Lovable to WordPress project began with a design that already worked on screen but could not be run as a business website. Lothian Vulcanising is a family-run conveyor belt specialist in Bathgate, West Lothian, operating since 1991. The firm services, vulcanises, manufactures and supplies conveyor belts for quarries, recycling plants, farms and material handling sites across the UK.

The new website was first designed as a Lovable prototype. It set the layout, the sections and the wording. A Lovable app is a hosted web app, though, so changing a phone number or adding a job photo means going back into the builder or the code. The firm needed the same design on WordPress, where pages, images and contact details can be edited from a familiar admin.

What We Built

We treated the Lovable prototype as the design reference and rebuilt every page in WordPress with Elementor, matching it section by section.

• Five pages — Home, About, Services, Products and Contact, each built from the prototype’s layouts.
• Hero slider with callout buttons — Request Callout and Our Services sit on every slide, with the emergency line always in view.
• Stats and service cards — headline figures for the business, then three cards for on-site maintenance, manufacture, and survey and supply.
• How-we-work steps — four steps from the first call to installation and support.
• Work gallery — job photos grouped by type, such as drum refurbishment, quarry installs, workshop work and on-site vulcanising.
• Testimonials and client logos — named client quotes and a logo strip of the companies the firm works for.
• Find us — the workshop address with an embedded map and a directions link.

Industrial buyers often arrive with a breakdown, not a browsing session. The layout keeps a callout button and a phone number within reach on every screen, so an engineer on site can reach the team in one tap.

The Services page expands each of the three service lines, and the Products page covers the belts and components the firm holds in stock, so a buyer can check quickly whether the firm handles their kind of plant.

How The Lovable To WordPress Build Worked

The project followed the four steps we use in our Lovable to WordPress service.

1. Prototype audit — we went through the Lovable prototype page by page and listed every section, component and interaction it used.
2. Structure plan — we mapped each section to an Elementor layout and decided which parts should be reusable, such as the header, footer and call-to-action blocks.
3. Rebuild — we built the pages in Elementor, matched spacing, type and colours to the prototype, and made every section responsive.
4. QA and launch — we checked the site on phones, tablets and desktops, then moved it to the firm’s own domain.

A Lovable to WordPress build done this way keeps the design the client approved and adds what a prototype lacks: an admin, real pages and content anyone on the team can update.

Design

The live site follows the prototype closely. Sections appear in the same order, with the same headings, buttons and photo placements. The main change is underneath: each block is now an Elementor section that can be edited, duplicated or reordered without touching code.

We also checked the details a prototype tends to gloss over: how the slider behaves on a narrow phone, how long headings wrap, how the gallery grid reflows, and whether the buttons are large enough to tap easily. Small fixes like these are what make a design hold up outside the builder preview.

SEO

Each page has its own URL, title and heading structure, and the images carry descriptive alt text. That gives the site a proper base for search once the firm starts publishing more of its work, which is another reason to finish a Lovable to WordPress move before investing in content.