Direkt zum Hauptinhalt

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 

1. TEMPLATE 2. FORMULARE 3. 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

Backend
meinedomain.at/typo3
Im Backend von TYPO3 („hintere Seite“) können Webseiten erstellt und bearbeitet sowie Inhalte eingepflegt und bearbeitet werden. 

image.png

Frontend
meinedomain.at
Im Frontend von TYPO3 („vordere Seite“) wird die Webseite dem Betrachter angezeigt. 

image.png

2.2 Backend

2.2.1 Benutzerleisteimage.png

image.png
Anpassung Ihres eigenen Benutzerkontos: Sprache, Ansichten, persönliche Daten und Passwort ändern.  

image.png
Ein- und Ausklappen der Modulleiste

image.png
Frontend- und Gesamtcache leeren (Zwischenspeicher leeren um Änderungen im Frontend zu sehen) 

2.2.2. Modulleiste

r6cimage.png

Für Redakteure sind vor allem die Modulgruppen „Web“ und „Datei“ wichtig: 

Modulgruppe Web


Das Modul „Seite“
image.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
Zeigt alle Inhalte einer Seite in einer Listenansicht. Anlegen von Spezialinhalten (z. Bsp. News, Termine, etc…)

 

Modulgruppe Datei

Das Modul „Dateiliste“
image.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

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

Über dem Seitenbaum befinden sich Symbole: 

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

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

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

2.2.4 Arbeitsfläche / Detailansicht 

Aufbau der Web-Seite. Details siehe → 2.2.8 Inhalte verwalten

image.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
    DateilisteOrdnerstruktur Dateien hochladen oder erstellen  (entweder über Dateien hochladen oder Drag&Drop) oder Ordner erstellen

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

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

    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
Tab 2 bzw. Bildschirm 2: Frontend

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

Über den Button "Neuen Inhalt erstellen" oder über das Kontextmenü "+Neu" können neue Inhaltselemente an der gewünschten Position erstellt werden.

image.png

Mit Drag&Drop können Inhaltselemente an eine andere Position verschoben werden

image.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). 

image.png

image.png

Schuldaten und Verantwortliche(n) auf der Impressum-Seite 

image.png

image.png

Kontakt E-Mail-Adresse auf der Datenschutz-Seite 

image.png

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

Neues Logo zuweisen
T3SB Config → Seitenwurzel (Weltkugel) → Edit this Configuration

image.png

Navbar → Brand → Eigenes Logo mit korrektem Pfad und Namen angeben

image.png

Größen des Logos definieren
TypoScript → Seitenwurzel (Weltkugel) → Info/Bearbeiten → Konstanten 

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

3.3 Seitentitel bearbeiten

Am Anfang sehen wir im Tab die Benennung der Seite nach dem gewählten Template:

image.png

  1. Umbenennung im Seitenbaum: Seite → Seitenwurzel (Weltkugel) → Seiteneigenschaften bearbeiten 
    image.png
  2. Umbenennung der Seite: Sites → Bearbeiten (Stift) → Titel der Webseite ändern → Speichern

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

5. Redaktionelle Arbeiten

5.1 Seiteneigenschaften

Seite → Root (Weltkugel) → Seiteneigenschaften bearbeiten → Erscheinungsbild

image.png

Standardmäßig haben Seiten (vererbt von der Root-Seite) ein einspaltiges Layout.

image.png

Das Backend sieht entsprechend aus:

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

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

Das Ergebnis im Frontend:

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

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

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

Das Inhaltselement vom Typ „Text und Bilder“ öffnet sich.  

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

  • Text: Eingabe des Textes mit vielen Formatierungsmöglichkeiten

    image.png

Reiter "Bilder"
image.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

    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


    Jetzt ist ein guter Zeitpunkt um das erste Mal zu speichern!

    image.png

    Ergebnis: Die Bilder werden nun "eingeklappt" dargestellt.

    image.png

     

    Metadaten bearbeiten, Deaktivieren/Ausblenden, Löschen, Datei-Informationen, Drag&Drop (Reihenfolg ändern):

    image.png


  • Bildeinstellungen

    image.png


  • Galerieeinstellungen

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

Falls die Seite noch deaktiviert ist, machen wir sie nun sichtbar.
image.png

Anschließend löschen wir noch einmal den Cache und wechseln zum Front-End-Tab
image.png

Über den Button "Anzeigen" können wir nun das Ergebnis im Frontend betrachten

image.png

Ergebnis:

image.png

5.4 Spezielle Inhaltselemente

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

Ergebnis:
image.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

Ergebnis im Frontend:

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


5.4.2 Container - Card Wrapper


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

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

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

Group / Grid Cards
Gruppierte Darstellung - ohne Zwischenräume bzw. mit Zwischenräumen (Grid Cards)

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

image.png

Ergebnis: mit Navigation (Pfeile) und Paginierung (Punkte im unteren Bereich)image.png

Flipper
Bei MouseOver werden die Karten „gedreht“ und es werden weitere in den Karten angegebenen Inhalte angezeigt.

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

Für das Accordion muss ein „Collapsible Container“ als Inhaltselement eingefügt werden. Gegebenenfalls Überschrift vergeben, danach wieder "Speichern" und Schließen.
image.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

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

Neuen Tab Container anlegen:

image.png

Gegebenenfalls Überschrift eingeben, danach "Speichern" und "Schließen".

Neuen Inhalt erstellen: Tab Element 

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

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

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. 

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

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

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

image.png

Das Anlegen eines Nachrichten-Inhalts erfolgt über "Nachrichten-System": News-Artikelliste (inkl. Detailansicht) 

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

image.png

Erweiterungsoptionen → Einstellungen
Wir geben als Datenbank unseren System-Ordner news-db an:

image.png

Erweiterungsoptionen → Weitere Einstellungen
Hier geben wir das Verhalten für die Einzelnachrichten-Ansicht, die Listenansicht und den Zurück-Link an.

image.png

Hier stellen wir auch ein, wie viele Einträge pro Seite dargestellt werden sollen:

image.png

Erweiterungsoptionen → Vorlage

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

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