Kostenloses TYPO3 Template (Musterprojekt) für TYPO3 10 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:10 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 Seite kümmern.  

So sieht es aus: Live-Version unseres TYPO3 Templates

Das TYPO3 Template steht Download für alle interessierten Anwender bereit. So können Sie das TYPO3 Template auch bei anderen Providern installieren. Allerdings können wir dann leider keinen technischen Support dafür bieten. Alternnativ können Sie unseren TYPO3 Developer Tarif kostenlos und unverbindlich für 3 Monate bestellen, dort ist das Template (wie in allen unseren Hosting Paketen) bereits vorinstalliert.

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

TYPO3 10 LTS benötigt mindestens PHP 7.2, wir empfehlen für die Nutzung des Musterprojekts jedoch mindestens PHP 7.3.

Wir freuen uns über Anregungen und Verbesserungsvorschläge. 

Die Vorlage ist individuell anpassbar und kann mit weiteren Funktionen 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 kann man auch lernen, wie man ein TYPO3-Projekt aufsetzt. Es soll dabei keine Design-Vorlage sein, sondern eine Projektvorlage. Das Design kann beliebig an eigene Vorstellungen angepasst werden.

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

  • Anzeige von aktuellen Meldungen (Extension: news)
  • suchmaschinenfreundliche, lesbare Web-Adressen (sprechende URLs)
  • Unterstützung bei der Suchmaschinenoptimierung der Website
  • Lightbox-Effekt für das Klick-Vergrößern von Bildern
  • Konfigurierbarer Cookie Consent Manager

Das Musterprojekt basiert auf der TYPO3 LTS-Version 10.4. Dadurch ist bis mindestens Ende April 2023 ein Betrieb ohne Relaunch möglich. Mit dem verlängerten Support (Extended Long Term Support, ELTS) gibt es Updates und Unterstützung bis Ende April 2026.  

Einige Informationen zur Geschichte der Vorlage.

Was kostet das Musterprojekt?

Das Musterprojekt ist bei allen neuen TYPO3 Hosting-Paketen von jweiland.net im Preis enthalten und bereits vorinstalliert.

Wie sieht es mit Updates aus?

Das Projekt wird kontinuierlich weiter entwickelt. Die aktuelle Version 1.5.1 des Templates vom Juli 2020 basiert auf TYPO3 Version 10.4 LTS und steht im Hostingpaket automatisch zur Verfügung.

Beachten Sie 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 Sie bei Bedarf neue Funktionen oder Fehlerbehebungen selber nachrüsten können, protokollieren wir alle wichtigen Änderungen im Änderungsprotokoll.

Beispielwebseiten auf der Basis unseres Musterprojektes

Was ist neu in Version des Templates?

In der Version 10 des Musterprojekts haben wir nicht nur bestehende Funktionen verbessert, sondern auch viele neue Features hinzugefügt. Im folgenden Video sehen Sie ein paar dieser Neuerungen im Überblick.

Da wäre zum Beispiel

  • das neue Dashboard von TYPO3 10 LTS
  • eine Cookie Management Lösung, basierend auf dem Open Source-Skript "Klaro"
  • Reponsive Images und verschiedene Crop-Varianten für Bilder 
  • verbesserte und neue Navigationsvarianten (z.B. ein Megamenü)
  • Raster-Container für Inhalte (noch nicht im Video zu sehen, siehe separates Video dazu)
  • Auf-/Zuklappbare Inhaltselemente (nicht im Video zu sehen, siehe separates Video dazu)
  • und vieles mehr

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

Anmeldung am Backend und erste Schritte

Das Backend ist die Verwaltungsoberfläche Ihrer TYPO3-Website. Im Backend pflegen Sie die Inhalte der Seiten.

In das Backend gelangen Sie immer über ihre-domain.de/typo3.

Melden Sie sich dort mit Ihrem Benutzernamen und dem Passwort an.

Bei einem frisch installierten Musterprojekt ist der Benutzername immer typo3-admin. Aus Sicherheitsgründen sollten Sie den Benutzernamen und vor allem das Passwort direkt nach der ersten Anmeldung ändern. Wie das funktioniert, sehen Sie im folgenden Video.

Tipp: verwenden Sie unbedingt ein sicheres Passwort! Hier finden Sie ein paar Tipps zu sicheren Passwörtern.

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 können Sie statt einem Firmennamen hier auch ihren persönlichen Namen oder einen beliebigen anderen Text eingeben.

Führen Sie folgende Schritte durch:

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

Alle Schritte sehen Sie auch im folgenden Video.

Das Logo im Kopfbereich austauschen

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

  1. Laden Sie über das Modul "Dateiliste" ihre Logo-Datei hoch (Dateiformat JPG, PNG oder SVG empfohlen). Legen Sie dafür bei Bedarf noch einen passenden Ordner an, um Ihre Dateien zu organisieren.
  2. Klicken Sie im linken Hauptmenü im Backend auf "Template".
  3. Klicken Sie im Seitenbaum die Seite "Home" an.
  4. Wählen Sie gegebenenfalls in der Auswahlbox, im Hauptbereich oben links, den "Konstanteneditor" aus.
  5. Wählen Sie als Kategorie "JWEILAND.NET MUSTERPROJEKT" aus.
  6. Scrollen Sie nach unten zum Abschnitt "Layout".
  7. Klicken Sie neben dem Feld "Logo" auf das Stiftsymbol um die Bearbeitung zu aktivieren.
  8. Tragen Sie hier den Pfad zu Ihrer Logodatei ein (zum Beispiel fileadmin/logos/mein_logo.png).
  9. Klicken Sie 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

Um die Dateien anzupassen, gehen Sie wie folgt vor:

  1. Wechseln Sie in das Backendmodul "Template".
  2. Wählen Sie im Seitenbaum die "Home"-Seite an (die Seite mit der Weltkugel).
  3. Im großen, rechten Bereich des Backends wechseln Sie über die obere Auswahl-Box in den "Konstanteneditor".
  4. In der Auswahlbox bei "Kategorie" wählen Sie "JWEILAND.NET MUSTERPROJEKT".
  5. Scrollen Sie nach unten bis zum Bereich "Layout".
  6. Klicken Sie auf das Stiftsymbol bei "App-/Favicon Quadratisch" bzw. "App-/Favicon Breit", um das Eingabefeld zu aktivieren.
  7. In das Eingabefeld tragen Sie den Pfad zu Ihrer 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 klicken Sie oben auf "Speichern".
  9. Sollte die Änderung nicht sofort sichtbar sein, müssen Sie den Frontend-Cache und auch Ihren Browser-Cache löschen.

Das Bild im Kopfbereich austauschen

Über die Seiteneigenschaften kann ein Bild definiert werden, das im Kopfbereich der Seite ausgegeben wird. Wichtig ist, die Maße des Bildes korrekt über den Konstanteneditor zu hinterlegen.

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.

Im Video sehen Sie die verschiedenen Optionen und die notwendigen Schritte.

Viele Seiten in der Navigation? Kein Problem!

Gerade bei Verwendung der horizontalen Navigation stößt man schnell an Probleme, wenn man viele Seite 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.

In Version 10 des Musterprojekts 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.

Wie das aussieht, sehen Sie im folgenden Video.

Bilder im Megamenü

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

Wie Sie Bilder für die zweite Ebene des Menüs festlegen können und was es dabei zu beachten gibt sehen Sie 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. Wer es flexibler möchte: Wir haben auch Container-Elemente für flexible mehrspaltige Inhalte integriert.

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 können Sie beliebige Inhaltselemente platzieren.

Zusätzlich stehen Ihnen aber auch ein 2- und ein 1-spaltiges Layout zu Verfügung. Wie Sie das gewünschte Layout wählen können, sehen Sie im folgenden Video.

Die Seiten in der unteren Navigation

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

In diesem Video sehen Sie, wie Sie die dort angezeigten Seiten bearbeiten können.

Was ist das Dashboard?

Das Dashboard ist ein neues Modul in TYPO3 10 LTS. Über sogenannte Widgets kann man sich hier verschiedene Informationen anzeigen lassen. TYPO3 bringt schon einige Widgets mit, wir haben im Musterprojekt ebenfalls ein kleines Widget integriert, das Sie direkt zur Dokumentation führt (also auf diese Seite).

Es gibt inzwischen 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. 

Wie das funktioniert, sehen Sie im Video.

Suchmaschinenoptimierung (SEO)

In TYPO3 10 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 finden Sie einen Tab "SEO"

  • Titel für Suchmaschinen: hier können Sie 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)
  • Kanonischer Link: gibt die Ursprungs-URL der aktuellen Seite an. Wird automatisch gesetzt, kann aber bei Bedarf manuell überschrieben werden. 

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

TYPO3 10 LTS bringt ebenfalls die integrierte Unterstützung einiger Social Media-Funktionen mit.

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 neuen 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

In Version 10 des Musterprojekts haben wir den Umgang mit Bildern im Frontend stark verbessert.

Zum einen nutzen wir jetzt 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 müssen Sie sich aber darum überhaupt nicht kümmern, das erledigt TYPO3 vollautomatisch im Hintergrund.

Zum anderen haben wir die Möglichkeit integriert, verschiedene "Crop Varianten" zu nutzen.

Das bedeutet, Sie können 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 Sie für alle Geräte den Bildausschnitt verändern wollen. Bisher musste man das manuell machen. 

Was genau das ist, und wie das funktioniert, sehen Sie 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 Sie diese Daten nur einmal pro Datei pflegen müssen. Wenn Sie die Datei dann in einem Inhaltselement verwenden (auch mehrfach auf verschiedenen Seiten), werden automatisch die global gepflegten Meta-Daten verwendet.

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

Wie das alles funktioniert, sehen Sie im folgenden Video.

Überblick über den Konstanteneditor

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

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

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 erhalten Sie auch ein Beispielformular. Hier haben wir ein paar der verschiedenen Formularmöglichkeiten exemplarisch eingebaut. Damit Sie das Formular nutzen können, sind aber ein paar Anpassungen notwendig.

Im folgenden Video zeigen wir, wie Sie vorhandene Eingabefelder entfernen und auch neue Felder hinzufügen können.

Den Formularempfänger anpassen

Damit die Nachrichten, die über das Kontaktformular verschickt werden, auch bei Ihnen 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.

Sie können entweder ein existierendes E-Mailkonto verwenden, oder über Ihr Kundenmenü 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.

Hier finden Sie eine Videoanleitung zur Konfiguration von E-Mailadressen im Kundenmenü.

Zur Konfiguration in TYPO3 benötigen Sie dann folgende Angaben:

  • Server für den Postausgang SMTP: sslout.de
  • Port: 465
  • Benutzername: ihre E-Mailadresse
  • Passwort ihrer E-Mailadresse

Die notwendigen Schritte sehen Sie im folgenden Video.

Das Musterprojekt manuell installieren

Sie können das Musterprojekt auch selber manuell installieren. Am einfachsten ist es, wenn Sie dafür unser Setup-Tool verwenden, da dieses einige notwendige Anpassungen im Projekt für Sie übernimmt.

Folgende Kenntnisse sind für die Installation notwendig:

  1. Eine neue Datenbank über das Kundenmenü anlegen
  2. Anmeldung per SSH auf dem Webserver (Anleitungen für Windows, MacOS und Linux)

Im folgenden Video werden alle weiteren Schritte gezeigt.

Weitere Anleitungen folgen...

Die Dokumentation ist noch nicht vollständig. Wir werden in den nächsten Tagen noch viele weitere Videoanleitungen hier veröffentlichen. Schauen Sie einfach immer mal wieder auf dieser Seite vorbei.