Das beliebte, weit verbreitete und mächtige CMS (Content Management System) TYPO3 bietet von Haus aus zahlreiche Funktionen. Welche davon für Sie als Redakteur verfügbar sind, darüber entscheidet der Administrator der Webseite. An dieser Stelle zeigen wir die wichtigsten Funktionen auf und geben Einsteigern Tipps zum Umgang mit diesen. Dieser Artikel bezieht sich auf TYPO3 in der Version 7.6.9.
Das gesamte Handbuch steht Ihnen hier als PDF-Datei zum Download bereit:
Inhalt:
Nach dem Einloggen ins Backend von TYPO3 landen wir auf der Startseite des CMS. Auf der linken Seite des Fensters (siehe Abb. 1) finden wir die Kategorien mit den zugehörigen Modulen. Zu den sechs Hauptkategorien "Web", "Datei", "Benutzerwerkzeuge", "Adminwerkzeuge", "System" und "Hilfe" gibt es diverse Unterpunkte, von denen allerdings nur wenige für Redakteure von Relevanz sind. Nicht alle sind Module und daher nicht für jedermann sichtbar.
Als erstes wäre da das Modul "Seite". Wählen wir dieses an, bekommen wir in der 2. Spalte des Fensters den "Seitenbaum" (siehe Punkt 2) zu sehen. In der 3. Spalte sehen wir die "Inhaltselemente" zu der im Seitenbaum angewählten Seite. An dieser Stelle werden Inhalte angezeigt, welche wir dort hinzufügen, bearbeiten oder löschen können.
Als nächstes wichtiges Modul finden wir die "Liste". Hier sehen wir, wie bei dem Modul "Seite", in der 2. Spalte den Seitenbaum. In der 3. Spalte gibt es allerdings Unterschiede. Dort finden wir alle Elemente aufgelistet, die mit der ausgewählten Seite in Zusammenhang stehen, wie zum Beispiel Unterseiten, Formulare und ebenfalls die Seiteninhalte.
Um Dateien zu verwalten, gibt es das Modul "Dateiliste". Dieses öffnet in der 2. Spalte keinen Seitenbaum, sondern einen Verzeichnisbaum mit allen Ordnern und Unterordnern, die für Ihre Webseite angelegt wurden. Wie man hier Dateien hochlädt, erfahren Sie in Punkt 7.
Als erstes sehen wir im Seitenbaum von TYPO3 den Namen der Webseite, welcher der Wurzel des Baumes entspricht. Darunter befindet sich die Startseite. Alle darauffolgenden Seiten sind Unterseiten der Startseite, das heißt, sie werden etwas eingerückt dargestellt. Unterseiten können natürlich wiederum Unterseiten haben, welche dann noch etwas weiter eingerückt werden.
Klicken wir auf das kleine Dreieck links neben dem Seitennamen, dann werden die Unterseiten ein- bzw. ausgeklappt. Gibt es kein Dreieck neben einer Seite, existieren zu dieser keine Unterseiten. Wie wir neue Seiten bzw. Unterseiten anlegen, erfahren Sie in Punkt 3.
Das Icon neben dem Seitennamen gibt uns Informationen zum aktuellen Status der jeweiligen Seite. Die Startseite besitzt ein Globus-Icon. Normale Seiten haben ein Icon, das wie ein Blatt Papier aussieht. Sehen wir einen roten Kreis mit weißem Balken, ist die Seite verborgen.
Halten wir den Mauszeiger über ein Icon, bekommen wir weitere Informationen. Die id ist eine eindeutige Nummer, jede Seite, Unterseite oder Datei hat ihre eigene. Sie ist zum Beispiel wichtig für Verlinkungen (siehe Punkt 6). Außerdem sehen wir, ob eine Seite verborgen oder auf eine andere Seite verlinkt ist.
Um in dem Content Management System TYPO3 eine neue Seite anzulegen, haben wir mehrere Möglichkeiten. Zum einen können wir im Seitenbaum ganz oben auf das entsprechende Icon klicken.
Dadurch erscheinen darunter weitere Icons (siehe Abb. 4).
Um eine normale Seite zu erstellen, klicken wir auf das entsprechende Icon und ziehen es an die entsprechende Stelle im Seitenbaum. Dabei können wir diese sowohl vor, hinter oder zwischen vorhandenen Seiten als auch als Unterseite anlegen. Anschließend geben wir noch den Namen der Seite ein und dann lassen sich auch schon Inhalte erstellen (siehe Punkt 4).
Alternativ können wir im Seitenbaum des Moduls "Liste" die Seite auswählen, zu der wir eine Unterseite erstellen möchten. Dann klicken wir auf der rechten Seite im Feld "Seite" das Icon "Datensatz erstellen". Im dann erscheinenden Formular geben wir die Daten ein und klicken anschließend über dem Formular auf den Button "Speichern".
Sollte das Feld "Seite" noch nicht existieren, müssen wir es vorher anlegen. Hierzu wählen wir einfach auf der rechten Seite oben das Icon "Neuen Datensatz" erstellen an. In dem neuen Baum wählen wir im Bereich "Neue Seite erstellen" die Funktion "Seite (in)" - für eine Unterseite zur aktuell ausgewählten, "Seite (nach)" - für eine Seite auf derselben Ebene nachfolgend zur aktuell ausgewählten, oder "Seite (Position auswählen)", um die Position der neuen Seite direkt auszuwählen.
Um mehrere Seiten gleichzeitig anzulegen, wählen wir links das Modul "Funktionen" aus und in der rechten Spalte des Fensters das Feld "Mehrere Seiten erzeugen". Anschließend legen wir so viele neue Seiten an, wie wir wünschen/benötigen. Voraussetzung dafür ist natürlich, dass Sie als Redakteur Zugriff auf dieses Modul haben.
Wollen wir den Titel einer Seite nachträglich noch ändern, wählen wir einfach im Modul "Seite" die jeweilige Seite im Seitenbaum aus. Über den rechts aufgelisteten Inhaltselementen sehen wir hier den Seitennamen. Fahren wir mit dem Mauszeiger darüber, erscheint ein Editierstift. Mit einem Klick auf diesen können wir den Titel direkt bearbeiten und mit einem Klick auf die Schaltfläche "Speichern" die Änderung übernehmen (siehe Abb. 6).
Zum Anlegen von Inhalten auf einer Seite gehen wir auf der rechten Seite vom Bildschirm in den Bereich "Inhalt". Darin befindet sich die Schaltfläche "Inhalt" (siehe Abb. 7). Mit Klick auf das linke Icon "Neues Inhaltselement erstellen" kommen wir in eine Übersicht aller existierenden Inhaltselemente. Ein Klick auf das rechte Icon "Inhalt von anderer Seite hierhin kopieren" führt zu einem neuen Fenster. In diesem suchen wir uns die Seite aus dem Seitenbaum heraus und dann den entsprechenden Inhalt.
Wie wir ein neu angelegtes Inhaltselement nun tatsächlich mit Inhalt befüllen beziehungsweise ein vorhandenes bearbeiten, erfahren Sie im nächsten Abschnitt.
Natürlich können wir wieder genauso vorgehen, wie beim Anlegen einer neuen Seite im Modul "Liste" (siehe Punkt 3).
Praktisch: Zwischen zwei schon vorhandenen Inhaltselementen gibt es automatisch ebenso eine Schaltfläche zum Anlegen neuer Inhalte (siehe Abb. 8). Man kann die vorhandenen auch einfach umpositionieren - mittels Drag & Drop.
Als Hinweis sei noch erwähnt, dass neu erstellte Inhalte standardmäßig nicht sichtbar sind. Das heißt, sie werden zwar im Backend angezeigt, aber nicht auf der fertigen Seite (dem Frontend). Erst ein Klick auf das Icon "Sichtbar machen" (siehe Abb. 9) lässt das Element auch im Frontend erscheinen.
Diesen Abschnitt müssen wir weiter aufteilen, um die verschiedenen Inhaltselemente zu behandeln. Nicht jedes Element lässt sich in TYPO3 auf die gleiche Weise bearbeiten.
Möchten wir ein Inhaltselement bearbeiten, machen wir das am einfachsten im Modul "Seite". Dazu wählen wir das entsprechende Element an und klicken im Kopfbereich des Elements auf Bearbeiten (siehe Abb. 10). Im nun erscheinenden Formular lässt sich praktisch alles einstellen, was dieses Element betrifft.
Um die wichtigsten Eigenschaften zu beleuchten, nehmen wir als erstes Beispiel das Inhaltselement Überschrift. Zunächst wäre da das Feld "Überschrift". Auf den ersten Blick mag es vielleicht verwirrend erscheinen, dass das Feld genauso heißt wie das Element. Dennoch ist es das Feld, in welchem der Text der Überschrift steht, also genau das, was wir haben wollen.
Das nächste Feld ist "Typ". Dieses gibt an, in welcher Einordnung bzw. Größe die Überschrift angezeigt werden soll, wobei gilt: H2 > H3 > H4 usw. Füllt man das Datumsfeld aus, so wird das Datum auf der fertigen Seite meist unterhalb der Überschrift angezeigt. Dies ist beispielsweise für Blogeinträge sinnvoll, um eine zeitliche Einordnung zu gewährleisten.
Das Feld "Link" macht aus der Überschrift gleichzeitig auch einen Link (siehe Punkt 6). Lässt man es frei, so bleibt die Überschrift normaler Text. Bei dem Feld "Unterüberschrift" handelt es sich um einen Untertitel. Wie der Name bereits vermuten lässt, wird dieser unterhalb der Überschrift und in einer gesonderten Formatierung angezeigt.
Als zweites Inhaltselement haben wir "Text & Medien". Hier gibt es im Prinzip die gleichen Felder wie bei der Überschrift (siehe Punkt 5.1.). Das Feld "Untertitel" entspricht der Unterüberschrift aus Punkt 5.1. Zusätzlich dazu haben wir aber noch den Text.
Dieses Feld bietet einen WYSIWYG-Editor. WYSIWYG steht für „what you see is what you get“, wir sehen also den Text beim Bearbeiten fast genauso, wie er auch auf der fertigen Seite aussehen wird. Wir können hier mit der Schaltfläche auch in den HTML-Modus wechseln. In diesem können wir die Formatierung direkt ändern. Das erfordert allerdings Kenntnisse in HTML.
Des Weiteren gibt es hier die Möglichkeit, über den Reiter "Medien" Bilder, Videos oder andere Dateien einzubinden. Hierbei gibt es die Möglichkeit, eine Datei einzubinden, die schon in das Content Management System TYPO3 hochgeladen wurde (siehe Punkt 7). Sie können hier auch direkt lokale Dateien hochladen. Oder Sie binden eine Datei von einer externen Seite per URL ein.
Haben Sie eine Datei eingebunden, erscheint sie als eigenes Feld. Klappen wir dieses auf, haben wir weitere Einstellungsmöglichkeiten zum jeweiligen Element. Bei einem Bild beispielsweise sollten Titel und Alternativer Text immer eingegeben werden. Dazu müssen wir allerdings die Häkchen setzen bei "Elementspezifischen Wert setzen". Geben wir etwas in das Feld "Link" ein, so können wir das Bild in einen Link umwandeln (siehe Punkt 6). Zudem können wir das Bild noch in der Größe zurechtschneiden, indem wir im Bereich Bildbearbeitung auf den Button "Editor öffnen" klicken.
Weitere Einstellungen zu Medien lassen sich im Reiter Erscheinungsbild setzen. In den Feldern Breite/Höhe jedes Elements können wir die exakte Größe der in diesem Inhaltselement eingebundenen Medien festlegen. Lassen wir diese Felder frei (gleichbedeutend mit „0“), wird automatisch eine Größe gewählt. Bei Position und Ausrichtung stellen wir ein, wo genau sich das Medium in Bezug auf den Text befinden soll. Dazu wählen wir entweder über das Dropdown-Menü oder über die einzelnen Icons die entsprechende Ausrichtung.
Bei der Aufzählung haben wir praktisch die gleichen Felder wie bei "Text & Medien". Ein Unterschied aber besteht darin, dass hier kein Text-Feld vorhanden ist, sondern das Feld Aufzählung. Dieses Feld besitzt keine Formatierungsoptionen. Hier geben wir zeilenweise die Auflistungspunkte ein. Im Reiter "Erscheinungsbild" gibt es ebenfalls Unterschiede. Hier entfallen nämlich die Einstellungen zu Medien. Dafür gibt es aber eine Möglichkeit, den Auflistungszeichentyp zu ändern.
Die oberen Felder einer Tabelle gleichen wieder denen von "Text & Medien". Weiter unten finden wir hier aber das Feld "Tabelleninhalt". Dort wird der Text der Tabelle eingetragen, inklusive Kopf-/Fußzeile (falls gewünscht). Um Spalten abzugrenzen, benötigen wir das Feld "Feldbegrenzer". Hier sollten wir vorher das Zeichen auswählen, welches man benutzen möchte. Am besten eins, welches nicht im Text der Tabelle vorkommen soll. Darunter, im Feld "Tabellenunterschrift", können wir eine Beschriftung für die Tabelle einfügen.
Alternativ zum Feld "Tabelleninhalt" können wir zum Ausfüllen der Tabelle auch den "Tabellenassistenten" benutzen, welcher sich intuitiv bedienen lässt. Der "Tabellenassistent" bietet eine Reihe von Textfeldern und Icons. Möchten Sie eine Zeile oder Spalten hinzufügen, klicken Sie auf das Plus-Icon. Klicken Sie auf das Mülleimer-Icon, um sie wieder zu entfernen. Zeilen und Spalten lassen sich auch ganz einfach mithilfe der zahlreichen Pfeil-Icons verschieben. Benötigen Sie größere Felder, um Ihren Text in einem Feld unterzukriegen? Entfernen Sie dazu einfach das Häkchen bei "Kleine Felder". Vergessen Sie auch hier nach getaner Arbeit das Speichern nicht!
Der Reiter "Erscheinungsbild" bietet auch hier wieder andere Eigenschaften. Zum einen können wir im Bereich "Tabellenlayout" die Anzahl der Tabellenspalten festlegen. Steht dieses Feld auf Auto, wird die Anzahl der Spalten durch den Tabelleninhalt bzw. den Tabellenassistenten automatisch festgelegt. Um eine Kopfzeile darzustellen, müssen Sie den Wert des Feldes "Position des Tabellenkopfes" ändern. Dadurch wird die erste Zeile bzw. Spalte (je nach Einstellung) automatisch zur Kopfzeile.
Das CMS TYPO3 bietet Ihnen weitere wichtige Inhaltselemente, welche hier nur kurz Erwähnung finden sollen.
Eines davon ist "Datensätze einfügen". Damit lassen sich Inhaltselemente von anderen Seiten einbinden, ohne sie jedoch als eigenes Element erstellt zu haben. Wir erstellen praktisch eine Referenz. Möchten wir ein so eingebundenes Element bearbeiten, müssen wir zur ursprünglichen Seite wechseln und es dort bearbeiten. Dadurch werden alle von diesem Element erstellten Referenzen auch verändert.
Die Raster-Elemente sind ebenfalls nützlich. So gibt es beispielsweise die Spaltenelemente, mit denen sich die Seite in zwei, drei oder vier Spalten aufteilen lässt.
Ein "Tab-Behälter" ist ein Element, welches einen Bereich mit Reitern (oder auch Tabs) darstellt. Als Inhalt dafür dient das "Tab-Element". Bei einem "Collapsible Behälter" handelt es sich um einen Behälter, welcher aus- und einklappbare Elemente beinhaltet. Diese lassen sich mit einem Collapsible Element einfügen. "Tab-Element" und "Collapsible-Element" können wiederum andere Inhaltselemente beinhalten.
Raster-Elemente lassen sich beliebig ineinander verschachteln. Allerdings sollte darauf geachtet werden, dass Funktionalität und Übersichtlichkeit der fertigen Seite nicht darunter leiden.
Links erstellen Sie am besten über den WYSIWYG-Editor, welcher in Punkt 5.2. schon erwähnt wurde. Dazu markieren Sie im Editor den Text, welchen Sie mit einem Link hinterlegen möchten, und klicken dann auf die Schaltfläche "Link einfügen".
Der folgende Assistent bietet 5 Reiter für die verschiedenen Arten von Links:
Im Reiter "Seite" können wir einen Links zu einer anderen internen Seite setzen. Dazu klicken wir einfach im Seitenbaum auf die Seite, zu der wir verlinken möchten. Wir können auch direkt auf ein spezifisches Inhaltselement einer anderen Seite verweisen, welche mit einem Klick auf das Pfeil-Icon rechts neben der Seite angezeigt werden.
Möchten Sie im Reiter "Datei" auf eine Datei verlinken, wählen Sie im Verzeichnisbaum den Ordner aus und wählen rechts daneben die Datei. Genauso funktioniert es auch bei kompletten Ordnern.
Einen Link zu einer "externen URL" setzen Sie im gleichnamigen Reiter. Geben Sie dazu einfach die URL in das Feld "URL" ein und klicken auf "Link setzen". Ebenso funktioniert das auch, wenn Sie auf eine "E-Mail-Adresse" verweisen möchten.
Mit dieser Methode lässt sich auch ein Link in das Link-Feld einfügen (siehe Punkt 5.1.). Hier geben wir den Text ein, welcher den Link beinhalten soll, und fügen mithilfe des Icons den entsprechenden Verweis ein.
Möchten Sie einen Link in einer Aufzählung (gemeint ist hier das Inhaltselement "Aufzählung" (siehe Punkt 5.3), nicht die Aufzählung, welche wir im WYSIWYG-Editor erstellen können) setzen, dann funktioniert das etwas anders. Hierbei gibt es drei Möglichkeiten: In der ersten Zeile haben wir einen Link zu einem anderen internen Inhaltselement beziehungsweise einer anderen Seite mit der entsprechenden id. Als nächstes ist ein Link zu einer externen Webseite zu sehen. Und als drittes sehen wir einen E-Mail-Shortcut.
Zum Hochladen von Dateien wählen wir links in der Kategorie "Datei" das Modul "Dateiliste" an. In der zweiten Spalte finden wir nun einen anderen Baum vor. Nämlich den "Verzeichnisbaum", der bestenfalls vorher schon gut sortiert und strukturiert wurde.
Um nun eine Datei hochzuladen, navigieren wir in den gewünschten Ordner, klicken dann auf das Icon "Dateien hochladen" und wählen die hochzuladende Datei aus. Anschließend klicken wir auf "Öffnen" und schon wird die Datei hochgeladen. Es lassen sich auch direkt mehrere Dateien auswählen, indem wir die STRG-Taste gedrückt halten und die gewünschten Dateien an- bzw. abwählen.
Zur besseren Übersicht können wir uns natürlich weitere Ordner anlegen. Das geht ganz einfach mit einem Klick auf das Icon "Neu" neben "Dateien hochladen". Im nun erschienenen Formular sehen wir gleich zu Beginn den Bereich "Neue Ordner anlegen". Als erstes wählen wir die Anzahl der Ordner, die wir erstellen möchten. Es werden dann so viele Ordner-Felder angezeigt, wie wir ausgewählt haben. Jetzt geben wir zu jedem Ordner die Namen ein und klicken anschließend auf den Button "Ordner anlegen". Beachten Sie, dass die hier erstellten Ordner als Unterordner zum im Verzeichnisbaum ausgewählten Ordner angelegt werden.
Alternativ zum Hochladen können auch Mediendateien von externen Quellen eingebunden werden. Dazu wählen wir wieder das Icon "Neu" an. Dort finden wir den Bereich "Neue Mediendatei" hinzufügen. Hier müssen wir die URL der externen Webseite eingeben, die zum gewünschten Medium führt, und abschließend auf den Button "Medien hinzufügen" klicken.
Möchten wir eine neue Text-Datei erstellen, müssen wir das nicht über ein Drittprogramm (wie Notepad++) machen. TYPO3 hat dazu eine Funktion integriert. Diese Funktion ist ebenfalls über das Icon "Neu" erreichbar. In dem Formular ganz unten sehen wir den Bereich "Textdatei erzeugen". Zum Erzeugen einer neuen Datei geben wir den Dateiname mit Endung ein (zum Beispiel "hinweise.txt") und klicken "Datei erzeugen". Welche Dateiendungen erlaubt sind, sagt uns der Bereich "Erlaubte Dateierweiterungen". Möchten wir die neu erstellte Datei mit Inhalt befüllen, klicken wir in der Übersicht neben der entsprechenden Datei auf das Icon "Inhalt bearbeiten". Anschließend kommen wir in einen simplen Texteditor. Vergessen Sie auch hier nach dem Bearbeiten das Speichern nicht!
Zu vielen Feldern gibt es in TYPO3 Hilfetexte. Diese erkennen Sie an den "Fragezeichen-Icons". Durch Klick auf ein solches wird der Hilfetext angezeigt. Auch wenn kein Icon zu sehen ist, kann das Element trotzdem einen Hilfetext bieten. Das erkennen Sie, indem Sie einfach mit der Maus über das Feld fahren.
Mit einem Rechtsklick auf eine Seite oder das Icon eines Inhaltselementes erhalten Sie weitere Optionen, beispielsweise zum Kopieren von Inhalten.
Der Button "Speichern" bietet ein Drop-Down-Menü, in welchem weitere Optionen zum Speichern versteckt sind (siehe Abb. 25).
Sollten Inhalte trotz ordnungsgemäßem Speichern von Änderungen und mehrmaligem Aktualisieren der Seite im Frontend mittels "Strg + F5" nicht wie gewünscht dargestellt werden, so könnte ein Klick auf "Frontend-Caches leeren" (siehe Abb. 26) am oberen Rand des Backends die Lösung sein.