Tillgängligt på

HVACool

HVACool är ett specialbyggt tema för VVS- och klimatföretag som riktar sig till privatpersoner – utformat utifrån insikten att den här typen av webbplatser sällan besöks av nyfikenhet. Besökaren har det för varmt, för kallt eller oroar sig för en läcka och behöver agera snabbt. Temat håller affärskritisk information synlig hela tiden, gör navigeringen omedelbar och håller sig i övrigt ur vägen.

[galleri type=”bildspel” size=”full” columns=”1″ ids=”54587,54585,54583,54584,54582″]

Fasta kolumner, viktig information först

Trekolumnsstrukturen låser företagets identitet (logga, navigering, CTA) i den vänstra sidopanelen och kontaktuppgifterna i den högra, så att informationen en kund behöver i en akut situation – telefonnummer, bokningslänk, adress – alltid är synlig oavsett var på sidan besökaren befinner sig. Mittkolumnen (60 % av bredden) visar innehåll som rubriker, tjänstebeskrivningar och nyheter.

Rundade hörn och en enda accentfärg som styr allt

Färgpaletten bygger på en medveten spänning: nästan svarta bakgrunder, benvita innehållsytor och en enda syrligt grön accentfärg för element som kräver omedelbar uppmärksamhet – loggablocket, primära CTA:er, ikonmärken och hovertillstånd. Fyra palettvarianter ingår i temat och parar accentfärgen med varmare, svalare och neutrala bastoner för att skifta karaktären.

Typografin hanteras helt av familjen Google Sans – Display (72pt) för rubriker och Text (24pt) för brödtext – för att hålla systemet sammanhållet och prestandamedvetet med en enda typsnittsfamilj i alla vikter och sammanhang.

Rörelse med syfte och en ren teknisk grund

Lätta animationer och hovereffekter tillför karaktär utan att konkurrera med innehållet. Dessa detaljer förstärker temats handlingsberedskap genom att signalera interaktivitet i rätt ögonblick. De anpassade knappstilarna registreras i theme.json och exponeras via functions.php, vilket gör dem tillgängliga i det inbyggda knapp-gränssnittet utan att webbplatsägaren behöver använda Anpassad CSS. Överlag är CSS:en slimmad, välorganiserad och väl kommenterad.

Animera din hjältesektion

Startsidan i HVACool möter besökarna med en kort animerad sekvens: teknikerns profilbild poppar in, pratbubblorna skrivs fram och call-to-action-knapparna tonar in på slutet. Du kan återanvända dessa animationer på dina egna block – ingen kod krävs.

Så fungerar det

Animationerna drivs av tre CSS-klasser. Lägg till dem på valfritt block på startsidan via Blockinställningar → Avancerat → Ytterligare CSS-klass(er):

• anim-avatar — en lekfull pop med skalning och studs. Används på teknikerbilden men fungerar på vilket bildblock som helst.
• anim-pill — den karakteristiska textanimationen. Om blockets första textelement är ett stycke skrivs det ut tecken för tecken. Om det är en rubrik glider den upp och tonar in istället – att skriva ut en flerradig rubrik skulle reservera hela höjden direkt och lämna en tom bubbla synlig ett ögonblick.
• anim-buttons — en subtil upptoningseffekt för din call-to-action-rad, tajmad att visas efter att bubblorna är klara.

Sekvensen spelas alltid upp i samma ordning: profilbildspop → varje anim-pill-block animeras ett efter ett (i sidordning) → knapparna tonar in. Den startar när sektionen rullas in i visningsområdet.

Bra att veta

• Bara på startsidan. Skriptet som driver sekvensen laddas bara på startsidan. Att lägga till klasserna på block på andra sidor animerar dem inte – det är avsiktligt, för att hålla resten av webbplatsen snabb. (Utvecklare kan ta bort is_front_page()-villkoret i functions.php för att ändra detta.)
• Tillgänglighet inbyggd. Besökare som har ”minska rörelse” aktiverat i sina systeminställningar ser innehållet direkt, utan animation. Besökare utan JavaScript ser också allt – inget förblir dolt.
• Mixa och matcha. Du kan använda en, två eller alla tre klasser. Flera anim-pill-block fungerar utmärkt – de animeras i den ordning de förekommer på sidan.