Zum Inhalt springen

Kostenloses TYPO3 Template (Musterprojekt) für TYPO3 11 LTS

Kostenloses "Best Practice" Template, individuell anpassbar mit vielen Anleitungen. Frei verfügbar als Download oder vorinstalliert im Hosting Paket mit Support von Experten.

TYPO3 Version:11 LTS

Mit dem kostenlosen TYPO3 Template kann man sofort mit dem Erfassen von Inhalten beginnen, die Webseite ist in kürzester Zeit online. Man muss sich nicht um Design, Templates oder TypoScript Code kümmern.  

So sieht es aus: Live-Version unseres TYPO3 Templates

Das TYPO3 Template steht als kostenloser Download für interessierte Anwender bereit. So kannst du das Template für TYPO3 CMS auch bei anderen Providern installieren. In diesem Fall musst du dann leider auf unseren Support verzichten. Alternativ buchst du einfach unseren kostenlosen TYPO3 Developer Tarif unverbindlich für 3 Monate. Dort ist das Template (wie in allen unseren Hosting Paketen) bereits vorinstalliert und du kannst sofort loslegen.

Version 11 des TYPO3 Templates herunterladen (tar.gz Archiv)

Das jweiland.net template in der Version 12 herunterladen (tar.gz Archiv)

Bei eigener Installation ist ein Backend Benutzer "typo3-admin" mit dem Passwort "muster" voreingestellt. Nach der Installation unbedingt das Passwort ändern!

TYPO3 CMS 11 LTS benötigt mindestens PHP 7.4 und MySQL 5.7 bzw. MariaDB 10.3.

Du hast Anregungen und Verbesserungsvorschläge für unser Template? Kontaktiere uns einfach unter hosting(at)jweiland.net  

Die Vorlage ist individuell anpassbar und kann beliebig erweitert werden. 

Das Template bietet:

  • Responsive Webdesign, geeignet für Desktop, Smartphone und Tablet
  • optimiert für Suchmaschinen 
  • vorbereitet für Barrierefreiheit
  • Beispiele für alle Standard Inhaltselemente
  • optimiert für kurze Ladezeiten und Barrierefreiheit
  • aktueller Stand der Technik
  • optisch und funktional individuell anpassbar

Es kann als Grundlage für eine eigene Website verwendet werden und stellt ein "Best practice" Beispiel dar. Hier kannst du lernen, wie man ein TYPO3-Projekt aufsetzt. Es soll dabei keine Design-Vorlage sein, sondern eine Projektvorlage. Das Design kannst du beliebig an eigene Vorstellungen anpassen.

Wir haben das Template bewusst schlank gehalten und nur die am häufigsten verwendeten Funktionen vorinstalliert:

  • Anzeige von aktuellen Meldungen (Extension: news)
  • Lesbare Web-Adressen (sprechende URLs)
  • Optimiert für Indexierung in Suchmaschinen (SEO) inklusive Vorschau der Anzeige als Google Snippet
  • Unterstützung bei der Suchmaschinenoptimierung der Website
  • Lightbox-Effekt für das Klick-Vergrößern von Bildern
  • Konfigurierbarer Cookie Consent Manager

Das Musterprojekt nutzt TYPO3 CMS Version 11.5. Dadurch ist bis mindestens Ende Oktober 2024 (mit verlängertem Support bis Oktober 2027) ein Betrieb ohne Relaunch möglich. 

Unser Template gibt es bereits seit 2008. Mit jeder TYPO3 CMS Version ist es überarbeitet und verbessert worden. Hier findest du Informationen über die Geschichte unserer Vorlage.

So einfach ist das: In 5:47 zur eigenen Website

In diesem kurzen Video zeigen wir, wie schnell aus dem Muster-Template eine eigene Webseite werden kann. Zurücklehnen und staunen!

Was kostet das Musterprojekt?

Das Template ist bei allen neuen TYPO3 Hosting-Paketen von jweiland.net im Preis enthalten und bereits vorinstalliert. Es kann von dieser Webseite kostenlos heruntergeladen und verwendet werden (Downloadlink siehe weiter oben)

Wie sieht es mit Updates aus?

Das Projekt wird kontinuierlich weiter entwickelt. Die aktuelle Version 1.0.9 des Templates vom Januar 2023 basiert auf TYPO3 Version 11.5 LTS und steht in den Cloud Hosting Paketen automatisch zur Verfügung.

Beachte jedoch: bestehende Installationen können nicht automatisch aktualisiert werden, da jeder Kunde selber Änderungen an den Dateien des Musterprojekts durchführen kann. Bei automatischen Updates würden diese Änderungen überschrieben werden.

Damit du bei Bedarf neue Funktionen oder Fehlerbehebungen selber nachrüsten kannst, protokollieren wir alle wichtigen Änderungen im Änderungsprotokoll.

Beispielwebseiten auf der Basis unseres Musterprojektes

Was ist neu in Version 11 des Templates?

In den Versionen 10 und 11 des Musterprojekts haben wir nicht nur bestehende Funktionen verbessert, sondern auch viele neue Features hinzugefügt. Im folgenden Video siehst du ein paar dieser Neuerungen im Überblick.

Da wäre zum Beispiel

  • Reponsive Images und verschiedene Crop-Varianten für Bilder 
  • verbesserte und neue Navigationsvarianten, zum Beispiel ein Megamenü oder Teaser für Seiten inkl. Vorschaubildern
  • Raster-Container für Inhalte 
  • Auf-/Zuklappbare Inhaltselemente
  • und vieles mehr

Natürlich hat sich auch "unter der Haube" vieles getan, da wir in der Programmierung die neuen Möglichkeiten von TYPO3 11 LTS nutzen, wie zum Beispiel auch die neuen Asset Collectors.

Das Musterprojekt selbst installieren

Bei Bestellung eines Hosting Tarifs (auch beim kostenlosen Developer Tarif), wird das Mustertemplate von uns bereits fertig installiert. 

Falls du das Template in einem bestehenden Hosting Paket nachträglich installieren möchtest, zeigen wir Dir alle notwendigen Schritte im folgenden Video.

Folgende Schritte sind sind für die Installation notwendig:

  1. Eine neue Datenbank (MariaDB) über das Kundenmenü (Plesk) anlegen 
  2. Anmeldung per SSH auf dem Webserver (Anleitungen für Windows, MacOS und Linux)
  3. Ggf. TYPO3-Quellcode entpacken (typo3_src-11.5.x.tar.gz)
  4. Archiv (musterprojekt-11.5.x.tar.gz) entpacken
  5. Parameter für Zugriff auf Datenbank in typo3conf/LocalConfiguration.php anpassen
  6. Datenbankdatei typo3conf/musterprojekt.sql in die neue, leere Datenbank importieren
  7. Ggf. Symlink auf TYPO3 11.5.x Quellcode anpassen/anlegen
  8. Domain auf Startverzeichnis zeigen lassen
  9. In TYPO3 Backend einloggen (User: typo3-admin, Passwort: muster)
  10. Site-Konfiguration aufrufen und Domainnamen anpassen 

Benutzername und Passwort ändern

Aus Sicherheitsgründen raten wir dringend dazu, den Benutzernamen und das Passwort des Standard-Benutzerkontos direkt nach der ersten Anmeldung im Backend zu ändern!

Encryption Key ändern

Aus Sicherheitsgründen solltest du nach der manuellen Installation den sogenannten Encryption Key ändern. Das ist eine lange zufällige Kombination von Buchstaben und Ziffern. Mit diesem Key werden die verschiedenen Verschlüsselungen im TYPO3-System "gesalzen", das heißt, es wird noch ein weiterer Zufallswert in die Verschlüsselung eingebaut.

Gehe wie folgt vor:

  1. Gehe im Backend in den Bereich "Einstellungen (Settings)".
  2. Klicke hier auf die "Installation Wide Options"
  3. Im Bereich [SYS] findest Du das Eingabefeld für den Encryption Key, gebe hier eine lange Zufallskombination von Ziffern und Buchstaben ein
  4. Zum Speichern klicke auf "Write Configuration"
  5. Anschließend musst Du dich am Backend neu anmelden
  6. Zum Abschluss über das Blitzsymbol alle Caches leeren ("Flush all caches")

Die Schritte sind im folgenden Video beschrieben.

Sprache des Backends ändern

Das TYPO3-Backend kann in vielen verschiedenen Sprachen genutzt werden. Englisch und Deutsch sind schon vorinstalliert, aber auch weitere Sprachen können sehr einfach nachinstalliert werden.

Übrigens kann jeder Backendbenutzer selber seine bevorzugte Sprache einstellen. Vorher müssen diese aber durch einen Administrator installiert werden.

Firmenname anpassen

Einer der ersten Schritte bei der Anpassung des Musterprojekts sollte die Änderung des Firmennamens sein. Dieser ist zum Beispiel ganz unten im Fußbereich jeder Seite zu sehen. Natürlich kannst du statt einem Firmennamen hier auch deinen persönlichen Namen oder einen beliebigen anderen Text eingeben.

Führe folgende Schritte durch:

  1. Klicke im linken Hauptmenü im Backend auf "Template".
  2. Klicke im Seitenbaum die Seite "Home" an.
  3. Wähle gegebenenfalls in der Auswahlbox, im Hauptbereich oben links, den "Konstanteneditor" aus.
  4. Wähle als Kategorie "JWEILAND.NET MUSTERPROJEKT" aus.
  5. Klicke neben dem Feld "Firmenname" auf das Stiftsymbol um den Inhalt des Feldes bearbeiten zu können.
  6. Klicke zum Abschluss oben auf die Schaltfläche "Speichern"

Alle Schritte siehst du auch im folgenden Video.

Das Logo im Kopfbereich austauschen

Oben links auf jeder Seite findest du ein Logo, das auch immer automatisch auf die Startseite verlinkt ist. Um unser Beispiel-Logo auszutauschen, gehe wie folgt vor:

  1. Lade über das Modul "Dateiliste" deine Logo-Datei hoch (Dateiformat JPG, PNG oder SVG empfohlen). Lege dafür bei Bedarf noch einen passenden Ordner an, um deine Dateien zu organisieren.
  2. Klicke im linken Hauptmenü im Backend auf "Template".
  3. Klicke im Seitenbaum die Seite "Home" an.
  4. Wähle gegebenenfalls in der Auswahlbox, im Hauptbereich oben links, den "Konstanteneditor" aus.
  5. Wähle als Kategorie "JWEILAND.NET MUSTERPROJEKT" aus.
  6. Scrolle nach unten zum Abschnitt "Layout".
  7. Klicke neben dem Feld "Logo" auf das Stiftsymbol um die Bearbeitung zu aktivieren.
  8. Trage hier den Pfad zu deiner Logodatei ein (zum Beispiel fileadmin/logos/mein_logo.png).
  9. Klicke oben auf die Schaltfläche "Speichern".

Favicon und Appicon austauschen

Favicons sind kleine Bilder, die z.B. in der Browsertitelzeile / Browsertab angezeigt werden. Üblicherweise wird hier ein Firmenlogo oder ähnliches verwendet.

Das Musterprojekt ist zur Verwendung individueller Favicons vorbereitet. Außerdem werden dabei auch sogenannte Touch-Icons (App-Icons) für Smartphones und Tablets erzeugt.

Beide Arten von Icons können ganz einfach über den Konstanteneditor ausgetauscht werden.

Bitte beachten:

  • Die Bilddatei für das Favicon und die Standard-Touch-Icons muss quadratisch sein.
  • Die zweite Variante des Bildes, die v.a. für Windows-Phones nützlich ist, benötigt ein Seitenverhältnis von 31:15, zum Beispiel: Breite 310 px, Höhe 150 px
  • Verwende eine Bilddatei im PNG oder JPG-Format. PNG wird empfohlen. Da im Musterprojekt dynamisch verschiedene Varianten erstellt werden, funktionieren hier die klassischen ICO-Dateien nicht. Diese werden heutzutage aber auch nicht mehr benötigt.

Um die Dateien anzupassen, gehe wie folgt vor:

  1. Wechsle in das Backendmodul "Template".
  2. Wähle im Seitenbaum die "Home"-Seite an (die Seite mit der Weltkugel).
  3. Im großen, rechten Bereich des Backends wechsle über die obere Auswahl-Box in den "Konstanteneditor".
  4. In der Auswahlbox bei "Kategorie" wähle "JWEILAND.NET MUSTERPROJEKT".
  5. Scrolle nach unten bis zum Bereich "Layout".
  6. Klicke auf das Stiftsymbol bei "App-/Favicon Quadratisch" bzw. "App-/Favicon Breit", um das Eingabefeld zu aktivieren.
  7. In das Eingabefeld trägst du den Pfad zu deiner Bilddatei ein. Diese kann unterhalb von fileadmin/ liegen oder auch in einer eigenen Extension:
    • Beispiel für fileadmin: fileadmin/meinverzeichnis/bilder/appicon-square.png
    • Beispiel für eine Extension: EXT:meineextension/Resources/Public/Icons/appicon-square.png
  8. Zum Abschluss klicke oben auf "Speichern".
  9. Sollte die Änderung nicht sofort sichtbar sein, musst du den Frontend-Cache und auch deinen Browser-Cache löschen.

Das Bild im Kopfbereich austauschen

Das Bild im Kopfbereich kann beliebig ersetzt oder auch entfernt werden. Dazu findest du auf jeder Seite einen speziellen Bereich, wo du z.B. ein Inhaltselement vom Typ "Text & Medien" anlegen und damit ein Bild einbinden kannst. 

Über den in TYPO3 integrierten Bild-Editor kannst du bei Bedarf noch den Ausschnitt des Bildes anpassen und dabei sogar verschiedene Bildausschnitte für Desktop-Rechner, Tablets und Smartphones einstellen.

Viele Seiten in der Navigation? Kein Problem!

Gerade bei Verwendung der horizontalen Navigation stößt man schnell an Probleme, wenn man viele Seiten auf der ersten Menüebene hat oder die Seitentitel relativ lang sind. Hier kann unter Umständen dann das Layout gestört werden, in dem die Navigation in eine zweite Zeile umbricht.

Es gibt zwar die Faustregel, dass man auf der ersten Ebene einer Navigation maximal 5-7 Seiten unterbringen soll, aber das lässt sich vielleicht nicht immer einhalten.

Im Musterprojekt haben wir dafür eine Lösung eingebaut!

Sobald der zur Verfügung stehende Platz in der Navigation nicht mehr ausreicht um alle Menüpunkte in einer Zeile anzuzeigen, erscheint automatisch ein Link, unter dem dann die restlichen Seiten zu finden sind. So kann das Menü flexibel auf verschiedene Viewport-Breiten reagieren und wird auf jedem Endgerät, egal ob Desktop-PC, Laptop, Tablet oder Smartphone, immer perfekt dargestellt.

Navigationsvarianten

Als Standard wird eine horizontale Navigation verwendet. Sofern eine Seite weitere Unterseiten hat, werden diese als ein sogenanntes "Drop-Down-Menü" angezeigt.

Zusätzlich können über den Konstanteneditor verschiedene Varianten aktiviert werden:

  • Horizontale Navigation (Standard)
  • Vertikale Navigation
  • Horizontale und vertikale Navigation

Zusätzlich kann über den Navigationstyp auch zwischen der Standardausgabe und einem sogenannten "Mega-Menü" umgeschaltet werden.

Bilder im Megamenü

In Megamenüs wird gerne mit Bildern gearbeitet. Deshalb haben wir auch diese Möglichkeit implementiert.

Wie du Bilder für die zweite Ebene des Menüs festlegen kannst und was es dabei zu beachten gibt siehst du im Video.

Seitenlayouts

Das Musterprojekt liefert verschiedene Seiten-Layouts mit um die Inhalte in einer gewissen Struktur darstellen zu können.

Mit den verschiedenen Layouts lassen sich ein Großteil der gängigen Layoutanforderungen abdecken. 

Inhalte im Fußbereich bearbeiten

Im Fußbereich (Footer) der Website können beliebige Inhaltselemente ausgegeben werden. Diese werden zentral auf einer speziellen Seite gepflegt und automatisch auf der gesamten Website angezeigt.

Layout des Fußbereichs ändern

Für den Fußbereich wird standardmäßig ein 3-spaltiges Layout verwendet. In diesen Spalten kannst du beliebige Inhaltselemente platzieren.

Zusätzlich stehen aber auch ein 2- und ein 1-spaltiges Layout zu Verfügung. Wie du das gewünschte Layout wählen kannst, siehst du im folgenden Video.

Die Seiten in der unteren Navigation

Im Fußbereich der Seite siehst du eine sogenannte "Meta-Navigation" mit Links auf verschiedene Seiten (Home, Kontakt, Impressum, Datenschutz).

In diesem Video lernst du, wie du die dort angezeigten Seiten bearbeiten kannst.

Was ist das Dashboard?

Im Dashboard kann man sich über sogenannte Widgets verschiedene Informationen anzeigen lassen. TYPO3 bringt schon einige Widgets mit, wir haben im Musterprojekt ebenfalls ein kleines Widget integriert, das dich direkt zur Dokumentation führt (also auf diese Seite).

Es gibt auch im TYPO3 Extension Repository (TER) einige Erweiterungen, die zusätzliche Widgets zur Verfügung stellen.

Das Dashboard kann jeder Backend-Benutzer für sich individuell einrichten. Man kann bei Bedarf sogar mehrere Dashboards anlegen. 

Suchmaschinenoptimierung (SEO)

In TYPO3 11 LTS benötigt man im Prinzip keine zusätzliche Extension mehr für grundlegende SEO-Funktionen. So gehören die manuelle Anpassung des Seitentitels, die Steuerung der Indexierung durch Suchmaschinen sowie die Generierung des Canonical-Tags zu den Standardfunktionen.

In den Seiteneigenschaften findest du einen Tab "SEO"

  • Titel für Suchmaschinen: hier kannst du den automatisch generierten Seitentitel (<title>-Tag im HTML) manuell überschreiben
  • Robot-Anweisungen:
    • Index dieser Seite: steuert, ob Suchmaschinen die aktuelle Seite indexieren oder nicht (Meta-Tag robots="noindex" oder "index" im HTML)
    • Dieser Seite folgen: steuert, ob Suchmaschinen-Bots den Links auf der aktuellen Seite folgen oder nicht (Meta-Tag robots="follow" oder "nofollow" im HTML)

Allerdings haben wir als Hilfe zur leichteren "On Page"-Suchmaschinenoptimierung die Extension "yoast_seo" hinzugefügt. "On Page" bedeutet: Maßnahmen, die man selber auf seiner Seite durchführen kann. 

Die Extension analysiert zum Beispiel den Text einer Seite auf Lesbarkeit und gibt auch Tipps zur Verbesserung. Außerdem wird geprüft, ob in den Seiteneigenschaften das Feld "Beschreibung" genutzt wird, denn daraus wird das wichtige description-Metatag generiert, oder ob der Titel der Seite in Ordnung ist. Die Extension hat noch weitere Funktionen, wir empfehlen, die Dokumention dazu sorgfältig zu lesen.

Social Media

In den Seiteneigenschaften jeder Seite kann man für Facebook und Twitter den Titel, die Beschreibung sowie ein Bild individuell anpassen. Dabei werden bestimmte Meta-Tags im HTML-Quellcode erzeugt (Open Graph und Twitter Cards). Dafür gibt es den Bereich "Social Media" in den Seiteneigenschaften.

Wenn ein Besucher die Seite über Facebook oder Twitter teilt, werden diese Meta-Tags von diesen Plattformen ausgelesen und berücksichtigt. So kann man sehr genau steuern, was für Texte und Bilder in der Vorschau der beiden Plattformen angezeigt werden.

Crop Varianten für Bilder in Inhaltselementen

Im Musterprojekt für TYPO3 11 nutzen wir das "Responsive Image Rendering". Das bedeutet: je nach Endgerät, mit dem die Website betrachtet wird, wird ein in der Größe für dieses Gerät optimiertes Bild ausgeliefert. Der Browser eines Smartphones bekommt also ein kleineres Bild geliefert als der Browser auf einem Desktop-Rechner. 

Dadurch wird die Performance der Website extrem verbessert, denn es macht natürlich wenig Sinn, große Bilder (= große Datenmengen) an Geräte auszuliefern, die die Bilder sowieso nur kleiner darstellen können.

Als Anwender musst Du dich aber darum überhaupt nicht kümmern, das erledigt TYPO3 vollautomatisch im Hintergrund.

Aber wir haben auch die Möglichkeit integriert, verschiedene "Crop Varianten" zu nutzen.

Das bedeutet, du kannst einem Anwender mit Smartphone einen anderen Bildausschnitt liefern als einem Anwender mit Desktop-Rechner. Bei bestimmten Arten von Bildern kann das sehr sinnvoll sein (Beispiel im Video).

Ebenfalls integriert haben wir die Möglichkeit, die Crop Varianten für die verschiedenen Geräte zu synchronisieren. Das ist dann wichtig, wenn du für alle Geräte den Bildausschnitt verändern willst. Bisher musste man das manuell machen. 

Was genau das ist, und wie das funktioniert, siehst du im folgenden Video.

Bildergalerie mit quadratischen Vorschaubildern

Um eine Bildergalerie mit TYPO3 umzusetzen, braucht man eigentlich keine Extension. Das geht auch sehr gut mit Bordmitteln.

Um die Darstellung solcher Galerien ein wenig zu verbessern, haben wir die Option eingebaut, quadratische Vorschaubilder der Bilder anzuzeigen. Das kann über das "Layout"-Feld der Inhaltselemente gesteuert werden.

Details im folgenden Video.

Meta-Daten von Dateien pflegen

Für jede Datei, die im Backend genutzt wird, können sogenannte Meta-Daten verwaltet werden. Meta-Daten können zum Beispiel ein "Alternativer Text" für Bilder sein oder eine Copyright-Information. Teilweise werden diese Metadaten auch automatisch im Frontend ausgegeben, sofern Sie vorhanden sind.

Es gibt zwei Wege, diese Meta-Daten zu pflegen:

  1. pro Inhaltselement an den dort verwendeten Dateien
  2. global über das Dateiliste-Backendmodul

Der globale Weg hat den Vorteil, dass du diese Daten nur einmal pro Datei pflegen musst. Wenn du die Datei dann in einem Inhaltselement verwendest (auch mehrfach auf verschiedenen Seiten), werden automatisch die global gepflegten Meta-Daten genutzt.

Trotzdem hast du natürlich die Möglichkeit, pro Inhaltselement die globalen Meta-Daten bei Bedarf auch lokal zu überschreiben.

Wie das alles funktioniert, siehst du im folgenden Video.

Copyright Informationen bei Bildern

In den Meta-Daten von Dateien kannst du auch Informationen zum Ersteller und zum Urheberrecht (Copyright) hinterlegen. Sofern diese Felder befüllt sind, werden diese Daten bei Bildern automatisch angezeigt.

Überblick über den Konstanteneditor

Viele Funktionen des Musterprojekts lassen sich bequem im Backend über den Konstanteneditor steuern. Im folgenden Video erhältst du einen Überblick über die verschiedenen Bereiche und Optionen. 

Auf bestimmte Funktionen gehen wir zusätzlich in weiteren Videos genauer ein.

Die Suchfunktion ausblenden

Im Musterprojekt haben wir auch eine Suchfunktion für die Website integriert. Dabei verwenden wir die Standard-Extension "indexed_search". (Es gibt noch weitere, teilweise leistungsfähigere Such-Extensions wie zum Beispiel "ke_search" oder "solr").

Solltest du diese Suchfunktion jedoch nicht benötigen, kannst du sie über eine Konstante im Konstanten-Editor des Template-Backendmoduls einfach ausschalten.

Das Sprachmenü ausblenden

Das Musterprojekt wird in 2 Sprachen ausgeliefert (Deutsch, Englisch). Solltest du deine Website jedoch nur einsprachig betreiben, kannst du das Sprachmenü über eine Konstante ausblenden. Weiter unten findest du dann noch Videos, wie du weitere Sprachen hinzufügen oder nicht benötigte Sprachen entfernen kannst.

Den Cookie Consent Manager konfigurieren

Obwohl TYPO3 in der Standardkonfiguration im Frontend gar keine Cookies setzt, haben wir ein Tool integriert, mit dem den Besuchern der Website ein sogenanntes "Cookie-Banner" angezeigt wird. Sofern Cookies durch die Seite gesetzt werden sollen, haben die Besucher damit die Möglichkeit, der Nutzung einzelner oder aller Cookies zuzustimmen, oder Cookies generell abzulehnen.

In einem neu installierten Musterprojekt wird die Zustimmung zu Cookies von Youtube oder Vimeo abgefragt, da wir auf einer Demo-Seite auch ein Vimeo-Video einbinden.

Über den Konstanteneditor kannst du das Verhalten des Cookie-Banners steuern. So kannst du es auch ganz deaktivieren, falls deine Website keine Drittanbieter-Cookies setzt.

Hinweis: Cookies zur Anmeldung im Backend oder Frontend sind technisch notwendige Cookies, auf die nicht gesondert hingewiesen werden muss.

Außerdem haben wir den Cookie Manager schon für gängige Tools vorkonfiguriert. Du musst nur in den Konstanten entsprechende Angaben ergänzen, um folgende Tools zu nutzen:

  • Matomo
  • Google Analytics
  • Facebook Pixel
  • Twitter
  • Youtube / Vimeo

Das Kontaktformular bearbeiten und anpassen

Mit TYPO3 lassen sich auch relativ komplexe E-Mailformulare umsetzen. Damit können sowohl einfache Kontaktformulare als auch mehrseitige Bestell-, Umfrage-, Bewerbungsformulare und vieles mehr realisiert werden.

Mit dem Musterprojekt erhältst du auch ein Beispielformular. Hier haben wir ein paar der verschiedenen Formularmöglichkeiten exemplarisch eingebaut. Damit du das Formular nutzen kannst, sind aber ein paar Anpassungen notwendig.

Im folgenden Video zeigen wir, wie du vorhandene Eingabefelder entfernen und auch neue Felder hinzufügen kannst.

Den Formularempfänger anpassen

Damit die Nachrichten, die über das Kontaktformular verschickt werden, auch bei dir ankommen, muss der richtige Empfänger im Formular definiert werden.

Dazu müssen im Backendmodul "Formulare" die sogenannten Finisher des Formulars bearbeitet werden. Ein Finisher definiert eine Aktion, die ausgeführt wird, wenn der Besucher der Website beim Formular auf die "Senden"-Schaltfläche klickt.

Damit die verschickten E-Mails aber auch tatsächlich beim Empfänger ankommen, gibt es auch bei der Konfiguration des entsprechenden Finishers ein paar wichtige Punkte zu beachten.

Alle Details dazu im folgenden Video.

TYPO3 für den E-Mailversand korrekt konfigurieren

Generell empfehlen wir, für den Versand von E-Mails aus TYPO3 heraus ein existierendes E-Mailkonto zu verwenden. Darüber kann der Versand per SMTP durchgeführt werden.

Du kannst entweder ein existierendes E-Mailkonto verwenden oder über dein Kundenmenü (Plesk) ein eigenes Konto für den Versand anlegen. Das kann auch eine Adresse im Format noreply@name-der-domain.de sein. Also eine Adresse, die nur für den Versand genutzt wird, bei der aber bereits die Bezeichnung sagt, dass E-Mails, die an diese Adresse geschickt werden, nicht gelesen werden.

Zur Konfiguration in TYPO3 benötigst du dann folgende Angaben:

  • Server für den Postausgang SMTP: deinedomain.de
  • Port: 465
  • Benutzername: deine E-Mailadresse
  • Passwort deiner E-Mailadresse

Die notwendigen Schritte siehst du im folgenden Video.

Die Seiten-Konfiguration (Überblick)

Über das Modul "Seite" im Bereich "Seitenverwaltung" lassen sich einige Grundeinstellungen für die Website vornehmen. Hier kannst du zum Beispiel den Seitentitel ändern, der im Frontend in der Titelzeile des Browser angezeigt wird. Oder du kannst die verwendeten Sprachen konfigurieren und vieles mehr.

WICHTIG: Indexierung der Website durch Suchmaschinen erlauben

Ein neu installiertes Musterprojekt kann nicht durch Google oder andere Suchmaschinen indexiert werden. Das wird durch Einträge in einer Datei namens robots.txt verhindert.

Das ist am Anfang auch sinnvoll, da du ja zuerst deine Inhalte in das Musterprojekt einpflegen möchtest. Erst, wenn die Demo-Inhalte entfernt und durch echte Inhalte ersetzt wurden, macht es Sinn, die Website durch Suchmaschinen indexieren zu lassen.

Steuern kannst du das durch einen Eintrag in der Seiten-Konfiguration.

Seiten und Inhalte übersetzen

Mehrsprachige Websites sind mit TYPO3 kein Problem. Hier handelt es sich von Anfang an um eine Kernfunktion von TYPO3. Gleichzeitig ist TYPO3 hier, wie auch in vielen anderen Bereichen, extrem flexibel.

Um jetzt die Inhalte einer Website mehrsprachig zur Verfügung zu stellen, sind im Prinzip zwei Schritte notwendig:

  1. Für die Seite selber muss eine Übersetzung angelegt werden
  2. Die Inhaltselemente auf dieser Seite müssen übersetzt werden.

Hierbei bietet TYPO3 zwei verschiedene Modi an:

  1. den verbundenen Modus (Connected Mode)
  2. den freien Modus (Free Mode)

Im verbundenen Modus sind die Inhaltselemente der Standardsprache eng mit den übersetzten Inhaltselementen verknüpft. Wird das Originalelement gelöscht, wird automatisch auch das übersetzte Element gelöscht.
Dieser Modus ist sinnvoll, wenn die Inhalte fast 1:1 in andere Sprachen übersetzt werden sollen.

Im freien Modus besteht keine Verknüpfung zwischen den originalen und den übersetzten Elementen. Wird das Originalelement gelöscht, bleibt das übersetzte erhalten. 
Dieser Modus sollte dann verwendet werden, wenn sich die Inhalte in den verschiedenen Sprachen in vielen Teilen unterscheiden.

Weitere Sprachen hinzufügen

Das Musterprojekt wird vorkonfiguriert mit Deutsch und Englisch als Frontend-Sprachen ausgeliefert. Aber selbstverständlich kannst du bei Bedarf auch weitere Sprachen hinzufügen.

Nicht benötigte Sprachen entfernen

Solltest du die Mehrsprachigkeit für deine Website nicht benötigen, kannst du überflüssige Sprachen im Backend auch einfach löschen.

Zusätzlich kannst du die Anzeige des Sprachmenüs im Frontend ausschalten. Wechsle dazu im Backend in das Template-Modul, wähle die Seite "Home" an, wechsle ggf. in den Konstanten-Editor und wähle dort die Kategorie "jweiland.net Musterprojekt" aus. Wenn du ein Stück nach unten scrollst, findest du die Option, das Sprachmenü ein- oder auszuschalten.

Den Cookie Consent Manager übersetzen

Das Musterprojekt wird mit den Sprachen Deutsch und Englisch ausgeliefert, dementsprechend sind auch die Texte des Cookie Consent Managers in diesen Sprachen vorhanden.

Natürlich kannst du beliebige weitere Sprachen hinzufügen. Dann müssen allerdings bei Bedarf auch die Texte im Consent Manager übersetzt werden. Dazu musst du per SSH oder FTP die Datei typo3conf/ext/jwmusterprojekt10/Resources/Private/Page/Partials/Klaro.html bearbeiten.

Die genauen Schritte siehst du im folgenden Video.

Inhaltselemente auf- und zuklappbar anzeigen

Eine in Kundenprojekten oft gewünschte Funktion haben wir jetzt auch fest im Musterprojekt integriert: die Möglichkeit, Inhaltselemente im Frontend auf- und zuklappbar darzustellen.

Gerade bei langen Texten oder vielen Inhalten auf einer Seite hast du so eine Option, die Texte übersichtlicher zu gestalten.

Außerdem haben wir die Möglichkeit integriert, Inhaltselemente nur auf Smartphones, also kleinen Bildschirmen, auf- und zuklappbar darzustellen. Auf größeren Bildschirmen werden diese Inhaltselemente "normal" dargestellt.

News-Artikel anlegen und verwalten

Mit der mitgelieferten Erweiterung "News" lassen sich Nachrichten-, Blog-Artikel oder ähnliches pflegen.

News-Artikel unterscheiden sich von normalen Inhaltselementen dadurch, dass sie in der Regel zentral an einer Stelle, bzw. in einem Ordner, gesammelt werden. Die Ausgabe der Artikel, also wo auf der Website und in welcher Form, wird über sogenannte Plugins gesteuert.

Ein News-Artikel besteht mindestens aus einer Überschrift, normalerweise dann noch aus einem Teaser-Text und dem eigentlichen Nachrichten-Text. Zusätzlich können Artikeln zum Beispiel noch Bilder, Dateien, relevante Links und mehr hinzugefügt werden.

Verschiedene Listen-Ansichten für News-Artikel

Die News-Extension liefert von Haus aus eine Listen-Ansicht für News-Artikel mit. Zusätzlich haben wir im Musterprojekt zwei weitere Darstellungsarten konfiguriert:

  • eine reduzierte Listenansicht, die zum Beispiel auf der Startseite der Website für die neuesten Meldungen genutzt werden kann
  • eine Karten-Ansicht, die als Alternative zur Standard-Ansicht genutzt werden kann.

In jedem News-Plugin kann die gewünschte Darstellungsart gewählt werden.

Den RSS-Feed für News konfigurieren

Das Musterprojekt liefert für News-Artikel einen RSS-Feed aus. Besucher können diesen Abonnieren, um so immer über neue Artikel auf dem Laufenden zu bleiben.

Wenn du diesen Feed für deine News-Artikel nutzen möchtest, musst du diesen über den Konstanteneditor konfigurieren.

Angepasst werden müssen:

  • Der Titel des RSS-Feeds
  • Die Beschreibung
  • Der Domainname der Website, inklusive Protokoll (http oder https)

Außerdem kannst du über eine Konstante den Feed generell aus- oder einschalten.

Was ist der Cache und warum muss er ab und zu gelöscht werden

Um die Auslieferung einer Website zu beschleunigen, verwendet TYPO3 verschiedene Cache-Mechanismen. Bei dem Cache handelt es sich um eine Art Zwischenspeicher, damit TYPO3 nicht bei jedem Frontend-Aufruf die angeforderte Seite neu erzeugen muss.

Ab und zu ist es aber notwendig, diesen Cache manuell zu löschen. Wie das genau funktioniert und warum das nötig ist, erfährst du im Video.

CSS anpassen

Wenn du zum Beispiel Farben oder Schriftarten des Musterprojekts verändern willst, kannst du das am einfachsten über eine spezielle CSS-Datei machen, die du direkt aus dem Backend heraus bearbeiten kannst.

Falls du dich mit Sass/SCSS auskennst: die entsprechenden Dateien findest du in der Musterprojekt-Extension.

Update des Musterprojekts durchführen

Wenn Sie bisher das Musterprojekt 10 genutzt haben, können Sie natürlich ein Upgrade auf TYPO3 11 durchführen. 

Nach dem erfolgreichen Upgrade gibt es dann zwei Möglichkeiten:

  1. Sie nutzen die Musterprojekt-Extension, Version 10 (jwmusterprojekt10), weiter in TYPO3 11
  2. Sie tauschen die Musterprojekt-Extension Version 10 gegen die Version 11 aus (jwmusterprojekt10).

Zu 1)

Vorteile:

  • Sie haben eine aktuelle TYPO3 Version
  • Falls Sie an den Dateien des Musterprojekts 10 eigene Anpassungen durchgeführt haben (CSS, TypoScript, Fluidtemplates etc.) sind diese Anpassungen nach wie vor vorhanden und die Website funktioniert im Frontend einfach weiter wie zuvor

Nachteile:

  • Sie können die neuen Funktionen des Musterprojekts 11 nicht nutzen (Responsive Image Rendering, neue Navigationsarten, mehrspaltige Container für Inhalte, Cookie Manager)

zu 2)

Vorteile:

  • Sie haben ebenfalls eine aktuelle TYPO3-Version
  • Sie haben alle neuen Funktionen des Musterprojekts 11 (s.o.)

Nachteile:

  • Sofern Sie eigene Anpassungen an Dateien des Musterprojekts 10 durchgeführt haben (CSS, TypoScript, Fluidtemplates etc.), müssen Sie diese Anpassungen manuell in die entsprechenden Dateien des Musterprojekts 11 übernehmen. Ein automatische Migration ist nicht möglich.

Beide Varianten haben also Vor- und Nachteile, und Sie müssen für sich selber entscheiden, welche Variante Sie wählen. Natürlich können wir Sie dabei unterstützen!

In den folgenden Videos zeigen wir an einem Beispiel ein komplettes Upgrade vom Musterprojekt 9 auf 10, inklusive Austausch der Musterprojekt-Extension (kann auch für Version 11 verwendet werden).

Änderungsprotokoll (Changelog)

Hier dokumentieren wir alle Änderungen, die wir im Lauf der Zeit am TYPO3 Template vornehmen. So können Anwender ihre eigene Installation immer auf dem laufenden Stand halten. Künftige TYPO3 Updates werden so deutlich einfacher.

09.01.2023: V1.0.8 [BUGFIX] edited position of allowLanguageSynchronization for nav_image, page.php

25.08.2022: V1.0.7 [UPDATE] Update b13/container (2.0.1)

12.07.2022: V1.0.6 [FEATURE] edited Security Headers, 000_config.typoscript

22.06.2022: V1.0.5 [TASK] reset default headerComment, 000_config.typoscript

23.05.2022: V1.0.3 [BUGFIX] allowLanguageSynchronization for nav_image, page.php

11.05.2022: V1.0.2 [BUGFIX] css for ce-above/ce-below ce-center

06.05.2022: V1.0.1 [BUGFIX] for svg file output. 

06.12.2021: Release of version 1.0.0

Aktualisiert: 17.08.2023