Demos und Styleguide

Creuva bringt vier Demos mit. Jede wird als eigener Startpunkt importiert – im Backend unter Layout › Creuva › Einrichten (Auswahl „Demo-Website importieren“) oder auf der Konsole. In einer bestehenden Installation legst du die Demo mit einer eigenen Domain (--dns) oder Sprache (--language) daneben.

Alle Demos verwenden nur Core-Elemente, Creuva-Elemente und Templatevarianten und laufen deshalb unter Contao 5.7 und 6 gleich. Die Elemente sind demounabhängig: was eine Demo zeigt, kannst du auf jeder Creuva-Website nutzen.

Standard / Creative

• Seiten: Startseite, Leistungen (Webdesign, Entwicklung, Beratung), Projekte mit sechs Projektseiten, Über uns mit Team, Preise, News & Wissen mit FAQ und Downloads, Kontakt mit Danke-Seite, Impressum, Datenschutz, Zugänglichkeitserklärung, Sitemap, Suche und eine 404-Seite
• Module: Hauptnavigation, Header mit CTA und Suche, Footer mit vier Spalten und Social-Media-Links, News-Liste und -Leser, Sitemap, Suchmaschine
• Bildgrößen für jeden Platz im Layout (Logo, Hero, Karte, Bild & Text, Breit, Team, Avatar, News, Galerie) mit mehreren Breiten, WebP und verzögertem Laden
• News-Archiv mit drei Beiträgen (nur mit installiertem News-Bundle)
• Dateien unter files/creuva-demo/standard/ (Illustrationen, Icons, PDFs) mit Alt-Texten
• Favicon im Startpunkt sowie der Style-Switcher zum Ausprobieren der Farbschemen

Unternehmen

Klassische Firmenwebsite („Kessler Metalltechnik GmbH“, Light, Farbschema Ozean, eckig):

• Seiten: Startseite mit Kennzahlen, Leistungen und Branchen; Leistungen mit Maschinenpark; Branchenlösungen; Referenzen; Unternehmen mit Geschichte, Zertifikaten und Standorten; Karriere mit Stellenangeboten und Online-Bewerbung (Datei-Upload); Download-Center; Aktuelles; Kontakt mit Ansprechpartnern
• Stellenangebote sind Nachrichten im Archiv „Stellenangebote“ mit der Listenvorlage news_creuva_job (siehe News)
• Prozess-Schritte als Templatevariante der Beschreibungsliste

Portfolio / Studio

Für Fotografen, Architekten und Kreativstudios („Studio Lichtung“, Typografie Editorial, Farbschema Terracotta, kleine Ecken):

• Seiten: Startseite mit Vollbild-Hero, Arbeiten mit sechs Projektseiten, Bildarchiv (Masonry-Galerie mit Lightbox), Studio mit Team, Leistungen mit Preisen und FAQ, Journal, Kontakt
• Projektseiten: Vollbild-Hero, Projektdaten (Fakten), Text, je eine andere Galerie-Anordnung oder ein Slider mit Thumbnails und ein Link zum nächsten Projekt
• Bildkacheln (creuva_tile), Logoleiste und die Raster-Klasse „Versetzt“ (u-grid-offset)

Sportverein

Für Fußball- und Sportvereine („TSV Rotenbach 1921“, Light, Farbschema Rot, mittlere Ecken, Wappen als Logo):

• Seiten: Startseite mit nächstem Spiel und letztem Ergebnis, Mannschaften mit Trainingszeiten und Tabelle, Spielplan, Verein mit Vorstand und Sportpark, News, Sponsoren mit Paketen, Mitglied werden mit Online-Antrag und Beitrittserklärung (PDF)
• Spielplan und Ergebnisse sind Termine im Kalender „Spielplan“. Ihre Daten liegen relativ zum Tag des Imports, die nächsten Spiele sind also immer in der Zukunft.
• Inhaltselement „Spielpaarung“ und Tabellen-Klasse „Liga-Tabelle“ (u-table-league)

Styleguide

Der Styleguide zeigt alle Elemente, Templatevarianten, CSS-Klassen und Module des Themes auf einer Seite: Farben, Typografie, Buttons, Listen, Tabellen, Medien, Kennzahlen, Akkordeon, Hintergründe, Animationen, alle Formularfelder, Breadcrumb und News-Liste. Er ist unabhängig von den Demos und lässt sich jeder Creuva-Website hinzufügen – unter Layout › Creuva › Styleguide oder auf der Konsole:

vendor/bin/contao-console creuva:styleguide --root=1
vendor/bin/contao-console creuva:styleguide --root=1 --replace   # nach einem Theme-Update neu anlegen

• Seite „Styleguide“ (Alias styleguide) am Ende der Website, nicht in der Navigation, nicht im Suchindex und mit noindex,nofollow
• eigene Module, ein Formular und ein News-Archiv mit dem Präfix „Styleguide – “
• Dateien unter files/creuva-demo/styleguide/

Die Demos installieren den Styleguide gleich mit.

Zugänglichkeitserklärung

Jede Demo bringt die Seite zugaenglichkeitserklaerung mit, verlinkt im Footer. Jeder Abschnitt ist ein eigenes Text-Element; Abschnitte, die nicht auf jede Website passen (PDF-Dokumente, Videos, Karten, Drittanbieter, BFSG, Schlichtung …), sind ausgeblendet und lassen sich über das Augen-Symbol einblenden. --with-pages legt die Seite mit einem Platzhalter an.