Disponible sur

HVACool

HVACool est un thème conçu spécifiquement pour les prestataires en climatisation et chauffage résidentiel — pensé pour la réalité de ces sites, que l’on visite rarement par simple curiosité. La personne qui arrive a trop chaud, trop froid ou s’inquiète d’une fuite et doit agir vite. Le thème garde les informations essentielles toujours visibles, rend la navigation immédiate et s’efface.

Colonnes fixes, informations critiques en premier

La structure à trois colonnes maintient l’identité de l’entreprise (logo, navigation, appel à l’action) verrouillée dans la colonne latérale gauche, et les coordonnées fixées à droite. Ainsi, les informations dont un client a besoin en urgence — numéro de téléphone, lien de prise de rendez-vous, adresse — restent toujours visibles, quel que soit l’endroit de la page où il se trouve. La colonne centrale (60 % de la largeur) affiche le contenu : titres, descriptions de services et actualités.

Coins arrondis et une unique couleur d’accent pour unifier l’ensemble.

La palette joue sur un contraste délibéré : arrière-plans quasi noirs, surfaces de contenu blanc cassé, et un unique vert acide réservé aux éléments qui exigent une attention immédiate — le bloc logo, les appels à l’action principaux, les badges d’icônes et les états de survol. Quatre variations de palette sont fournies avec le thème, associant la couleur d’accentuation à des tons de base plus chauds, plus froids ou neutres pour moduler la personnalité.

La typographie est entièrement assurée par la famille Google Sans — Display (72 pt) pour les titres et Text (24 pt) pour le corps de texte — afin de préserver la cohérence du système et d’optimiser les performances en utilisant une seule famille pour toutes les graisses et tous les contextes.

Du mouvement utile et une base technique soignée

Des animations légères et des effets de survol apportent du caractère sans concurrencer le contenu. Ces détails renforcent l’impression de réactivité du thème en signalant l’interactivité au bon moment. Les styles de boutons personnalisés sont enregistrés dans theme.json et exposés via functions.php, ce qui les rend disponibles dans l’interface native des boutons sans nécessiter de CSS personnalisé de la part du propriétaire du site. Dans l’ensemble, le CSS est léger, bien organisé et abondamment commenté.

Animez votre section d’accroche

La page d’accueil de HVACool accueille les visiteurs avec une courte séquence animée : l’avatar du technicien apparaît en rebondissant, les bulles de dialogue s’affichent comme si elles se tapaient toutes seules, puis les boutons d’appel à l’action apparaissent en fondu pour conclure. Vous pouvez réutiliser ces animations sur vos propres blocs — aucun code nécessaire.

Comment ça fonctionne

Les animations reposent sur trois classes CSS. Ajoutez-les à n’importe quel bloc de la page d’accueil via Réglages du bloc → Avancé → Classe(s) CSS supplémentaire(s) :

• anim-avatar — un effet de pop avec mise à l’échelle et rebond. Utilisé sur l’image du technicien, mais fonctionne sur n’importe quel bloc Image.
• anim-pill — l’effet signature de révélation du texte. Si le premier élément textuel du bloc est un paragraphe, il s’affiche caractère par caractère comme s’il était tapé. S’il s’agit d’un titre, il glisse vers le haut avec un fondu — un titre sur plusieurs lignes réserverait toute sa hauteur d’emblée et laisserait une bulle vide à l’écran un bref instant.
• anim-buttons — un fondu vers le haut discret pour votre rangée d’appel à l’action, synchronisé pour apparaître après la fin des pastilles.

La séquence se déroule toujours dans l’ordre : pop de l’avatar → chaque bloc anim-pill s’anime l’un après l’autre (dans l’ordre de la page) → les boutons apparaissent en fondu. Elle démarre lorsque la section défile jusqu’à apparaître à l’écran.

Bon à savoir

• Page d’accueil uniquement. Le script qui pilote la séquence ne se charge que sur la page d’accueil. Ajouter ces classes à des blocs sur d’autres pages ne les animera pas — c’est voulu, pour que le reste du site reste rapide. (Les développeurs peuvent supprimer cette condition is_front_page() dans functions.php pour modifier ce comportement.)
• Accessibilité intégrée. Les personnes ayant activé « Réduire les animations » dans les réglages de leur système voient le contenu immédiatement, sans animation. Celles qui n’ont pas JavaScript voient également tout — rien ne reste masqué.
• Combinez à volonté. Vous pouvez utiliser une, deux ou les trois classes. Plusieurs blocs anim-pill fonctionnent sans problème ; ils s’animeront dans l’ordre où ils apparaissent sur la page.