Seiteneinteilung
TYPO3 bietet die Möglichkeit, für die Platzierung von Container, definierte Vorlagen zu verwenden. In diesem Abschnitt beschreiben wir anhand von drei Beispielen, wie diese Vorlagen genutzt werden und welche Auswirkungen diese auf die Darstellung im Frontend haben. Sie können das „Frontend-Layout“ und „Backend-Layout“ beliebig kombinieren. Testen Sie es. Sie werden nichts „zerstören“.
001 - Rufen Sie mittels Icon „Seiteneigenschaften bearbeiten“ die Seiteneigenschaften der Seite auf, welche Sie anpassen wollen.
011 - Unter "Erscheinungsbild“ werden die definierten Layouts angezeigt. TYPO3 bietet von Haus aus lediglich die Vorlage „Standard“. Diese Vorlage beinhaltet die Contents „Links“, „Normal“, „Rechts“ und „Rand“.
Mehr Layouts
Wir haben die Auswahl der Layouts erweitert.
021 - Für für „Frontend-Layout“ haben wir zwei Breiten definiert. Dies sind:
- Layout zentriert &
- Breite 100%
022, 023 & 024 - Unter Backend-Layout können Sie zwischen 15 unterschiedlichen Anordnungen von Containern wählen. Von oben links nach unten rechts sind dies:
- Jumbotron
- Banner – 1 Spalte 100%
- Banner – 2 Spalten 50%:50%
- Banner – 2 Spalten 66%:33%
- Banner – 2 Spalten 33%:66%
- Banner – 3 Spalten 33%:33:%:33%
- Banner – 2 Spalten Subnav rechts
- Banner – 2 Spalten Subnav links
- 1 Spalte 100%
- 2 Spalten 50%:50%
- 2 Spalten – 66%:33%
- 2 Spalten – 33%:66%
- 3 Spalten – 33%:33%:33%
- 2 Spalten – Subnav rechts
- 2 Spalten – Subnav links
Die grauen Balken in den Layouts bedeutet, dass für diese Contents ein Hintergrundbild (Banner) eingebunden werden kann. Das Banner wird die komplette Breite der Seite einnehmen. (Eine Anleitung im Umgang mit dem Banner finden Sie auf dieser Seite.)
Die horizontalen Linien symbolisieren das Untermenü. Bei der Wahl eines solchen Layouts werden die Menüs der entsprechenden Seite ohne weiteres Zutun an entsprechender Stelle aufgebaut. Unterhalb des Menüs können Sie weitere Inhalte positionieren.
Beispiel 1:
Das gewünschte Layout soll zwei Spalten, mit einer Seitenbreite von jeweils 50%, enthalten.
031 - Sie können das Layout entweder über das Pulldownmenü „2 Spalten 50%:50%“ wählen oder das entsprechende Icon mit der linken Maustaste anklicken.
032 - Wollen Sie das Layout an die Unterseiten vererben, wählen Sie rechtsseitig das entsprechende Layout. Auch wenn Sie ein Layout auf Unterseiten vererben, können Sie in einer gewünschten Unterseiten das Layout wechseln. Die Einstellungen einer Unterseite überwiegt eine Vererbung.
033 - „Speichern & Schliessen“ Sie die Konfiguration.
041 & 042 - Im Arbeitsbereich wird die Einteilung des gewählten Layouts angezeigt. Die Titel der einzelnen Contents (in diesem Beispiel 041 „Main Content“ & 042 „Rechte Spalte“) ist direkt abhängig vom gewählten Layout.
Bestücken wir die Contents mit Inhalten. Im „Main Content“ werde ich einen Container, im Content „Rechte Spalte“ zwei Container platzieren. (Anmerkung: Die Textpassagen stammen aus Wikipedia und werden hier nur zwecks Demonstration verwendet.)
Und das Ergebnis:
Beispiel 2:
Für das 2. Beispiel soll eine Seite ausgegeben werden, welche
- einen Banner enthält,
- in eine Hauptspalte und eine
- Nebenspalte (rechtsseitigt) mit Navigation gegliedert ist.
- Die drei Container sollen dieses Mal in der Hauptspalte (Main Content) untereinander dargestellt werden.
051 - Unter „Seiteneigenschaften bearbeiten/Erscheinungsbild“ wechseln wir das Layout.
052 - Mit „Speichern & Schliessen“ übernehmen wir das Layout und lassen es uns im Arbeitsbereich anzeigen.
061 & 062 - Wiederum werden die Content in der Seite angezeigt.
063 - Die beiden Container „Bonaire“ und „Curaco“ sollen jetzt in den Content „Main Content“ verschoben werden.
064 - Um einen Container zu bearbeitet klicken Sie auf das Icon „Bearbeiten“
071 - Im Pulldownmenü „Spalte“ werden die Contents aufgelistet, welche im gewählten Layout zur Verfügung stehen. Hier wählen wir für dieses Beispiel „Main Content“ für die Hauptspalte.
072 - Mittels „Speichern & Schliessen“ übernehmen wir die Anpassung.
Mit dem Container „Curacao“ verfahren wir analog.
Titelbild (Banner)
081 Das Titelbild wurde bereits in die Seite eingebunden und der Platzhalter für das Banner gesetzt. Wie dies zu bewerkstelligen ist beschreiben wir in der Anleitung „Banner“.
Und das Ergebnis:
Beispiel 3:
Die Seite soll wie folgt aufgebaut werden:
- Navigation linksseitig
- Text unterhalb der Navigation
- Hauptspalte mit Text
Da die einzelnen Schritte bereits in den zwei vorherigen Beispielen ausführlich beschrieben wurden, werden wir für das dritte Beispiel lediglich noch Printscreens mit entsprechenden Markierungen einsetzen.
