Dieses Tutorial richtet sich an Redakteur*in und Administrator*in, die Inhalte einer DRK-Website erstellen, bearbeiten und organisieren wollen.
Bei TYPO3 handelt es sich um ein freies Content Management System (CMS), mit welchem umfangreiche Websites bearbeitet, organisiert und optimiert werden können.
Wenn du bereits Login-Daten hast, kannst du ganz einfach über den Anmelde-Link mit deinem Passwort und Benutzernamen in das Backend der Seite gelangen.
Auf TYPO3 gibt es verschieden Benutzertypen, die unterschiedlich Nutzungsrechte haben:
Im Folgenden werden die einzelnen Bereiche des Seitenmenüs im Backend erklärt. Das Seitenmenü befindet sich links und ist in verschiedene Bereiche eingeteilt, die ein- und ausgeklappt werden können.
Nicht alle Elemente und Module, die im Folgenden erklärt werden, sind für alle Benutzer*innen sichtbar.
Zusätzlich ist es möglich, dass nicht jede Website die gleichen Auswahlmöglichkeiten besitzt, das bedeutet, dass einige der hier erwähnten Funktionen oder Elemente dir nicht zur Verfügung stehen könnten.
Auf dem Dashboard findest du ein paar Infos rund um deine Seite. Das Dashboard kann individualisiert und angepasst werden. Meisten wird dir hier angezeigt:
Es können auch mehrere Dashboards erstellt werden. Hierzu kannst du oben neben dem Namen des Dashboards auf das Plussymbol klicken.
Auf dem DRKCMS Markplatz werden Produkte von und für das DRKCMS vorgestellt und angeboten. Hier kannst du aber auch Produkte finden, die bereits gebucht wurden. Kostenfrei ist hier auch ein kleiner Hilfe-Bereich mit Verlinkungen und weiteren Infoseiten zu finden.
Die Web Elemente unter dem Punkt Web werden für die Inhaltsverwaltung der Website genutzt. Hier einmal eine kurze Zusammenfassung der Module:
Die aus unserer Erfahrung besonders wichtigen Elemente werden nun nochmal etwas detaillierter beschrieben.
Das Seitenmodul ist das zentrale Element zur Verwaltung und Bearbeitung von Inhalten. Hier wird eine hierarchische Baumstruktur der gesamten Website (auch Seitenbaum) auf der linken Seite angezeigt. Die einzelnen Abschnitte können mit einem Klick auf die Klammern auf- oder zugeklappt werden.
Um neue Seiten zu erstellen oder vorhanden zu löschen, kannst du auf einen Punkt des Seitenbaums per Rechtstaste klicken. Es öffnet sich ein Feld, in dem weitere Aktionen ausgeführt werden können, darunter auch Aktivieren oder Deaktivieren der einzelnen Seiten. Wenn eine Seite bspw. noch bearbeitet wird, macht es Sinn diese zunächst deaktiviert zu lassen, bis sie veröffentlicht werden soll.
Der Seitenbaum kann auch per Drag & Drop verändert werden.
Zusätzlich kannst du auf der rechten Seite des Bildschirms, neben dem Seitenbaum, den Bearbeitungsmodus der einzelnen Seiten sehen.
Über dieses Modul kann eine Vorschau der Seite angezeigt werden. Über ein Dropdown-Menü kannst du auswählen, in welchem Format die Seite angezeigt werden soll, z.B. Computer, iPhone, Tablet etc.
Auf diesem und anderen Modulen gibt es aber auch den Button “Website anzeigen” mit einem Augensymbol daneben. Wenn du diesen anklickst, öffnet sich ein neuer Tab mit der Vorschau der Seite. So kannst du Inhalte vor der Veröffentlichung überprüfen und ansehen.
Das Listenmodul zeigt alle Elemente einer Seite in einer tabellarischen Ansicht. Hier kannst du alle Elemente einer Seite ansehen und schnell bearbeiten, wenn du bspw. mehrere Elemente löschen oder deaktivieren möchtest.
Das Modul zeigt eine Übersicht aller vorhandenen Formulare in einer tabellarischen Liste. Beim Erstellen oder Bearbeiten eines Formulars öffnet sich ein Editor. Zum Erstellen musst du auf das Plussymbol oben links klicken und zum Bearbeiten eines bereits existierenden Formulars muss das Stiftsymbol neben dem Formularnamen angeklickt werden.
Formulare werden z.B. für Kursanmeldungen, Kontaktaufnahmen oder Spenden genutzt. Die Formulare werden hier erstellt und bei der Seitenbearbeitung als Element eingefügt.
Das Modul zeigt eine Liste aller Links auf der Website und hebt fehlerhafte oder ungültige Links hervor. Die Links werden überprüft und wenn ein Link nicht funktioniert oder anderweitig fehlerhaft ist, wird dies hier angezeigt. Hierzu zählen interne und externe Links.
Das Indizierungsmodul zeigt eine Liste aller durchsuchbaren Inhalte auf der Website und deren Indexierungsstatus. Indexierung bedeutet, dass Inhalte für die interne Suchfunktion gespeichert und schneller gefunden werden. TYPO3 durchsucht die Seiten, speichert Texte, Überschriften und Metadaten in einer Datenbank (Suchindex) und nutzt diese für Suchanfragen.
Der Papierkorb listet alle gelöschten Seiten und Elemente in einer tabellarischen Ansicht auf, sortiert nach Löschdatum. Hier kannst du auch versehentlich gelöschte Elemente wiederherstellen, dazu klickt man auf das Pfeilsymbol neben dem jeweiligen Datensatz.
Das Modul bietet die Möglichkeit, fehlende Alternativ-Texte auf Unterseiten der Homepage zu ergänzen. Die entsprechenden Seiten werden links im Seitenbaum ausgewählt und alle Bilder auf diesen Seiten, die keinen Alternativ-Text haben, werden angezeigt. Über den Button “Inhaltsspezifischen Alt-Text bearbeiten” oder “Globalen Alt-Text bearbeiten” kannst du das bei jedem Bild ergänzen.
Alt-Text, ist Text, der für Maschinen (also Screenreader, Suchmaschinen usw.) anstelle eines Bildes sichtbar ist. Alt-Text ersetzt das Bild, wenn dieses nicht sichtbar ist und soll daher, wenn möglich, dieselbe Aufgabe erfüllen. Dies ist wichtig, da der Alt-Text die Information ist, die Suchmaschinen über Dateien, besonders Bilder, erhalten. Suchmaschinen wie z.B. Google können Bilder nicht “sehen” und benötigen den Alt-Text als Information, sonst wird der Bereich für die Datei als leer angesehen. Alt-Text kann daher auch beim Ranking der Seiten helfen. Ranking ist hier die Platzierung der Seite im Ergebnis einer Suchanfrage in einem Browser. Alt-Text sollte nur bei informationstragenden Bildern genutzt werden, Hintergrundbilder oder Bilder, die keine Informationen vermitteln, benötigen keinen Alt-Text.
Kurze Tipps für Alt-Text
Unter dem Element Datei befindet sich das Modul Dateiliste. Dies zeigt zunächst eine Ordnerstruktur an. Hier werden Bilder, PDFs, Dokumente und andere Dateien verwaltet. Alle Dateien, die auf der Website hochgeladen werden oder wurden, sind hier gesammelt.
Du kannst neue Dateien und Ordner über die Plussymbole am oberen Rand erstellen. Über das Pfeilsymbol kannst du auch neue Dateien in Ordern hochladen. Beim Hochladen der Dateien ist es wichtig, Metadaten zu den jeweiligen Elementen einzutragen. Hierzu gehören z.B. Titel, Alternativ-Text, Ersteller, Quelle, Urheberrecht etc.
Unter dem Element Site Management befinden sich die Module:
Im letzten Element, befinden sich folgende Module:
Um eine neue Seite zu erstellen, musst du auf dem Seitenbaum mit einem rechts Klick auf den passenden Bereich klicken. Hier öffnet sich ein Menü mit der Option “neue Unterseite”.
Nachdem du eine neue Seite erstellt hast, öffnet sich eine neue Bearbeitungsoberfläche, hier werden die Seiteneinstellungen und Metadaten eingetragen.
Zunächst gibt es die Seitentyp-Auswahl:
Es ist wichtig, die Felder, die mit einem roten Ausrufezeichen markiert sind, auszufüllen, z.B. den Seitentitel. Unter dem Reiter Metadaten wird eine Zusammenfassung, also wozu dient die Seite bzw. was ist das für eine Seite und Meta-Tags (Schlagworte) vergeben. Die Schlagworte sollen die Website beschreiben. Diese Metadaten helfen der Suchmaschine beim Verstehen der jeweiligen Seiten und fördern das Ranking.
Um eine erstellte Seite zu löschen, musst du per Rechtsklick auf die Seite tippen und im Menü “Löschen” auswählen.
Im Bearbeitungsmodus werden für das Layout vier Bereiche angezeigt.
Die einzelnen Elemente können im Layout per Drag & Drop verschoben werden.
Um ein neues Element auf einer Seite einzufügen, kannst du im Layout auf das Plussymbol klicken. Hier werden dann verschiedene Inhaltselemente angezeigt. Ein häufig genutztes Element ist “Text & Medien”. Mit diesem Element kannst du Texte, Bilder, Grafiken, Videos und Audios einfügen. Unter dem Reiter “Allgemein” kann u.a. ein Text eingefügt und die Überschrift des Elements vergeben werden. Unter dem Reiter “Medien” kann bspw. ein Video oder Bild eingefügt werden. Die Medien können direkt hochgeladen oder aus der Dateiliste (siehe 2.3) ausgewählt werden. Und bei dem Reiter “Erscheinungsbild” kannst du eine Hintergrundfarbe für das Element auswählen, wenn keine Farbe ausgewählt wird, ist die Standardfarbe weiß.
Im Folgenden werden kurz ein paar weitere oft genutzte Inhaltselemente vorgestellt:
Es gibt mehrere DRK-spezifische Inhaltselemente, die auf den Seiten eingefügt werden können:
Im Folgenden findest du ein paar extra Punkte, auf die wir nochmal eingehen möchten.
Um ein Kontaktformular auf einer Seite einzufügen, können zwei verschiedene Kontaktformular-Typen genutzt werden.
Das DRK Kontaktformular ist ein vorgefertigtes DRK-spezifisches Inhaltselement und kann unter “DRK sonstige Plug-Ins” ausgewählt und auf der Seite eingefügt werden. Bei diesen Formularen kannst du kein Feld bearbeiten oder anpassen. Um dafür zu sorgen, dass die ausgefüllten Formulare an die richtige E-Mail weitergeleitet werden, muss diese beim TypoScript im Konstanten-Editor unter “drkcontactform” entsprechend angegeben werden.
Ein individuelles Kontaktformular kannst du unter dem Web-Element “Formulare” erstellen und auf der jeweiligen Seite über das Inhaltselement “Formulare” einfügen.
Um ein Spendenformular oder andere Informationen zur Spende darzustellen, musst du zunächst eine neue Seite “Spenden” erstellen. Hier kannst du das Inhaltselement “Spendenformular” unter “DRK Mitglied werden und Onlinespende” auswählen und das fertige Formular einfügen.
Wenn du Änderungen am Formular vornehmen möchtest, kannst du dies im Konstanten-Editor unter “ plugin.txt.memberform” tun.
Warum ist Datenschutz wichtig für unsere Homepage?
Um eine Datenschutzerklärung in deinen Footer einzufügen, kannst du im Web Element “Seiten” über den Seitenbaum zum Ordner "Daten" navigieren. Hier befindet sich der Bereich “Footer Menü”, unter diesem Punkt kannst du deine Menüpunkte aus dem Footer finden. Bei uns ist es z.B. Mitwirken, Informieren und Service. Zu dem Punkt Service passt die Datenschutzerklärung gut. Am entsprechenden Punkt im Footer Menü kannst du eine neue Unterseite zum Datenschutz erstellen (siehe 3.1). Um die schriftliche Datenschutzerklärung einzufügen, kannst du ein Text- und Bildelement einfügen (siehe 3.2.2). Meist stellen dein DRK-Verband oder deine Datenschutzbeauftragten den Text bereit.
Nach dem Speichern der Seite sollte deine neue Datenschutzerklärung im Footer deiner Homepage auftauchen.
Wenn du die Anzahl der Footer-Spalten ändern möchtest, also z.B. anstatt drei Menüpunkte vier haben möchtest, kannst du dies über den Konstanten-Editor machen. Hier wählst “drk_template” und kannst die Anzahl der Footer-Spalten ändern und speichern.
Warum ist ein Impressum wichtig?
Auch das Impressum erstellst bzw. findest du wieder im Footer-Menü. Auch hier erstellst du dann eine neue Seite und fügst den Text des Impressums ein. Wichtig ist es hier eine funktionierende und nicht-personalisierte E-Mail-Adresse anzugeben (info(at)drk-deinverein(dot)de).
Da TYPO3 ein Open Source CMS ist, gibt es viele Dokumentationen und hilfreiche Webseiten zu der Nutzung des Systems, hier nennen wir dir nur ein paar: