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

Ihr User-Account für das TYPO3-Backend

Bei der Neuanlage des Webbaukastens legen wir für Sie einen User-Account an, in dem die von Ihnen angegebene E-Mail hinterlegt ist, sowie ein Username, der normalerweise aus dem 1. Buchstaben Ihres Vornamens und Ihrem Nachnamen besteht:

Bsp.: Max Muster wird zu Username m.muster

Außerdem wird aus technischen Gründen bereits an dieser Stelle ein sogenanntes initiales Passwort in Ihrem Account hinterlegt. Dieses ändern Sie dann später selbst, siehe nächster Schritt.

Den neu erstellten Webbaukasten stellen wir für Sie am gewünschten Termin bereit - die Übergabe erfolgt mit einer Mail, in der Ihnen Ihr Username und weitere Infos mitgeteilt werden.

Eigenes Passwort anfordern

Um Ihr Passwort anzufordern, rufen Sie, wie in unserer Mail beschrieben, die Seite https://baukasten.ekhn.de/typo3/login/password-reset/forget auf, geben dort Ihre hinterlegte E-Mail-Adresse ein und klicken auf den Button “Link zum Zurücksetzen zusenden” - siehe Abb. oben

Anschließend erhalten Sie eine Mail vom Absender “Evangelischer Webbaukasten” (no-reply@ekhn.info) an Ihr Postfach. In der Mail befindet sich ein Link "Reset password", den Sie bitte anklicken.

Wichtige Hinweise:

Sollten Sie keine E-Mail erhalten, prüfen Sie bitte auch Ihren Spam-Ordner.
Ausnahme: Wenn Sie mit einem Zugang mehrere Baukästen betreuen, können Sie Ihr Passwort nicht selbst zurücksetzen, sondern müssten sich bitte direkt an unserern Support werden: mail(at)medienhaus.support

Eigenes Passwort vergeben

Über den Link in der Mail gelangen Sie auf eine Eingabemaske (siehe Abb. oben), wo Sie Ihr eigenes (neues) Passwort eintragen (und damit das initial vergebene Passwort zurücksetzen - deshalb steht hier “zurücksetzen”).

Bitte beachten Sie dabei die Bedingungen, welche das Passwort erfüllen muss, damit es akzeptiert wird - diese sind unterhalb der Eingabefelder genau aufgeführt; achten Sie außerdem bei der Wiederholung des Passworts auch darauf, dass keine zusätzlichen Leerzeichen am Ende stehen o.ä.

Wenn das Passwort erfolgreich geändert wurde, erscheint eine grüne Erfolgsmeldung und Sie können sich anschließend am System anmelden - siehe nächster Schritt.
Kommt stattdessen eine rote Fehlermeldung, wird in dieser genau beschrieben, welche Bedingungen an das Passwort nicht erfüllt wurden; bitte versuchen Sie es dann noch einmal neu.

1 Anmeldung im Redaktionssystem

Abb. 1

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

Abb. 2 - So sieht das Backend nach der Anmeldung aus

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.

Nach Abschluss der Migration erhalten Sie neben der E-Mail mit Ihren Zugangsdaten die vorübergehenden Adresse Ihrer neuen Website bis zum Go-Live.

Diese ist nach folgendem Schema aufgebaut - wobei xxx für die ID Ihrer Rootseite steht:

preview-xxx.ekhn.de

Wenn Sie diese Adresse in Ihrem Browser öffnen, sehen Sie Ihre migrierte Website, die alle Inhalte und die bisherige Seitenstruktur enthält.

3 Backend und Frontend

Abb. 3

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:

Fahren Sie im Seitenbaum oben über das Symbolleere Seite - ein Ankerkreuz erscheint. Klicken Sie darauf und lassen Sie die Maustaste nicht los.
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.
Lassen Sie die Maustaste los, geben Sie einen Seitentitel ein und bestätigen Sie mit Enter - Abb. 4a, Schritte B und C
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
Anschließend können Sie die Seite mit Content-Elementen befüllen.

Seite löschen

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

Abb. 4a

Abb. 4b

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

Wählen Sie im Seitenbaum die gewünschte Seite.
Klicken Sie an der vorgesehenen Position auf „+Neuen Inhalt erstellen“ - Abb. 5
Ein Pop-up-Fenster öffnet sich.
Die Elemente sind in Bereiche gegliedert; oben steht eine Suchfunktion zur Verfügung.
Wählen Sie zunächst einen Bereich, anschließend das gewünschte Content-Element - Abb. 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:

Text Text & Medien Medien (für Videos)Bildergalerie Hero-Bild Standortkarte Kontaktbox Akkordeon (Klappbox)Linkbox (Downloadliste)Tabelle Trenn-Element Anzeige von Newsartikeln Anzeige von Veranstaltungen

Abb. 5 - Bsp Text- und Medienelement

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

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

Bild einbinden (z. B. im Content-Element „Text und Medien“)

Wechseln Sie zum Modul „Seite“.
Klicken Sie auf „+Neuen Inhalt erstellen“, um ein neues Content-Element zu erstellen.
Wählen Sie das Element „Medien“ oder „Text und Medien“.
Öffnen Sie den Reiter „Medien“.
Klicken Sie auf „Mediendatei hinzufügen“ und wählen Sie die gewünschte Datei aus.
Speichern und schließen Sie das Element.

Abb. 6

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.

Bsp. Musterseite für Nachbarschaftsräume