Einführung

Willkommen bei Contao Design+ – dem Premium Theme für anspruchsvolle Websites

Jetzt neu: Update-Guide von Contao 4.13 oder 5.x auf Contao 5.7.2 mit Design+ 2026.06, siehe Update-Guide

Was ist Contao Design+?

Contao Design+ ist ein umfangreiches Premium Theme für Contao 4 und 5, das von Grund auf dafür entwickelt wurde, mit Leichtigkeit moderne, professionelle Websites umzusetzen – ganz ohne Programmierkenntnisse.

Mit über 100 perfekt aufeinander abgestimmten Design-Elementen, einer Vielzahl an stilvollen Demos, einem integrierten Theme Konfigurator zur Individualisierung und einem flexiblen technischen Unterbau bietet Contao Design+ alles, was du für den erfolgreichen Start brauchst. Ob Onepager, Unternehmenswebsite oder Landingpage – mit wenigen Klicks entsteht daraus deine eigene digitale Präsenz.

Hunderte Kunden – von Agenturen über Mittelständler bis hin zu Kreativteams – setzen das Theme bereits erfolgreich ein. Auch du kannst in kürzester Zeit zur fertigen Website gelangen – einfach, intuitiv und professionell.

Für wen wurde das Theme entwickelt?

Contao Design+ richtet sich an alle, die mit Contao arbeiten – unabhängig vom technischen Know-how:

• Unternehmen und Marketing-Teams, die moderne Websites eigenständig umsetzen wollen
• Agenturen, die eine verlässliche, flexible Basis für Kundenprojekte benötigen
• Einsteiger:innen, die mit einem professionellen Theme schnell durchstarten möchten
• Entwickler:innen, die Wert auf saubere Strukturen, SCSS und Updatefähigkeit legen

Das Besondere: Du brauchst keine Programmierkenntnisse, um mit dem Theme eine vollständige Website aufzubauen – kannst es aber dennoch auf Entwickler-Niveau erweitern, wenn du möchtest.

Was ist enthalten?

Mit dem Download erhältst du:

• Ein vollständiges Theme mit vordefinierter Seitenstruktur und zahlreichen kreativen Demo-Vorlagen
• Zugriff auf über 100+ fertige Elemente, die sich beliebig kombinieren, anpassen und erweitern lassen
• Den exklusiven Theme Konfigurator, mit dem du Farben, Schriften, Layouts und viele Design-Details ganz ohne Code veränderst
• Umfangreiche Features wie Slider, Galerien, Formulare, Karten, Animationen u.v.m.
• Eine moderne, Mobile First-optimierte Gestaltung mit hervorragender Usability
• Technische Grundlagen für Top-Performance & SEO – z. B. durch semantischen HTML5-Aufbau, schnelle Ladezeiten und Barrierefreiheit

Deine Vorteile auf einen Blick

• Schneller Start mit Demo-Vorlagen – einfach importieren und anpassen
• Über 100 fertige Elemente – frei kombinierbar für jede Website-Größe
• Perfekt abgestimmtes Design – visuell einheitlich und intuitiv anpassbar
• Optimiert für mobile Geräte – responsives Layout & mobile Usability
• Suchmaschinenfreundlich – technische Basis für Top-Rankings bei Google
• Theme Konfigurator – zentrale Steuerung von Farben, Layouts & mehr
• Flexibel erweiterbar – mit SCSS, JS und eigenem Template-System
• Zukunftssicher – kompatibel mit Contao 4 & 5, PHP 8.x und den neuesten Browsern

Warum Contao Design+?

Ganz einfach: Weil du nicht bei null anfangen willst. Weil Design, Technik und Benutzerführung von Anfang an stimmen sollen. Und weil du ein Theme brauchst, das nicht nur gut aussieht, sondern sich auch gut anfühlt – für Redakteur:innen, Entwickler:innen und deine Nutzer:innen.

Ob du eine kleine Landingpage planst oder ein skalierbares Website-Projekt umsetzt – Contao Design+ bietet dir die ideale Mischung aus einfacher Bedienbarkeit, professionellem Look und technischer Substanz.

Erster Schritt: Installation

👉 Weiter zu Installation & Erstkonfiguration
Hier erfährst du, wie du das Theme installierst, Demo-Inhalte importierst und sofort loslegst.

Installation

In wenigen Schritten zur fertigen Website – mit Contao Design+

Hinweis: Contao Design+ bietet zwei mögliche Wege zur Nutzung des Themes. Empfohlen wird ausdrücklich die nachfolgende Installation über den Contao Manager im Rahmen einer Neuinstallation. Nur bei diesem Weg stehen alle Funktionen vollständig zur Verfügung – inklusive Demo-Import und späterer Theme-Updates über den Design+ Theme Assistent.

Du bevorzugst eine Video Anleitung? Hier geht es zu unserem → Installationsvideo auf YouTube

Die 3-Schritte-Installation

Mit Contao Design+ startest du in wenigen Minuten – ganz ohne Programmierkenntnisse. Folge einfach dieser Anleitung für eine vollständige Einrichtung inklusive Demo-Inhalte.

Schritt 1: Contao & Theme installieren

1. Starte eine neue Contao-Installation über den Contao Manager
   – Am besten mit neuster Contao 5.x und PHP 8.3+

2. Wechsle im Manager zur Theme-Installation
   – Klick auf „Theme für Contao“ → „Theme-Datei hochladen“

3. Lade die mitgelieferte theme.cto Datei hoch
   – Danach auf „Installieren“ klicken und den Vorgang abwarten

4. Fahre anschließend mit der Datenbank-Einrichtung fort

Hinweis: Nutze bitte ausschließlich den Contao Manager für die Erstinstallation von Contao Design+. Die Installation des Themes inklusive Demo-Import ist ausschließlich im Rahmen einer Neuinstallation vorgesehen. Wenn deine Contao-Installation noch leer ist, empfehlen wir ausdrücklich eine kurze Neuinstallation – dies ist der sauberste, schnellste und updatesichere Weg.

Schritt 2: Datenbank einrichten & Demo importieren

1. Stelle die Datenbankverbindung her
   – Trage die Zugangsdaten deines Hosters ein

2. Wähle im Schritt „Datenbank-Import“ den Punkt „Theme importieren“
   – Dies lädt alle Demo-Seiten, Inhalte, Layouts und Module automatisch mit

3. Klicke auf „Datenbank überprüfen“
   – Contao prüft und aktualisiert die Datenbankstruktur

4. Folge den weiteren Schritten bis zur Backend-Anmeldung

Hinweis: Der Demo-Import ist ausschließlich im Rahmen der Installation über den Contao Manager verfügbar. Bei alternativen Installationswegen (z. B. CTO-Import) stehen die Demo-Inhalte nicht zur Verfügung.

Schritt 3: Backend-Login

1. Logge dich ins Contao-Backend ein
   – für Zugangsdaten / Standard-Anmeldedaten siehe beigelegte Installation.docx

2. Rufe deine Website im Frontend auf
   – Die Seitenstruktur ist vollständig geladen und bereit zur Anpassung

Checkliste nach dem Login

• Ändere unbedingt Benutzername & Passwort im Backend unter „Benutzerverwaltung“
• In „Einstellungen“ überprüfe E-Mail-Adresse und maximale Upload-Größe (empfohlen: 64000000 / = 64 MB)
• Starte eine erste Systemwartung (unter „Systemwartung“) für saubere Caches
• Überprüfe die Startseite und Navigation im Seitenbaum
• Rufe den Theme Konfigurator auf und beginne mit der individuellen Gestaltung

🎉 Fertig! Nächster Schritt: Gestaltung

👉 Weiter zu Gestaltung ohne Code – Theme-Anpassungen

Jetzt, da deine Demo-Website steht, kannst du sie anpassen: Farben, Schriftarten, Animationen, Header-Layouts und mehr – alles ganz ohne CSS-Kenntnisse.

Alternative via CTO-Import

Die Installation von Contao Design+ über einen klassischen CTO-Import ist technisch möglich, wird für die meisten Anwender jedoch nicht empfohlen.

Für welche Fälle eignet sich der CTO-Import?

Dieser Weg eignet sich ausschließlich für Sonderfälle, z.B.:

1. wenn bereits ein anderes Theme in einer bestehenden Contao-Installation genutzt wird
2. wenn keine Neuinstallation möglich oder gewünscht ist

Einschränkungen bei der CTO-Installation:

• kein Demo-Import verfügbar
• kein garantierter Update-Pfad über den Design+ Theme Assistent
• spätere Theme-Updates können zu unerwünschten Überschreibungen führen

Für neue Projekte oder leere Installationen empfehlen wir ausdrücklich die Installation über den Contao Manager.

Welcher Installationsweg ist der richtige?

Empfohlen

✅ Neuinstallation über Contao Manager

→ Demo-Import
→ volle Update-Fähigkeit
→ empfohlener Standardweg

Alternativ

⚠️ CTO-Import in bestehende Installationen

→ ohne Demo-Inhalte
→ ohne garantierte Theme-Updates
→ nur für Sonderfälle geeignet

Vorgehen bei Installation via CTO-Import ^{(Kurz-Anleitung)}

Hinweis: Die Installation von Contao Design+ über einen CTO-Import erfordert eine feste Reihenfolge der Schritte. Bitte halte diese Reihenfolge zwingend ein, um Probleme mit fehlenden Erweiterungen oder Datenbankfehlern zu vermeiden.

1. Neuste Theme-Version vorbereiten:
   Lade die neuste Version von Contao Design+ direkt aus dem Theme Store herunter. Die heruntergeladene Datei enthält eine theme.cto – benenne diese Datei in theme.zip um und entpacke sie anschließend. Kopiere nun alle Dateien und Ordner aus dem entpackten Archiv vollständig in das Root-Verzeichnis deiner bestehenden Contao-Installation. Vorhandene Dateien und Ordner müssen dabei überschrieben / zusammengeführt werden.
2. Contao Manager ausführen:
   Rufe anschließend den Contao Manager auf und wechsle zu „Pakete“. Installiere bzw. aktualisiere die erforderlichen Erweiterungen und Abhängigkeiten und wende die Änderungen an.
3. Datenbank aktualisieren:
   Nach dem Paket-Update fordert Contao in der Regel zur Datenbank-Aktualisierung auf. Führe alle vorgeschlagenen Datenbankänderungen vollständig aus.
4. CTO-Import im Backend durchführen:
   Führe nun den Theme-Import im Contao-Backend durch. Hierbei kannst du entweder die ursprüngliche theme.cto oder alternativ die zuvor umbenannte ZIP-Datei verwenden (Contao akzeptiert beide Formate). Der Import legt anschließend die Theme-Daten für Module und Seitenlayouts an – Fertig!

Hinweis: Die Installation via CTO-Import stellt keinen vollwertigen Ersatz für die Installation über den Contao Manager dar. Demo-Inhalte stehen hierbei nicht zur Verfügung und die Nutzung des Design+ Theme Assistenten für spätere Updates ist nicht oder nur eingeschränkt möglich.

Ausnahme: Mit den nachfolgenden Schritten, kann selbst aus dem Weg über CTO-Import nachträglich noch eine vollwertige Design+ Installation inklusive Nutzung von Demo-Inhalten und Updates via Theme Assistent gemacht werden (nur für Entwickler / Experten geeignet):
→ Dem Theme liegt ein vollständiger Datenbank Dump bei (siehe /var/backups/backup.sql.gz), der alle Demo-Inhalte enthält.
→ Mittels Tools wie PhpMyAdmin o.ä. einfach das Backup File in der Datenbank einspielen, dann Contao Manger erneut aufrufen und Datenbank überprüfen (unter Systemwartung), gegebenenfalls aktualisieren falls dazu aufgefordert.
→ Fertig! Die Contao Installation ist jetzt gleichwertig mit einer Neuinstallation inklusive Demo-Inhalten und Theme Assistent.

Bei Problemen

Falls die Installation nicht wie erwartet funktioniert, beachte bitte Folgendes:

Theme-Anpassung

So individualisierst du deine Website – ganz ohne CSS oder Programmierkenntnisse

Individuelle Gestaltung

Contao Design+ wurde speziell dafür entwickelt, dir die individuelle Gestaltung deiner Website so leicht wie möglich zu machen – ohne komplexe CSS-Anpassungen oder Template-Eingriffe. Mit dem integrierten Theme Konfigurator (ein exklusives Backend-Modul) und über 100+ designten Elementen kannst du dein Corporate Design, Layout und Seitenstruktur ganz einfach selbst definieren – visuell, modular, intuitiv.

Das eigene Logo

Der erste Schritt zur eigenen Markendarstellung: Die Integration des Logos. Um dein Logo zu integrieren, reichen folgende 3 Schritte:

1. Unter Inhalte > Dateien erstelle diese neuen Ordner theme/theme-eigener-markenname/img/
2. Lade deine Logo Grafik (SVG-Format empfohlen) im zuvor erstellten Ordner img/ hoch
3. Unter Layout > Theme > Module bearbeite das Logo-Modul und wähle deine Grafik aus – Fertig!

Der Theme Konfigurator

Der Theme Konfigurator ermöglicht dir, zentrale Design-Einstellungen wie Farben, Schriftarten oder Größenwerte updatesicher und ohne CSS-Kenntnisse anzupassen. Einmal definiert, greifen diese Werte auf alle dazugehörigen Elemente im Theme zurück – deine Änderungen wirken also global.

Du findest ihn im Contao-Backend unter Layout > Theme Konfiguration.

Farb-Einstellungen

• Primärfarbe & Sekundärfarbe (z. B. für Buttons, Links, Hovereffekte)

• Textfarbe & Headlinefarbe

• Spezialfarben: Sublines, Artikelhintergrund, Footer-Hintergrund, Linkfarbe etc.

Schrift-Einstellungen

• Standard-Schriftart (für Body-Texte)

• Headline-Schriftart

• Schriftgrößen für Body und Header (z. B. 16px, 18px, etc.)

Du kannst hier eigene Webfonts über <head>-Tags integrieren, z. B. von Google Fonts oder lokalen Quellen.

Größen-Einstellungen

• Logo-Größe in Pixel (z. B. 190px)

• Header-Höhe (z. B. 128px)

• Border Radius für Buttons und Teaser-Elemente

Module & Elemente

Über 100+ gestaltete Elemente – flexibel kombinierbar, sofort einsatzbereit

Was sind die Theme-Komponenten?

Contao Design+ bringt eine Vielzahl fertig gestalteter Inhaltsmodule und Komponenten mit, die du direkt in deiner Seitenstruktur verwenden kannst. Dazu gehören:

• Inhaltselemente (z. B. Text- und Bild-Kombinationen, Grid, Slider, Akkordeon, News)
• Module (z. B. Header, Navigation, Footer, Suche)

Alle Elemente sind bereits visuell aufeinander abgestimmt, responsiv aufgebaut und können ohne CSS-Anpassung sofort genutzt werden. Durch den modularen Aufbau kannst du Seiten nach dem Baukastenprinzip zusammenstellen. Im Folgenden einige Beispiele:

Inhaltselemente

Die Elemente im Theme lassen sich grob in folgende Gruppen einteilen:

1. Standard-Inhaltselemente (Contao-Elemente)

Wurden im Theme erweitert und visuell optimiert, bspw.:

• Text, Bild, Video, Galerie
• Listen, Downloads, Akkordeon

2. Design+ Elemente (Custom Elements)

Neu gestaltet und vordefiniert – mit mehr Stil und UX, bspw.:

• Hero-Elemente (mit Hintergrundbild & Text)
• Slider (mit Hero, Bild, Text, Call-To-Action)
• Cards (mit Headlines, Bild, Text, Links, Icons)
• Teaser (Call-to-Action-Boxen mit Buttons)
• Zeitstrahl, Stellenanzeigen, News
• Feature-Listen, Filter-Grids, Logo-Slider

Wie du Elemente nutzt

Es gibt grundsätzlich zwei Wege, um mit den Design+ Komponenten zu arbeiten:

1. Bestehende Demo-Inhalte anpassen oder duplizieren (empfohlen)

Der schnellste und einfachste Weg ist es, die bereits vorhandenen Demo-Inhalte einfach zu übernehmen und auf deine Zwecke anzupassen. Jedes Demo-Layout wurde bewusst so gestaltet, dass du es direkt weiterverwenden kannst – du musst nur Texte, Bilder oder Links austauschen. So gehst du vor:

1. Wechsle zur Artikelübersicht
2. Bearbeite einen vorhandenen Artikel oder dupliziere ihn
3. Passe Inhalte wie Texte oder Bilder an
4. Speichern – fertig!

Diese Methode spart Zeit, sorgt für konsistente Gestaltung und reduziert Fehlerquellen – besonders für Einsteiger:innen oder beim ersten Projekt.

2. Neue Elemente manuell hinzufügen

Natürlich kannst du auch komplett neue Inhalte selbst anlegen:

1. Wechsle zur Artikelübersicht
2. Öffne einen bestehenden Artikel oder erstelle einen neuen
3. Klicke auf „Neues Inhaltselement“
4. Wähle das gewünschte Element – z. B.:
   • entweder „Text“, „Bild“, „Akkordeon“
   • oder eines der Design+ Elemente wie „Hero“, „Card“, „Teaser“
5. Fülle die Felder aus – z. B. Text, Bildquelle, Link
6. Speichern – fertig!

🎯 Tipp: Artikel als Layout-Bausteine denken

In Contao Design+ funktioniert jeder Artikel wie ein visueller Abschnitt deiner Website – z. B. ein Hero, ein Grid-Block oder ein News-Modul.

• Du kannst so beliebig viele Artikel pro Seite verwenden
• Jeder Artikel kann dabei ein eigener „Baustein“ deiner Seite sein

Das macht den Seitenaufbau modular, übersichtlich und flexibel erweiterbar – wie im Pagebuilder.

Arbeiten mit dem Grid-System

Flexible Spaltenlayouts auf Basis von Bootstrap – ohne HTML-Kenntnisse

Das Design+ Theme nutzt das 12-Spalten-Grid-System von Bootstrap 4, um Layouts responsive und flexibel zu gestalten. Dabei wird jede Zeile in 12 Spalten aufgeteilt – du kannst also Elemente nebeneinander platzieren, in der Breite variieren und das Layout für verschiedene Bildschirmgrößen individuell steuern. Beispiele:

• 12 = das Element nimmt die komplette Breite ein (12 / 12 Spalten)
• 6 = das Element nimmt die Hälfte ein (6 / 12 Spalten)
• 4 = teilt in Drittel (4 / 12 Spalten)

Wo finde ich die Grid-Einstellungen?

In jedem Inhaltselement findest du unten den Bereich „DMA SimpleGrid“. Dort kannst du für verschiedene Gerätegrößen einstellen, wie breit das Element in der jeweiligen Auflösung sein soll:

Diese Einstellungen erzeugen automatisch die passenden Bootstap CSS-Klassen – z. B.: col-md-6 col-xl-4.

🧠 Damit lassen sich reihenweise Texte, Bilder, Cards und andere Features ganz einfach nebeneinander anordnen, ohne HTML schreiben zu müssen.

Praxisbeispiel

Du möchtest drei gleich breite Boxen nebeneinander anzeigen – und mobil untereinander?

1. Erstelle drei Inhaltselemente (z. B. 3x Text, Bild oder Card)
2. Scrolle bei jedem Element zu den „DMA SimpleGrid“-Einstellungen
3. Setze medium auf 6 und extra large auf 4
4. Auf Mobilgeräten erscheinen die Boxen untereinander, ab Tablet nebeneinander

📚 Mehr Informationen zum Grid-System

Die Grundlage bildet das Grid von Bootstrap – du findest eine ausführliche Dokumentation unter Bootstrap Grid Doku.

Experteneinstellungen

Für mehr Charakter sorgen mit anschaulichen Icons und gezielten Animationen

Icons verwenden

Das werbeagentur gut nutzt FontAwesome 6 (Free) – ein modernes Iconset mit über 2.000 frei verfügbaren Symbolen. Du kannst Icons überall verwenden, wo Text und HTML erlaubt ist – z. B. in Inhaltselementen wie Text, Listen, Buttons oder Modulen.

So fügst du ein Icon ein

Icons werde auf die Contao übliche Weise mittels Insert-Tags eingebunden:

{{ fas::square-phone }} Telefon // ergibt:  Telefon
{{ fas::pizza-slice }} Menü // ergibt:  Menü

Das Kürzel fas steht dabei für FontAwesome Solid – die einfarbige ("solid") Variante der FontAwesome Icons. Weitere Varianten (z. B. far::, fab::) sind auch möglich. Die vollständige Icon-Übersicht aller ~2.000 verfügbaren Symbole ist auf der offiziellen FontAwesome Website zu finden: 👉 https://fontawesome.com/v6/search?ic=free

Animationen einsetzen

Das Theme bietet die Möglichkeit, mittels einfacher Methoden Animationen einzusetzen, und damit für lebendige Seitenübergänge, Fade-Effekte und Slide-Ins sorgen. Möglich machen das wow.js (Steuerung der Auslöser) und animate.css (visuelle Effekte), die ab Werk eingebunden sind.

Jede beliebige Inhaltselement kann dabei ganz einfach animiert werden, in dem bspw. folgende Klassen am Inhaltselement gesetzt werden:

u-wow u-animation-bounce

u-wow u-animation-fadeInRight

u-wow u-animation-hinge

→ Der Effekt startet jeweils beim Scrollen in den sichtbaren Bereich.

📘 Alle verfügbaren Animations-Namen (z. B. fadeInUp, zoomIn, slideIn) findest du hier: 👉 https://animate.style

Utility-Klassen für Responsive Design

Schnell reagieren, gezielt gestalten – ganz ohne CSS schreiben

🔍 Was sind Utility-Klassen?

Utility-Klassen sind kleine, vordefinierte CSS-Helfer, die du in Contao direkt im Feld „CSS-Klassen“ bei Artikeln & Inhaltselementen eintragen kannst. Sie steuern gezielt das Verhalten eines Elements – z. B. Sichtbarkeit, Textausrichtung oder Hervorhebung – und sind besonders nützlich für responsive Anpassungen.

📦 1. Sichtbarkeit steuern ^{(.u-hidden…)}

Mit diesen Klassen kannst du Elemente abhängig von der Bildschirmgröße ("Viewport") ein- oder ausblenden.

📝 2. Textausrichtung ^{(.u-text-align…)}

Mit diesen Klassen steuerst du die Textausrichtung abhängig von der Bildschirmgröße ("Viewport").

Achtung: Klassen beginnen per CSS-Definition mit einem Punkt (.), aber: Bei Verwendung im Feld für Klassen in Contao muss der führende Punkt (.) weggelassen werden.

💡 Beispiel: Eine Headline soll auf Mobile mittig und auf Desktop linksbündig sein:
→ .u-text-align-center@sm-down

Seitenlayouts

Wo das grundsätzliche Website-Gerüst definiert wird

Was sind Seitenlayouts?

Seitenlayouts befinden sich im Backend unter Layout > Themes > Seitenlayouts. Es handelt sich dabei um vorgefertigte Seitengerüste, die den grundsätzlichen Aufbau der Website bestimmen – besonders hinsichtlich der Anordnung von Modulen wie Header, Footer oder Menü. Das werbeagentur gut unterscheidet dabei vor allem zwischen Layouts mit klassischem Aufbau ("Header Classic"), statischem vs. sticky Header, transparentem Header ("Fullscreen") oder der Verwendung des seitlichen Menüs ("Offcanvas"):

Seitenlayouts bearbeiten

Das werbeagentur gut kommt wie erwähnt mit vielen vorgefertigten Layouts – die Bearbeitung eines Seitenlayouts ist daher nur in seltenen Fällen nötig. Dennoch: Hat man sich für ein Seitenlayout entschieden und möchte beispielsweise das Modul "Breadcrumbs" oder "Accessibility Overlay" ausblenden, dann reicht es hier über das "Augen"-Symbol das entsprechende Modul zu deaktivieren und das Seitenlayout zu speichern:

Module nutzen und anpassen

Wie du Inhalte in Header, Navigation, Footer und Mobile-Menü (Offcanvas-Menü) pflegst

Was sind Frontend-Module?

Bestimmte Bereiche deiner Website – wie der Header, der Footer oder das Mobile-Menü (Offcanvas-Menü) – sind in Contao Design+ als Frontend-Module realisiert und im Seitenlayout eingebunden. Das bedeutet: Du kannst die Inhalte dort direkt im Backend bearbeiten, ganz ohne Templates oder Code-Dateien zu öffnen.

Wo du diese Module findest

Alle zugehörigen Inhalte findest du im Backend unter Layout > Themes > Frontend-Module. Dort sind fertige Module vorbereitet, die in deinem Seitenlayout bereits eingebunden sind:

💡 Tipp: In diesen Modulen findest du häufig soetwas wie {{ link_url::1 }} – hierbei handelt es sich um Contaos sogenannte Insert-Tags. Mehr dazu findest du im offiziellen Contao-Handbuch.

Nächster Schritt: Code-Anpassungen

👉 Weiter zu Anpassungen mit Code (für Fortgeschrittene)

Für alle, die tiefer einsteigen wollen: SCSS, Templates, Layout Overrides und eigene Module – sauber erklärt und updatefähig umgesetzt.

Code Anpassungen

Individuelles (S)CSS, eigene Templates und volle Kontrolle – für Agenturen & Entwickler:innen

Für alle, die mehr wollen

Contao Design+ funktioniert out of the box – aber es ist auch ein solides Fundament für individuelle Entwicklungen. Wenn du tiefer einsteigen möchtest, bietet dir das Theme volle Flexibilität: mit modularer SCSS-Struktur, sauberen Templates und Utility-Klassen.

Ob du ein eigenes CI integrieren, neue Module entwickeln oder gezielt Elemente verändern willst – hier findest du alle Werkzeuge dafür.

(S)CSS-Struktur & Workflow

Das Theme nutzt eine durchdachte SCSS-Architektur nach dem Prinzip Separation of Concerns. Die Dateien liegen im Ordner files/theme/theme-design/scss/ und folgen einem klaren Schema:

🔒 Tipp: Änderungen sollten bei gewünschter Updatesicherheit in _custom.scss erfolgen – nicht in den Theme-Dateien.

🧠 Tipps für Einsteiger:innen

• 🔍 Bestehende Klassen analysieren:
  Mit dem Browser-Inspektor (Rechtsklick → Untersuchen) findest du heraus, wie ein Element aufgebaut ist und welche Klasse du überschreiben kannst.
• 🎨 SCSS-Variablen verwenden:
  Nutze definierte Variablen wie $color-brand-primary, $spacer-s usw. statt fester Werte – so bleibt dein Design konsistent.
• 📦 In Modulen denken:
  Gliedere deinen Code sinnvoll, z. B. mit Kommentaren:

  // Header
  .m-header { ... }
  
  // Footer
  .m-footer { ... }
  
  // Buttons
  .o-button-primary { ... }

• ♻️ Nach Änderungen Cache leeren:
  Gehe in Contao auf Systemwartung → CSS/JS-Cache leeren, damit deine neuen Styles im Frontend sichtbar werden.

Geschafft!

Du hast jetzt alles, was du brauchst, um mit dem werbeagentur gut deine eigene professionelle Website aufzubauen – schnell, flexibel und mit Stil. Ganz gleich, ob du gerade erst loslegst oder Contao schon lange im Einsatz hast: Dieses Theme ist gemacht, um dich zu unterstützen. Wenn du an irgendeinem Punkt nicht weiterkommst, weißt du jetzt:

• Wo du nachsehen kannst (in dieser Dokumentation)
• Wo du etwas ändern kannst (im Backend, in Modulen oder SCSS)
• Und wie du dabei sauber, strukturiert und updatesicher bleibst

Wir wünschen dir viel Freude beim Umsetzen deiner Ideen und sind überzeugt: Mit dem dem werbeagentur gut hast du die beste Grundlage gewählt, um sichtbar, professionell und erfolgreich online zu sein.

🧠 Du hast Feedback, Ideen oder Fragen? Dann melde dich jederzeit!

👉 Jetzt aber: Designen. Anpassen. Online gehen 🚀

Contao 4.13 / 5.x ➝ 5.7.2

Update-Guide von Contao 4.13 oder 5.x auf Contao 5.7.2 mit Design+ 2026.06

Das Update von Contao 4 auf Version 5 ist ein großer Sprung was Backend-Usability und -Features betrifft. Dasselbe gilt für frühe Contao 5 Versionen auf die aktuelle Version. Das bietet die ideale Gelegenheit, auch dein Design+ Theme auf die aktuelle Version zu bringen. Dieser Leitfaden führt dich Schritt für Schritt sicher durch den gesamten Prozess – von der Vorbereitung bis zum funktionsfähigen Update.

Zur Vollständigkeit: Allgemein nützliche Leitfäden zum Update finden sich außerdem in der offiziellen Contao Dokumentation im Bereich zu Aktualisierung & Migration: https://docs.contao.org/…/migration/#contao-4-13-auf-5-x. – alle Informationen zum Theme Update finden sich jedoch vollständig in nachfolgender Dokumentation.

Alles bereit? Dann geht's jetzt los!

Backup der aktuellen Installation

Bevor du irgendetwas änderst: Erstelle unbedingt ein vollständiges Backup deiner bestehenden Contao 4.13 oder 5.x Installation – Dateien und Datenbank.

💡 Backups sind Pflicht vor jedem größeren Contao-Update – gerade beim Wechsel von Version 4 auf 5, bei der sich interne Strukturen deutlich geändert haben.

System und Dateien vorbereiten

Hinweis: Dieser Update-Pfad setzt voraus, dass Contao Design+ ursprünglich über den Contao Manager installiert wurde. Bei Installationen, die per CTO-Import erfolgt sind, kann dieser Update-Prozess nicht garantiert werden.

1. Zuerst die PHP Version auf mindestens 8.3 umstellen, falls noch nicht geschehen (ggfs. lässt sich das Frontend einer Contao 4.13 Installation ab jetzt vorerst nicht mehr aufrufen – das ist normal).
2. Separate Backup-Kopie erstellen (bspw. auf dem Desktop) von selbst angepassten Dateien wie files/theme/theme-design/scss/_custom.scss oder weiteren wie in files/theme/theme-design/img/ (im weiteren Verlauf des Updates kommen wir auf diese Dateien zurück).
3. Lade nun die neuste Version von Contao Design+ direkt aus dem Theme Store herunter. Die heruntergeladene Datei enthält eine theme.cto – benenne diese Datei in theme.zip um und entpacke sie anschließend. Kopiere nun alle Dateien und Ordner aus dem entpackten Archiv vollständig in das Root-Verzeichnis deiner bestehenden Contao-Installation. Vorhandene Dateien und Ordner müssen dabei überschrieben / zusammengeführt werden.
   Achtung: bitte sicherstellen, dass Schritt 2 durchgeführt wurde und betroffene Dateien als Kopie für später separat abgespeichert wurden.
4. Dann die Datei system/config/localconfig.php löschen falls noch vorhanden (Contao 4 Artefakt; Contao 5 speichert Konfigurationen mittlerweile an anderer Stelle).
5. Zuletzt auch die Datei composer.lock (nicht composer.json) löschen falls vorhanden.

Contao Update via Contao Manager

1. Nun den Contao Manager aufrufen (ggfs. aktualisieren auf neueste Contao Manager Version)
2. Dann zu "Pakete" wechseln, verfügbare Updates installieren und mit "Änderungen anwenden" betätigen → mit diesem Schritt wird Contao bereits auf die aktuelle Contao Version 5.7.2 aktualisiert ✓
3. Zuletzt ggfs. der Aufforderung von Contao folgen und die Datenbank aktualisieren / migrieren (sofern gefragt, Checkbox aktivieren um alle Änderungen inklusive Löschungen anzuwenden)

Theme Update via Contao Backend

Hinweis: Der Design+ Theme Assistent und die automatischen SQL-Updates stehen ausschließlich zur Verfügung, wenn Contao Design+ ursprünglich über den Contao Manager installiert wurde. Bei Installationen, die über einen CTO-Import erfolgt sind, können die zugrunde liegenden Modul- und Seitenlayout-IDs vom Referenzzustand abweichen. In diesem Fall ist der Theme Assistent nicht oder nur eingeschränkt nutzbar.

Neues Seitenlayout zuweisen

Zuletzt noch eines der aktuellen Seitenlayouts aktivieren:

1. In der Seitenstruktur die Root-Seite öffnen
2. Unter Layout eines der aktuellen Layouts aus dem Theme Design+ auswählen, z. B. → Header Sticky (siehe Demo)

✅ Abschluss & Kontrolle

• Systemwartung: CSS/JS-Cache und Prod.-Cache leeren
• Frontend prüfen: Header, Footer, Offcanvas, Navigation, Startseite
• Unterseiten: ggf. Layoutzuweisung kontrollieren

👉 Fertig: Deine Installation läuft jetzt auf Contao 5.7.2 mit Design+ 2026.06 🚀

💡 Tipp: Wenn du Anpassungen aus der alten Version übernehmen möchtest (z. B. aus der custom.scss oder eigene Templates), kopiere sie nachträglich manuell in die neue Theme-Struktur – nicht vor dem Update. So vermeidest du Versionskonflikte und bleibst updatesicher.