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
- Backenduser Einstellungen
- Das Backend im Überblick (Typo3 12.4)
- Typoscript Konfigurationen (Footer & u.m.)
- Page Types
Typo3 Tutorial für Redakteure Teil 2 - Seiten erstellen & Navigationen verwalten
- Seiten erstellen
- Navigationen verwalten
Typo3 Tutorial für Redakteure Teil 3 - Templates und Content Elemente
- Templates
- Custom Content Elemente
- 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.
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.
[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.
[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
[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.
Überarbeitete Content Elemente
- custom content
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)
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.
Beispiel: Backend Ansicht
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!
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.
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!
Menu
Durch Menu Elemente können zusätzliche Navigationen innerhalb der Templates erstellt werden. Ideal in verbindung mit dem 70% / 30% 2 Spalter Template.
Plugins
Durch Plugins zusätzlich bereit gestellte Funktionalität.
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).
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.
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!
- View webpage
Durch klick auf den Button wird ein zweites Browserfenster geöffnet und die Seite angezeigt. - Edit page properties
Hier gelangst du zu den Einstellungen und Metadaten der Seite. - Cache leeren
Lösche den Cache der Seite (solltest du immer nach Fertigstellung deiner Änderungen machen) - Seite neu laden
- Zusätzliche Notizen
Erstelle eine zusätzliche Notiz zu der Seite, die nur im Backend sichtbar ist.
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.
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.
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.
Backend Ansicht
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
SEO für Anfänger Teil 01 - SEO Basics und die Disziplinen im Überblick
Grundwissen zu den Themen Onpage & Offpage Optimierung. Eine kurze Übersicht über die wichtigsten Disziplinen der Suchmaschinenoptimierung.
Meine Reise durch die Geschichte der Typografie: Eine faszinierende Entdeckung der Schriftgestaltung
Die Geschichte der Typografie ist eine lange Reise, die durch die Jahrhunderte führt und zeigt, wie sich Schrift von ihren frühesten Anfängen bis hin zur modernen digitalen Ära entwickelt hat.