Design

Navigationen, Galerien, Formulare und CSS-Techniken im Contao-Frontend.

Moderne CSS-Techniken

Custom Properties, Layout-Features und Tooling für sauberes CSS

Formulare & UX

Bedienbare Formulare: Feldwahl, Validierung und Spam-Schutz

  • Warum dein Formular keinen Reset-Button braucht

    Was der alte Löschen-Button über Formular-UX lehrt — und wie mehr Abstand zwischen den Feldern ein Formular sofort leichter wirken lässt.

  • Select oder Radio-Buttons?

    Wann ein Select-Feld die richtige Wahl ist, wann Radio-Buttons — und wie du die Anrede inklusive dritter Option sauber umsetzt.

  • Placeholder ersetzen keine Label

    Warum Placeholder allein die Benutzerfreundlichkeit verschlechtern — und wie du Label und Placeholder nur mit CSS kombinierst.

  • Formular-Validierung mit :user-valid und :user-invalid

    Eingabefelder ganz ohne Javascript validieren und kennzeichnen — allein mit HTML und den CSS-Pseudo-Klassen :user-valid und :user-invalid.

  • Tom Select: durchsuchbare Select-Felder

    Mit Tom Select machst du Select-Felder mit vielen Optionen durchsuchbar — vom Länder-Dropdown bis zur schnellen Seitensuche in Contao.

  • Minisuche mit Tom Select

    Aus der Contao-Quicknavigation und Tom Select wird in vier Schritten eine schnelle Mini-Suche für Leistungen oder Standorte.

  • Spam-Schutz für Formulare (und Chatbots)

    Warum Spam-Schutz nicht nur Formulare betrifft, welche Contao-Erweiterungen helfen — und warum es nie ein endgültiger Sieg wird.

Entwicklung

Contao an eigene Anforderungen anpassen: Templates, Insert-Tags, Backend und Erweiterungen.

  • Twig in Contao 5: Fünf Learnings aus der Praxis

    Praxiserfahrungen mit der Twig-Template-Engine in Contao 5 — von fehlenden Modul-Templates über Dumping bis zu eigenen Varianten.

  • Eigene Insert-Tags in Contao erstellen

    Wie du wiederkehrende Werte wie Mitarbeiterzahlen oder „seit X Jahren" zentral pflegst — per eigenem Insert-Tag oder fertiger Erweiterung.

  • Contao Favicon ändern

    Zwei Wege zum Favicon in Contao: die Erweiterung von Hofff oder die Dateien aus einem Favicon-Generator, im head-Block der fe_page verlinkt.

  • Handorgel: das Vanilla-JS-Akkordeon in Contao

    Was hinter dem Akkordeon-Script Handorgel in Contao 5.2+ steckt — und wo du fertige SCSS-Styles als Ausgangspunkt findest.

  • Tutorial: Ein (Corner) Popup in Contao umsetzen

    Schritt für Schritt zu einem Hinweis-Popup in der Bildschirmecke, das sich schließen lässt und für die Session oder eine feste Zahl an Tagen ausgeblendet bleibt.

  • Contao Backend-Umgebungen individualisieren

    Mit eigenem Backend-CSS und einem Badge-Titel unterscheidest du lokale, DEV- und LIVE-Instanzen auf einen Blick.

  • TinyMCE unter Contao 4 anpassen

    Über das Template be_tinyMCE.html5 lassen sich Toolbar, eigene CSS-Datei und eigene Formatvorlagen im Contao-Editor updatesicher ergänzen.

  • Contao-Backend pro Umgebung einfärben

    Mit einer kleinen backend.css und der custom_css-Option bekommt jede Instanz (lokal, DEV, LIVE) eine eigene Header-Farbe.

  • Dateien für Contao richtig benennen

    Drei Regeln für Dateinamen in der Contao-Dateiverwaltung, die schwer auffindbare Fehler im Backend und Frontend verhindern.

Überschriften

Semantik, Dachzeilen und Styling von Überschriften

  • Neutrale Überschriften-Option per DCA ergänzen

    Warum h1–h6 für Modul-Überschriften oft falsch sind — und wie du das Überschriftenfeld in Contao per DCA um eine neutrale div-Option erweiterst.

  • Dachzeilen semantisch korrekt umsetzen

    Drei Wege, eine Überschrift mit Dachzeile umzusetzen — und warum eine einzige Überschrift mit Spans die beste Lösung für SEO und Screenreader ist.

  • Überschriften-Klasse per Twig ergänzen

    Ein kleines Twig-Template gibt allen Überschriften von Inhaltselementen in Contao 5 eine einheitliche CSS-Klasse.

Erweiterungen

Empfehlungen und Einschätzungen zu Contao-Erweiterungen

KI-Workflows

KI-Erweiterungen und Praxis-Workflows für Contao

Optimierung

Barrierefreiheit, Tests und Sichtbarkeit in Suchmaschinen

Barrierefreiheit

Alt-Texte, Bedienbarkeit und Testwerkzeuge

Website-Tests

Browser- und Gerätetests, automatisierte und visuelle Regressionstests

Wartung & Betrieb

Wartung, Updates, Hosting und Datenschutz im laufenden Betrieb.

Contao-Updates

Argumente, Update-Pfade, Durchführung und Troubleshooting.

Hosting & Server

Systemanforderungen, HTTPS, Weiterleitungen und typische Serverfehler

Datenschutz

DSGVO-Praxis für Agenturen und Website-Projekte

Projekte

Von der Systemwahl über die lokale Entwicklung bis zum Launch

  • Unsere fünf Ansätze, ein Contao-Projekt umzusetzen

    Vom schnellen Theme-Setup bis zum kompletten Nutshell-Workflow mit Deployment: fünf Wege, wie wir ein Contao-Projekt aufzusetzen — und wann sich welcher lohnt.

  • Umgebungsvariablen in Contao: die Dotenv

    Warum die .env bzw. .env.local ein guter zentraler Ort für Datenbank- und SMTP-Zugangsdaten in Contao-Projekten ist — und welchen Haken sie hat.

  • 5 Gründe, Contao Projekte lokal zu entwickeln

    Warum sich eine lokale Entwicklungsumgebung für Contao-Projekte lohnt: Tempo, Tooling, Teamarbeit, Backups und eine Testumgebung abseits von Kunde und Öffentlichkeit.

  • Unsere Launch-Checklist für Contao

    Sieben Punkte plus Bonus, die du vor der Veröffentlichung einer Contao-Website abhaken solltest — von den Serveranforderungen über Weiterleitungen bis zur Search Console.

Unser Workflow

Starterkit, Versionierung, Deployment, Teamarbeit und Go-Live

  • Projektstart mit dem Nutshell Starterkit

    Wie das Nutshell Starterkit ein neues Contao-Projekt in 5–10 Minuten startklar macht — inklusive Theme-Struktur und gulp-Workflow mit Livereload.

  • GitLab für Projektmanagement und Entwicklung

    Warum wir GitLab für Versionierung, Tickets, Meilensteine und Dokumentation in Contao-Projekten nutzen — und wie der Einstieg ins Team-Projekt abläuft.

  • Deployment mit Deployer

    Wie wir mit Deployer und den Contao- und Nutshell-Recipes den lokalen Entwicklungsstand auf Stage- und Live-Umgebung veröffentlichen.

  • Teamarbeit: Datenbank-Änderungen nur in eine Richtung synchronisieren

    Warum sich Contao-Datenbanken nicht beliebig zwischen Instanzen synchronisieren lassen — und wie eine einfache Regel Konflikte im Team vermeidet.

  • Launch: Go-Live und Wartung

    Vom Stage-Stand zum Live-Server: Deployment, Datenbank-Release und .htaccess-Feinschliff — und was nach dem Launch an Backups und Updates ansteht.

Contao Funktionen

Contao Funktionen mit ihren Möglichkeiten und Grenzen erklärt

Zurück zur Wissensdatenbank