• TYPO3
  • TYPO3 Template Version 14

Ready for Lift-off: Das kostenlose TYPO3 14 Template von jweiland.net

Starte mit Lichtgeschwindigkeit! Unser „Best Practice“ Musterprojekt ist die perfekte Kommandozentrale: individuell anpassbar & top-dokumentiert. Als Download oder mit Warp-Antrieb im Hosting.

TYPO3 Version:14 LTS
Responsive Ansichten für verschiedene Endgeräte des TYPO3 Template von jweiland.net

Mit dem kostenlosen TYPO3 Template kannst du sofort mit dem Erfassen von Inhalten beginnen, deine Webseite ist in kürzester Zeit online. Du musst dich nicht um Design, Templates oder TypoScript Code kümmern sondern kannst direkt loslegen.

So sieht es aus: Live-Version unseres TYPO3 Templates

Eigene Mission oder Full-Service-Flug?

Das TYPO3 14 Template steht als kostenloser Download bereit. Du kannst das Template direkt bei uns nutzen oder auch bei anderen Providern einsetzen. Beachte bitte, dass wir dir bei anderen Providern keinen Support bieten können.

Du willst besonders schnell mit einer neuen Website die Sterne erreichen? Dann buche 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.

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

Systemcheck: TYPO3 v14 benötigt mindestens PHP 8.3 und MySQL 8.0.17 oder MariaDB 10.4.3.

Die Bordausstattung Ihres Projekts:

Unsere Projektvorlage liefert eine flexible Basisstation, die du komplett individuell nach deinen Wünschen anpassen kannst. Damit dein Flug zu den Sternen auch möglichst sicher ist, haben wir bei der Erstellung des Templates die wichtigsten Themen für aktuelle Online-Projekte beachtet: 

  • Responsives Webdesign: Optimiert für alle Galaxien (Desktop, Tablet und Smartphone).
  • Kurze Ladezeiten: Warp-Speed und sauberer Code nach aktuellem Stand der Technik.
  • Sichere Navigation: Suchmaschinenoptimiert und für Barrierefreiheit vorbereitet.
  • Volle Ausstattung: Beispiele für alle Standard-Inhaltselemente direkt an Bord.
  • Optisch und funktional individuell anpassbar

Das Template 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.

Langzeit-Mission ohne Relaunch

Das Template nutzt TYPO3 Version 14 LTS. Damit bleibt dein Projekt bis mindestens Oktober 2028 (mit Extended Support sogar bis 2031) sicher auf Kurs.

Erprobte Technologie seit 2008

Unser Musterprojekt ist kein Prototyp. Seit über 15 Jahren entwickeln wir diese Vorlage mit jeder TYPO3-Generation weiter. Erfahre hier mehr über die Geschichte unserer Mission.

Die System-Spezifikationen des TYPO3-Templates

Wir haben die Systeme an Bord bewusst schlank und effizient gehalten. Doch jede erfolgreiche Mission braucht bestimmte Module, um Erfolg haben zu können, weshalb wir diese bereits vorinstalliert haben: 

  • News-Zentrale: Aktuelle Meldungen immer im Blick (Extension: news).
  • Modulare Bauweise: Flexible mehrspaltige Layouts (Extension: container).
  • Galaktische Highlights: Elegante Lightbox für die Bilddarstellung.
  • Sicherheits-Check: Integrierter, konfigurierbarer Cookie Consent Manager.

Für den Sprung auf TYPO3 v14 haben wir die Triebwerke optimiert und neue Module hinzugefügt:

  • KI-Marker: Im Backend kannst du einfach über eine Checkbox KI-generierte Bilder als solche kennzeichnen. Im Frontend erscheint dann automatisch ein informativer Tooltip dazu. KI-Kennzeichnungspflicht: Check!
  • Farb-Konfigurator: Ab jetzt kannst du die Optik deiner Website direkt im Backend über die Site Settings mithilfe eines intuitiven Color Pickers anpassen.
  • Fluid Components: Der Einsatz von Fluid Components (inkl. Best-Practice-Beispielen) ermöglicht dir die Umsetzung einer saubereren Template-Struktur.
  • Onepager-Modus: Anstelle einer Website mit Unterseiten lässt sich dein Webauftritt nun auch komplett als moderner Onepager umsetzen.
  • Next-Gen Grafik: Volle Unterstützung von WebP-Bildern für minimale Dateigrößen bei maximaler Qualität.
  • Kontrast-Button: Mit dem neuen Button im Frontend können Besucher die Darstellung sofort auf eine kontrastreiche Ansicht umstellen – für optimale Lesbarkeit und mehr Barrierefreiheit.
  • Barrierefreie Navigation: Die optische Barrierefreiheit wurde weiter optimiert, um allen Passagieren eine reibungslose Reise zu ermöglichen.

Auch im Maschinenraum haben wir die Effizienz deutlich gesteigert: CSS und JS werden jetzt über Assets statt über TypoScript eingebunden, was zusammen mit tiefgreifenden CSS-Optimierungen für echte Warp-Speed-Ladezeiten sorgt. Für maximale Performance beim Rendering haben wir wie schon im TYPO3 13 Template auf das neue Content Object PAGEVIEW umgestellt und die Bildberechnung für eine saubere Logik-Trennung in einen eigenen DataProcessor ausgelagert.

Funkkontakt zur Bodenstation

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

Was kostet das TYPO3 Template von jweiland.net?

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)

Das TYPO3 Template selbst installieren

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

Falls Du das Template in einem bestehenden Hosting Paket nachträglich selbst installieren möchtest, zeigen wir dir alle notwendigen Schritte:

  1. Eine neue Datenbank (MariaDB Version 10.11) über das Kundenmenü (Plesk) anlegen oder vergleichbare Version im Classic Hosting.
  2. Anmeldung per SSH auf dem Webserver (Anleitungen für Windows, MacOS und Linux).
  3. TYPO3-Quellcode entpacken (typo3_src-14.3.x.tar.gz) falls dieser noch nicht im Verzeichnis typo3cms vorhanden ist.
  4. Das Archiv (sitepackage-14.3.x.tar.gz) entpacken.
  5. Datenbankparameter in typo3conf/system/settings.php anpassen.
  6. Datenbankdatei typo3conf/sitepackage.sql in die neue, leere Datenbank importieren.
  7. Symlink auf TYPO3 14.3.x Quellcode anpassen/anlegen.
  8. Dokumentstamm der Domain auf das Verzeichnis zeigen lassen.
  9. In das TYPO3 Backend einloggen (User: typo3-admin, Passwort: Password1!)
    Nach der Installation umgehend das Passwort ändern!
  10. Websites→Einrichtung aufrufen.
  11. Den Stift klicken und den Namen der Domain anpassen.
  12. In der .htaccess eine 301 Weiterleitung auf die gewünschte Domain (mit oder ohne www.) erstellen.

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! Das Passwort kann im System Modul unter Benutzereinstellungen geändert werden.

Das Passwort muss die folgenden Anforderungen erfüllen:

Mindestlänge: 8 Zeichen
Mindestens ein Zeichen in Großbuchstaben
Mindestens ein Kleinbuchstabe
Mindestens eine Ziffer
Mindestens ein Sonderzeichen
Muss sich vom aktuellen Passwort unterscheiden

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 vom Administrator nachinstalliert werden.

Übrigens kann jeder Backendbenutzer seine bevorzugte Sprache in den Benutzereinstellungen einstellen. 

Konfiguration der Webseite

Über das Modul "Websites" im Bereich "Einrichtung" lassen sich einige Grundeinstellungen für die Website vornehmen. Diese musst du für deine Webseite individuell anpassen.

  • Allgemein: ID der Startseite, Titel der Webseite, Domain
  • Sprachen: weitere Sprachen hinzufügen oder nicht genutzte entfernen
  • Fehlerbehandlung: Konfigurieren was bei einem HTTP-Fehler-Status-Code geschehen soll.
    Voreingestellt ist eine 404-Fehlerseite die erscheint, wenn Nutzer eine ungültige URL aufrufen.
  • Statischen Routen: hier ist die robots.txt hinterlegt, welches die Durchsuchbarkeit der Webseite für Suchmaschinen definiert.
    Ein neu installiertes TYPO3 Template kann nicht durch Google oder andere Suchmaschinen indexiert werden. Das wird durch Einträge in einer Datei namens robots.txt verhindert. Beim Livegang sollten die Einstellungen angepasst werden.

Optische Anpassungen des Layouts mit CSS und Site Settings

Farben über die Site Settings anpassen
Farben über die Site Settings anpassen
Neuen Dateispeicher anlegen für das Verzeichnis mit den CSS Variablen
Neuen Dateispeicher anlegen für das Verzeichnis mit den CSS Variablen

1. Farben über die Site Settings anpassen

In der neuen Version des Templates musst du für grundlegende Farbanpassungen keine Dateien mehr editieren. Die Primärfarben, Sekundärfarben und weitere Akzentfarben können direkt im Modul "Websites" → "Einrichtung" → auf das Zahnrad klicken angepasst werden.

Dort findest du einen Reiter "Farben", in dem du über einen Color Picker die gewünschten Werte bequem auswählen kannst. Diese Farben werden automatisch für die jeweilige Website übernommen.

2. Spezielle CSS-Variablen für Detail-Anpassungen

Für weiterführende optische Feinheiten (wie z. B. spezifische Abstände oder Schriftgrößen), die über die Site Settings hinausgehen, nutzt das Template moderne CSS-Variablen. Diese befinden sich im Sitepackage unter:

/typo3conf/ext/jwsitepackage/Resources/Public/Css/CssVariables

Um Zugriff auf diese Datei mit CSS Variablen vom Backend aus in der Dateiliste zu bekommen, musst du über das Modul "Inhalt" → "Datensätze" einen neuen Datensatz vom Typ Dateispeicher erstellen und den oben stehenden Pfad in das Feld "Basispfad" eintragen (siehe Screenshot). Danach kannst du die Datei im Datei-Modul editieren. Die CSS Variablen in dieser Datei werden in allen Stylesheets des Templates verwendet. 

3. Verzicht auf SCSS

Im neuen v14 Template haben wir uns bewusst gegen SCSS entschieden, um die Komplexität zu reduzieren. Da moderne Browser native CSS-Variablen und Verschachtelungen (Nesting) vollständig unterstützen, ist eine Kompilierung nicht mehr notwendig.

Kein Build-Prozess: Änderungen an den CSS-Dateien sind sofort nach dem Leeren des Frontend-Caches sichtbar.

Zukunftssicher: Wir setzen auf reines, standardkonformes CSS, das direkt vom Browser interpretiert wird.

Individuelle Anpassungen in den Site Einstellungen

Seit TYPO3 Version 13 wurden die Aufgaben des Konstanten-Editors in die Site Settings überführt. Durch die Einführung des Site Settings Editors können diese Einstellungen nun direkt über das Backend-Modul "Websites" → "Einrichtung" → "Site-Einstellungen" konfiguriert werden, wodurch die bisherige Verwaltung über TypoScript-Konstanten ersetzt wird.

Viele Funktionen und Ausgabeoptionen des TYPO3 Templates lassen sich bequem im Backend über die Site-Einstellungen steuern. Auf die Site-Einstellungen hast du folgendermaßen Zugriff:

  1. Klicke im Site Websites Modul auf "Einstellungen".
  2. Klicke bei deiner Seite auf das Zahnrad "Site-Einstellungen bearbeiten".
  3. Wähle gegebenenfalls im Menü auf der linken Seite eine Kategorie aus.

Die verschiedenen Einstellungsoptionen sind im diesem Site-Einstellungen-Editor beschrieben und können bei Bedarf individuell angepasst werden. Es folgen ein paar Beispiele.

Das Logo im Kopfbereich austauschen

Oben links auf jeder Seite findest du ein Logo, das auch immer automatisch auf die Startseite verlinkt ist. 

Wie kannst du dein Logo einsetzen?

Um unser Beispiel-Logo auszutauschen, gehe wie folgt vor:

  1. Lade über das Datei Modul unter "Medien" 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 Websites Modul auf "Einrichtung".
  3. Klicke auf das Zahnrad "Site-Einstellungen bearbeiten".
  4. Wähle im Menü die Kategorie "jweiland.net Allgemeine Einstellungen" aus.
  5. Scrolle nach unten zum Abschnitt "Layout".
  6. Klicke in das Feld "Logo".
  7. Trage hier den Pfad zu deiner Logodatei ein (zum Beispiel fileadmin/logos/mein_logo.png).
  8. Klicke oben auf die Schaltfläche "Speichern".

Firmenname anpassen

Einer der ersten Schritte bei der Anpassung des TYPO3 Templates 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.

Wie kannst du den Firmennamen anpassen?

Führe folgende Schritte durch:

  1. Klicke im Websites Modul auf "Einrichtung".
  2. Klicke auf das Zahnrad "Site-Einstellungen bearbeiten".
  3. Wähle im Menü die Kategorie "jweiland.net Allgemeine Einstellungen" aus.
  4. Scrolle nach unten zum Abschnitt "Layout".
  5. Klicke in das Feld "Firmenname" und passe den Firmenname an.
  6. Klicke zum Abschluss 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 TYPO3 Template 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 Site-Einstellungen-Editor 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 TYPO3 Template dynamisch verschiedene Varianten erstellt werden, funktionieren hier die klassischen ICO-Dateien nicht. Diese werden heutzutage aber auch nicht mehr benötigt.

Wie kannst du Favicon und Appicon austauschen?

Um die Dateien anzupassen, gehe wie folgt vor:

  1. Klicke im Websites Modul auf "Einrichtung".
  2. Klicke auf das Zahnrad "Site-Einstellungen bearbeiten".
  3. Wähle im Menü die Kategorie "jweiland.net Allgemeine Einstellungen" aus.
  4. Scrolle nach unten zum Abschnitt "Layout".
  5. Klicke in die Felder "App-/Favicon Quadratisch" bzw. "App-/Favicon Breit", um das Eingabefeld zu aktivieren.
  6. 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
  7. Zum Abschluss klicke oben auf "Speichern".
  8. Sollte die Änderung nicht sofort sichtbar sein, musst du den Frontend-Cache und auch deinen Browser-Cache löschen.

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 Konstanten-Editor verschiedene Varianten aktiviert werden:

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

Zusätzlich kann beim horizontalen Menü über die Navigationsart das sogenannten "Mega-Menü" gewählt werden.

Wie kannst du die Standardnavigation ändern?

Führe folgende Schritte durch um die Standardnavigation zu ändern:

  1. Klicke im Websites Modul auf "Einrichtung".
  2. Klicke auf das Zahnrad "Site-Einstellungen bearbeiten".
  3. Wähle im Menü die Kategorie "jweiland.net Allgemeine Einstellungen" aus.
  4. Scrolle nach unten zum Abschnitt "Einstellungen für Navigation".
  5. Hier stehen die Felder zur Auswahl einer Navigationsart zur Verfügung
  6. Klicke zum Abschluss oben auf die Schaltfläche "Speichern"
Horizontales Menü
Horizontales Menü
Vertikales Menü
Vertikales Menü
Horizontales und Vertikales Menü
Horizontales und Vertikales Menü
Menütyp Mega
Menütyp Mega

Das Sprachmenü ausblenden

Das TYPO3 Template wird in 2 Sprachen ausgeliefert (Deutsch, Englisch). Solltest du deine Website jedoch nur einsprachig betreiben, kannst du das Sprachmenü ausblenden.

Wie kannst du das Sprachmenü ausblenden?

Führe folgende Schritte durch um das Sprachmenü auszublenden:

  1. Klicke im Websites Modul auf "Einrichtung".
  2. Klicke auf das Zahnrad "Site-Einstellungen bearbeiten".
  3. Wähle im Menü die Kategorie "jweiland.net Allgemeine Einstellungen" aus.
  4. Scrolle nach unten zum Abschnitt "Einstellungen für Navigation".
  5. Unterhalb "Einstellungen für Navigation" das Feld "Sprachmenü anzeigen" deaktivieren.
  6. Klicke zum Abschluss oben auf die Schaltfläche "Speichern"

Die Suchfunktion ausblenden

Im TYPO3 Template 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").

Wie kannst du die Suchfunktion ausblenden?

Führe folgende Schritte durch um die Suchfunktion auszublenden:

  1. Klicke im Websites Modul auf "Einrichtung".
  2. Klicke auf das Zahnrad "Site-Einstellungen bearbeiten".
  3. Wähle im Menü die Kategorie "jweiland.net Allgemeine Einstellungen" aus.
  4. Scrolle nach unten zum Abschnitt "Einstellungen für Navigation".
  5. Unterhalb "Einstellungen für Navigation" das Feld "Suchfeld anzeigen" deaktivieren
  6. Klicke zum Abschluss oben auf die Schaltfläche "Speichern"

Den Kontrast-Button deaktivieren

Für mehr Barrierefreiheit haben wir einen Kontrast-Button im TYPO3 14 Template integriert. Ein Klick auf den Button sorgt dafür, dass die Website in Schwarz-Weiß ausgegeben wird. Ein optimaler Kontrast für alle Besucher der Website. Bei Bedarf kann diese Funktion über die Site-Einstellungen deaktiviert werden.

Wie kannst du den Kontrast-Button deaktivieren?

Führe folgende Schritte durch um den Kontrast-Button auszublenden:

  1. Klicke im Websites Modul auf "Einrichtung".
  2. Klicke auf das Zahnrad "Site-Einstellungen bearbeiten".
  3. Wähle im Menü die Kategorie "jweiland.net Allgemeine Einstellungen" aus.
  4. Scrolle nach unten zum Abschnitt "Einstellungen für Navigation".
  5. Unterhalb "Einstellungen für Navigation" das Feld "Kontrast-Button anzeigen" deaktivieren
  6. Klicke zum Abschluss oben auf die Schaltfläche "Speichern"

Fixed Header

Das TYPO3 Template wird mit einem festen Headerbereich ausgegeben. Das bedeutet, dass beim Scrollen der Webseite dieser immer sichtbar bleibt. Wenn dies nicht gewünscht ist, kann man dies deaktivieren.

Wie kannst du den Fixed Header deaktivieren?

Führe folgende Schritte durch um den Fixed Header zu deaktivieren:

  1. Klicke im Websites Modul auf "Einrichtung".
  2. Klicke auf das Zahnrad "Site-Einstellungen bearbeiten".
  3. Wähle im Menü die Kategorie "jweiland.net Allgemeine Einstellungen" aus.
  4. Scrolle nach unten zum Abschnitt "Layout".
  5. Unterhalb "Layout" das Feld "Fixierter Header" deaktivieren
  6. Klicke zum Abschluss oben auf die Schaltfläche "Speichern"

Einblenden der Inhalte beim Scrollen

Beim Scrollen einer Seite blenden sich die Inhaltselemente langsam ein. Wenn dies nicht gewünscht ist, kann man es deaktivieren.

Wie kannst du das einblenden der Inhaltselemente deaktivieren?

Führe folgende Schritte durch um das Einblenden der Inhalte zu deaktivieren:

  1. Klicke im Websites Modul auf "Einrichtung".
  2. Klicke auf das Zahnrad "Site-Einstellungen bearbeiten".
  3. Wähle im Menü die Kategorie "jweiland.net Allgemeine Einstellungen" aus.
  4. Scrolle nach unten zum Abschnitt "Layout".
  5. Unterhalb "Layout" das Feld "Inhaltselemente einblenden" deaktivieren
  6. Klicke zum Abschluss oben auf die Schaltfläche "Speichern"

RSS Feed für News einblenden

Das TYPO3 Template 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 Konstanten-Editor konfigurieren. Außerdem kannst du über eine Konstante den Feed generell aus- oder einschalten.

Angepasst werden müssen:

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

Wenn das RSS Icon mit den Social Media Icons als Inhaltselement (Menü der Unterseiten mit Layout "Social Media Links von Seiten" ) ausgegeben werden soll, dann aktiviere im Kontstanten-Editor noch "RSS Icon in Social Media Icons Inhaltselement".

Seitenlayouts

Das TYPO3 Template liefert verschiedene Seiten-Layouts mit um die redaktionellen Inhalte in einer gewissen Struktur darstellen zu können. Diese können in den Seiteneigenschaften unter Reiter Erscheinungsbild, Backend-Layout redaktionell geändert werden.

Zusammen mit der mehrspaltigen Optionen der Extension Container lassen sich ein Großteil der gängigen Layoutanforderungen abdecken. 

Beispiele anschauen

One-Pager

Mit dem TYPO3 14 Template kannst du ganz einfach anstelle einer Website mit mehreren Unterseiten einen sogenannten One-Pager erstellen. Eine One-Pager ist eine Webseite, die komplett auf einer einzigen HTML-Seite aufgebaut ist. Alle Inhalte – z. B. Über uns, Leistungen, Referenzen, Kontakt – befinden sich untereinander in verschiedenen Abschnitten (Sections). Das Navigationsmenü verlinkt dabei nicht auf separate Seiten, sondern springt per Smooth-Scroll direkt zum jeweiligen Abschnitt auf derselben Seite (<a href="#leistungen">). 

Ein One-Pager ist ideal für fokussierte, inhaltlich schlanke Auftritte. Sobald ein Unternehmen wächst oder SEO eine Rolle spielt, ist jedoch eine klassische Multi-Page-Struktur die bessere Wahl.

Wie kannst du einen One-Pager erstellen

Gehe dabei wir folgt vor:

  1. Deine Startseite ist der One-Pager mit den Sections und allen Inhalten
  2. Erstelle für die Navigation Unterseiten vom Typ “Link” (Über uns, Leistungen etc.)
  3. Trage als “Linkziel” einen Ankersprung auf die gewünschte Section der Startseite ein
  4. Speichern und im Frontend die Startseite prüfen, ob der Link richtig gesetzt ist

Fußbereich bearbeiten und anpassen

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.

Redaktionell ist es möglich in den Seiteneigenschaften unterhalb des Reiters "Erscheinungsbild" zwischen einem ein-, zwei- oder dreispaltigen Layout (Backend-Layout) zu wählen.

Footer Backend
Footer Backend
Footer Layout
Footer Layout

Socialmedia Icons

Wenn du auf deiner Webseite zu Socialmedia Kanälen verlinken möchtest, steht dir hierfür ein extra Layout "Social Media Links von Seiten" im Menü "Unterseiten" zur Verfügung. Auf der Seite Footer Inhalt ist dieses Inhaltselement bereits eingefügt.

Einige Socialmedia Seiten unterhalb der Seite "SocialMedia Links" sind für dich bereits vorbereitet.
In den Seiteneigenschaften ist für jede Seite ein entsprechendes Icon unterhalb des Reiters Ressourcen hinterlegt. 

Du musst lediglich in den Seiteneigenschaften den Seitentyp auf Externe Seite umstellen und den individuellen Link auf deinen SocialMedia Kanal hinterlegen.

Seiten für Meta-Navigation im Footer

Seiten die im Footer Menu erscheinen
Seiten die im Footer Menu erscheinen

Im Fußbereich der Seite siehst du eine sogenannte "Meta-Navigation" mit Links auf verschiedene Seiten (Home, Kontakt, Impressum, Datenschutz). Diese Seiten können im Backend unterhalb "Metamenu" editiert, gelöscht und durch weitere Seiten ergänzt werden. Bitte beachte, dass die Seiten Impressum und Datenschutz mit individuellen Informationen angepasst werden müssen.

Suchmaschinenoptimierung (SEO)

In TYPO3 14 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
  • Beschreibung für Suchmaschinen: hier kannst du den Text für die Metadescription einfügen
  • Robot-Anweisungen:
    • Diese Seite indizieren: 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)

Zur Suchmaschinenoptimierung und Barrierefreiheit gehört auch, dass für jede Datei, die auf der Webseite eingebunden wird, die Meta-Daten ausgefüllt werden.
Für jede Datei, die im Backend genutzt wird, können diese 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 Medien-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.

Crop Varianten für Bilder in Inhaltselementen

Im TYPO3 Template 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.

Wenn der Haken unter "Änderungen in allen Crop-Varianten anwenden" gesetzt ist, nimmt das System für alle Bildschirmauflösungen die unter Desktop gewählte Einstellung. Soll der Bildausschnitt je nach Bildschirmbreite (Desktop, Tablet, Smartphone) unterschiedlich sein, so muss der Haken entfernt werden. Dann kannst du im Editor die Ausschnitte für jedes Bild individuell konfigurieren.

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. In der Lightbox durch anklicken der Bilder, werden diese in Ihrem original Seitenverhältnis ausgegeben.

Wie kannst du Bildergalerien mit quadratischen Vorschaubildern erstellen?

Führe dazu diese Schritte aus:

  • Wähle das Inhaltselement Text & Medien aus
  • Füge deine Bilder unterhalb des Reiters Medien ein. Diese Bilder werden automatisch in der Vorschau quadratisch ausgegeben. Wenn der Ausschnitt nicht passt, kannst du ihn im Bildbearbeitung Editor mit der Wahl des Verhältnisses 1:1 ändern
  • Setze die "Spaltenanzahl" auf 3 oder 4 und aktiviere die Checkbox “Bei Klick vergrößern”
  • Wähle unterhalb des Reiters Erscheinungsbild → "Layout" die Option "Galerie mit quadratischen Vorschaubildern" aus
  • Speichern und fertig

Inhaltselement auf- und zuklappen

Option unter "Erscheinungsbild" → "Rahmen" das Inhaltselement auf- und zuklappen zu lassen.
Option unter "Erscheinungsbild" → "Rahmen" das Inhaltselement auf- und zuklappen zu lassen.

Eine in Kundenprojekten oft gewünschte Funktion ist im Template 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.

Hero Image

Im TYPO3 Template haben wir ein Inhaltselement hinzugefügt, welches dem Redakteur ermöglicht Text in verschiedenen Varianten über ein Bild zu positionieren. Die Einstellungen können im Inhaltselement unterhalb des Reiters "Erscheinungsbild" → "Layout" und "Rahmen" gemacht werden.

  • Text links
  • Text mittig
  • Text rechts
  • Text auf dunklem Hintergrund
  • Text auf hellem Hintergrund
  • Text ohne Hintergrund

Da Bildhöhe und Textlänge in der Ausgabe aufeinander abgestimmt sein müssen, gibt es die Option in den Site Settings die maximale Textlänge für Redakteure zu begrenzen.

  1. Klicke im Websites Modul auf "Einrichtung".
  2. Klicke auf das Zahnrad "Site-Einstellungen bearbeiten".
  3. Wähle im Menü die Kategorie "jweiland.net Allgemeine Einstellungen" aus.
  4. Scrolle nach unten zum Abschnitt "Layout".
  5. Scrolle zum Feld “Maximale Anzahl an Zeichen für den Bodytext auf dem Hero-Bild”.
  6. Passe die gewünschte Zeichenanzahl entsprechend an.
  7. Klicke zum Abschluss oben auf die Schaltfläche "Speichern".

Erweiterung News für Nachrichten

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

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.

News-Artikel unterscheiden sich von normalen Inhaltselementen dadurch, dass sie in der Regel zentral an einer Stelle in einem Verzeichnis, gesammelt werden. Die Ausgabe der Artikel auf der Website wird durch das Inhaltselement News mit verschiedenen Typen gesteuert.

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 TYPO3 Template 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 unterhalb des Reiters "Plug-In" unter "Vorlage" → "Template-Layout" gewählt werden.

Hinweis zur Extension news_administration: Wir binden keine kostenpflichtigen Extensions in unser SitePackage ein. Deshalb steht diese Funktion nicht zur Verfügung.

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 TYPO3 Template wird die Zustimmung zu Cookies von Youtube oder Vimeo abgefragt, da wir auf einer Demo-Seite auch ein Vimeo-Video einbinden.

Über den Site Settings Editor 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 Site Settings entsprechende Angaben ergänzen, um folgende Tools zu nutzen:

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

Seit der Version 13.2.0 unseres Templates für TYPO3 haben wir auch den Google Tag Manager vorkonfiguriert.

Den Cookie Consent Manager übersetzen

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 folgende Datei bearbeiten:

typo3conf/ext/jwsitepackage/Resources/Private/Page/Templates/Partials/Klaro.html

 

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.

Der Cache einer Seite wird automatisch gelöscht, wenn ein Redakteur auf einer Seite ein Inhaltselement neu speichert. 

Im Backend kann man den Seitencache als Redakteur löschen, indem man auf das Blitz Icon klickt.

Wie sieht es mit Updates aus?

Das Projekt wird kontinuierlich weiter entwickelt. Die aktuelle Version 14.3.1 des Templates vom April 2026 basiert auf TYPO3 Version 14 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 individuelle Änderungen an den Dateien des TYPO3 Templates durchführen kann. Bei automatischen Updates würden diese Änderungen überschrieben werden.

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

Update des TYPO3 Templates durchführen

Wenn du bisher das Musterprojekt 13 genutzt hast, kannst du natürlich ein Upgrade auf TYPO3 Version 14 durchführen. 

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

1. Du nutzt die Musterprojekt-Extension, Version 13 (jwmusterprojekt13), weiter in TYPO3 V14

Vorteile:

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

Nachteile:

  • Du kannst die neuen Funktionen des Sitepackages für die Version 14 (jwsitepackage14) nicht nutzen.

Schritte zum Upgraden des Musterprojekts 13 für TYPO3 V14

In dieser Anleitung gehen wir von einem Musterprojekt 13 im Originalzustand aus, das abgesehen von Anpassungen im Site Settings Editor und den Stylesheets nicht verändert wurde. Bei weitreichenderen Veränderungen können zusätzliche Maßnahmen erforderlich sein.

  1. Bitte halte dich an die Hinweise in unserer allgemeinen Upgrade-Anleitung
  2. Deaktiviere die Extensions jwsitepackage13 und container
  3. Führe das TYPO3 Core Upgrade auf Version 14 durch
  4. Upgrade-Wizards ausführen, TYPO3 und PHP-Cache löschen, Analyze Database Structure ausführen
  5. Führe alle Extension-Updates durch und aktiviere die Exension container wieder
  6. Nun müssen die folgenden Anpassungen am Musterprojekt 13 durchgeführt werden:
  • Versionsnummern in den Dateien composer.json und ext_emconf.php unter "require" bzw. 'depends' anpassen
  • in der Datei typo3conf/ext/jwsitepackage/Classes/ViewHelpers/ExistsViewHelper.php am Ende der Zeile 69: public function render(): mixed (type „mixed“) hinzufügen
  • in der Datei typo3conf/system/settings.php oder über das InstallTool unter $GLOBALS['TYPO3_CONF_VARS']['SYS'] 'systemLocale' => ‘de_DE.UTF-8’ hinzufügen
  • die Datei .htaccess im Root-Verzeichnis durch die Standard-.htaccess von TYPO3 v14 oder durch die von unserem Template für TYPO3 Version 14 ersetzen

Jetzt kannst du die Extension jwsitepackage13 wieder aktivieren. Lösche anschließend den PHP-Cache und führe Analyze Database Structure sowie Rebuild PHP Autoload Information aus. Gehe dann noch ins Backend-Modul “System > Maintenance” und aktualisiere den Referenzindex.

2. Du tauscht die Sitepackage Extension Version 13 (jwmusterprojekt13) gegen die Version 14 aus (jwsitepackage14).

Vorteile:

  • Du hast ebenfalls eine aktuelle TYPO3-Version
  • Du hast alle neuen Funktionen des Sitepackages V14 

Nachteile:

  • Sofern du eigene Anpassungen an Dateien des Musterprojekts V13 durchgeführt hast (CSS, TypoScript, Fluidtemplates etc.), musst du diese Anpassungen manuell in die entsprechenden Dateien des Sitepackages V14 übernehmen. Ein automatische Migration ist nicht möglich.

Beide Varianten haben also Vor- und Nachteile, und du musst für dich selber entscheiden, welche Variante du wählst. Natürlich können wir dich dabei unterstützen!

Das Template für TYPO3 in einer Composerumgebung nutzen

Da unser Template für TYPO3 auf einem nicht öffentlichen Server liegt, kann es derzeit nicht über packagist.org oder ein individuelles Repository heruntergeladen werden. Mit den folgenden Schritten kannst du aber aus unserem Template für TYPO3 eine Composer-fähige Version erstellen. Wir erklären im Folgenden parallel die Schritte auf unserem Cloud-Server und lokal mit DDEV:

1.) lade die aktuelle Version des TYPO3 Templates herunter (tar.gz Archiv), oder verwende das tar.gz, das sich bereits auf deinem Server befindet.

2.) Installiere TYPO3 14.3 (siehe auch https://get.typo3.org/version/14)

2.a) Auf dem Cloud-Server:

Wenn du auf dem Server arbeitest, benötigst du den Pfad zur PHP-Version und zu Composer. Du kannst die Pfade dem Befehl voranstellen oder auch eine PHP-Version für die Konsole als Standard festlegen. Hier der Pfad zur PHP Version 8.3 und zu Composer:

/opt/alt/php83/usr/bin/php /usr/local/psa/var/modules/composer/composer.phar

Vollständiger Installationsbefehl mit Pfaden (mit Composer-Pfad fällt das “composer” im Befehl weg):

/opt/alt/php83/usr/bin/php /usr/local/psa/var/modules/composer/composer.phar create-project "typo3/cms-base-distribution:^14.3" site-package

Wechsel in das eben erzeugte Verzeichnis “site-package”.

2.b) Lokal: Stelle sicher, dass deine DDEV-Installation auf dem neuesten Stand ist. Erstelle einem neuen Projektordner mit dem Namen “site-package” und führe darin mit deiner bevorzugten Shell folgende Befehle aus:

ddev config --project-type=typo3 --docroot=public --php-version 8.2 --webserver-type 'apache-fpm'
ddev composer create --no-install "typo3/cms-base-distribution:^14.3"
ddev composer install
ddev typo3 setup --server-type=apache --driver=mysqli --host=db --port=3306 --dbname=db --username=db --password=db
ddev restart

3.) Füge folgende Pakete hinzu (lokal “ddev” voranstellen):

composer req typo3/cms-indexed-search:^14.3
composer require ichhabrecht/content-defender
composer require jweiland/sync-crop-areas
composer require jweiland/video-shariff
composer require yoast-seo-for-typo3/yoast_seo

4.) Entpacke das heruntergeladene Template, z.B. “sitepackage-14.3.20.tar.gz” mit 

tar -zxvf sitepackage-14.3.20.tar.gz

und verschiebe das Unterverzeichnis sitepackage-14lts/typo3conf/ext/jwsitepackage in das Verzeichnis site-package/packages der TYPO3 Installation.

5.) Kopiere aus dem entpackten Template das Verzeichnis sitepackage-14lts/typo3conf/sites in das Verzeichnis site-package/config (falls noch nicht vorhanden, erstelle ein Verzeichnis /config)

6.) Editiere die Datei /config/sites/main/config.yaml und passe die erste Zeile base: an deine Domainnamen an. (Dieser lautet in einer DDEV Umgebung [projektordnername].ddev.site, alles klein geschrieben und ohne Leerzeichen.)

7.) Kopiere aus dem entpackten Template die Datei sitepackage-14lts/typo3conf/system/settings.php in das Verzeichnis site-package/config/system/ (falls noch nicht vorhanden, erstelle ein Verzeichnis /system)

8.) Kopiere aus dem entpackten Template das Verzeichnis sitepackage-14lts/fileadmin in das Verzeichnis site-package/public

9.) Kopiere aus dem entpackten Template die Datei sitepackage-14lts/.htaccess in das Verzeichnis site-package/public

10.) Überschreibe in der Datei composer.json im Hauptverzeichnis den Repository-Eintrag mit dem folgenden Abschnitt (verwende für die [Versionsnummer] die Versionsangabe aus der Datei site-package/packages/jwsitepackage/ext_emconf.php):

"repositories": {
    "packages": {
      "type": "path",
      "url": "./packages/*",
      "options": {
        "reference": "none",
        "symlink": true,
        "versions": {
          "jweiland/jwsitepackage": "[Versionsnummer]"
        }
      }
    }
  }

11.) Die Datenbank importieren

11.a) Auf dem Cloud-Server: Verwende falls vorhanden die bestehende Datenbank des Templates für TYPO3 oder erstelle in der Datenbank-Verwaltung eine neue Datenbank. Dann wechsel im entpackten Template in das Verzeichnis sitepackage-14lts/typo3conf/ und importiere die Datei sitepackage.sql in die neue Datenbank:

mysql -h [hostname] -u [benutzername] -p [datenbanknabe] < sitepackage.sql

Gebe abschließend noch das Passwort der neuen Datenbank an.

Trage danach die Verbindungsdaten zur Datenbank in die Datei site-package/config/system/settings.php ein.

11.b) Lokal: Kopiere aus dem entpackten Template die Datei sitepackage-14lts/typo3conf/sitepackage.sql in das Verzeichnis site-package und importiere die Datenbank mit

ddev import-db --file=sitepackage.sql

12.) Installiere jetzt das jwsitepackage mit dem folgenden Befehl (verwende für die [Versionsnummer] die Versionsangabe aus der Datei site-package/packages/jwsitepackage/ext_emconf.php) lokal “ddev” voranstellen:

composer req jweiland/jwsitepackage:[Versionsnummer]

Auf dem Cloud-Server: Gehe in die Domainverwaltung und bearbeite deine Domain, so dass diese auf dein Projektverzeichnis in das Verzeichnis public zeigt (httpdocs/typo3cms/site-package/public). Achte auf die richtige PHP-Version. Jetzt kannst du die Website mit deiner Domain im Browser aufrufen.

Lokal: mit dem Befehl:

ddev launch

kannst du jetzt deine Website im Browser aufrufen.

13.) Logge dich mit den Standard-Zugangsdaten des Templates im Backend ein und ändere deine Zugangsdaten!

14.)  Wähle das Modul “System” → “Wartung” und dann “Manage Language Packs”. Klicke auf “Update all”

15.) Wähle das Modul “System” → “Environment” und klicke auf “Check Directory Status…” Scrolle nach unten und klicke den “Try to fix file and folder permissions” Button.

16.) Im Modul “System” → “Wartung” klicke jetzt bitte noch auf “Flush cache”. Die Installation des Templates für TYPO3 mit Composer ist nun fertig eingerichtet.

Ä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.

27.04.2026: v14.0.0 - Release

Aktualisiert: 30.04.2026