Einstieg Webbaukasten / TYPO3

→ Für wen ist die folgende Anleitung vor allem gedacht?

  • Sie haben die Zugangsdaten für Ihren neuen Website-Baukasten erhalten
  • Sie möchten einen kompakten Überblick über die wichtigsten ersten Schritte im Webbaukasten mit TYPO3
  • Sie haben noch keine Kenntnisse in TYPO3 - oder möchten Ihre TYPO3-Kenntnisse auffrischen

1 Anmeldung im Redaktionssystem


Um sich im TYPO3-Redaktionssystem anzumelden, öffnen Sie in Ihrem Browser die Adresse:

https://baukasten.ekhn.de

Daraufhin erscheint die Anmeldemaske, siehe Abb. 1
Tragen Sie dort Ihre Zugangsdaten ein:

  • Benutzername
  • Passwort

Klicken Sie anschließend auf „Anmeldung“, um sich im System einzuloggen.

2 Aufbau des Redaktionssystems


Das System besteht aus zwei grundlegenden Ansichten Ihrer Website:

  • Backend – die Arbeitsumgebung, in der Sie Inhalte erstellen, verwalten und bearbeiten.
  • Frontend – die öffentliche Darstellung Ihrer Website im Internetbrowser.

3 Backend und Frontend


Backend

Das Backend ist Ihre redaktionelle Arbeitsoberfläche.
Hier pflegen Sie Seiten, Texte, Bilder und andere Inhalte.
Die Oberfläche gliedert sich in drei Hauptbereiche:

1. Funktionsmenü - Abb. 3, A

Im linken Bereich wählen Sie das gewünschte Modul.
Darin steuern Sie, ob Sie Seiten bearbeiten, Medien verwalten oder rechtliche Informationen anpassen möchten.

Wichtige Module im Überblick:

  • „Seite“: Seitenstruktur verwalten, neue Seiten anlegen und Inhalte bearbeiten.
  • „Liste“: Zeigt alle Elemente einer Seite oder eines Ordners in Listenform.
  • „Artikel-Verwaltung“: Dient dem Erstellen und Pflegen eigener Artikel.
  • „Artikel-Abonnements“: Ermöglicht das Abonnieren und Einbinden von ekhn.de-Artikeln oder anderer Einrichtungen
  • „Datenschutz“: Verwaltung von Impressum und Datenschutzerklärung.
  • „Dateiliste“: Upload und Verwaltung von Mediendateien.
  • „Fundus Download“: Zugriff auf die zentrale Bild- und Mediendatenbank
2. Seitenbaum - Abb. 3, B

Der Seitenbaum zeigt die hierarchische Struktur Ihrer Website.
Er entspricht der Navigation im Frontend.
Hier können Sie Seiten anlegen, verschieben, umbenennen oder löschen.

3. Content-Bereich - Abb. 3, C

Im rechten Arbeitsbereich bearbeiten Sie die eigentlichen Inhalte Ihrer Seite.
Hier werden die Content-Elemente angezeigt, die Sie anlegen, bearbeiten, verschieben oder löschen können.


Frontend

Das Frontend zeigt Ihre Website so, wie Besucherinnen und Besucher sie sehen.
Die Struktur entspricht dem Seitenbaum im Backend: Hauptseiten bilden die erste Navigationsebene, Unterseiten die zweite und dritte.
Änderungen im Backend werden automatisch im Frontend übernommen.

4 Seitenverwaltung


Neue Seite anlegen

Mit der Drag-&-Drop-Funktion können Sie Seiten schnell und intuitiv erstellen:

  1. Fahren Sie im Seitenbaum oben über das Symbolleere Seite - ein Ankerkreuz erscheint. Klicken Sie darauf und lassen Sie die Maustaste nicht los.
  2. Ziehen Sie die neue Seite per Maus an die gewünschte Position:
    • Eine dünne blaue Linie zeigt die Einfügung zwischen zwei Seiten an.
    • Ein breiter blauer Balken bedeutet, dass die Seite als Unterseite eingefügt wird - Abb. 4a, Schritt A
    • Ein durchgestrichener roter Kreis zeigt an, dass die gewählte Position nicht erlaubt ist.
  3. Lassen Sie die Maustaste los, geben Sie einen Seitentitel ein und bestätigen Sie mit Enter - Abb. 4a, Schritte B und C
  4. Die Seite ist zunächst deaktiviert. Aktivieren Sie sie über das Menü, welches erscheint, wenn Sie auf das Symbol vor dem Titel klicken - Abb. 4b
  5. Anschließend können Sie die Seite mit Content-Elementen befüllen.

Seite löschen
  1. Klicken Sie im Seitenbaum auf das Symbol vor der Seite.
  2. Wählen Sie im Menü die Option „Löschen“ - Abb. 4b
  3. Bestätigen Sie die Aktion, um die Seite zu entfernen.

5 Arbeiten mit Content-Elementen


Im rechten Bereich des Backends gestalten Sie die Inhalte Ihrer Website.
Hier können Sie Content-Elemente anlegen, bearbeiten, verschieben oder löschen.

Neues Content-Element anlegen
  1. Wählen Sie im Seitenbaum die gewünschte Seite.
  2. Klicken Sie an der vorgesehenen Position auf „+Neuen Inhalt erstellen“ - Abb. 5
  3. Ein Pop-up-Fenster öffnet sich.
    Die Elemente sind in Bereiche gegliedert; oben steht eine Suchfunktion zur Verfügung.
  4. Wählen Sie zunächst einen Bereich, anschließend das gewünschte Content-Element  - Abb. 5
  5. Es wird ein leeres Content-Element angelegt, das Sie nun befüllen können.
Content-Element löschen
  • Klicken Sie auf das Mülltonnen-Symbol neben dem Element.
  • Bestätigen Sie die Löschabfrage.
    Das Element wird daraufhin entfernt.
Folgende Content-Elemente stehen Ihnen zur Verfügung:

TextText & MedienMedien (für Videos)BildergalerieHero-BildStandortkarteKontaktboxAkkordeon (Klappbox)Linkbox (Downloadliste)TabelleTrenn-ElementAnzeige von NewsartikelnAnzeige von Veranstaltungen

Container-Elemente

Für eine klare Struktur Ihrer Seite empfehlen sich Container-Elemente.
Sie ermöglichen es, Inhalte nebeneinander oder in mehreren Spalten anzuordnen – etwa Texte, Bilder oder Infoboxen.

Weitere Informationen finden Sie in der Kurzanleitung „Container“

5 Bilder verwalten und einfügen


Damit Sie Bilder auf Ihrer Website verwenden können, müssen diese zunächst in TYPO3 hochgeladen werden.
Legen Sie idealerweise bereits auf Ihrem Computer eine übersichtliche Ordnerstruktur an, um Ihre Mediendateien besser zu verwalten.


Bild hochladen
  1. Öffnen Sie im Funktionsmenü das Modul „Dateiliste“.
  2. Wählen Sie den gewünschten Zielordner.
  3. Klicken Sie auf „Dateien hochladen“.
  4. Markieren Sie die gewünschten Dateien und bestätigen Sie mit Öffnen.

Bild einbinden (z. B. im Content-Element „Text und Medien“)
  1. Wechseln Sie zum Modul „Seite“.
  2. Klicken Sie auf „+Neuen Inhalt erstellen“, um ein neues Content-Element zu erstellen.
  3. Wählen Sie das Element „Medien“ oder „Text und Medien“.
  4. Öffnen Sie den Reiter „Medien“.
  5. Klicken Sie auf „Mediendatei hinzufügen“ und wählen Sie die gewünschte Datei aus.
  6. Speichern und schließen Sie das Element.

7 Barrierefreiheit und Inhaltskonzeption


Neben der technischen Umsetzung ist auch die inhaltliche Gestaltung entscheidend.
Berücksichtigen Sie beim Erstellen Ihrer Seiten folgende Grundsätze, um eine möglichst barrierearme und nutzerfreundliche Website zu gestalten:

  • Zielgruppen klären: Überlegen Sie, wen Sie ansprechen und welche Informationen relevant sind.
  • Verantwortlichkeiten festlegen: Bestimmen Sie, wer Inhalte pflegt und regelmäßig aktualisiert.
  • Struktur vereinfachen: Eine klare und wiedererkennbare Seitenstruktur erleichtert die Orientierung. Nutzen Sie Überschriften, Abstandselemente und eine saubere Hierarchie.
  • Klare Sprache verwenden: Schreiben Sie verständlich, vermeiden Sie Fachjargon und erläutern Sie Abkürzungen.
  • Bilder zugänglich machen: Versehen Sie wichtige Bilder mit Alternativtexten und vermeiden Sie Grafiken, die nur Text enthalten.
  • Tabellen sparsam einsetzen: Nutzen Sie Tabellen nur, wenn sie inhaltlich erforderlich sind.

TYPO3 bietet die technische Grundlage für barrierearme Webseiten – durch Ihre redaktionelle Arbeit tragen Sie dazu bei, ein inklusives Kommunikationsangebot zu gestalten.

8 Inspiration und Beispiele


Suchen Sie Anregungen für Ihren eigenen Internetauftritt?
Werfen Sie einen Blick auf unsere Musterseiten für Kirchengemeinden, Kitas und Nachbarschaftsräume sowie auf ausgewählte Referenzseiten.
Dort finden Sie zahlreiche Beispiele, wie Sie Ihre Website ansprechend und individuell gestalten können.