Disponible con el plan

HVACool

HVACool es un tema diseñado específicamente para empresas de climatización residencial, pensado para la realidad de que nadie visita estos sitios por curiosidad. Quien llega tiene calor, frío o una fuga que le preocupa, y necesita actuar rápido. El tema mantiene la información crítica del negocio siempre visible, ofrece navegación inmediata y no se interpone en el camino.

El pase de diapositivas requiere JavaScript.

Columnas fijas, información crítica primero

La estructura de tres columnas mantiene la identidad del negocio (logotipo, navegación, CTA) fija en la barra lateral izquierda y los datos de contacto fijos a la derecha, de modo que la información que un cliente necesita en una emergencia —número de teléfono, enlace de reserva, dirección— esté siempre visible, sin importar en qué parte de la página se encuentre. La columna central (60 % del ancho) muestra contenido como encabezados, descripciones de servicios y novedades.

Esquinas redondeadas y un solo color de acento que domina el conjunto

La paleta se basa en una tensión deliberada: fondos casi negros, superficies de contenido en blanco roto y un único verde ácido reservado para los elementos que exigen atención inmediata: el bloque del logotipo, las CTA principales, las insignias de iconos y los estados de hover. El tema incluye cuatro variaciones de paleta que combinan el color de acento con tonos base más cálidos, más fríos y neutros para cambiar la personalidad.

Toda la tipografía se basa en la familia Google Sans: Display (72 pt) para encabezados y Text (24 pt) para el cuerpo del texto, manteniendo el sistema cohesivo y eficiente en rendimiento al usar una sola familia en todos los pesos y contextos.

Movimiento con propósito y una base técnica limpia

Animaciones ligeras y efectos de hover aportan carácter sin competir con el contenido. Estos detalles refuerzan la vocación de acción inmediata del tema al señalar la interactividad en el momento justo. Los estilos de botón personalizados están registrados en theme.json y expuestos a través de functions.php, lo que los hace disponibles en la interfaz nativa de botones sin necesidad de CSS personalizado por parte del propietario del sitio. En conjunto, el CSS es ligero, organizado y bien comentado.

Anima tu sección principal

La página de inicio de HVACool recibe a los visitantes con una breve secuencia animada: el avatar del técnico aparece con un efecto de rebote, los bocadillos de diálogo se escriben solos y los botones de llamada a la acción se desvanecen suavemente para cerrar la secuencia. Puedes reutilizar estas animaciones en tus propios bloques, sin necesidad de código.

Cómo funciona

Las animaciones se controlan mediante tres clases CSS. Añádelas a cualquier bloque de la página de inicio a través de Ajustes del bloque → Avanzado → Clase(s) CSS adicional(es):

• anim-avatar — un efecto de escala y rebote divertido. Se usa en la imagen del técnico, pero funciona con cualquier bloque de imagen.
• anim-pill — el efecto distintivo de revelado de texto. Si el primer elemento de texto del bloque es un párrafo, se escribe carácter por carácter. Si es un encabezado, se desliza hacia arriba y aparece con un fundido; escribir un encabezado de varias líneas reservaría toda su altura de antemano y dejaría un bocadillo vacío en pantalla por un instante.
• anim-buttons — un sutil fundido ascendente para la fila de llamada a la acción, sincronizado para aparecer después de que terminen los bocadillos.

La secuencia siempre se ejecuta en orden: aparición del avatar → cada bloque anim-pill se anima uno tras otro (en el orden de la página) → los botones aparecen con fundido. Comienza cuando la sección entra en pantalla al desplazarte por la página.

Conviene saberlo

• Solo en la página de inicio. El script que controla la secuencia se carga únicamente en la página de inicio. Añadir las clases a bloques en otras páginas no los animará; es así por diseño, para mantener el resto del sitio rápido. (Si eres desarrollador, puedes eliminar la restricción is_front_page() en functions.php para cambiar este comportamiento).
• Accesibilidad integrada. Los visitantes que tengan activada la opción «reducir movimiento» en los ajustes de su sistema verán el contenido de inmediato, sin animación. Quienes no tengan JavaScript también verán todo: nada queda oculto.
• Combina a tu gusto. Puedes usar una, dos o las tres clases. Puedes usar varios bloques anim-pill sin problema; se animarán en el orden en que aparezcan en la página.