Typo3 Step-by-Step . Helpdesk PL : Bildungsserver Rheinland-Pfalz

Typo3 Step-by-Step

Hier finden Sie allgemeine Informationen zu Typo3 sowie auch detaillierte Schritt-für-Schritt- Anleitungen zur Nutzung des Typo3-Backends. Mit Hilfe dieser Möglichkeiten können Sie Ihre Inhalte strukturieren und übersichtlich gestalten. Hierbei gilt es auch die Grundlagen der Barrierefreiheit beim Gestalten Ihrer Seiten zu beachten.

Bei Fragen zu Typo3 unterstützt Sie das Team Bildungsserver.

Typo3-Schulungen finden auf Anfrage statt. Bitte wenden Sie sich hierzu unter Angabe Ihres Interessenschwerpunkts ebenfalls an das Team Bildungsserver.

I. Gliederung, Seiten und Inhalte

Screenshot der Startseite im Typo3 Backend — 1. Allgemeine Gliederung des Backends

Die Oberfläche des Typo3-Backends gliedert sich in drei Spalten:

- Links finden Sie alle Module (Seite/ Liste/ Papierkorb/u.a.) schwarz hinterlegt.

- Mittig befindet sich der Seitenbaum mit Teilauftritten und Unterseiten grau hinterlegt:
- Unterseiten werden durch eine "leere Seite" markiert.
- Oben unterhalb der Suchleiste befinden sich Elemente zum Gliedern des Baums (neue Seite/Verlinkung/Verweis)

- Rechts befindet sich Ihre Arbeitsfläche mit jeweils einem Kopf- und einem Inhaltsbereich in hellgrau.

Der Screenshot des Typo3 Backend zeigt den ersten Schritt zum anlegen einer neuen Unterseite. — 1. Um eine Seite im Backend neu anzulegen, wählen Sie ganz links, in der schwarz hinterlegten Modulleiste, das "Listen- oder Seitenmodul" aus.

Der Screenshot des Typo3 Backend zeigt den zweiten Schritt zum Anlegen einer neuen Unterseite. Hier wird die Seite ausgewählt, an welche die Unterseite angehängt wird. — 2. Wählen Sie die gewünschte Stelle im Seitenbaum aus, an der die neue Seite angelegt werden soll.

Durch einen Rechtsklick öffnet sich das Kontextmenü. Hier wählen Sie "neue Unterseite" aus. In diesem Beispiel wurde die Seite "Wippe" gewählt. Hier wird nun eine neue Unterseite eingefügt.
Alternativ können Sie das Symbol "leere Seite" ganz oben im Seitenbaum anklicken und an die gewünschte Stelle ziehen und einfügen.

Ist die Seite eingefügt, erscheint rechts in Ihrer Arbeitsfläche ein neues Feld mit dem Titel "neue Seite erstellen".

Der Screenshot des Typo3 Backend zeigt den dritten Schritt zum Anlegen einer neuen Unterseite. — 3. Ganz rechts hat sich in Ihrer hellgrau hinterlegten Arbeitsfläche ein neues Fenster geöffnet.

Im oberen Teil des Fensters "leere Seite" befinden sich mehrere Reiter. Der Reiter "Allgemein" und der Reiter "Metadaten" sind Pflichtfelder. In dem Reiter "Zugriff" kann das Datum der Veröffentlichung oder das Datum, wann diese Seit abgeschaltet werden soll, festgelegt werden.

Im Reiter "Allgemein" muss der Seitentitel angegeben werden. Bitte verändern Sie hier nicht die Größe der Überschrift. Ein alternativer Navigationstitel ist ebenfalls notwendig. Die Pflichtfelder sind hier orange markiert.

Wichtig! Bitte aktualisieren Sie, nachdem Sie Ihre Angaben gemacht haben, das "URL Segment."

Der Screenshot des Typo3 Backend zeigt den vierten Schritt zum Anlegen einer neuen Unterseite. — 4. In dem Reiter "Metadaten" wird der Name des Autors und dessen Mailadresse hinterlegt. Besonders relevant ist dieser Eintrag bei Teilauftritten. Im Frontend wird dem Nutzer hiermit am Seitenende angezeigt, wer für diese Seite verantwortlich ist und wie diese Person kontaktiert werden kann.

Sobald alle Einträge erfolgt sind, wird die Seite gespeichert und geschlossen. Dies erfolgt über die beiden Buttons über dem Seitentitel "Seite neu erstellen".

Im Seitenbaum wird nun die Unterseite sichtbar. Sofern die Seite noch mit einem roten Symbol markiert ist, ist sie noch inaktiv. Über ein erneutes Aufrufen des Kontextmenüs (mit einem Rechtsklick auf die Seite) lässt sich die Seite aktivieren. Auch lässt sich durch das Kontextmenü die Seite umbenennen oder ausschneiden und an einer anderen Stelle einfügen. Das Verschieben der Seite ist auch per Drag& Drop möglich.

Der Screenshot des Typo3 Backend zeigt den fünften Schritt zum Anlegen einer neuen Unterseite. — 5. Nachdem die Seite gespeichert und geschlossen wurde, finden Sie im "Seitenmodul" die hier abgebildete Ansicht.
Die Seite "Test 1" ist noch inaktiv, was durch das rote Symbol im Seitenbaum erkennbar ist. Auf Ihrer Arbeitsfläche finden Sie nun einen "Kopfbereich" und einen "Inhaltsbereich".

Der Screenshot des Typo3 Backends zeigt eine Alternative zu Schritt 5. Hier wird das Anlegen einer neuen Unterseite über das Listenmodul gezeigt. — 5.1. Als Alternative zu Schritt 5, können Sie die Seite "Test 1" auch im Listen-Modul anschauen.
Dieser Seitenaufbau ist anders als im Seitenmodul gestaltet.

Sofern diese Seite nun mit Inhalten gefüllt werden soll, klicken Sie zunächst auf den "Plus-Button" im oberen Bereich der Ansicht. Daraufhin klicken Sie, in der sich jetzt öffnenden Maske, auf "neues Inhaltselement" und "Seiteninhalt".

Screenshot des Typo3 Backends — 1. Um die Testseite "Test 1" zu befüllen, befinden wir uns nun im Seiten-Modul. Alternativ ist das auch im Listenmodul möglich. Hierzu finden Sie weitere Informationen unter "Eine neue Unterseite anlegen", Schritt 5.1

Screenshot des Typo3 Backends. Erster Schritt zum Einstellen von Seiteninhalten — 2. Nachdem Sie in Ihrer Arbeitsfläche auf den Button "+ Inhalt" geklickt haben, öffnet sich nun dieses Fenster mit sechs verschiedenen Reitern.

Für Redakteure sind die Reiter "typischer Seiteninhalt", "Spaltenelemente" und "besondere Elemente" sowie eine Funktion des Reiters "Plug In" interessant.

An dieser Stelle soll es um den "typischen Seiteninhalt" gehen.

Im "typischen Seiteninhalt" ist die Auswahl "Text & Medien" geläufig. Allerdings können hier auch andere Inhalte, wie "Nur Überschrift" o.ä. gewählt werden.

Im Folgenden wird mit dem Inhaltselement "Text & Medien" fortgefahren.

Screenshot des Typo3 Backends. Zweiter Schritt zum Einstellen von Seiteninhalten — 3. Ist der Seiteninhalt "Text & Medien" geöffnet, öffnet sich diese Maske. Auch diese weißt erneut Unterpunkte in Form von "Reitern" auf.

Vorerst wird der Reiter "Allgemein" betrachtet:

- Hier wird die Überschrift der Seite hinterlegt. Bitte ändern Sie hier unter "Typ" die Schriftgröße nicht ab! Alternativ können Sie hier auch die Überschrift verbergen, sodass diese im Frontend nicht angezeigt wird.

- Sofern eine Unterüberschrift oder eine Verlinkung sinnvoll ist, setzten Sie diese.

- Im unteren Bereich finden Sie das Textfeld. Hierbei handelt es sich um einen RTE (Richt-Text-Editor). Texte werden hier eigenständig formuliert oder Sie kopieren Texte ein. Verwenden Sie hierzu die Short Cuts "Strg + C" für kopieren und "Strg + V" für einfügen.

Im Textfeld finden Sie eine Werkzeugleiste. Diese dient zur Formatierung des Textes und ist an Microsoft Word angelehnt. Möglichkeiten, wie eine fette Schrift, kursiver Inhalte, Tabellen u.v.m. sind hier möglich.

Zum Schluss klicken Sie auf den Button "Speichern" und betrachten mit einem Klick auf den Button "Anzeigen" das Frontend. Die beiden Buttons befinden sich im oberen Bereichs Ihrer Arbeitsfläche.
Im Frontend überprüfen Sie, ob die Seite Ihren Vorstellungen entspricht.

Screenshot des Typo3 Backends. Erster Schritt zum Setzen eines Links. — 1. Verlinkungen zu externen Links (URLs) und auch interne Verlinkungen (Dateien, Mailadressen, interne Seiten, zu denen Sie einen Redaktionszugang haben) sind mit Hilfe des RTE Text-Editors möglich.

Zunächst soll es um die Verlinkungen zu externen URLs gehen:
Hier wird der Passus im Text, der später die Verlinkung anzeigen soll, markiert.
Anschließen klicken die auf das Verkettungssymbol in der Werkzeugleiste des RTE-Editors.

Screenshot des Typo3 Backends. Zweiter Schritt zum Setzen eines Links. — 2. Es öffnet sich ein neues Fenster. Links oben können Sie aussuchen, wo der Link gesetzt werden soll. In diesem Fall, klicken die auf den Button "externe URL".

Screenshot des Typo3 Backends. Dritter Schritt zum Setzen eines Links. — 3. In der sich öffnenden Maske tragen Sie einen aussagekräftigen Titel und die URL ein. Dann klicken sie auf "Link setzten".

Im Frontend ist der Link nun zu sehen und in dem Textfeld ist die verlinkte Stelle nun blau.

Sofern Sie die Verlinkung aufheben möchten, markieren Sie den Passus im Text erneut und klicken Sie auf das Symbol neben der Verkettung in der Werkzeugleiste des Textes. Hier finden Sie ein Verkettungssymbol mit einem X. Damit wird der Link gelöscht.

Screenshot des Typo3 Backends. Vierter Schritt zum Setzen eines Links. — 4. Wenn Sie auf eine interne Seite verlinken möchten oder Sie möchten eine Datei oder einen Mailkontakt verlinken, wählen Sie den entsprechenden Reiter aus.

Wichtig! Auf Grund der Barrierefreiheit muss immer ein aussagekräftiger Titel angegeben werden.

II. Dateiliste

Die Dateiliste in Typo3 umfasst alle Elemente, die in Typo3 hochgeladen wurden. Alle Elemente, die Sie auf Ihren Teilauftritten nutzen möchte, müssen dazu in der Dateiliste mit den dazugehörigen Metadaten und einem Titel abgelegt werden.

Folgende Formate werden unterstützt:

pdf- Dokumente
word - Dokumente
excel - Tabellen
gif
jpg
jpeg
png
pdf
svg

Screenshot des Typo3 Backends. Es zeigt die Dateiliste und den ersten Schritt zum Anlegen eines neuen Ordners, den im Folgenden mit Inhalten befüllt wird. — Die Dateiliste befindet sich ganz links in der schwarzen Modulspalte Ihrer Typo3-Oberfläche. Sobald Sie dieses Modul ausgewählt haben, öffnet sich mittig der Dateienbaum. Wählen Sie den gewünschten Ordner aus. Im Folgenden legen wir zunächst einen neuen Ordner an und füllen ihn dann mit Inhalten.

Screenshot des Typo3 Backends. Es zeigt die Dateiliste und den ersten Schritt zum Anlegen eines Ordners. — 1. Ordner neu anlegen:
Um einen neuen Ordner/ Unterordner anzulegen, wählen Sie die gewünschte Stelle im Dateienbaum aus. Mit einem Rechtsklick öffnet sich die Option "Neu".
In diesem Beispiel wird nun ein Ordner unter der "Typo3 Schulung" angelegt.

Screenshot des Typo3 Backends. Es zeigt die Dateiliste. Der Ordner ist nun angelegt und taucht im Dateienbaum auf. — 2. Ein neues Fenster öffnet sich. Hier wählen Sie, wie viele Ordner angelegt werden sollen und an dieser Stelle erhalten diese auch Ihren Titel.
In diesem Beispiel wird ein Ordner mit dem Namen "Test" angelegt.

Zum Schluss klicken Sie auf "Ordner anlegen".
Der Ordner taucht nun im Dateienbaum auf.

Screenshot des Typo3 Backends. Das Befüllen des Ordners ist auf drei verschiedenen Wegen möglich. Diese Wege sind gelb hinterlegt. — 3. Der neu angelegte Ordner kann nun auf verschiedenen Wegen mit Inhalten gefüllt werden. Die drei Möglichkeiten sind in dem Beispiel gelb hinterlegt.

Wichtig! Das Urheberrecht gilt für alle Inhalte, die auf dem Bildungsserver hochgeladen werden. Sofern die Urheberangaben noch nicht hinterlegt sein sollten, müssen diese nachgetragen werden. Dazu klicken Sie auf den "Stift" und dann auf den Reiter "Metadaten". Ausgefüllt werden muss: - Quelle/ Urheberrecht - Beschreibung (ist notwendig für die Suchmaschinenoptimierung) Gerade bei Bildern ist es wichtig einen Alternativtext zu hinterlegen. Personen mit eingeschränkten Sehvermögen müssen anhand des Alternativtextes die Inhalte, die sich auf oder hinter einem Bild (z.B. als Link)befinden, erschließen können. Haben Bilder einen rein dekorativen Charakter, ist kein Alternativtext erforderlich. Über den "Stift" und den Reiter "Allgemein" fügen Sie den Alternativtext hinzu. — Wichtig!

5. Das Urheberrecht gilt für alle Inhalte, die auf dem Bildungsserver hochgeladen werden.
Sofern die Urheberangaben noch nicht hinterlegt sein sollten, müssen diese nachgetragen werden.
Dazu klicken Sie auf das "Stift-Symbol" und dann auf den Reiter "Metadaten".
Ausgefüllt werden muss:
- Quelle/ Urheberrecht
- Beschreibung (ist notwendig für die Suchmaschinenoptimierung)

Gerade bei Bildern ist es wichtig einen Alternativtext zu hinterlegen. Personen mit eingeschränkten Sehvermögen müssen anhand des Alternativtextes die Inhalte, die sich auf oder hinter einem Bild (z.B. als Link) befinden, erschließen können.
Haben Bilder einen rein dekorativen Charakter, ist kein Alternativtext erforderlich.
Über das "Stift-Symbol" und den Reiter "Allgemein" fügen Sie den Alternativtext hinzu.

III. Bilder und Medien

Das neue Design ist visuell abwechslungsreich. Das verdankt es unter anderem einer Vielzahl an Bildern und Medien.

Bilder können hier als Titelbilder in den Seitenkopf oder in den Text eingefügt werden, um Inhalte anschaulich zu visualisieren. Allgemeine Hinweise zu empfohlenen Bildgrößen finden Sie hier.

Wichtig! Alle Bilder und Dokumente, die in den Bildungsserver hochgeladen werden, unterliegen dem Urheberrecht.

Dies gilt ebenso für Youtube- und Vimeo-Videos, die auf dem Bildungsserver eingebunden werden. Im Speziellen gilt es hier auch die aktuelle Datenschutzverordnung zu berücksichtigen.

Screenshot des Typo3 Backends. Der erste Schritt zum Einfügen eines Bildes. — 1. Bilder können sowohl im Text oder auch als Header einer Seite eingesetzt werden. Dieses sehr große Bild wird Heldenbild genannt und wird separat bearbeitet.

Um ein Bild in oder an einen Text anzugliedern, öffnen Sie in Ihrer Arbeitsfläche einen neuen Inhalt mit dem Button "+Inhalt".

Screenshot des Typo3 Backends. Der zweite Schritt zum Einfügen eines Bildes. — 2. Öffnen Sie "Text &Medien".

Screenshot des Typo3 Backends. Der dritte Schritt zum Einfügen eines Bildes. — 3. Im Reiter "Allgemein" tragen Sie einen Titel ein.

Screenshot des Typo3 Backends. Der vierte Schritt zum Einfügen eines Bildes. — 4. Wechseln zu dem Reiter "Medien" und zu dem Button "Mediendatei hinzufügen".

Screenshot des Typo3 Backends. Der fünfte Schritt zum Einfügen eines Bildes. — 5. Es öffnet sich dieses Fenster. Wählen Sie den gewünschten Ordner links aus und rechts das gewünschte Bild.

Wichtig! Alle Bilder sollen zuerst in der Dateiliste erfasst werden. Wie Sie Dateien dort ablegen, finden Sie in den Reiter "Dateiliste".

Screenshot des Typo3 Backends. Hinweise zum Anlegen der Metadaten — 6. Die Metadaten werden automatisch übernommen. Die Angaben können hier allerdings noch geändert werden. Auch eine Bildunterschrift oder eine Verlinkung ist möglich.

Der Alternativtext muss aus Gründen der Barrierefreiheit immer ausgefüllt werden. Sofern das Bild einen rein dekorativen Charakter hat, können Sie "Symbolbild" einsetzen.

Screenshot des Typo3 Backends. Hinweise zum Zuschnitt und der Ausrichtung des Bildes. — 7. Ganz unten auf der Seite befinden sich weitere Möglichkeiten das Bild zu bearbeiten.
- Editor: Hier lässt sich das Bild bearbeiten oder zuschneiden. Hier wird auch festgelegt, ob die bearbeitete Variante auf dem Tablet oder dem Smartphone zusehen sein soll.
- Ausrichtung: Hier wird die Größe des Bildes sowie dessen Ausrichtung festgelegt
- Bei Klick vergrößern: Die Funktion lässt sich hier aktivieren

Sobald alles eingestellt ist, speichern Sie den Vorgang und schauen das Ergebnis im Frontend an.

Screenshot des Typo3 Backends. Hinweise zum Aktivierungs des Bildes. — 8. Mit dem Schieberegler lässt sich das Bild wieder blindschalten.

Heldenbilder stehen ganz oben am Seitenkopf und sind besonders großformatig.

Hier ein Beispiel. (Abruf Juli 2025)

Slider sind eine bewegliche Alternative zum Heldenbild. Sobald der User den Teilauftritt öffnet, schiebt sich der Slider in den Seitenkopf. Auch er ist besonders großformatig und kann, im Unterschied zum Heldenbild, mit einem Schriftzug versehen werden.

Screenshot des Typo3 Backends. Der erste Schritt zum Einfügen eines Heldenbildes. — 1. Um ein Heldenbild erzeugen zu können, benötigen Sie ein hochaufgelöstes Bild.
Die Maße des Originalbildes müssen 1670px auf 650px betragen. Werden diese Maße nicht berücksichtig, wird das Bild nicht großformatig angezeigt. Zwar ist es möglich eine kleinere Höhe als 650px zu verwenden. Allerdings muss diese Höhe dann auf allen Seiten Ihres Redaktionsbereichs, die ein Heldenbild verwenden, eingehalten werden.
Kurz: Die Bilder müssen immer im Format 1670px auf 650px oder zumindest im immer gleichen Format hochgeladen werden.

Ist das Originalbild deutlich kleiner oder größer skaliert Typo3 das Bild nicht und es wird nicht, wie gewünscht angezeigt.

Dieses Bild wird im Kopfbereich Ihrer hellgrauen Arbeitsfläche eingefügt.

Screenshot des Typo3 Backends. Der zweite Schritt zum Einfügen eines Heldenbildes. — 2. Wählen Sie das Element "Text und Medien".

Screenshot des Typo3 Backends. Der dritte Schritt zum Einfügen eines Heldenbildes. — 3. In dem Reiter "Medien" klicken Sie auf "Mediendatei hinzufügen". Wählen Sie aus dem gewünschten Ordner, das gewünschte Bild aus.

Sofern es die erforderliche Größe aufweist, verändern Sie weder die Größe des Bildes noch dessen Position.

Anschließend speichern und schließen Sie den Vorgang und sehen sich das Ergebnis im Frontend an.

Screenshot des Typo3 Backends. Der erste Schritt zum Einfügen eines Sliders. — 1. Um ein Slider erzeugen zu können, benötigen Sie ein hochaufgelöstes Bild (die Maße finden Sie in der Rubrik "Bilder und Videos")

Dieses Bild wird im Kopfbereich Ihrer Arbeitsfläche mit Hilfe des Button "+ Inhalt" eingefügt.

Screenshot des Typo3 Backends. Der zweite Schritt zum Einfügen eines Sliders. — 2. Wählen Sie eine der beiden "Slideroptionen" aus. In diesem Beispiel fahren wir mit der Möglichkeit "Slider/ Text unter dem Slider" fort.

Screenshot des Typo3 Backends. Der dritte Schritt zum Einfügen eines Sliders. — 3. Vergeben Sie eine Überschrift. Damit diese im Frontend nicht doppelt angezeigt wird, verbergen sie diese.

Anschließend klicken Sie auf "+ Neu anlegen" um den Text hinzuzufügen.

Screenshot des Typo3 Backends. Der vierte Schritt zum Einfügen eines Sliders. — 4. Vergeben Sie eine Überschrift und fügen Sie den Text, der unter dem Slider eingeblendet werden soll, hinzu.

Screenshot des Typo3 Backends. Der fünfte Schritt zum Einfügen eines Sliders. — 5. Springen Sie in den Reiter "Sliderbild" und laden Sie das gewünschte Bild aus der Dateiliste hoch.

Screenshot des Typo3 Backends. Der sechste Schritt zum Einfügen eines Sliders. — 6. Sofern das Bild keinen rein dekorativen Charakter hat, füllen Sie einen knappen Alternativtext aus. Dieser hilft Personen mit eingeschränktem Sehvermögen den Inhalt zu erfassen.

Dann speichern und schließen Sie den Vorgang.

1. Um ein Video auf dem Bildungsserver hochzuladen, öffnen Sie zuerst die Dateiliste und den Ordner, indem das Videos hinterlegt werden soll.
Anschließend gehen Sie im oberen Bereich auf den Button "+".

2. Setzen Sie die URL des Youtube-Videos ein und klicken Sie auf den Button "Mediendatei" hinzufügen".

Wechsel Sie jetzt auf die Seite, auf welcher das Video angezeigt werden soll.

3. Öffnen Sie auf der gewünschten Seite ein neues Inhaltselement.

5. Öffnen Sie den Reiter "Medien" und klicken Sie auf den Button "Mediendatei hinzufügen".

6. Es öffnet sich die Dateiliste. Öffnen Sie den Ordner, in welchem Sie das Video zu Beginn abgelegt haben und wählen Sie es aus.

7. Klicken Sie auf den Button "Auswahl importieren".
Sie werden nun wieder in Ihr Inhaltselement übergeleitet. Speichern Sie dieses.

8. In Ihrem Inhaltselement wechseln Sie erneut in den Reiter "Medien". Hier sehen Sie das hochgeladene Video. Klicken Sie auf den kleinen Pfeil links neben dem Video und es öffnet sich das Metadatenmenü.

Hier ist der Titel des Videos noch ausgegraut. Aktivieren Sie den Titel.

Fügen Sie ein Vorschaubild/ Thumbnail ein. Hierzu klicken Sie auf den Button "Video Vorschaubild hinzufügen".

9. Mit dem Klick auf diesen Button wechseln Sie automatisch in die Dateiliste. Hier können Sie das Bild auswählen.

Sollte hier noch kein Bild hinterlegt sein, müssen Sie dieses erst noch in einem gewünschten Ordner ablegen.

Haben Sie ein Bild ausgewählt, importieren Sie dieses.

Anschließend speichern Sie Ihr Inhaltselement "Text und Medien".

10. Schauen Sie sich das Frontend an. Hier sollte nun das Vorschaubild mit dem Datenschutzhinweis angezeigt werden. Auf diese Weise ist das Video datenschutzkonform eingebunden.

Wichtig! Das Anklicken des Videos unterliegt dem Grundsatz der Freiwilligkeit. D.h. Inhalte von Videos, z.B. eines Erklärvideos müssen auch noch mal in Textform auf der Seite bereitgestellt werden.

1. Um das Video datenschutzkonform einzubetten, wird der html-Code/ Quellcode benötigt. Dazu gehen Sie zu dem Video, welches eingebettet werden soll und klicken Sie auf den Button "Teilen".
2. Es öffnet sich ein Kontextmenü. Wählen Sie die Option "Einbetten" aus.
3. Nun wird der HTML-Code/ Quellcode des Video angezeigt.

4. Senden Sie den Quellcode an das Team Bildungsserver mit der Information, auf welcher Seite das Video wo eingebunden werden soll. Hier wird das Team Bildungsserver ein entsprechendes HTML-Element einfügen, sodass das Video später sichtbar wird.
5. Senden Sie das gewünschte Vorschaubild an das Team Bildungsserver.
6. Sie erhalten die Rückmeldung, dass ein HTML-Element auf der gewünschten Seite hinterlegt ist und das Vorschaubild angezeigt wird.
7. Damit das Video datenschutzkonform eingebettet ist, müssen Sie einen Hinweis zu dem Video setzten. Verwenden Sie hierfür folgende Formulierung:
"Das Video von Vimeo wird durch Klick oder Touch auf das Bild aktiviert. Dabei werden Daten an den Anbieter übermittelt. Zur Datenschutzerklärung."

Beispiel:

IV. Strukturelemente

Mit Hilfe der Spaltenelemente können Sie Ihre Inhalte strukturieren und übersichtlicher gestalten. Die Spalten können mit Text sowie auch mit Bildern gefüllt werden. Im obigen Beispiel werden drei Spalten angezeigt.

Screenshot des Typo3 Backends. Der erste Schritt zum Anlegen eines Spaltenelements. — 1. Um ein Spaltenelement anzulegen, wählen Sie in dem Modul "Liste" die gewünschte Seite aus, auf welcher das Element angelegt werden soll.

Auf der Arbeitsfläche klicken Sie auf den Button " + Inhalt".

Screenshot des Typo3 Backends. Der zweite Schritt zum Anlegen eines Spaltenelements. — 2. Es öffnet sich eine neue Maske. Wählen Sie den Tab "Spaltenelemente".

Hier können Sie nun auswählen, wie Ihre Kacheln im späteren Frontend angeordnet sein sollen.

Folgende Auswahl ist möglich:
* 100% Spaltenelement
* 50/50% Spaltenelement
* 75/25% Spaltenelement
* 25/25/50% Spaltenelement
* 50/25/25% Spaltenelement
* 25/25/25/25% Spaltenelement

Wählen Sie die gewünscht Verteilung aus.
In diesem Beispiel fahren wir mit der Aufteilung 25/25/25/25% fort.

Screenshot des Typo3 Backends. Der dritte Schritt zum Anlegen eines Spaltenelements. — 3. Legen Sie eine Überschrift für Ihr Element fest. So ist das Backend von Typo3 übersichtlicher. Soll die Überschrift im Frontend nicht sichtbar sein, klicken Sie auf verbergen.

Ist alles eingerichtet, wird das Fenster gespeichert und geschlossen.

Screenshot des Typo3 Backends. Der vierte Schritt zum Anlegen eines Spaltenelements. — 4. Ihre Arbeitsfläche gliedert sich nun, wie auf dem Beispielbild. Hier werden die unterschiedlichen Spalten sichtbar und können mit Inhalten gefüllt werden.
Um die Spalte ganz links auf der Seite zu füllen, klicken Sie auf den Button "+ Inhalt" unter "Content Links".

Screenshot des Typo3 Backends. Der fünfte Schritt zum Anlegen eines Spaltenelements. — 5. Ein neues Fenster öffnet sich. Wählen Sie hier "Text und Medien". Die Felder füllen Sie, wie
gewohnt aus.
Wenn Sie mit den Eintragungen fertig sind, klicken Sie auf den Button "Speichern" und anschließend auf den Button "Schließen".

Dann ist die erste Spalte mit Inhalten gefüllt. Die restlichen Spalten füllen Sie auf die gleiche Weise.

Das Akkordeon dient, ähnlich wie die Spaltenelemente, der Gruppierung von Inhaltselementen.

Es strukturiert den Teilauftritt und verbirgt zunächst die Dateilansicht eines bestimmten Themas. Erst wenn der Nutzer das Element aufklappt, werden die Details sichtbar.

Screenshot des Typo3 Backends. Hinweis, dass sich das Akkordeon nur über das Seitenmodul einfügen lässt. — 1. Das Akkordeon ist, neben den Spaltenelementen eine weitere Möglichkeit, Seiten zu strukturieren.
Das Akkordeon lässt sich ausschließlich über das Modul "Seite" einfügen.

Screenshot des Typo3 Backends. Erster Schritt zum Anlegen eines Akkordeons. — 2. Suchen Sie im Seitenbaum die gewünschte Unterseite aus, auf welcher das Akkordeon platziert werden soll. In diesem Beispiel, wird das Akkordeon auf der Seite "Rutsche" platziert.

Um ein Akkordeon anzulegen klicken Sie auf den Button "+ Inhalt". In diesem Fall ist die Seite noch gänzlich leer. Ein Akkordeon lässt sich allerdings auch auf gefüllten Seiten immer über den Button "+ Inhalt" hinzufügen.

Screenshot des Typo3 Backends. Zweiter Schritt zum Anlegen eines Akkordeons. — 3. Mit dem Klick auf den Button "+ Inhalt" öffnet sich dieses Fenster. Wählen Sie den Reiter "Spaltenelemente" und anschließend "Akkordeon" aus.

Screenshot des Typo3 Backends. Dritter Schritt zum Anlegen eines Akkordeons. — 4. Vergeben Sie eine Überschrift für Ihr Akkordeon. Hiermit gestalten Sie das Backend übersichtlich.
Unter der Einstellung "Typ" können Sie die Überschrift im Frontend verbergen.
Ändern Sie hier jedoch nicht die Schriftgröße!

Haben Sie Ihre Einstellungen vorgenommen, speichern und schließen Sie den Vorgang.

Screenshot des Typo3 Backends. Vierter Schritt zum Anlegen eines Akkordeons. — 5. Sie gelangen zurück auf die Seitenansicht Ihrer gewünschten Seite. Hier sehen Sie, dass das Akkordeon angelegt wurde.
Es befindet sich im hellgrauen Inhaltsbereich und ist durch das Symbol oben links in der Ecke und den Rahmen gekennzeichnet.

Möchten Sie das Akkordeon mit Inhalten füllen klicken Sie auf den Button "+ Inhalt" unter "Content" im Rahmen des Akkordeons.

Screenshot des Typo3 Backends. Fünfter Schritt zum Anlegen eines Akkordeons. — 6. Wählen Sie das Element "Text & Medien".

Screenshot des Typo3 Backends. Sechster Schritt zum Anlegen eines Akkordeons. — 7. In dem Fenster " Text & Medien" vergeben Sie eine Überschrift für das Akkordeonelement. Das könnte beispielsweise auch eine Frage sein.

Wichtig! Unter "Typ" verbergen Sie die Überschrift/ Frage. Andernfalls wird sie im Frontend doppelt angezeigt.

Im RTE-Editor können Sie Inhalte ausführen oder Fragen beantworten.
Über den Reiter "Medien" können Sie Ihrem Text Bilder hinzufügen.

Anschließend wird alles gespeichert und geschlossen.

Screenshot des Typo3 Backends. Siebter Schritt zum Anlegen eines Akkordeons. — 8. Das erste Element in dem Akkordeon ist in der Seitenansicht zu sehen.
Weitere Elemente werden durch den Button "+ Inhalt" innerhalb des Akkordeon-Rahmens hinzugefügt.

Um Ihre Inhalte übersichtlich zu gestalten, kann es hilfreich sein Themenschwerpunkte festzulegen. Die Option "Themenschwerpunkte" kreiert im Frontend mehrere Reiter (Inhaltselemente, Design, Erweiterungen, Sprachen), sodass der Nutzer zu den gewünschten Themen springen kann.

Screenshot des Typo3 Backends. Erster Schritt zum Anlegen eines Themenschwerpunktes. — 1. Wählen Sie die Seite aus, auf welcher das Element platziert werden soll.
Klicken Sie auf den Button "+ Inhalt" auf der hellgrauen Arbeitsfläche.

Screenshot des Typo3 Backends. Zweiter Schritt zum Anlegen eines Themenschwerpunktes. — 2. Wählen Sie in dem neuen Fenster den Reiter "Spaltenelemente" und klicken Sie auf "Themenschwerpunkte".

Screenshot des Typo3 Backends. Dritter Schritt zum Anlegen eines Themenschwerpunktes. — 3. Vergeben Sie eine aussagekräftige Überschrift.
Anschließend speichern und schließen Sie den Vorgang.

Screenshot des Typo3 Backends. Vierter Schritt zum Anlegen eines Themenschwerpunktes. — 4. Zurück in der Seitenansicht, finden Sie das Element umrahmt und das Symbol für die Themenschwerpunkte links, oben in der Ecke.

Möchten Sie einen neuen Schwerpunkt hinzufügen, klicken Sie auf den Button "+ Inhalt".

Screenshot des Typo3 Backends. Fünfter Schritt zum Anlegen eines Themenschwerpunktes. — 5. Wählen Sie die Option "Themengruppen".

Screenshot des Typo3 Backends. Sechster Schritt zum Anlegen eines Themenschwerpunktes. — 6. Die Überschrift ist ein Pflichtfeld und wird in der Navigation des Frontends angezeigt.

Anschließend fügen Sie einen neuen Themenschwerpunkt hinzu.

Screenshot des Typo3 Backends. Siebter Schritt zum Anlegen eines Themenschwerpunktes. — 7. Es lassen sich in diesem Fenster einzelne Themen für jede Hauptkategorie
definieren. Hierzu vergeben Sie Überschriften.

Über das Verkettungs-Symbol lassen sich Verlinkungen einfügen.

Screenshot des Typo3 Backends. Achter Schritt zum Anlegen eines Themenschwerpunktes. — 8. Auch Bilder können hier hinzugefügt werden.
Der Zugriff für die zeitliche Steuerung muss nicht zwingend gesetzte werden.

Anschließend speichern und schließend Sie das Element.

Die Content Navigation lässt die typische Kacheloptik entstehen.

Damit die Kacheln im Frontend korrekt angezeigt werden, müssen folgende Voraussetzungen erfüllt sein:
-> In den Seiteneigenschaften (Ressourcen) ist ein Bild eingefügt.
-> In den Seiteneigenschaften (Metadaten) ist eine Zusammenfassung eingefügt.
Wenn ein Untertitel in den Eigenschaften (Allgemein) gesetzt ist, wird auch dieser Untertitel
zur Generierung der Navigationskachel hinzugezogen.

Screenshot des Typo3 Backends. Erster Schritt zum Anlegen der Content Navigation. — 1. Gehen Sie zum Modul "Liste" und wählen Sie die gewünschte Unterseite. In diesem Beispiel heißt die Seite "Testinghausen".
Über den Button "+" erstellen Sie einen neuen Datensatz.

Screenshot des Typo3 Backends. Zweiter Schritt zum Anlegen der Content Navigation. — 2. Wählen Sie ein neues Inhaltselement aus.

Screenshot des Typo3 Backends. Dritter Schritt zum Anlegen der Content Navigation. — 3. Über das Dropdown in der Überschriftenleiste wählen Sie "Content Navigation redaktionell" aus.

Screenshot des Typo3 Backends. Vierter Schritt zum Anlegen der Content Navigation. — 4. Die Felder "Überschrift" und "Unterüberschrift" in diesem Fenster müssen nicht ausgefüllt werden. Wenn eine
Unterseite im Contentmenü angezeigt werden soll, wählen Sie diese per
Klick auf das Ordner-Symbol aus.

Ist alles ausgewählt, schließen Sie das Fenster.

Screenshot des Typo3 Backends. Fünfter Schritt zum Anlegen der Content Navigation. — Wichtig!
5. Die folgenden Schritte müssen für jede Unterseite, die in der Content-
Navigation angezeigt werden soll, vorgenommen werden.

In Ihrem hellgrau hinterlegten Seitenbaum, klicken Sie mit einem Rechtsklick auf die gewünschte Seite und anschließend auf "Bearbeiten".

Screenshot des Typo3 Backends. Sechster Schritt zum Anlegen der Content Navigation. — 6. Wählen Sie den Reiter "Ressourcen" und klicken Sie anschließend auf "Neue Relation erstellen".

Screenshot des Typo3 Backends. Siebter Schritt zum Anlegen der Content Navigation. — 7. Es öffnet sich die Dateiliste. Hier wählen Sie das Bild, was auf der Kachel im Frontend angezeigt wird, aus.
Das Bild muss dazu vorher samt seiner Metadaten in die Dateiliste hochgeladen worden sein.
Anschließend speichern und schließend Sie den Vorgang.

V. Erweiterungen

Bei einem Plugin handelt es sich um eine zusätzliche Funktion, die Ihrem Teilauftritt noch mehr Möglichkeiten bietet. Typische Plugins sind das Newsletter-Plugin und das evewa-Plugin.

Das Newsletter-Plugin stellt stetig die neusten, für den Teilauftritt relevanten, News bereit. So kann der Nutzer diese sofort erfassen. Möchten Sie ein solches Plugin installiert bekommen, wenden Sie sich an das Team Bildungsserver.

Das evewa - Plugin zieht aus dem Veranstaltungskatalog von Vewa die zu dem Inhalt passenden Veranstaltungen und hält diese auf Ihrer Seite aktuell. Dieses Plugin können Sie direkt einsetzen.