SIRIUS Contao Theme

Ein Onepager in weniger als einem Tag

SIRIUS ist ein Onepage-Theme für Contao 5.7 LTS. Hero, Leistungen, Referenzen, Team, Jobs und Kontakt stehen untereinander auf einer Seite, die Navigation springt per Sprungmarke zum jeweiligen Abschnitt. Du spielst die Demo ein, tauschst Texte und Bilder aus – und die Website ist online.

Wächst das Projekt, wird aus dem Onepager eine vollwertige Contao-Website mit Unterseiten, ohne Theme-Wechsel. SIRIUS wird seit 2019 kontinuierlich gepflegt – von Contao 4.4 bis heute.

Geeignet für

• Handwerksbetriebe und Dienstleister:innen
• Startups und kleine Unternehmen
• Arztpraxen und Apotheken
• Aktionen, Produktlaunches und Landingpages
• Agenturen und Freelancer:innen, die schnell eine saubere Basis für Kundenprojekte brauchen

Highlights

• Live-Editor im Frontend: Farben, Schriften, Abstände und Eckenradius direkt auf der echten Seite einstellen – mit sofortiger Vorschau und ohne CSS.
• Barrierearm nach WCAG 2.2 AA: ausreichende Kontraste, sichtbarer Fokus und vollständige Bedienung per Tastatur – mehr dazu unten.
• Drei Farbwelten per Klick: Waldgrün, Terrakotta und Schiefer – oder deine eigenen Farben. Dunklere Varianten, Overlays und die Schrift auf farbigen Flächen leitet das Theme automatisch ab.
• Dark Mode: schaltet automatisch um, wenn das Betriebssystem das dunkle Farbschema nutzt.
• Onepage-Navigation mit Sprungmarken, Sticky Header und animiertem mobilem Menü.
• Schriften lokal eingebunden: Roboto und Roboto Slab kommen vom eigenen Server. Weitere Google Fonts installierst du mit zwei Klicks – ebenfalls lokal, ohne Verbindung zu Google.
• Alle Standard-Inhaltselemente gestaltet, dazu Hero-, Card- und Kontakt-Element sowie die Onepage-Navigation.
• Keine Copyright- oder Backlink-Pflicht: Der Hinweis im Footer darf entfernt werden.

Barrierefreiheit

SIRIUS setzt alles um, was ein Theme selbst zu den Anforderungen der WCAG 2.2 auf Stufe AA beitragen kann – eine gute Grundlage für Websites, die unter das Barrierefreiheitsstärkungsgesetz (BFSG) fallen:

• Kontraste von mindestens 4,5:1 in der Standardgestaltung und in allen drei Farbwelten, auch im Dark Mode
• Sichtbarer Fokusrahmen, Link „Navigation überspringen“ und Fokus auf dem Sprungziel der Onepage-Navigation
• Inhalte, die bei Hover erscheinen, sind auch per Tastatur und auf Touch-Geräten erreichbar
• Mobiles Menü und Lightbox mit Escape, Fokusführung und Ansagen für Screenreader
• Keine Animationen, wenn im Betriebssystem „Bewegung reduzieren“ aktiv ist

Alternativtexte, Überschriften und Linktexte bleiben Aufgabe der Redaktion. Worauf es dabei ankommt, steht in der Dokumentation.

Gestaltete Elemente und Module

Alle Standard-Inhaltselemente von Contao sind gestaltet, dazu die Module, die ein Onepager braucht. Module wie News, Events oder FAQ sind nicht eigens gestaltet. In der Demo zu sehen sind unter anderem:

• Hero-Element mit vier Darstellungsvarianten und Responsive Images statt Hintergrundbildern
• Cards mit Bild-Overlay und Hover-Effekt
• Team-Kontakte als Personenkarten
• Galerie mit Lightbox
• Akkordeon und Slider als verschachtelte Inhaltselemente
• Beschreibungsliste, z. B. für Stellenangebote
• Formular, z. B. als Kontaktformular
• Buttons in zwei Varianten und nummerierte Überschriften
• Horizontal scrollbare Reihen mit Scroll-Snap
• Scroll-Animationen beim Einblenden von Elementen und Artikeln
• Onepage-Navigation, Footer-Navigation, Logo und Social-Media-Links

Abstände, Artikelhintergründe und Animationen wählen Redakteur:innen im Backend aus einer Liste aus – ohne CSS-Klassen kennen zu müssen.

Demo-Inhalte

Die Demo zeigt einen fiktiven Garten- und Landschaftsbaubetrieb und wird bei der Installation komplett eingespielt:

• Startseite mit Hero, Leistungen, Referenzen-Galerie, Team, Jobs und Kontaktformular
• Seite „Elemente im Überblick“ mit Varianten von Hero, Cards, Kontakt, Akkordeon, Slider und Buttons
• Impressum, Datenschutz und 404-Fehlerseite
• Seitenlayout, Module und responsive Bildgrößen

Die Fotos der Demo sind unscharfe Platzhalter. Sie zeigen, wie das Layout mit Bildern wirkt, und werden durch eigene Medien ersetzt.

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
• SCSS nach ITCSS, gesteuert über CSS Custom Properties
• Updatesicher: Eigene Anpassungen liegen getrennt vom Original unter layout/custom/, der Theme Editor zeigt die Unterschiede zum Original an
• Theme-Bundle und Erweiterungen kommen über Composer und werden mit dem Contao Manager aktualisiert
• Navigation und Animationen in schlankem Vanilla-JavaScript

Voraussetzungen und Installation

• Contao 5.7 LTS
• PHP 8.3 oder neuer
• 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, Hero-, Card- und Kontakt-Element) installiert der Contao Manager automatisch. Alle sind Open Source und kostenlos.
• Dokumentation und Installationsanleitung: docs.flow-contao-themes.de

Lizenz, Updates und Support

• Einzellizenz: für genau ein Projekt – ein eigenes oder ein Kundenprojekt.
• Plus-Lizenz: für beliebig viele Projekte, eigene und für Kund:innen.
• Kostenlose Updates für Contao 5 (ein Update für Contao 6 ist nicht enthalten), dazu 12 Monate Support per E-Mail.