TORNADO Theme ohne Demo installieren

Wenn du bereits Erfahrungen mit einem unserer Themes gemacht hast, kannst du das Theme auch ohne Demo-Inhalte verwenden.

Theme-Download

Lade dir die neueste Version des Themes aus dem Club-Bereich herunter. Das TORNADO-Theme ist eine ZIP-Datei und lautet in etwa TORNADO-THEME-1.X.X.zip.

Hinweis: Sollte dein Browser das ZIP-Archiv automatisch entpacken, deaktiviere die Einstellung. Alternativ findest du das ZIP-Archiv im Papierkorb. Erstelle das ZIP-Archiv nicht selbst, da sonst die Pfade nicht stimmen!

1. Contao-Installation

Installiere Contao 5.7 auf dem Server (PHP 8.3 oder neuer). Am einfachsten geht dies über den Contao Manager, den wir im nächsten Schritt auch verwenden, um die Erweiterungen zu installieren.

Du solltest Contao so weit eingerichtet haben, dass du dich als Administrator im Backend einloggen kannst.

2. Erweiterungen installieren

Installiere folgende Erweiterung über den Contao Manager:

• erdmannfreunde/tornado-theme-bundle

Das Bundle bringt alle weiteren Abhängigkeiten mit – das Nutshell Framework 2.x, die Theme Toolbox 4.5, die Element-Bundles (Hero, Card, Kontakt), die Grid-Erweiterung, die Onepage-Navigation, das Portfolio-Bundle und Swiper Pro.

2.1 Datenbank aktualisieren

Nach der Installation wirst du vom Contao Manager aufgefordert, die Datenbank zu aktualisieren. Aktualisiere die Datenbank.

3. Theme importieren

Logge dich im Contao-Backend ein und gehe zum Menüpunkt Layout » Themes. Dort klickst du auf Importieren und wählst das Theme (als ZIP-Datei) aus.

Solltest du gefragt werden, ob du zusätzlich die Demo-Daten importieren möchtest, überspringe diesen Schritt – andernfalls werden alle Seiten, Artikel, Elemente usw. angelegt.

Nach dem Import sind die drei Seitenlayouts Standard, One-Page und Styleguide samt Frontend-Modulen bereit für die Verwendung. Wähle in deinem Startpunkt das Layout Standard für die Multi-Page-Variante oder One-Page für die One-Page-Variante. Das Layout Styleguide brauchst du ohne Demo-Inhalte nicht.

4. Seitenlayout auf die Theme-SCSS-Datei einstellen

Die Theme-Dateien liegen unter layout/ und nicht im Datei-Manager. Prüfe daher in deinem Seitenlayout, dass die richtige SCSS-Datei ausgewählt ist:

1. Layout » Seitenlayouts » [Layout bearbeiten]
2. Im Bereich Theme Toolbox im Select-Feld Theme SCSS die default.scss auswählen.
3. Speichern.

5. Archive und Slider einrichten

Einige Module brauchen Inhalte, die nicht Teil des Themes sind:

• Referenzen: Lege unter Inhalte » Portfolio ein Archiv an und wähle es in den Portfolio-Modulen aus. Im Listenmodul stellst du die Seite mit dem Leser-Modul als Weiterleitungsseite ein.
• Aktuelles: Lege ein Nachrichten-Archiv an und wähle es in den Modulen Aktuelles - Liste und Aktuelles - Leser aus.
• Kundenstimmen: Der Slider der Kundenstimmen ist ein Inhaltselement Swiper Pro und braucht eine Swiper-Einstellung. Lege sie unter Layout » Swiper-Einstellungen an (in der Demo: Übergangseffekt „slide“, Pagination „Fraktion (z. B. 1/5)“, Endlosschleife und Navigation aktiv) und wähle sie im Element aus.

Referenzen und Nachrichten öffnen sich in einem Dialog, statt die Seite zu wechseln. Das übernehmen die Templates js_portfolio-dialog und js_news-dialog, die du im Seitenlayout im Bereich JavaScript auswählst: Im Layout Standard sind beide aktiv, im Layout One-Page nur js_portfolio-dialog. Die Seite mit dem Leser-Modul brauchst du trotzdem, denn der Dialog zeigt ihren Inhalt.

Ebenfalls im Bereich JavaScript ist in allen Layouts js_hero-video aktiv. Es ergänzt bei einem Hero-Element mit Hintergrundvideo einen Button zum Anhalten des Videos. Verwendest du ein Hintergrundvideo, lass das Template eingeschaltet.

Wenn du weitere Komponenten wie Events verwendest, musst du, nachdem du die Archive angelegt hast, diese ebenfalls noch in den Frontend-Modulen auswählen.

6. Live-Editor aktivieren

Der Live-Editor im Frontend ist standardmäßig ausgeschaltet. Wenn du mit dem Gestalten beginnen möchtest, aktivierst du ihn einmalig in der Contao-Systemwartung über den Schalter „Frontend-Editor anzeigen“.

Ein Umgehen des SCSS-Caches ist nicht nötig – der Compiler der Theme Toolbox erkennt Änderungen an den SCSS-Dateien automatisch und kompiliert bei Bedarf neu.