Beschikbaar bij

HVACool

HVACool is een doelgericht thema voor HVAC-bedrijven voor woningen — ontworpen met het idee dat bezoekers deze sites zelden uit nieuwsgierigheid bezoeken. Iemand heeft het te warm, te koud, of maakt zich zorgen over een lekkage en wil snel handelen. Het thema houdt bedrijfskritische informatie permanent in beeld, maakt de navigatie meteen toegankelijk en staat verder niet in de weg.

 

Vaste kolommen, essentiële informatie voorop

De driekolomsstructuur houdt de bedrijfsidentiteit (logo, navigatie, CTA) in de linkerzijbalk verankerd en contactgegevens vast aan de rechterkant, zodat de informatie die een klant in nood nodig heeft — telefoonnummer, boekingslink, adres — altijd zichtbaar is, ongeacht waar ze zich op de pagina bevinden. De middelste kolom (60% van de breedte) toont content zoals koppen, servicebeschrijvingen en nieuws.

Afgeronde hoeken en één accentkleur die alles beheerst

Het kleurenpalet steunt op een bewust spanningsveld: bijna zwarte achtergronden, gebroken witte contentvlakken en één felgroene accentkleur, gereserveerd voor elementen die onmiddellijke aandacht vragen — het logoblok, primaire CTA’s, icoonbadges en hoverstates. Er worden vier paletvariaties meegeleverd, die het accent combineren met warmere, koelere en neutrale basistinten om de uitstraling te verschuiven.

De typografie wordt volledig verzorgd door de Google Sans-familie — Display (72pt) voor koppen en Text (24pt) voor lopende tekst — om het geheel samenhangend te houden en de prestaties te bewaken, met één enkele lettertypefamilie voor alle gewichten en contexten.

Doelgerichte beweging en een strakke technische basis

Lichtgewicht animaties en hovereffecten voegen karakter toe zonder met de content te concurreren. Deze details versterken de actiebereidheid van het thema door interactiviteit op de juiste momenten te signaleren. De aangepaste knopstijlen zijn vastgelegd in theme.json en beschikbaar gemaakt via functions.php, zodat ze in de standaard knopinterface beschikbaar zijn zonder dat de site-eigenaar aangepaste CSS nodig heeft. De CSS is over de hele linie compact, overzichtelijk en goed gedocumenteerd met commentaar.

Animeer je hero-sectie

De voorpagina van HVACool verwelkomt bezoekers met een korte animatiereeks: de avatar van de monteur springt in beeld, de tekstballonnen vullen zich letter voor letter en de call-to-action-knoppen verschijnen met een fade-in als afsluiting. Je kunt deze animaties hergebruiken op je eigen blokken — geen code vereist.

Hoe het werkt

De animaties worden aangestuurd door drie CSS-klassen. Voeg ze toe aan elk gewenst blok op de voorpagina via Blokinstellingen → Geavanceerd → Extra CSS-klasse(n):

• anim-avatar — een speelse schaal-en-stuiteranimatie. Wordt gebruikt voor de afbeelding van de monteur, maar werkt op elk afbeeldingsblok.
• anim-pill — de kenmerkende tekstanimatie. Als het eerste tekstelement van het blok een alinea is, wordt het teken voor teken uitgetypt. Als het een kop is, schuift het omhoog en fade het in — het uittypen van een kop met meerdere regels zou vooraf de volledige hoogte innemen en even een lege ballon op het scherm achterlaten.
• anim-buttons — een subtiele opwaartse fade-in voor je call-to-action-rij, zo getimed dat hij verschijnt nadat de pills in beeld zijn gekomen.

De reeks loopt altijd in volgorde: avatarpop → elk anim-pill-blok animeert één voor één (in paginavolgorde) → knoppen verschijnen met fade-in. De reeks start zodra de sectie in beeld komt.

Goed om te weten

• Alleen op de voorpagina. Het script dat deze reeks aanstuurt, wordt alleen op de voorpagina geladen. De klassen toevoegen aan blokken op andere pagina’s levert geen animatie op — dat is bewust zo, om de rest van de site snel te houden. (Ontwikkelaars kunnen de is_front_page()-guard in functions.php aanpassen om dit te wijzigen.)
• Toegankelijkheid ingebouwd. Bezoekers die “verminderde beweging” hebben ingeschakeld in hun systeeminstellingen zien de content direct, zonder animatie. Bezoekers zonder JavaScript zien ook alles — niets blijft verborgen.
• Mixen en matchen. Je kunt één, twee of alle drie de klassen gebruiken. Meerdere anim-pill-blokken zijn geen probleem; ze animeren in de volgorde waarin ze op de pagina staan.