Zwischen Backend und Frontend.
Website-Werkstatt im Projekt PORTA MEDIENKOMPETENZEN

Rund zehn Frauen wollen es wissen: Sie treffen sich sechs Wochen lang zwei Mal wöchentlich zu den Website-Werkstätten im Projekt PORTA MEDIENKOMPETENZEN. Dabei geht es sofort in die Praxis: Jede Teilnehmerin baut auf einem Test-Server eine eigene WordPress-Seite auf.

Beispiel für die Startseite einer Website mit dem Titel I LOVE BERLIN aus der Website-Werkstatt im Projekt PORTA MEDIENKOMPETENZEN: Header-Bild mit Berliner Skyline, Menü oben rechts und einspaltiger Text mit Überschrift. Foto: Kerstin Dankwerth

Und auf den Seiten geht es zum Beispiel um – Berlin!

Aber von Anfang an. Los geht’s mit den absoluten Grundlagen: Für den Bau einer Website ist ein Content Management System (CMS) nötig. Das ist eine Software, die zur Erstellung und Verwaltung von Inhalten (also z.B. Texten, Bildern oder Videos) verwendet wird. Weit verbreitet sind Open-Source-Systeme, das beliebteste ist das kostenfrei nutzbare WordPress, das sich einfach installieren und bedienen lässt.

Eine Website mit Leben füllen

Wenn wir im Internet surfen, sehen wir das Frontend einer Seite. Die redaktionelle und administrative Pflege passiert im Backend. Zu diesem Verwaltungsbereich der Seite haben nur registrierte Nutzer*innen Zugriff. Hier können sie die Seite bearbeiten. Seiten-Administrator*innen und Redakteur*innen können Bilder und Texte einstellen oder austauschen, das Layout festlegen oder mit wenigen Klicks verändern. Für Besucher*innen der Seite ist das Backend nicht sichtbar.

In der Website-Werkstatt werden die Teilnehmerinnen also zu Redakteurinnen ihrer eigenen Test-Seite. Auf der Startseite bauen sie Bereiche mit unterschiedlichen Layouts ein: Das Headerbild geht über die ganze Breite der Seite. Dafür wählen die Teilnehmerinnen ein Foto aus und laden es auf die Seite hoch. Sie verwenden ein- und zweispaltige Layouts und füllen sie mit verschiedenen Inhaltselementen: Mit Überschriften, Texten, Fotos oder YouTube-Videos, die in die Seite eingebunden werden.

Beispiel für ein zweispaltiges Layout auf einer Website zu Berlin aus der Website-Werkstatt im Projekt PORTA MEDIENKOMPETENZENDie Frauen lernen, inwiefern sich eine Website und ein Blog voneinander unterscheiden. Und warum auf einer Website einerseits von Seiten, andererseits von Beiträgen gesprochen wird: Eine Seite wird für dauerhafte Inhalte verwendet – das sind auf einer Website z.B. Seiten wie „Über mich“, „Kontakt“ oder „Impressum“. Zu erreichen sind diese Unter-Seiten über ein Menü, mit dessen Hilfe ich mich auf der Seite bewegen kann: Über das Menü gelange ich von der Startseite auf eine Unterseite und wieder zurück. Wie das Menü im Backend angelegt wird, ist Teil der Werkstatt.

Und die Teilnehmerinnen legen selbst neue Seiten an, natürlich mit Text und Beitragsbild. Und wenn die Seite im Frontend nicht zu sehen ist? Genau, dann liegt das daran, dass sie im Menü nicht auftaucht. Sie muss als eigener Menüpunkt angelegt und verlinkt werden – kein Problem mehr nach der Website-Werkstatt.

Liest eh keiner?

Beiträge dagegen sind die Artikel auf einem Blog. Die Redakteurin kann die Beiträge mit Kategorien und Schlagwörtern versehen. Dieser Beitrag auf dem FCZB-Blog z.B. hat die Kategorie PORTA.

Tipps für gute Blogbeiträge gibt es noch dazu, allem voran: Die Überschrift entscheidet, ob ein Blogbeitrag gelesen wird! Und: Wenn von zehn Seitenbesucher*innen acht die Überschrift lesen, dann lesen nur zwei von diesen zehn letztlich den ganzen Beitrag. Es lohnt sich also, für das Verfassen der Überschrift genauso viel Zeit zu investieren wie für den kompletten Beitrag.

Die Teilnehmerinnen lernen, Beiträge zu einem beliebigen Thema zu erstellen. Sie bauen Text ein und formatieren diesen, dazu fügen sie ein passendes Bild ein. Auch wie sie eine Verlinkung zu einer anderen Website herstellen können, mit der man auf diese externe Seite gelangt, ist Thema. Und natürlich, wie sich die Beiträge in der Vorschau begutachten lassen – und wie sie veröffentlichte werden.

Beispielbild zur Website-Werkstatt im Projekt PORTA MEDIENKOMPETENZEN: Blick ins Backend einer WordPress-Seite. Bild: Stephen Phillips auf Unsplash.

Themes und Plugins – keine Fremdworte mehr

Mal ausprobieren, ob die Seite anders gestaltet nicht doch besser aussähe? Na klar – mit der Aktivierung eines anderen Themes im Backend ändert sich die Darstellung der Website im Frontend. Theme? Ein WordPress-Theme ist eine Layoutvorlage für die Website.

Das Theme bestimmt maßgeblich das Aussehen der Seite. Es gibt vor, wie Überschriften, Textabschnitte, Bilder und andere Elemente gestaltet und angeordnet sind. Für WordPress gibt es unzählige solcher Layoutvorlagen. Beliebte Themes sind z.B. GeneratePress, Astra oder OceanWP. Alle drei Themes gibt es als kostenlose und kostenpflichtige Variante.

Und wenn die Seite nicht alles kann, was sie soll? Wenn ich z.B. sehen möchte, wie viele Besucher*innen auf der Seite unterwegs waren? Dafür gibt es WordPress Plugins – kleine Programme oder Programmpakete (PHP Skripte), mit denen der Funktionsumfang des WordPress-Systems einfach und schnell erweitert werden kann.

Am Ende sieht jede Teilnehmerin ihr Produkt, ihre Website, auf dem eigenen Test-Server vor sich. Es gibt eine Startseite mit ein- und zweispaltigem Layout, in das Texte mit verschiedenen Überschriften-Typen, Bilder und Videos eingebunden sind. Und es gibt ein Menü, über das Unterseiten erreichbar sind. Außerdem (Blog-)Beiträge, die unterschiedlichen Kategorien zugewiesen sind. Und im besten Fall war sogar genug Zeit für die Überschriften.


Die beschriebenen Inhalte waren Teil der Website-Werkstatt und der Website-Werkstatt Aufbau im Projekt PORTA – MEDIENKOMPETENZEN UND WORK-LIFE-BALANCE FÜR DEN BERUFLICHEN WIEDEREINSTIEG. Beide Werkstätten fanden online statt. Die Teilnehmerinnen profitierten dabei vom Praxis-Wissen der Trainerin: Kerstin Dankwerth hat jahrelange Erfahrung im Aufbau von Websites für unterschiedlichste Zwecke und Kund*innen.

Auch im Folgeprojekt PORTA RESTART gibt es eine Website-Werkstatt für Frauen mit gesundheitlichen Beeinträchtigungen, die sich beruflich (weiter-)qualifizieren möchten.


Das Projekt PORTA – MEDIENKOMPETENZEN UND WORK-LIFE-BALANCE FÜR DEN BERUFLICHEN WIEDEREINSTIEG wird gefördert aus Mitteln des Europäischen Sozialfonds und der Senatsverwaltung für Arbeit, Soziales, Gleichstellung, Integration, Vielfalt und Antidiskriminierung.

Logo EULogo Europäischer Sozialfonds BerlinLogo Senatsverwaltung für Arbeit, Soziales, Gleichstellung, Integration, Vielfalt und Antidiskiminierung