Ehostavan verkkosivujen toteutus Webflow'lla

Ehostava – maalausliikkeen verkkosivut WordPressistä Webflow'hun

Ehostava Oy on opiskelijaystävysten perustama uusimaalainen pienyritys, joka on erikoistunut ulkomaalaukseen: tiili- ja peltikattojen maalaukseen ja huoltoon sekä puu-, kivi- ja rapattujen talojen ulkoverhousten maalaukseen. Yrittäjät ovat itse mukana kohteissa, ja työ tehdään toimialalle kohdennetulla ammattitaidolla, perinteitä kunnioittaen.

Lähtötilanne

Aiempi sivusto oli rakennettu WordPressin päälle. Se latautui hitaasti, eikä sisällönhallintaa ollut lainkaan: palvelun, referenssikohteen tai asiakaspalautteen lisääminen vaati joka kerta ulkopuolista apua. Asiakas kuvasi sivustoa omin sanoin "itse tehdyn näköiseksi" — se ei kertonut yrityksen työn laadusta eikä löytynyt hakukoneista. Maalausurakka on hankinta, jota harkitaan ja vertaillaan, joten sivuston on sekä vakuutettava että tehtävä yhteydenotosta helppoa.

Ratkaisu

Toteutimme sivuston uudelleen Webflow'lla. Tavoitteena oli säilyttää henkilökohtaista palvelua tarjoavan pienyrityksen tunnelma ja kasvattaa samalla uskottavuutta visuaalisesti näyttävällä ulkoasulla. Toimitukseen kuuluivat:

• Ulkoasun suunnittelu — visuaalinen ilme ja siitä koottu komponenttikirjasto, jonka päälle uudet sivut syntyvät olemassa olevista paloista.
• Tekninen toteutus Webflow'lla, jossa jokainen maalauspalvelu sai oman sivunsa.
• Räätälöity sisällönhallinta — palvelut, referenssikohteet ja asiakaskommentit omina sisältötyyppeinään.
• Monivaiheinen hintalaskuri, joka antaa maalausurakalle hinta-arvion asiakkaan omalla tarjouslaskentakaavalla.
• Valokuvaus sivustoa varten yhteistyökumppanimme kanssa.
• Hakukonenäkyvyyden pohjatyö palvelukohtaisine sivuineen.

Sisällöt asiakkaan omiin käsiin

Halusimme tehdä sisältöjen hallinnasta niin helppoa, että sivustosta tulisi Ehostavalle markkinoinnin työkalu eikä kerran tehty esite. Räätälöimme sisällönhallinnan yrityksen omien tarpeiden mukaan: palvelut, referenssikohteet ja asiakkaiden antamat kommentit ovat kukin oma sisältötyyppinsä, joita Ehostava päivittää itse.

Referenssit ovat tässä ydin. Maalausurakkaa harkitseva haluaa nähdä, miltä valmis työ näyttää. Jokainen kohde saa oman sivunsa kuvineen ja kuvauksineen, ja kokoelma kasvaa sitä mukaa kuin kohteita valmistuu — ilman että kukaan koskee koodiin.

Hintalaskuri, joka muuttaa kävijän tarjouspyynnöksi

Toteutimme sivustolle hintalaskurin tehostamaan liidien generointia. Kävijä syöttää katon neliöt, kertoo katon jyrkkyyden ja maalauskertojen määrän, ja laskuri antaa hinta-arvion asiakkaan toimittamalla tarjouslaskentakaavalla.

Monivaiheisuus on tässä tarkoituksellista: yksi pitkä lomake karkottaa, mutta kysymys kerrallaan etenevä laskuri vie kävijän loppuun asti — ja viimeinen askel on yhteystieto, jolloin hintaa selvittävästä kävijästä syntyy tarjouspyyntö. Lomakkeen vaiheistus, laskenta ja vastausten validointi tuotettiin Kuasin kehittämällä lomaketyökalulla.

Ilme rakentuu yhden värin varaan

Ilmeen kantaa yksi väri ja yksi kirjasin. Oranssi on sama kuin asentajien työasuissa: se vie otsikot, painikkeet ja palvelukorttien nimilaput, ja vastapainona on lämmin vaalea pinta ja tumma leipäteksti. Typografiana on Poppins kolmessa paksuudessa — otsikot versaalina, väliotsikot puolilihavana ja leipäteksti kevyenä väljällä rivivälillä. Värit elävät CSS-muuttujina, joten ilme on yhdessä paikassa eikä hajallaan sääntöjen seassa.

Valokuvat osana ilmettä

Kotisivut ovat merkittävä osa visuaalista ilmettä, ja maalaustyössä lopputulos on nimenomaan katsottava asia. Laadukkaan ja viimeistellyn lopputuloksen saavuttamiseksi organisoimme yhdessä yhteistyökumppanimme Peter Sebastianin kanssa kuvauspäivän, jossa tuotettiin sisältösuunnitelman mukaiset valokuvamateriaalit kotisivuja varten. Kuvat kantavat sivustoa heroista palvelukortteihin asti.

Tulokset

Sivusto latautuu nopeasti, ja Ehostava päivittää sisältönsä itse: uudet referenssikohteet, palvelut ja asiakaskommentit syntyvät yrityksen omin käsin. Hintalaskuri muuttaa hintaa selvittävän kävijän tarjouspyynnöksi.

Mittasimme sivuston nopeuden uudelleen 1.10.2026 Lighthousella, kolme ajoa suuntaansa: työpöydällä suorituskykypisteet 94–95/100 ja suurin sisältömaalaus 1,1–1,3 sekuntia, mobiilissa 80–82/100 ja 2,0 sekuntia. Sivuston asettelu ei hyppää latauksen aikana käytännössä lainkaan (CLS 0,001).