Einführung

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

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 Assistenten 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 Assistenten, 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 Assistent – 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+

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.1+

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 Installation – nicht automatische Hosting-Installationen wie bei bspw. IONOS oder Mittwald möglich. Das sorgt für eine saubere, wartbare Contao-Basis.

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

Schritt 3: Backend-Login

1. Logge dich ins Contao-Backend ein
   – für 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“
• Gehe zu „Einstellungen“ und überprüfe E-Mail-Adresse und maximale Upload-Größe (empfohlen: 50000000 / entspricht 50 MB)
• Starte eine erste Systemwartung (unter „Systemwartung“) für saubere Caches
• Überprüfe die Startseite und Navigation im Seitenbaum
• Rufe den Theme Assistenten auf und beginne mit der individuellen Gestaltung

Video-Anleitung

🎥 Du willst alles noch einmal visuell sehen? → Hier geht’s zum Installationsvideo auf YouTube

Bei Problemen

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

1. Fehler beim Theme-Upload?

→ Stelle sicher, dass post_max_size und upload_max_filesize deines Servers auf mindestens 50 MB stehen (PHP.ini)

2. Paketprobleme bei Composer?

→ Lösche die composer.lock, leere den Cache via Contao Manager, und versuche den Import erneut

3. Demo-Inhalte fehlen nach Theme-Import?

→ Verwende den 3-Schritte-Import von oben – nicht den reinen Theme-Import im Backend

4. Frontend lädt nicht korrekt oder Meldung "zu viele Weiterleitungen"?

→ Achte auf das richtige Protokoll (http/https) in Seite-ID 1 → Feld „Protokoll“

5. Verwendest du eine bestehende Contao-Installation?

→ Stelle sicher, dass folgende Erweiterungen installiert sind:

• madeyourday/contao-rocksolid-custom-elements
• dma/dma_simple_grid
• netzmacht/contao-font-awesome-inserttag
• inspiredminds/contao-glightbox

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.

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 Assistenten (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 Plus 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 Contao Theme Design+ 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").

💡 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 Contao Theme Design+ 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 Contao Theme Design+ 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 Contao Theme Design+ 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 Contao Theme Design+ 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 🚀