15.01.2024

Typo3 Tutorial für Redakteure Teil 3 - Templates und Content Elemente

Im dritten und abschließenden Teil dieser Typo3 Tutorial-Reihe erfährst du, wie du deiner Seite Templates zuweist und mithilfe von Content-Elementen den Inhalt gestalten und steuern kannst. Zusätzlich lernst du, Seitenabstände zu definieren und Einfluss auf das Layout deiner Seite zu nehmen. Zum Abschluss erstellen wir gemeinsam eine Testseite und ich gebe dir noch ein paar Tipps für den Umgang mit Typo3.

INHALTSVERZEICHNIS:

Typo3 Tutorial für Redakteure Teil 1 - Das Backend kennen lernen

  1. Backenduser Einstellungen
  2. Das Backend im Überblick (Typo3 12.4)
  3. Typoscript Konfigurationen (Footer & u.m.)
  4. Page Types

Typo3 Tutorial für Redakteure Teil 2 - Seiten erstellen & Navigationen verwalten

  1. Seiten erstellen
  2. Navigationen verwalten

Typo3 Tutorial für Redakteure Teil 3 - Templates und Content Elemente

  1. Templates
  2. Custom Content Elemente
  3. Eine Testseite anlegen

1.- Templates

Templates allgemein

In früheren Versionen von Typo3 spielten Templates eine große Rolle bei der Trennung von Inhalt und Design. Mittlerweile ist es aber eher üblich, den Großteil des Layouts (abgesehen von der Hauptnavigation und dem Footer) direkt über die Content-Elemente abzubilden, um dem Redakteur mehr Flexibilität bei der Gestaltung zu bieten. Dennoch gibt es Anwendungsfälle, in denen es sinnvoll ist, durch Templates bereits einige strukturelle Inhalte vorzudefinieren, um bestimmte Elemente zu vereinfachen. Darüber hinaus ermöglichen Templates die Bereitstellung zusätzlicher Funktionalitäten. Dementsprechend weisen Typo3 Templates, abhängig vom Einsatzzweck und der zu erstellenden Seite, spezifische Vor- und Nachteile auf. Letztendlich besteht eine Seite immer aus dem Zusammenspiel von Templates und den Content Elementen. Wie stark diese ausgeprägt sind, kann von System zu System variieren und liegt letztendlich in der Hand des Entwicklers, diese so einfach wie möglich zu gestalten.

Was sind Templates?

In TYPO3 und anderen Content-Management-Systemen bezieht sich der Begriff "Template" auf eine Datei oder eine Gruppe von Dateien, die das Layout und die Struktur einer Webseite definieren.

Template auswählen
Du kannst durch Rechtsklick auf die Page und dann auf Edit, das Template über die Option "Backend Layout" unter dem Reiter "Appearance" auswählen. Zusätzlich kannst du hier ein Template auswählen, welches automatisch für alle Unterseiten, der ausgewählten Seite festgelegt wird.

Typo3 Edit Page Appearance - Template auswählen

Beispiel: Template auswählen


Typo3 Templates von Luxe-Solutions

Als Standardeinstellung wird automatisch das "Default Template" für jede neu erstellte Seite festgelegt, sodass du sofort mit der Erstellung deines Inhalts beginnen kannst. Seit TYPO3 Version 10 bieten wir jedoch die folgenden drei Templates standardmäßig integriert an und erweitern diese entsprechend den Wünschen und Anforderungen unserer Kunden. Optional kann beispielsweise ein viertes Template mit automatischer Seitenavigation in einem zweispaltigen Layout eingebettet werden.

 

[1] Default

Das Default Template ist das Standard Template und wird z.B. für die Landingpage und auch für die meisten Unterseiten genutzt. Seitenabstände werden einzig und allein durch die verwendeten Content Elemente definiert, worauf wir in Abschnitt 02. Custom Content Elemente weiter eingehen werden.

Beispiel:
In dem folgenden Beispiel wird der erste Textblock ohne Container eingefügt und hat somit keine vordefinierten Seitenabstände. Dies ist natürlich im Regelfall nicht gewünscht und dient nur der Veranschaulichung. Abhilfe schaffen hier die Container Content Elemente.

Grüner Bereich:

Stellt die über Container steuerbare Layoutbreite dar. Diese wird bei zusätzlichen Content Elementen (z.B. Sections) bereits vordefiniert und automatisch gesetzt.

Roter Bereich:

In diesem Bereich wird der Inhalt über einen Content Container gesteuert und automatisch auf die vordefinierte Layoutbreite der Website gesetzt.

Luxe-Solutions_default-template_Beispiel

[2] Containered

Dieses Template dient der Einfachheit und hat einen vordefinierten Seitenabstand. Es ist daher ideal für Seiten wie das Impressum oder Datenschutz, die einfach nur sehr viel Text ohne große Designelemente beinhalten.

Luxe-Solutions_Typo3_containered-templates

[3] Template 70 / 30

Dieses Template wird schon im vorhinein in 2 Spalten unterteilt, die mit dem Verhältnis von 70% links zu 30% rechts dargestellt werden.

Beispiel:
In dem folgenden Beispiel wird oberhalb der Spalten ein Content Element vom Typ Hero verwendet und die linke Spalte für eine Überschrift mit Fließtext genutzt. In der rechten Spalte wird ein Content Element vom Typ Menü genutzt.

Ansicht Backend

Ansicht Frontend

Luxe-Solutions Typo3 Template 70 / 30


[4] Template 70 / 30 mit integrierter Sitebar Navigation (Optional)

Dieses Template teilt sowohl Backend als auch die Frontendansicht in 2 Spalten mit einem Verhältnis von 70% links zu 30% rechts. Anders als beim Standard 70 / 30 Template ist hier eine sich automatisch generierende Sitebar Navigation integriert. Extrem hilfreich für größere Dokumentationen, die sich auf mehrere Unterseiten ausdehnen.

2.- Custom Content Elemente

Unsere Haus eigenen Custom Content Elemente ersetzen und oder erweitern die Standard Content Elemente (fluid styled content) von Typo3. Sie sind praktisch neu aufbereitet, vereinfacht und in cleanem, Suchmaschinen freundlichem HTML Code eingebettet. Die Anzahl der verfügbaren Content Elemente kann von Projekt zu Projekt, in Abhängigkeit der Wünsche und Anforderungen stark varieren. Jedoch werden sie alle über die gleiche Art und Weise in die Website eingebunden.

Content anlegen

Um Content auf einer Seite anzulegen, wähle in der linken Navigation "Page" (Seite) aus und klicke im Seitenbau auf die Seite, die du bearbeiten möchtest. Nun bist du in der Bearbeitungsansicht deiner Seite. Hier öffnet sich durch Klicken auf den "+ Content" Button ein Fenster mit sämtlichen dir zur Verfügung stehenden Content Elementen.

Beispeil Typo3 12 Content anlegen

Standard Content Elemente von Typo3

- fluid styled content

Typo3 Standard Content Elemente

Überarbeitete Content Elemente

- custom content

Luxe-Solutions Typo3 12 typical Page Content Beispiel

Bereits seit Typo3 Version 7 setzen wir auf eigene Content Elemente

Typical page content

Ersetzen und erweitern die Standard Content Elemente von Typo3. Sie werden im Regelfall am häufigsten benötigt und können nahtlos und full Responsive innerhalb der Content Container und Spalten genutzt werden.

Container / columns

Diese Content Elemente dienen der variablen Einteilung und Anpassung des Layouts einer Seite. Innerhalb der Container können alle anderen und Container selbst verschachtelt genutzt werden. Die folgenden Eigenschaften und Funktionalitäten werden bereit gestellt:

  • Höhe & Seitenabstände (Layoutbreite)
  • Hintergrundfarben
  • Einteilung des Templates in verschiedene Spalten und Sections (Full Responsive)
Typo3 12 Container Extension

2 Spalter in einem Container h-100 w-100

Lege einen Container h-100 w-100 (100% Höhe & 100% Breite) an und bestimme dadurch eine Section welche responsive den kompletten Bildschirm einnimmt. Lege innerhalb des Containers einen weiteren 2 Spalter an.

Typo3 Container Einstellungen
Typo3 Container Extension 2 Spalter Beispiel

Beispiel: Backend Ansicht

Typo3 Container Extension 2 Spalter Beispiel: Frontendausgabe

Beispiel: Frontend Ausgabe

Blauer Kasten:

Der blaue Kasten ist ein Container h-100 w-100 durch welchen in den Einstellungen, die Layoutbreite auf 60% definiert wurde und somit alle Content Elemente innerhalb des Containers automatisch eingerückt werden. Zusätzlich wurde hier die Hintergrundfarbe auf Blau gestellt.

Grüner Kasten:

Der grüne Kasten beinhaltet ein 2 Columns Content Element in dem weitere Content Elemente vom Typ "typical Page Content" genutzt werden.

 

Advanced Content

Hier findest du für das Projekt individuell erstellte Content Elemente, die problemlos innerhalb von Containern und Columns genutzt werden können. Hier ist die Auswahl von Projekt zu Projekt unterschiedlich!

Typo3 Custom Content - advanced content

 

Form elements

Form Elemente die durch Plugins zusätzliche Funktionalität bereit stellen. Im Beispiel das Eingabefeld für eine Volltextsuche, welches beliebig in deine Seite eingefügt werden kann.

Typo3 Custom Content - form elements

 

Heros

Page Heros sind besondere Content Elemente für die erste Ansicht einer Seite erstellt werden und sollten maximal 1 mal pro Seite genutzt werden. Auch hier ist die Auswahl von Projekt zu Projekt unterschiedlich!

Typo3 Custom Content - Page Heros

 

Menu

Durch Menu Elemente können zusätzliche Navigationen innerhalb der Templates erstellt werden. Ideal in verbindung mit dem 70% / 30% 2 Spalter Template.

Typo3 Custom Content - Menu

 

Plugins

Durch Plugins zusätzlich bereit gestellte Funktionalität.

Typo3 Custom Content - Plugins

 

Sections

Individuell Integrierte, bereits vollständig vordefinierte Content Elemente die, die volle Breite des Displays einnehmen. Seitenabstände und Höhe sind im Regelfall bereits vordefiniert (außer Accordions).

Typo3 Custom Content - Sections

 

Special elements

Von Typo3 bereitgestellte Standard Funktionalitäten

IFRAMES
Über das Plain HTML Element kann problemlos ein <iframe> in die Website eingebunden werden. Container helfen das Element in der richtigen größe zu definieren.

Typo3 Custom Content - Special Elements

3.- Eine Testseite anlegen

3.1 Backenduser Sections anlegen

Um eine Testseite anzulegen erstellen wir zunächst einen Ordner namens "Tests & Notizen" und legen innerhalb des Ordners zwei Seiten vom Typ "Backend User Section" an. Der Einfachheit zur liebe nennen wir diese Notizen und Testseite. Ziehe dazu einfach das jeweilige Icon des gewünschten Page Types in die benötigte Position innerhalb des Pagetrees. Backenduser Sections, verhalten sich exakt so wie eine normale Seite im Frontend. Mit dem Vorteil das diese für Websitebesucher nicht sichtbar sind und nur angezeigt werden, wenn du im Backend eingeloggt bist. Also ideal für Tests und Notizen!

  1. View webpage
    Durch klick auf den Button wird ein zweites Browserfenster geöffnet und die Seite angezeigt.
  2. Edit  page properties
    Hier gelangst du zu den Einstellungen und Metadaten der Seite.
  3. Cache leeren
    Lösche den Cache der Seite (solltest du immer nach Fertigstellung deiner Änderungen machen)
  4. Seite neu laden
  5. Zusätzliche Notizen
    Erstelle eine zusätzliche Notiz zu der Seite, die nur im Backend sichtbar ist.
Typo3 Backenduser Sections Beispiel
Luxe-Solutions Typo3 Tutorials: Leere Seite

Frontendausgabe einer neu angelegten Seite (Default Template). Da die Höhe der Seite noch nicht durch Container definiert wurde, liegt hier der Footer direkt oben an der Navigation an. 


3.2 Einen Pagehero anlegen

Als nächstes legen wir ein Content Element vom Typ Hero namens Subpagehero an. Klicke dazu auf den Button "+ Content" und wähle in der Liste des neuen Fensters Hero aus. Klicke nun auf das gewünschte Content Element, Fülle die Eingabefelder aus und Füge ein Bild hinzu. Die Funktionalität und Eingabefelder kann sich hierbei natürlich stark vom Tutorial unterscheiden.

Luxe-Solutions Typo3 Tutorials: Subpagehero anlegen

Beispiel: Content Element Subpagehero ein Bild hinzufügen


3.3 Container für weitere Section anlegen

Nun legen wir ein Content Element vom Typ "Container h-100 w-100" an und stellen diesen auf eine Layoutbreite von 60%. Im Frontend solltest du nun bereits feststellen dass der Footer nach unten gewandert ist und zwischen Hero und Footer ein Abstand von exakt 100% Bildschirmhöhe besteht. Nun könntest du anfangen weitere Container unterhalb des bereits erstellten Containers hinzuzufügen um deine Seite bereits in mehrere Sections einzuteilen. 

Luxe-Solutions Typo3 Tutorials: Container Testseite hinzufügen

3.4 Das Verschachtelungsprinzip

Dank der Container hat der Redakteur die Möglichkeit das Layout der Seite nach belieben selbst zu gestalten und Höhe, Anzahl der Spalten, sowie verschiedene Hintergrundfarben zu definieren. In Verbindung mit allen weiteren verfügbaren Content Elementen und die Möglichkeit Container ineinander zu verschachteln,  ergeben sich viele verschiedene Kombinationsmöglichkeiten um seinen Content abzubilden, dabei sind aber nicht alle Content Elemente für die Nutzung mit Containern vorhergesehen (z.B. Sections).

In dem folgenden Beispiel haben wir dem inneren Container, dem wir die Farbe blau zugewiesen haben, noch eine Überschrift und ein Texteditor Element hinzugefügt.

Luxe-Solutions Typo3 Tutorials: Testseite Backend mit Container

Backend Ansicht

Luxe-Solutions Typo3 Tutorials: Testseite Frontendausgabe

Frontend Ausgabe

 

Das war's! Nun solltest du die Grundlagen zur Verwaltung deines Contents verinnerlicht haben. Sollten noch Fragen offen sein, zögere nicht, einen Kommentar zu hinterlassen oder uns direkt eine Nachricht zu senden.

 

Weitere Beiträge die dich interessieren könnten

Kommentar schreiben

Kommentare

Keine Kommentare