Verfügbar mit

HVACool

HVACool ist ein speziell entwickeltes Theme für Anbieter von Heizungs-, Lüftungs- und Klimatechnik im Wohnbereich – konzipiert für die Realität, dass solche Websites selten aus reiner Neugier besucht werden. Es ist zu heiß, zu kalt oder irgendwo gibt es ein Leck – und dann muss es schnell gehen. Das Theme hält geschäftskritische Informationen dauerhaft sichtbar, ermöglicht sofortige Navigation und hält sich ansonsten zurück.

Diese Diashow benötigt JavaScript.

Fixierte Spalten, wichtigste Informationen zuerst

Die dreispaltige Struktur verankert die Unternehmensidentität (Logo, Navigation, CTA) in der linken Seitenleiste und hält die Kontaktdaten auf der rechten Seite stets sichtbar. So sind die Informationen, die ein Kunde im Notfall braucht – Telefonnummer, Buchungslink, Adresse – immer sichtbar, egal wo auf der Seite er sich gerade befindet. Die mittlere Spalte (60 % der Breite) zeigt Inhalte wie Titel, Dienstleistungsbeschreibungen und Neuigkeiten.

Abgerundete Ecken und eine einzige Akzentfarbe, die alle anderen dominiert

Die Farbpalette setzt auf bewusste Kontraste: fast schwarze Hintergründe, cremeweiße Inhaltsflächen und ein einziges leuchtendes Grün für Elemente, die sofort ins Auge fallen sollen – Logo-Block, primäre CTAs, Icon-Badges und Hover-Zustände. Vier Palettenvarianten werden mit dem Theme ausgeliefert und kombinieren die Akzentfarbe mit wärmeren, kühleren und neutralen Grundtönen, um den Charakter zu variieren.

Die Typografie basiert vollständig auf der Schriftfamilie Google Sans – Display (72 pt) für Überschriften und Text (24 pt) für den Fließtext. So bleibt das System mit nur einer Schriftfamilie über alle Schriftschnitte und Einsatzbereiche hinweg einheitlich und performancebewusst.

Animationen mit Sinn und ein sauberes technisches Fundament

Dezente Animationen und Hover-Effekte verleihen Charakter, ohne mit dem Inhalt zu konkurrieren. Diese Details unterstreichen die Handlungsbereitschaft des Themes, indem sie Interaktivität genau im richtigen Moment signalisieren. Die individuellen Button-Stile sind in theme.json registriert und über functions.php verfügbar, sodass sie in der nativen Button-Oberfläche genutzt werden können – ganz ohne Individuelles CSS durch den Website-Betreiber. Insgesamt ist das CSS schlank, übersichtlich strukturiert und gut kommentiert.

Hero-Bereich animieren lassen

Die Startseite von HVACool begrüßt Besucher mit einer kurzen Animationssequenz: Der Techniker-Avatar erscheint mit einem Pop-Effekt, der Text in den Sprechblasen erscheint wie eingetippt, und die Call-to-Action-Buttons werden zum Abschluss eingeblendet. Diese Animationen lassen sich auch auf eigene Blöcke anwenden – ganz ohne Code.

So funktioniert es

Die Animationen werden über drei CSS-Klassen gesteuert. Füge sie auf der Startseite über Block-Einstellungen → Erweitert → Zusätzliche CSS-Klasse(n) zu einem beliebigen Block hinzu:

• anim-avatar – ein verspielter Pop-Effekt mit Skalierung und Bounce. Wird für das Techniker-Bild verwendet, funktioniert aber mit jedem Bild-Block.
• anim-pill – die charakteristische Texteinblendung. Wenn das erste Textelement des Blocks ein Absatz ist, wird er Zeichen für Zeichen eingetippt. Handelt es sich um eine Überschrift, gleitet sie stattdessen nach oben und blendet ein – denn das zeichenweise Eintippen einer mehrzeiligen Überschrift würde die volle Höhe vorab reservieren und kurzzeitig eine leere Blase auf dem Bildschirm hinterlassen.
• anim-buttons – ein dezentes Einblenden von unten für die Call-to-Action-Zeile, zeitlich so abgestimmt, dass es nach Abschluss der Sprechblasen-Animation einsetzt.

Die Sequenz läuft immer in derselben Reihenfolge ab: Avatar-Pop → jeder anim-pill-Block animiert nacheinander (in Seitenreihenfolge) → Buttons werden eingeblendet. Sie startet, sobald der Abschnitt ins Bild scrollt.

Wissenswertes

• Nur auf der Startseite. Das Skript, das die Sequenz steuert, wird nur auf der Startseite geladen. Die Klassen auf Blöcke anderer Seiten anzuwenden, löst keine Animation aus – das ist beabsichtigt, damit der Rest der Website schnell bleibt. (Entwickler können die is_front_page()-Prüfung in functions.php entfernen, um dies zu ändern.)
• Barrierefreiheit integriert. Besucher, die in ihren Systemeinstellungen „Bewegung reduzieren“ aktiviert haben, sehen den Inhalt sofort ohne Animation. Besucher ohne JavaScript sehen ebenfalls alles – nichts bleibt verborgen.
• Frei kombinierbar. Du kannst eine, zwei oder alle drei Klassen verwenden. Mehrere anim-pill-Blöcke sind kein Problem – sie werden in der Reihenfolge animiert, in der sie auf der Seite erscheinen.