# VOBS Typo3-Templates | Quickstart Redakteure
Vorarlberger Standardschulinstallation Verfasser: Kuno Sandholzer und Alex Zoppel© 2025 IT-Regionalbetreuer Vorarlberg 6900 Bregenz, Römerstraße 14 Alle Rechte vorbehalten
## 1 Einleitung Um Schulen und schulnahen Organisationen ein sinnvolles Werkzeug für die Gestaltung ihres Webauftrittes zur Verfügung stellen zu können, beschäftigen wir uns seit 2005 mit TYPO3. TYPO3 ist ein CMS ("Content Management System") und ist sehr vielseitig einsetzbar. Es deckt die meisten Features, die eine moderne Webseite bieten soll, ab. Content-Management-Systeme trennen Inhalt, Struktur und Layout von Dokumenten und integrieren die Bearbeitung und Pflege von Dokumenten in einen definierten Arbeitsablauf (Workflow). Das hat für Redakteure den Vorteil, dass sie sich ganz auf die Pflege und Aktualisierung von Texten konzentrieren können, ohne sich um das Layout, die Einbindung in ihre Seite oder andere technische Aspekte kümmern zu müssen. Die folgende Anleitung bietet einen grundlegenden Einblick in die wichtigsten Funktionen von Typo3. Dieses Skript bezieht sich im Wesentlichen auf die vom VOBS bereitgestellten Templates.

CHECKLISTE FÜR EINE VOBS-VORLAGE AN DEINER SCHULE: [https://vobs.at/cms](https://vobs.at/cms)

1. TEMPLATE2. FORMULARE3. WEBPLATZ
Du hast für deine Schule bereits eines unserer Templates (Webseiten-Vorlage für das CMS – Content Management System TYPO3) ausgesucht? Du hast bereits die beiden notwendigen Formulare unterzeichnet und an unseren Webmaster (webmaster@vobs.at) retourniert?Nach einer kurzen Einrichtungszeit erhältst du von unserem Webmaster einen Web-Platz mit Zugangsdaten inklusive deines gewünschten Templates.
Dein Web-Platz ist temporär und nur für dich einsehbar. Du kannst dir mit der Bearbeitung also so lange Zeit lassen, wie du benötigst. Wenn deine Schule bereits eine (alte?) Seite am Laufen hat, bleibt diese so lange bestehen, bis du die neue Webseite aktivieren lässt. ## 2 Typo3: Aufbau und Benutzeroberfläche ### 2.1 Anmeldung / Login Der Zugriff ist nur berechtigten Personen (Administratoren, Webautoren und Redakteuren) gestattet. Sie benötigen einen Benutzernamen und ein Passwort mit einer entsprechenden TYPO3-Berechtigung.

Ein gutes Passwort • mindestens 12 Zeichen • Groß- und Kleinbuchstaben • Sonderzeichen und Ziffern • sollte nicht in Wörterbüchern vorkommen • beinhaltet keine Namen oder Tastaturmuster

Die Anmeldung in das Backend von Typo3 erfolgt über **meinedomain.at/typo3** [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/vKmimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/vKmimage.png) **Backend** **meinedomain.at/typo3** Im Backend von TYPO3 („hintere Seite“) können Webseiten erstellt und bearbeitet sowie Inhalte eingepflegt und bearbeitet werden. [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/UQJimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/UQJimage.png) **Frontend** **meinedomain.at** Im Frontend von TYPO3 („vordere Seite“) wird die Webseite dem Betrachter angezeigt. [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/Mm1image.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/Mm1image.png) ### 2.2 Backend #### **2.2.1 Benutzerleiste**[![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/ReAimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/ReAimage.png) [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/f6Jimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/f6Jimage.png) Anpassung Ihres eigenen Benutzerkontos: Sprache, Ansichten, persönliche Daten und Passwort ändern. [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/ntYimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/ntYimage.png) Ein- und Ausklappen der Modulleiste [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/0Hximage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/0Hximage.png) Frontend- und Gesamtcache leeren (Zwischenspeicher leeren um Änderungen im Frontend zu sehen) #### **2.2.2. Modulleiste**
[![r6cimage.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/pdEr6cimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/pdEr6cimage.png) Für Redakteure sind vor allem die Modulgruppen „Web“ und „Datei“ wichtig: **Modulgruppe Web** Das Modul „Seite“ [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/1GUimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/1GUimage.png) Hier können Sie Seiten und Seiteninhalte anlegen, bearbeiten oder löschen. Die Anordnung der Inhaltselemente entspricht der Ausgabe im Frontend. Das Modul „Liste“ [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/KGuimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/KGuimage.png) Zeigt alle Inhalte einer Seite in einer Listenansicht. Anlegen von Spezialinhalten (z. Bsp. News, Termine, etc…) **Modulgruppe Datei** Das Modul „Dateiliste“ [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/H9Dimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/H9Dimage.png) Das Dateiverwaltungsmodul bietet Zugriff auf die freigegebenen Ordner und Dateien. Hier können Dateien (z.B. Bilder, PDFs) auf den Webserver hochgeladen werden. Diese können dann kopiert, verschoben, umbenannt, ersetzt, gelöscht und bearbeitet werden.
#### **2.2.3 Navigationsleiste (Seitenbaum)**
[![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/eLjimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/eLjimage.png)In der mittleren Spalte stellt das Backend die Struktur der Website dar. Die Struktur ist als Baum aufgebaut. Beim Überfahren mit der Maus von Seiten und Ordnern, wird die Seiten-ID Nummer angezeigt. Diese dient zur eindeutigen Identifizierung und ist stets bei SupportAnfragen anzugeben. [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/zqrimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/zqrimage.png) Über dem Seitenbaum befinden sich Symbole: [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/7hLimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/7hLimage.png) (1) Neue Seite – Drag and Drop (2) Backend Benutzer (3) Neue Seite mit Verweis (4) Einstiegspunkt (5) Seite mit Link zu externer URL (6) Neuer Ordner (Bsp: News-Datenbank) (7) Trennzeichen für Menü
**Seiten / Ordner ausklappen** Seiten und Ordner können mit dem Pfeil-Symbol ein- und ausgeklappt werden, wenn sich darunter Ordner oder Unterseiten befinden. [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/ReGimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/ReGimage.png) **Seiten / Ordner verschieben** Per Drag & Drop können Sie Seiten und Ordner verschieben. Klicken und Ziehen Sie mit gedrückter Maustaste dazu die Seite oder den Ordner an die gewünschte Position und lassen dann los. Wenn Sie die STRG-Taste während des Verschiebens gedrückt halten, wird die Seite kopiert. [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/qTmimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/qTmimage.png) **Weitere Optionen** Wenn Sie mit der rechten Maustaste auf eine Seite oder einen Ordner klicken (oder mit der linken Maustaste auf das Icon), erhalten Sie folgende Optionen: Ansehen, Bearbeiten, Info, Verlauf / Rückgängig, Seitenaktionen [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/TpRimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/TpRimage.png) #### **2.2.4 Arbeitsfläche / Detailansicht** Aufbau der Web-Seite. Details siehe → 2.2.8 Inhalte verwalten [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/4HOimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/4HOimage.png) #### **2.2.5 Dateien verwalten** Es gibt grundsätzlich zwei Möglichkeiten, Dateien hochzuladen: 1. Inhaltsbezogene Uploads (user\_upload): Bilder und/oder Dokumente werden direkt beim Anlegen eines Inhalts hochgeladen. Typo3 sichert diese Dateien dann in einem Unterordner des Ordners user\_upload. **Wichtig:** Diese Variante wird **NICHT empfohlen**! 2. Geplanter Upload in expliziter Dateistruktur vor Anlegen eines Inhaltselements. Um größtmögliche Transparenz bei mehreren oder zukünftigen Redakteuren zu gewährleisten, wird **diese Variante empfohlen**: ***Dateiliste*** → ***Ordnerstruktur*** → ***Dateien hochladen*** *oder* ***erstellen*** (entweder über Dateien hochladen oder Drag&Drop) oder ***Ordner erstellen*** [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/Yunimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/Yunimage.png) #### **2.2.6 Exkurs: Stapelbearbeitung von Bildern mit Irfanview**

**Dateigrößen** Fotos und Dokumente sollten vor dem Upload „webtauglich“ gemacht werden. Empfehlung für Fotos: Lange Seite: zw. 1200px und 1600px, Empfehlung für Bilder ganze Breite (Bsp. Header): 2000px Maximale Dateigröße: < 200kb Dokumente (Bsp. pdf): Speichern für Webansicht (Bilder werden so komprimiert)

„Irfanview“ ist ein mächtiges Bildbearbeitungs-Tool. Die Funktion „Stapelbearbeitung“ bietet die Möglichkeit Bilder und Fotos sehr schnell, einfach und effizient umzuwandeln. Beispiel: Umbenennen und Größenänderung mehrerer Fotos [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/178image.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/178image.png) [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/JIEimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/JIEimage.png) 1. Ordner mit Bildern auswählen 2. „Alle hinzufügen“ oder Bilder auswählen und „Hinzufügen“ 3. Verzeichnis zum Speichern der bearbeiteten Bilder auswählen Beispiel: „Aktuelles Verzeichnis verwenden“ und in diesem den Unterordner „\_bearb“ anlegen. 4. Passenden Namen geben?! ### wird durch Nummerierung ersetzt. 5. Spezial-Optionen setzen [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/Jr3image.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/Jr3image.png) In diesem Beispiel: \- Sechs „zu große“ Fotos werden umgewandelt \- Über die Spezial-Option „Größe ändern“ wird die lange Seite auf 1200px gesetzt, die Seiten bleiben „Proportional“ im richtigen Verhältnis \- Die Fotos werden über Name Workshop\_Carmen\_### alle gleich umbenannt und nummeriert (\_001, \_002,…) \- „Starten“: Die Fotos werden umgewandelt und im Unterordner „\_bearb“ gesichert. 6. Batch-Bearbeitung starten #### **2.2.7 Dokumente** Empfehlung: - PDF anstatt Word-Dokumente - PDF für Web (auf Dateigröße achten) #### **2.2.8 Inhalte verwalten** Beim Pflegen von Inhalten empfiehlt es sich, Backend und Frontend in zwei Tabs offen zu halten. Noch komfortabler sind zwei Bildschirme, wobei auf dem einem das Backend und auf dem anderen das Frontend dargestellt wird. Tab 1 bzw. Bildschirm 1: Backend [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/t5ximage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/t5ximage.png) Tab 2 bzw. Bildschirm 2: Frontend [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/Mvaimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/Mvaimage.png) Nach gespeicherten Änderungen im Backend (und anschließendem Löschen des Caches) kann im Frontend-Tab mit der Taste F5 bzw. der Tastenkombination SHIFT+F5 die Seite aktualisiert werden. Nach einem Klick auf die zu bearbeitende Seite werden alle Inhaltselemente angezeigt. - Ein Mouse-Over auf das Icon des Inhaltselements zeigt die ID des Inhaltselements - Ein Klick auf das Icon zeigt das Kontextmenü an - Stift: Inhaltselement bearbeiten - Schieberegler: Inhaltselement aktivieren (im Frontend sichtbar) / deaktivieren (im Frontend unsichtbar) [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/kBmimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/kBmimage.png) Über den Button "Neuen Inhalt erstellen" oder über das Kontextmenü "+Neu" können neue Inhaltselemente an der gewünschten Position erstellt werden. [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/rDXimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/rDXimage.png) Mit Drag&Drop können Inhaltselemente an eine andere Position verschoben werden [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/EC8image.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/EC8image.png) ## 3 Neue VOBS-Vorlage - Los geht’s! Bevor du mit der Einpflege allgemeiner Inhalte beginnst, sind zwei wichtige Schritte zu machen: ### 3.1 Schuldaten korrigieren Klicke zum Bearbeiten immer auf die gewünschte Seite bzw. das zu bearbeitende Element (Stift). Schuldaten im Footer (unterster Bereich der Webseite, auf allen Seiten sichtbar) [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/pnXimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/pnXimage.png) [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/2NVimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/2NVimage.png) Schuldaten und Verantwortliche(n) auf der Impressum-Seite [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/5Zfimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/5Zfimage.png) [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/ag0image.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/ag0image.png) Kontakt E-Mail-Adresse auf der Datenschutz-Seite [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/EFUimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/EFUimage.png) [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/yRFimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/yRFimage.png) ### 3.2 Eigenes Schul-Logo einbinden Empfehlung: - Formate .png oder .svg (Transparenz möglich) - Breite ~ 200 Pixel / Höhe ~ 80 Pixel oder Seitenverhältnis von etwa 5:2 - Name: frei wählbar (zum Beispiel: mshb-logo.svg, vsho-logo.png) Logo Upload: Dateiliste → website-assets [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/szAimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/szAimage.png) Neues Logo zuweisen T3SB Config → Seitenwurzel (Weltkugel) → Edit this Configuration [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/kIQimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/kIQimage.png) Navbar → Brand → Eigenes Logo mit korrektem Pfad und Namen angeben [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/ml1image.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/ml1image.png) Größen des Logos definieren TypoScript → Seitenwurzel (Weltkugel) → Info/Bearbeiten → Konstanten [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/mQ6image.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/mQ6image.png) Eingabe bei einem svg-Logo: svg: Es ist ausreichend EINE Seite zu definieren. Das Logo wird in korrektem Seitenverhältnis ausgegeben. (Angaben in Pixel px) [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/mCEimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/mCEimage.png) Eingabe bei einem png-Logo: Wir empfehlen, das Logo bereits bei der Vorbereitung in korrektem Seitenverhältnis hochzuladen und sowohl die Breite (width) als auch die Höhe (height) anzugeben (Angaben in Pixel px) [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/396image.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/396image.png) ### 3.3 Seitentitel bearbeiten Am Anfang sehen wir im Tab die Benennung der Seite nach dem gewählten Template: [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/Z4rimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/Z4rimage.png) 1. Umbenennung im Seitenbaum: Seite → Seitenwurzel (Weltkugel) → Seiteneigenschaften bearbeiten [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/oKXimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/oKXimage.png) 2. Umbenennung der Seite: Sites → Bearbeiten (Stift) → Titel der Webseite ändern → Speichern [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/4rwimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/4rwimage.png) ## 4. Cache leeren Nach jeder gespeicherten Änderung empfehlen wir den Seiten-Cache zu leeren. Um Änderungen im Frontend korrekt anzuzeigen, muss nach dem „Speichern“ der Zwischenspeicher (Cache) geleert werden. [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/JPsimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/JPsimage.png) ## 5. Redaktionelle Arbeiten ### 5.1 Seiteneigenschaften Seite → Root (Weltkugel) → Seiteneigenschaften bearbeiten → Erscheinungsbild [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/vucimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/vucimage.png) Standardmäßig haben **Seiten** (vererbt von der Root-Seite) ein **einspaltiges Layout**. [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/X7Yimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/X7Yimage.png) Das Backend sieht entsprechend aus: [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/lCvimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/lCvimage.png) Für **Seiten mit Unterseiten** stellen wir bei der Hauptseite in den Seiteneigenschaften ein **zweispaltiges Layout** ein. Dieses Layout wird auf alle Unterseiten vererbt. [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/EYDimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/EYDimage.png) In der Sidebar ein Inhaltselement angelegt, welches alle Unterseiten der Hauptseite als Menü anzeigt. Auch dieses Inhaltselement (Menü) wird standardmäßig auf alle Unterseiten vererbt. Das Backend sieht entsprechend aus: [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/ESuimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/ESuimage.png) Das Ergebnis im Frontend: [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/1UTimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/1UTimage.png) ### 5.2 Neue Seite erstellen Mit Drag&Drop (Seiten-Icon) kann eine neue Seite an der gewünschten Position erstellt werden. Eine so neu erstellte Seite ist am Anfang deaktiviert (nicht sichtbar). Ist die Seite fertig bearbeitet, wird diese aktiviert und somit im Frontend sichtbar gemacht. [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/aOeimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/aOeimage.png) ### 5.3 Standard Inhaltselemente Modul Seite → Seite auswählen → "+ Neuen Inhalt erstellen" an gewünschter Position auswählen. Üblicherweise geschieht dies im Bereich "Content. Exemplarisch für die meisten Inhaltselemente: Auf der Seite „Galerie/2025-26“ wird an oberster Stelle ein neues Inhaltselement „Text und Bilder“ angelegt. 3 Bilder, 3spaltig [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/2M0image.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/2M0image.png) In den meisten Fällen werden Elemente aus dem Reiter „Typischer Seiteninhalt“ erstellt. In diesem Fall genügt ein Klick auf „Text & Bilder“ [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/X4iimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/X4iimage.png) Das Inhaltselement vom Typ „Text und Bilder“ öffnet sich. [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/Ljeimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/Ljeimage.png) **Reiter "Allgemein"** Über- und Unterüberschrift können eingegeben oder leer bleiben. - Typ: Vordefinierte CSS-Klassen (Standard: h2) - Ausrichtung: Links – Mitte – Rechts (Standard: Links) - Link: Überschrift kann mit einem Link (intern, extern, Mail, etc.) versehen werden - Display headings: Zusätzliche vordefinierte CSS-Klassen display-1 bis display-6 - Header Extra Class: Eigene vordefinierte CSS-Klassen oder Bootstrap-Klassen: [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/rKXimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/rKXimage.png) - Text: Eingabe des Textes mit vielen Formatierungsmöglichkeiten [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/Ceuimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/Ceuimage.png) **Reiter "Bilder"** [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/Vx3image.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/Vx3image.png) - Button "Dateien auswählen und hochladen": **NICHT EMPFOHLEN!** Bilder werden direkt vom PC hochgeladen und inhaltsbezogen von TYPO3 im Ordner user\_upload abgelegt. - Button "Bild hinzufügen": Die Bilder wurden zuvor im Dateisystem (Dateiliste) in einem expliziten Ordner hochgeladen. Nach einem Klick auf den Button "Bild hinzufügen" wird der entsprechende Ordner geöffnet und die gewünschten Bilder werden ausgewählt (Einzelne Bilder über das "+"-Zeichen, Mehrfachauswahl über Checkbox → Auswahl importieren). Tipp: Sollen alle Bilder des Ordners hinzugefügt werden: Auswahl umkehren → Auswahl importieren [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/kfIimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/kfIimage.png) Ergebnis: Alle Bilder sind auf der Seite „aufgeklappt“ eingebunden. Jedes einzelne Bild könnte nun mit Beschreibungen und CSS-Klassen befüllt werden. [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/Evmimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/Evmimage.png) Jetzt ist ein guter Zeitpunkt um das erste Mal zu speichern! [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/4wvimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/4wvimage.png) Ergebnis: Die Bilder werden nun "eingeklappt" dargestellt. [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/h3Ximage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/h3Ximage.png) Metadaten bearbeiten, Deaktivieren/Ausblenden, Löschen, Datei-Informationen, Drag&Drop (Reihenfolg ändern): [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/bDCimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/bDCimage.png) - Bildeinstellungen [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/OmZimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/OmZimage.png) - Galerieeinstellungen [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/FtFimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/FtFimage.png) **Reiter "Erscheinungsbild"** Hier können weitere Optionen für die Darstellung des Inhaltselementes vorgenommen werden. - Padding: Außenabstand - Margin: Innenabstand - Extra Class: Vordefinierte CSS-Klassen - Container (vor allem bei einspaltigem Layout wichtig): container (Standard): no container: 100% Seitenbreite Sind alle Bearbeitungen abgeschlossen, muss zwingend gespeichert werden. [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/4wvimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/4wvimage.png) Falls die Seite noch deaktiviert ist, machen wir sie nun sichtbar. [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/AzUimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/AzUimage.png) Anschließend löschen wir noch einmal den Cache und wechseln zum Front-End-Tab [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/KzZimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/KzZimage.png) Über den Button "Anzeigen" können wir nun das Ergebnis im Frontend betrachten [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/7pBimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/7pBimage.png) Ergebnis: [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/TcWimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/TcWimage.png) ### 5.4 Spezielle Inhaltselemente [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/Fkfimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/Fkfimage.png) #### **5.4.1 Container - Columns (Spalten)** Der Inhaltstyp Columns (Spalten) ist ein Gestaltungselement, das auf jeder Seite eingefügt werden kann. Dabei wird der Anzeigebereich der Webseite in so viele Spalten aufgeteilt, wie ausgewählt werden (2, 3, 4 oder 6 Spalten). Columns gehört zu den Container-Inhaltselementen. Container geben einen Rahmen vor, in dem andere Inhaltselemente eingefügt werden können. Der Container Columns gibt entsprechend Spalten vor. Das Inhaltselement wird ausgewählt (in diesem Fall 3 Colums) und dann direkt gespeichert und geschlossen. [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/w36image.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/w36image.png) Ergebnis: [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/WkMimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/WkMimage.png) Diese Spalten werden im nächsten Schritt erst mit Inhalt gefüllt → "+ Neuen Inhalt erstellen" in der jeweiligen Spalte. Die Inhalte können dabei aus allen Inhaltstypen ausgewählt werden. Nach dem Anlegen der Inhaltselemente "Speichern" und "Schließen". In diesem Beispiel enthalten die Spalten 1 und 3 jeweils ein Bild, während die Spalte 2 in der Mitte ein "Normales Textelement" enthält. Auf Mobilgeräten werden diese Spalten (von links nach rechts) im Normalfall von oben nach unten angezeigt. Wir achten darauf, dass alle Inhaltelemente aktiviert sind. [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/chlimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/chlimage.png) Ergebnis im Frontend: [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/TW7image.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/TW7image.png) Über den Bearbeiten-Stift des Elements "Colums" → Erscheinungsbild lassen sich unzählige Einstellungen vornehmen. Diese werden hier nicht näher erläutert. [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/aONimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/aONimage.png) #### **5.4.2 Container - Card Wrapper** [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/PGHimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/PGHimage.png) Cards bietet die hier dargestellte Möglichkeit, Personen, Teams oder auch Unterbereiche der Webseite grafisch herauszuheben. Um mit Cards zu arbeiten, muss im Backend zuerst ein „Card Wrapper“-Container erstellt werden: [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/Nzjimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/Nzjimage.png) Gegebenenfalls wird eine Überschrift eingefügt, anschließend direkt wieder "Speichern" und "Schließen". Nun wird unser Card-Wrapper mit dem Inhaltselement / den Inhaltselementen "Bootstrap Card" befüllt. Dies ist in diesem Fall das einzig mögliche Inhaltselement. Es können beliebig viele Card-Elemente eingefügt werden. [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/9WDimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/9WDimage.png) Die Karten können vielfältig gestaltet und mit Effekten versehen werden. Im Reiter „Content“ wird der Text eingegeben, der auf der Karte angezeigt werden soll. Dieser kann im Bereich „Text top“ (oben) oder „Text bottom“ (unten) eingegeben werden. Diese Ortsangaben haben je nach gewählter Kartenart (Group, Decks oder Columns) eine andere Auswirkung. Im Reiter „Medien“ können bis zu zwei Bilder eingebunden werden, die je nach gewählter Kartenart dann angezeigt werden. Bei den Bildern können Extra-Klassen für den figure-tag (besondere Abstände bzw. Hover-Animationen) sowie für den img-tag (Darstellungsvarianten des Bildes) ausgewählt werden. Die Darstellung wie im Template wird durch Aktivieren von „Enable Profile Card“ im Reiter „Erscheinungsbild“ erreicht. [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/SWnimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/SWnimage.png) Wiederum können über das "Erscheinungsbild" von "Card Wrapper" unzählige Einstellungen vorgenommen werden. Hiding / Display Elements: Hier wird angegeben, ob die Karten bei gewissen Bildschirmgrößen ausgeblendet, oder erst bei bestimmten Bildschirmgrößen eingeblendet werden sollen. Groups, Decks, Columns or Slider: Unterschiedliche Anzeigemöglichkeiten der Cards. Wird ein bestimmtes Element ausgewählt, öffnen sich weitere Einstellungsmöglichkeiten. [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/O4Uimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/O4Uimage.png) **Group / Grid Cards** Gruppierte Darstellung - ohne Zwischenräume bzw. mit Zwischenräumen (Grid Cards) [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/HQOimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/HQOimage.png) **Masonry** In dieser Einstellung passt sich die Anzahl der in einer Zeile angezeigten Elemente an die verfügbare Breite an. Je schmaler der Bildschirm, umso weniger Karten werden nebeneinander angezeigt. **Slider** In der Einstellung Slider werden die Karten als horizontaler Slider angezeigt, durch den mit gedrückter Maustaste oder per Wischgeste (bei Touchscreens) durchgescrollt werden kann. [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/sjGimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/sjGimage.png) [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/Ietimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/Ietimage.png) Ergebnis: mit Navigation (Pfeile) und Paginierung (Punkte im unteren Bereich)[![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/htNimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/htNimage.png) **Flipper** Bei MouseOver werden die Karten „gedreht“ und es werden weitere in den Karten angegebenen Inhalte angezeigt. [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/ZQMimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/ZQMimage.png) #### **5.4.3 Container - Collapsible Container (Accordion)** Das Accordion eignet sich besonders für Aufzählungen. Es bietet die Möglichkeit, zu den einzelnen Items der Aufzählung weitere Informationen einblenden zu lassen. [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/T0Yimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/T0Yimage.png) Für das Accordion muss ein „Collapsible Container“ als Inhaltselement eingefügt werden. Gegebenenfalls Überschrift vergeben, danach wieder "Speichern" und Schließen. [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/UD6image.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/UD6image.png) Dieser Container wird für jeden gewünschten Eintrag in der Liste mit einem „Collapsible Element“ befüllt. Dies ist das einzige Inhaltselement, das bei einem Collapsible Container angeboten wird. [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/zBDimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/zBDimage.png) Im Collapsible Element wird der Titel und allenfalls ein Bild dazu angeführt. Dies wird als „Überschrift“ des Accordion angezeigt. Innerhalb des Collapsible Element kann ein Inhalt eingefügt werden. Dieser Inhalt kann aus jedem Inhaltselement bestehen und wird angezeigt, sobald das entsprechende Element angeklickt wird. #### **5.4.4 Container - Tab Container** Der Container „Tabs“ erlaubt es, verwandte Inhalte in Tabulatoren darzustellen, wobei jeweils nur der ausgewählte Inhalt angezeigt wird. Dieses Verhalten ist aus den Ribbons der Office-Programme bekannt. Um einen Tab Container zu verwenden, muss diese Option bei den Containern der Inhaltselemente ausgewählt werden. Der Tab Container ist am unteren Ende der Optionen angegeben. [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/6UFimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/6UFimage.png) Neuen Tab Container anlegen: [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/rXqimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/rXqimage.png) Gegebenenfalls Überschrift eingeben, danach "Speichern" und "Schließen". Neuen Inhalt erstellen: Tab Element [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/82Simage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/82Simage.png) Diese Elemente können dann mit beliebigen Inhalten befüllt werden. VORSICHT! Alle Tabs benötigen zwingend einen Inhalt. #### **5.4.5 Container - Carousel** Mit einem Carousel kann ein animierter Wechsel zwischen verschiedenen Inhalten, beschränkt auf Texte und Bilder, umgesetzt werden. Dazu muss aus den Inhaltselementen der Carousel Container ausgewählt werden. [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/swBimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/swBimage.png) Gegebenenfalls Überschrift vergeben, danach "Speichern" und "Schließen". Als Inhalt des Carousel Containers kann nur das Inhaltselement „BS Carousel“ ausgewählt werden. Das BS Carousel kann Bilder, Texte oder beides enthalten. Die Texte überlagern dabei den Bildinhalt. [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/VnIimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/VnIimage.png) Die Anzeige im Carousel kann durch verschiedene Einstellungen beeinflusst werden. Diese Einstellungen finden sich alle im Reiter „Erscheinungsbild“. Die wichtigsten kurz zusammengefasst: **Use Thumbnails as carousel-indicators**: Unter dem Carousel werden kleine Vorschaubilder der anderen Carouselinhalte angezeigt. **Switch carousel from horizontal sliding to crossfade**: Der Wechsel der Inhalte wird nicht als Sliding, sondern als Überblendung dargestellt. **Interval:** Gibt die Einblendzeit eines Inhalts in Millisekunden an. #### **5.4.6 Container - Swiper** Der Swiper Container ist ähnlich dem Carousel. Beim Swiper können jedoch mehrere Inhaltselemente parallel angezeigt werden, die animiert durchlaufen werden können. Dabei kann je nach Bildschirmgröße angegeben werden, wie viele Elemente gleichzeitig nebeneinander dargestellt werden. Außerdem kann, ähnlich wie beim Container Cards, Loop, Autoplay sowie eine Navigation eingeblendet werden. Diese Einstellungen finden sich, wie auch bei den anderen Containern im Reiter „Erscheinungsbild“. #### **5.4.6 Container - Parallax Wrapper** Mit dem Parallax Wrapper kann ein Bild eingefügt werden, das sich scheinbar im Hintergrund beim Scrollen der Seite mit einer anderen Geschwindigkeit bewegt. [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/Rcqimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/Rcqimage.png) Im Reiter „Bilder“ des Inhaltselements wird das Bild ausgewählt, das „im Hintergrund“ dargestellt werden soll. Im Reiter „Erscheinungsbild“ bestimmt der eingetragene Wert bei „Parallax effect speed.“ die Stärke des gewünschten ParallaxEffektes. Der Wert muss zwischen -1.0 und 2.0 liegen. Der Wert 1.0 bettet das Bild „normal“ in der Seite ein. In den Parallax Wrapper können beliebige weitere Inhaltselemente eingefügt werden. Diese werden dann vor dem Bild platziert. #### **5.4.8 Nachrichten-System: News (Aktuelles)** Der Inhaltstyp Nachrichten (News) kann auf jeder Seite eingegeben werden. Oft wird hierfür eine explizite Seite (zum Beispiel „Aktuelles“) verwendet. Des Weiteren ist es notwendig für die Einzelansicht einer Nachricht eine Seite „Detail“ (ohne Inhalt) anzulegen. Optional können noch die Seiten „Archiv“ und „Archiv Single“ angelegt werden. Die Datensätze des Nachrichten-Systems werden aufgrund der Übersicht in einem externen System-Ordner verwaltet und über das **Modul „Liste“** gepflegt. Im Falle der VOBS-Templates ist es der Ordner news-db [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/bqAimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/bqAimage.png) Tipp: Die Seite „Aktuelles Detail“ sollte nicht im Menü erscheinen. Aus diesem Grund wird sie in den Seiteneinstellungen im Reiter „Zugriff“ aus dem Menü ausgeschlossen: [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/qokimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/qokimage.png) [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/6HQimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/6HQimage.png) Das Anlegen eines Nachrichten-Inhalts erfolgt über "Nachrichten-System": News-Artikelliste (inkl. Detailansicht) [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/9ATimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/9ATimage.png) Nach dem Anlegen des Inhalts „Nachrichten-System“ müssen diverse Einstellungen vorgenommen werden. Es ist zu empfehlen, diese Einstellungen der Administration zu überlassen. [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/R02image.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/R02image.png) [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/TrDimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/TrDimage.png) **Erweiterungsoptionen → Einstellungen** Wir geben als Datenbank unseren System-Ordner news-db an: [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/lfTimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/lfTimage.png) **Erweiterungsoptionen → Weitere Einstellungen** Hier geben wir das Verhalten für die Einzelnachrichten-Ansicht, die Listenansicht und den Zurück-Link an. [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/JFgimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/JFgimage.png) Hier stellen wir auch ein, wie viele Einträge pro Seite dargestellt werden sollen: [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/Azqimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/Azqimage.png) **Erweiterungsoptionen → Vorlage** [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/P0dimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/P0dimage.png) **Einpflege und Bearbeitung von Artikeln (News):** Artikel (News) werden über das Modul „Liste“ angelegt und verwaltet bzw. gepflegt. Liste → news-db → Neuen Datensatz erstellen → News System → Artikel [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/5Yuimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/5Yuimage.png) [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/QSSimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/QSSimage.png) Kategorien Werden viele News verwaltet und eingepflegt, so ist unter Umständen das Anlegen von Kategorien sinnvoll. Neue Kategorien im Systemordner news-db erstellen (Beispiele: Ausflüge, Feste, Berufsorientierung,…). Bei vielen News-Datensätzen ist durch eine Kategorisierung eine differenzierte Darstellung möglich. [![image.png](https://docs.vobs.at/uploads/images/gallery/2025-11/scaled-1680-/DrZimage.png)](https://docs.vobs.at/uploads/images/gallery/2025-11/DrZimage.png)