TORNADO Contao Theme

Das Contao-Theme für Sanitär, Heizung und Klima

TORNADO ist ein Contao-Theme für Contao 5.7 LTS, speziell für Betriebe aus Sanitär, Heizung und Klima. Jede Leistung bekommt eine eigene Unterseite, die Notdienst-Nummer steht im Header jeder Seite, und Referenzen öffnen im Dialog. Du spielst die Demo ein, tauschst Texte und Bilder aus und stellst Farben und Schriften im Live-Editor ein.

Ein Theme, zwei Varianten: die Multi-Page-Variante als Standard und die One-Page-Variante für Betriebe, denen eine Seite reicht. Dazu kommt ein Styleguide mit allen Bausteinen. Du behältst, was das Projekt braucht, und löschst den Rest.

Geeignet für

• Heizungs- und Sanitärbetriebe, auch mit 24/7-Notdienst
• Fachbetriebe für Wärmepumpen, Solarthermie und Badsanierung
• Klima- und Lüftungsbetriebe
• Betriebe, die ihre Website selbst mit Contao bauen
• Agenturen, Freelancer:innen und Contao-Entwickler:innen, die Websites für diese Betriebe umsetzen

Highlights

• Notdienst immer im Blick: Die Notdienst-Nummer steht im Header jeder Seite, auf dem Smartphone neben dem Menü-Button, und startet per Tipp den Anruf. Eine eigene Notdienst-Karte wiederholt sie groß zwischen den Leistungen.
• Eine Seite pro Leistung: Seitenkopf, Text mit Bild, Checkliste und Hinweis-Box. Die Hauptnavigation ist besonders barrierearm gebaut: Das Dropdown mit den Leistungen lässt sich mit Maus und Tastatur bedienen, Screenreader sagen an, ob es geöffnet ist, und die Escape-Taste schließt es wieder.
• Referenzen im Dialog: In beiden Varianten öffnet ein Klick das Projekt mit Leistung, Jahr, Beschreibung und Galerie. Jede Referenz behält ihre eigene URL, die Zurück-Taste schließt den Dialog. Ohne JavaScript öffnet die Detailseite.
• Multi-Page und One-Page in einem Theme: beide Varianten, dazu ein Styleguide in derselben Installation.
• Live-Editor im Frontend: Farben, Schriften, Abstände und Eckenradius direkt auf der echten Seite einstellen – mit sofortiger Vorschau und ohne CSS. Die Notdienst-Farbe stellst du getrennt von der Markenfarbe ein.
• Drei Vorlagen per Klick: Kobalt, Schiefer und Marmor setzen Farben, Schriften und Eckenradius auf einmal. Die Farben sind auf Kontrast geprüft, Hover-Töne leitet das Theme automatisch ab.
• Styleguide für Entwicklung und Redaktion: 17 Seiten zeigen alle Elemente, Bausteine und Module von TORNADO, jeweils mit der passenden Auswahl im Klassen-Manager.
• Keine externen Anfragen: Im Frontend geht keine Anfrage an Google oder ein CDN.
• Keine Copyright- oder Backlink-Pflicht: Im Footer steht kein Hinweis auf den Theme-Anbieter, und die Lizenz verlangt auch keinen.

Gestaltete Elemente und Module

Gestaltet sind die Elemente und Module, die die Website eines Betriebs aus Sanitär, Heizung und Klima braucht. Veranstaltungen, FAQ, Newsletter, Suche und Kommentare laufen mit den Grundstilen des Nutshell Frameworks, sind aber nicht eigens gestaltet. In Demo und Styleguide zu sehen sind unter anderem:

• Hero-Element mit Responsive Image statt Hintergrundbild, Überschrift, Text und zwei Buttons
• Leistungskarten, die als Ganzes klickbar und in einer Reihe gleich hoch sind, dazu die Notdienst-Karte
• Dunkler Seitenkopf für Unterseiten und Hinweis-Box mit Button
• Ablauf in nummerierten Schritten
• Referenzen als Masonry-Liste, die in beiden Varianten im Dialog öffnen (Portfolio-Erweiterung)
• Zitat-Element mit ein bis fünf Sternen, als Kundenstimmen-Slider mit Pfeilen und Zähler
• Team als Personenkarten (Kontakt-Element)
• Aktuelles: Nachrichtenliste als Karten und Detailseite
• Partner-Logos, Galerie im Raster und als Masonry, Bildunterschriften
• Akkordeon, Downloads mit Datei-Icon und Tabellen, die bei Platzmangel in sich scrollen
• Aufzählung als Chips mit Haken und Buttons in drei Stilen
• Kontaktformular mit Einwilligung, Spamschutz per Altcha und Versand ohne Neuladen
• Hauptnavigation mit Dropdown, Vollbild-Menü auf dem Smartphone, Fußnavigation und Sticky Header

Artikel-Varianten, Breiten, Abstände und Element-Stile wie die Notdienst-Karte wählen Redakteur:innen im Klassen-Manager aus einer Liste mit Klartext-Namen aus – ohne CSS-Klassen kennen zu müssen.

Demo-Inhalte

Die Demo zeigt einen fiktiven Heizungs- und Sanitärbetrieb mit Notdienst und wird bei der Installation komplett eingespielt:

• Multi-Page-Variante mit Startseite (Hero, Partner-Logos, Leistungen, Referenzen, Kundenstimmen und Kontaktformular)
• Leistungsübersicht mit Ablauf und Förder-Hinweis, dazu fünf Leistungsseiten: Wärmepumpen, Heizungsmodernisierung, Solarthermie, Badsanierung sowie Wartung & Kundendienst
• Referenzen im Dialog, Unternehmen mit Team und Aktuelles, Kontakt
• One-Page-Variante mit acht Abschnitten von Hero bis Kontakt
• Styleguide mit 17 Seiten zu Elementen, Bausteinen, Modulen und Layout
• Impressum, Datenschutz, 404-Fehlerseite und eine Seite zur Barrierefreiheit mit dem, was das Theme mitbringt, und seinen Grenzen – für beide Varianten
• Seitenlayouts, Module, Formulare und responsive Bildgrößen

Multi-Page- und One-Page-Variante haben eigene Seiten, Module, Kontaktformulare und Referenzen-Archive. Die Variante, die du nicht brauchst, löschst du einfach. In der Live-Demo wechselst du über den Umschalter oben in der Demo-Leiste zwischen Standard (Multi-Page), One-Page und Styleguide.

Firma, Personen und Kundenstimmen der Demo sind erfunden. Die Fotos der Online-Demo sind KI-generiert und nicht im Paket enthalten. Dort liegen gestreifte Platzhalter mit dem Dateinamen, die zeigen, welches Bild wohin gehört, und durch eigene Medien ersetzt werden.

Für Entwickler:innen

• Basis ist das Nutshell Framework 2.x
• Twig-Templates aus dem Theme-Bundle, anpassbar über das Template Studio von Contao 5.7. TORNADO passt so wenige Contao-Templates wie möglich an.
• SCSS nach ITCSS, gesteuert über CSS Custom Properties
• Updatesicher: Eigene Anpassungen liegen getrennt vom Original unter layout/custom/, dorthin speichert auch der Live-Editor. Der Theme Editor zeigt die Unterschiede zum Original an.
• Theme-Bundle und Erweiterungen kommen über Composer und werden mit dem Contao Manager aktualisiert
• Vanilla JavaScript ohne jQuery: Navigation, Referenz-Dialog und Formular kommen zusammen mit rund 4 KB aus (gzip)
• Responsive Images mit 1x/2x, Lazy Loading und festen Bildmaßen, dazu ein Druck-Stylesheet

Barrierearm im Detail

• Menü, Dropdown und Referenz-Dialog lassen sich per Tastatur bedienen, Escape schließt sie.
• Der Fokus landet dort, wo er hingehört: im Dialog, auf Sprungzielen und im Formular auf der Bestätigung oder dem ersten Fehler. Der Sticky Header verdeckt keine fokussierten Elemente.
• Sichtbarer Fokusrahmen und Unterstützung für den Kontrastmodus von Windows.
• Wer „Bewegung reduzieren“ eingestellt hat, bekommt weniger Bewegung: kein weiches Scrollen, keine Einblendeffekte und keine Seitenübergänge. Der Kundenstimmen-Slider läuft nicht von allein weiter.
• Text- und Linkfarben der Standardfarben erreichen mindestens 4,5:1 Kontrast, die drei Vorlagen sind ebenfalls auf Kontrast geprüft.

Ob eine Website barrierefrei ist, entscheidet sich erst mit ihren Inhalten: Bilder brauchen Alternativtexte, Farben genug Kontrast. TORNADO legt dafür die Grundlage. Deshalb nennen wir es barrierearm.

Voraussetzungen und Installation

• Contao 5.7 LTS (Contao 5.3 wird nicht unterstützt)
• PHP 8.3 oder neuer
• Aktuelle Browser, weil TORNADO CSS-Funktionen wie color-mix() und :has() nutzt
• Installation über den Contao Manager: ZIP unter „Theme für Contao“ hochladen, Demo-Datenbank importieren, fertig.
• Die benötigten Erweiterungen (u. a. Theme Toolbox, Onepage-Navigation, Portfolio, Swiper Pro, Hero-, Card- und Kontakt-Element) installiert der Contao Manager automatisch. Alle sind Open Source und kostenlos.
• Dokumentation und Installationsanleitung: docs.flow-contao-themes.de/contao-themes/tornado/1.x

Lizenz, Updates und Support

• Einzellizenz: Der Kauf im Theme-Store gilt für genau ein Projekt – ein eigenes oder ein Kundenprojekt. Ob das Projekt die Multi-Page- oder die One-Page-Variante nutzt, spielt für die Lizenz keine Rolle.
• Kostenlose Updates für Contao 5 (ein Update für Contao 6 ist nicht enthalten), dazu 12 Monate Support per E-Mail.