Disponibile con il piano

HVACool

HVACool è un tema progettato appositamente per i fornitori di servizi HVAC residenziali, pensato per una realtà precisa: nessuno visita questi siti per curiosità. Chi arriva ha caldo, freddo o teme una perdita, e ha bisogno di agire subito. Il tema mantiene le informazioni essenziali sempre in vista, rende la navigazione immediata e non si mette in mezzo.

Colonne fisse, informazioni critiche in primo piano

La struttura a tre colonne tiene l’identità aziendale (logo, navigazione, CTA) ancorata nella barra laterale sinistra e i recapiti fissi sulla destra: così le informazioni di cui un cliente ha bisogno in un’emergenza (numero di telefono, link per prenotare, indirizzo) restano sempre visibili, ovunque si trovi nella pagina. La colonna centrale (60% della larghezza) mostra contenuti come titoli, descrizioni dei servizi e notizie.

Angoli arrotondati e un unico colore d’accento che li unifica tutti.

La palette crea un contrasto studiato: sfondi quasi neri, superfici di contenuto bianco sporco e un unico verde acido riservato agli elementi che richiedono attenzione immediata: il blocco logo, le CTA principali, i badge con icona e gli stati hover. Il tema include quattro varianti di palette che abbinano il colore d’accento a tonalità di base più calde, più fredde o neutre, per cambiare personalità.

La tipografia è gestita interamente dalla famiglia Google Sans: Display (72pt) per i titoli e Text (24pt) per il corpo del testo. L’obiettivo è mantenere il sistema coerente e leggero in termini di prestazioni, usando un’unica famiglia per tutti i pesi e i contesti.

Animazioni con uno scopo e una base tecnica pulita

Animazioni leggere ed effetti hover aggiungono carattere senza competere con il contenuto. Questi dettagli rafforzano la vocazione del tema all’azione immediata, segnalando l’interattività al momento giusto. Gli stili personalizzati dei pulsanti sono registrati in theme.json ed esposti tramite functions.php, rendendoli disponibili nell’interfaccia nativa dei pulsanti senza richiedere CSS personalizzato. Nel complesso, il CSS è snello, organizzato e ben commentato.

Anima la sezione hero

La pagina iniziale di HVACool accoglie chi visita il sito con una breve sequenza animata: l’avatar del tecnico compare con un pop, il testo nei fumetti si digita da solo e i pulsanti di invito all’azione compaiono infine in dissolvenza. Puoi riutilizzare queste animazioni sui tuoi blocchi, senza bisogno di codice.

Come funziona

Le animazioni sono gestite da tre classi CSS. Aggiungile a qualsiasi blocco nella pagina iniziale tramite Impostazioni del blocco → Avanzate → Classi CSS aggiuntive:

• anim-avatar — un pop giocoso con scala e rimbalzo. Usato sull’immagine del tecnico, ma funziona con qualsiasi blocco immagine.
• anim-pill — l’effetto firma di rivelazione del testo. Se il primo elemento testuale del blocco è un paragrafo, viene digitato carattere per carattere. Se invece è un titolo, entra dal basso e compare in dissolvenza: digitare un titolo su più righe riserverebbe l’intera altezza in anticipo, lasciando un fumetto vuoto sullo schermo per un istante.
• anim-buttons — una leggera dissolvenza verso l’alto per la riga di invito all’azione, temporizzata per partire dopo la fine delle pillole.

La sequenza si esegue sempre in ordine: pop dell’avatar → ogni blocco anim-pill si anima uno dopo l’altro (nell’ordine della pagina) → i pulsanti appaiono in dissolvenza. Parte quando la sezione entra nell’area visibile.

Buono a sapersi

• Solo nella pagina iniziale. Lo script che gestisce la sequenza viene caricato solo nella pagina iniziale. Se aggiungi queste classi a blocchi in altre pagine, non vedrai alcuna animazione: è una scelta progettuale, per mantenere veloce il resto del sito. (Chi sviluppa può rimuovere il controllo is_front_page() in functions.php per cambiare questo comportamento.)
• Accessibilità integrata. Chi ha attivato “riduci movimento” nelle impostazioni di sistema vede il contenuto immediatamente, senza animazioni. Chi naviga senza JavaScript vede comunque tutto: nulla resta nascosto.
• Combina a piacere. Puoi usare una, due o tutte e tre le classi. Più blocchi anim-pill vanno benissimo: si animeranno nell’ordine in cui compaiono nella pagina.