Projektdokumentation

Ich habe schon Vorerfahrung mit WordPress. Zwischen 2015 und 2018 habe ich beruflich und privat Blogbeiträge verfasst und dafür Beiträge angelegt, Texte formatiert, Medien hochgeladen und eingefügt sowie Kommentare von extern moderiert. Neu sind für mich in erster Linie der Block-Editor. Da ich aber privat eine eigene Webseite aufbaue, die ebenfalls einen Block-Editor nutzt, finde ich mich zu Beginn des Moduls im Backend bereits zurecht.

Inhaltlich orientiere ich mich am zur Verfügung gestellten Material von „Stadtgrün e. V.“, das thematisch an mein Themenfeld (Schreib- und Naturpädagogik, Waldbaden) anknüpft. Das beeinflusst auch die Farbwahl für die Seite und weitere Motive, die ich nutzen möchte.

1. Backend einrichten

1.1. Website-Titel und Untertitel anpassen

Die URL blog.katrin-krumpholz.de bezeichnet meinen späteren privaten Blog, den ich für das Projekt über meine privat gehostete Domain angelegt habe.

Der Website-Titel entspricht dem Vereinsnamen Stadtgrün e. V. Der Untertitel der Seite lautet „Gemeinsam gärtnern. Stadträume begrünen. Wissen teilen“ und steht für den Zweck und die Vision des Vereins.

Weitere Einstellungen sind: Sprache: Deutsch / Zeitzone: Berlin / Dashboard: nicht benötigte Widgets ausgeblendet und vorhandene so sortiert, dass ich die wichtigen Infos sehe. Aktualisierungen sind geprüft. WordPress Core, das Theme und Plug-ins sind auf dem aktuellsten Stand.

1.2. Permalink-Struktur: Beitragsname.

Ich habe für die Projektaufgabe die Auswahl Beitragsname gewählt (https://blog.katrin-krumpholz.de/beispielbeitrag/).

Wenn ich für den privaten Blog Kategorien anlege, werde ich prüfen, ob eine Änderung auf individuelle Struktur sinnvoll ist und ich ergänzend zum Beitragsnamen die Kategorie(n) für die Linkanzeige auswähle.

1.3. Kommentare: deaktiviert

Ich habe mich entschieden, alle Kommentareinstellungen zur Vereinsseite zu deaktivieren. Über das unter dem Menüpunkt Kontakt eingerichtete Kontaktformular können Mails und Kommentare zur Seite geschickt werden. Warum? Die Moderation von etwaigem Spam oder Anti-Nachhaltigkeitsgegnern kann in der Regel von den Ehrenamtlichen aus zeitlichen und personellen Gründen oft nicht geleistet werden.

Auf meinem privaten Blog werde ich später Kommentare zulassen und die entsprechenden Einstellungen vornehmen (Registrierung Nutzer, Freigabe durch mich).

1.4. Medien-Uploads organisieren.

Die Uploads sind nach Jahr und Monat organisiert.

2. Themes und Menüverwaltung

2.1. Theme installieren und anpassen

Das Theme Astra wurde installiert und aktiviert.

Die gewählten Basis-Schriftarten umfassen eine Serifenlose Schrift Open Sans und die Playfair Display für Überschriften. Für die H-Überschriften ist die Inherit voreingestellt.

Das Farbschema Willow ist im „Customizer“ (Anpassen) unter Global / Farben zu finden als weitere Auswahl. Es ist eine Farbpalette mit Grün- und Grautönen und Weiß und passt daher gut zum Projektthema Stadtgrün.

Die Farben für das primäre Menü im Frontend habe ich nach Kontrastwirkung gewählt – unter Berücksichtigung des Hinweises der Lesbarkeit, der im Design-Anpassen-Bereich im rechten Bedienmenü bei der Farbwahl angezeigt wird. Der Hinweis führte dazu, dass ich auf manchen Seiten Überschriften in Grün hinterlegt habe und die Schriftfarbe in Schwarz gehalten habe. Dieselbe Farbkombination habe ich für Buttons verwendet. Gleichzeitig wurde die jeweilige Seite strukturiert.

Das Headerlayout habe ich gestaltet mit dem Logo auf linken Seite, daneben dem Untertitel. Rechts daneben habe ich das Hauptmenü angelegt. Das Logo Stadtgrün e. V. habe ich in eine Zeile mit dem Untertitel der Website gesetzt; es wirkt auf mich harmonischer. Der Webseiten-Titel ist nicht sichtbar.

Als Containerlayout habe ich Normal ausgewählt und bei Boxlayout die Breite 1200 px angegeben sowie 1000px als schmale Containerbreite.
Buttons habe ich passend zum Theme in Grün gehalten, der Button ist gefüllt mit leicht abgerundeten Ecken (mittlere Auswahl) und damit auch ein Eyecatcher auf den einzelnen Seiten.

---

Als 2. Theme zum Ausprobieren habe ich Kadence ausgewählt. Es ist ebenfalls ein minimalistisches Theme mit vielen Bildflächen (was für meine private Nutzung sehr interessant ist). Bei der Auswahl unter Popular-Themes (beliebte Themes, die häufig genutzt werden) habe ich nach Blog- bzw. Magazin-Themes geschaut. Im Fokus: ein minimalistisches, hochwertiges Design.

Interessant ist, dass die Einstellungen und Inhalte zum Teil übernommen werden und die Seite Stadtgrün viel edler wirkt, aber nicht mehr denselben Vibe ausstrahlt, wie mit dem ursprünglich gestalteten eher Hands-on-Design.

2.2. Menü erstellen

Im Briefing für das Projekt Stadtgrün e. V. sind folgende Seiten für das Hauptmenü vorgeschlagen:

• Startseite
• Über uns
• Unsere Projekte
• Mitmachen
• Blog
• Kontakt

Die Seiten habe ich genauso angelegt, und dem Hauptmenü zugewiesen. Drei Seiten habe ich aus thematischen Gründen im Menü „verdichtet“, sprich ein Untermenü angelegt: Der Menüpunkt „Wir über uns“ ist als nicht klickbarer Menüeintrag angelegt und darunter finden sich die Unterseiten Über uns, Unsere Projekte und Mitmachen. Damit besteht das Menü aus vier Hauptmenü-Punkten: Startseite, Wir über uns, Blog und Kontakt.

---

Für die Erstellung des Menüs wurden die verschiedenen Eintragstypen genutzt: Seiten als Hauptmenüpunkte, Beiträge für die Rubrik Blog, ein externer Link als Untermenüpunkt (unter Wir über uns: Deutscher Naturschutzring) und „Wir über uns“ als nicht anklickbarer Menüpunkt.

Den Standard-Eintrag „Präsentiert von Astra-WordPress-Theme“ habe ich durch das Copyright mit Jahres- und Vereinsangabe ersetzt und daneben einen reduzierten Claim gesetzt.

Die Breadcrumbs habe ich eingeblendet, mich aber am Ende dagegen entschieden, weil die Menüführung und die Navigationsmöglichkeiten nachvollziehbar erscheinen (aus meiner Sicht).

Zwei Schriften, die ich auf Canva-Designs gerne nutze, habe ich probeweise installiert, Lato und Playfair. Für die Erstellung der Stadtgrün-Seite habe ich mich aber für eine vorinstallierte Schriftkombination entschieden, die den beiden Schriften und ihrer Wirkung ähnlich sind.

3. Beiträge

Notiz: Inhalte aus einem Worddokument werden so übernommen, wie sie formatiert sind.

3.1. Kategorien und Schlagwörter

Für die Kategorien habe ich mich zunächst an den Zielen des Vereins orientiert und eine erste Auswahl getroffen:

Aktuelles = Was passiert gerade?
Projekte = Woran arbeitet der Verein?
Tipps und Stadtnatur = Was können Besucher lernen und zuhause selber umsetzen?

Diese Einteilung habe ich dann verworfen und zu zwei Hauptkategorien verdichtet: Aktionen und Projekte (und Prüfung – für die Projektdokumentation) und diesen beiden Kategorien mehrere Unterkategorien zugeordnet.

Die Überlegung war, dass „Mitmachen“ als Seite im Hauptmenü über Mitgliedschaft, Spenden und Ehrenamt informiert. Einzelne Aufrufe oder Angebote wie „Helfer für Pflanzaktion gesucht“ oder Termine können im Blog unter Aktuelles veröffentlicht werden.

---

3.2. Blog-Beitrag erstellen

Mein erster Projekt-Blogbeitrag Kostenlos Naturwissen entdecken: die NABU|naturgucker-Akademie stellt für Vereinsmitglieder und interessierte Webseitenbesucher die NABU Naturgucker-Akademie vor. Ein kostenloses Online-Angebot, bei dem zahlreiche Onlinekurse viel Wissen über die heimische Flora und Fauna anbietet.
Dem Beitrag habe ich mehrere Unterkategorien zugewiesen: Kooperation, Tipps, Wissen. Die Schlagwörter lauten: NABU, Umweltbildung, Onlinekurs. Den Blogbeitrag gliedern zwei Zwischenüberschriften sowie ein Bild.

Dazu habe ich zwei weitere Beiträge angelegt, die im Projektbriefing vorgeschlagen waren. Beide Blogbeiträge werden durch Zwischenüberschriften gegliedert und durch die Einbindung von Bildern visuell aufgewertet.

---

3.3. Beitragsseiten und Einzelbeiträge anpassen

Für den ersten Blogbeitrag habe ich die normale Darstellung mit Seitenleiste gewählt. In der Seitenleiste ist eine Suchfunktion eingerichtet und Schlagworte für die interessenbasierte Navigation.

Einzelbeiträge habe ich, nach mehreren Versuchen, mit folgender Auswahl eingestellt: Container-Layout Normal und Seitenleisten-Layout rechts ohne Box mit Standard-Inhaltsbreite.

Einzelseiten habe ich mit Container-Layout Normal, Container-Stil Standard und keine Seitenleiste ausgewählt. Die Seitenleiste ist nur für Blogbeiträge eingerichtet.

Blog / Archiv ist mit Container-Layout Normal, Container-Stil Standard und Seitenleisten-Layout rechts im Box-Layout und hier Liste eingerichtet. Anzeigt werden drei Beiträge auf einer Seite; Inhaltsbreite ist Standard.

4. Seiten

4.1. Seiten anlegen

Im Briefing für Stadtgrün e. V. sind folgende Seiten vorgesehen:

• Startseite
• Über uns
• Unsere Projekte
• Mitmachen
• Blog
• Kontakt

Alle sechs Seiten habe ich genau so angelegt und entsprechend benannt. Im Menü habe ich jedoch unter einem Menüpunkt ein Untermenü angelegt, so dass einige Seiten im Frontend nur über Dropdown-Menü einsehbar sind. Zusätzliche Seiten sind die Datenschutzerklärung und das Impressum (pro forma befüllt). Beide Seiten sind im Footermenü verlinkt.

4.2. Verschiedene Inhaltelemente umsetzen

Inhaltselemente wurden auf allen Seiten integriert: neben Überschriften (H2 farbig hinterlegt, in Grün) und Einzelbildern auch Trennlinien und Abstandshalter zwischen Absätzen. Medienelemente wie Medien und Text für Aufzählungen von Angeboten (zusätzlich: Listenelement) oder aber auch Galeriebilder und Spalten wurden genutzt, um Inhalte optisch ansprechend einzusetzen. Auch habe ich das Raster genutzt auf der Seite „Über uns“, um verschiedene Elemente auszuprobieren und ihre Bedienbarkeit kennenzulernen.

Bei der Anpassung der Inhalte hat sich gezeigt, dass Raster oder mehr als vier Spalten schwierig sind, Überschriften im Wort umbrechen bzw. kleinere Überschriften genutzt werden müssen. Ich habe Inhalte reduziert, um vier Spalten anzeigen zu können – und einen wichtigen Punkt darunter gesetzt.

Auf der Startseite sind folgende Inhaltselemente im Einzelnen verwendet:

• 1 Cover-Bild und Claim.
• Medien und Text, für eine ansprechendere Leseführung. Ich habe das Bild einmal links, einmal rechts platziert im Wechsel.
• Buttons, die weiterführen auf die jeweiligen Menüseiten.
• Für mehr Luft zwischen den einzelnen Absätzen habe ich Abstandhalter oder Trennlinien (grün) verwendet.
• 1 Bild-Galerie als optische Unterbrechung.

---

Mehrere Inhaltselemente und Medien wurden auch auf der Seite „Über uns“ eingesetzt (als weiteres Seitenbeispiel).

• 1 Einzelbild.
• 1 Medium mit Text.
• 1 Galerie.
• Spalten bei den Abschnitten Ziele, Werte (Spalten mit Überschrift und Absatztext) und Vorstand (Spalten – mit Bild und Absatztexten als Profilangaben).
• Ein externes Video eingebunden.
• 1 Raster (Gemeinsam gärtnern).
• 1 Zitatkasten.
• Für mehr Luft zwischen den einzelnen Absätzen habe ich Absätze, Abstandhalter verwendet.

5. Widgets und Plugins

5.1. Widgets einrichten

Als Blogseiten-Widgets für die Haupt-Seitenleiste habe ich ausgewählt: das Suche-Feld und eine Schlagwort-Wolke, für die interessenbasierte schnelle Navigation innerhalb des Blogbereichs. Um die Seiten ruhig zu halten, habe ich das Archiv und die Kategorienansicht entfernt.

Im Footerbereich habe ich mich zusätzlich zum Copyright, zum Footermenü (mit Datenschutzerklärung und Impressum) und zwei Social-Media-Icons (kein Twitter / X) für weitere Widgets entschieden, die die Ziele des Vereins aufgreifen:

• Widget 1: Ehrenamt – Verein unterstützen.
• Widget 2: Kooperationspartner werden.
• Widget 3: Kontaktmailadresse.

Auf jeder Seite sind am Ende damit die wesentlichen Kernziele des Vereins verankert, aber auch eine Kontaktmöglichkeit angegeben. Um das Zuspamen des Postfachs zu vermeiden, habe ich das @ der Mailadresse ausgeschrieben in Klammern gesetzt.

---

5.2. Plugins installieren

Installiert habe ich ein Einfaches Kontaktformular über das Plug-in WPForms und unter dem Menüpunkt Kontakt eingerichtet. Die Buttonfarbe habe ich entsprechend des Websitendesigns auf Grün geändert.

Begründung: WP-Forms ist ein beliebtes, kostenfreies Plug-in, mit mehreren Millionen aktiven Nutzern und 5-Sterne-Bewertungen. Es wurde zuletzt vor 3 Wochen aktualisiert (Stand: 05.08.2026) und läuft unter der aktuellen WordPress-Version. Aufgrund dieser Qualitätsrichtlinien habe ich das Plug-in installiert.

Als weiteres Plug-in habe ich Yoast SEO installiert und eingerichtet. Alle Seiten und Beiträge wurden nach der Installation und Einrichtung direkt bewertet, sichtbar an der jeweiligen Ampelfarbe (Rot-Grün und Grau statt Gelb).

Begründung: SEO ist wichtig für das Aufgefundenwerden in Google und anderen Browsern. Das Plug-in ist kostenfrei und beliebt. Es wurde zuletzt am Tag vor der Installierung aktualisiert und ist mit der aktuellen WP-Version kompatibel. Es hat mehrere Millionen aktive Installationen und 5-Sterne-Bewertungen. Aufgrund dieser Qualitätsrichtlinien habe ich das Plug-in installiert.

6. Medien

6.1. Mediathek organisieren

Für das Projekt Stadtgrün e. V. (und die Projektdokumentation) habe ich über 30 Bilder hochgeladen, aus dem Projektordner, aber auch aus der internen Bilddatenbank in der Mediathek sowie Screenshots. Beim Einfügen von Bildern aus der Datenbank zeigte sich, dass die Bildbeschriftung der eingefügten Dateien – aus der Bilddatenbank – kryptische Aneinanderreihungen von Zahlen und Buchstaben waren. Da die Dateien sich nicht ändern ließen, habe ich sie heruntergeladen, beschriftet und erneut hochgeladen. Es wurden für alle Bilder Alt-Texte vergeben, Titel und kurze Beschreibungen (wo wichtig und sinnvoll für die interne Nutzung) hinzugefügt. Zudem habe ich jedes Bild einer Seite zugeordnet.

Die Suchfunktion der Mediathek wurde zweimal getestet: 1. mit dem Schlagwort „garten“ und mit dem Schlagwort „workshop“.

---

6.2. Medien einbinden

Unter dem Menüpunkt Wir über uns / Über uns habe ich (der Reihe nach) ein einzelnes Bild, ein Bild mit Text, ein Youtube-Video sowie drei Bildern in Spalten und eine Galerie mit drei Bildern am Fuß der Seite als Abschluss eingesetzt (unterhalb der Werte, die damit auch nochmal veranschaulich werden).

Die Versionierung von Seiten bzw. die Ansicht von älteren Versionen bei Änderungen ist mir bereits bekannt. Während der Projektarbeit tauchte ab und zu der Hinweis auf, dass es eine gespeicherte Version gibt, die aktueller ist als die angezeigte. Daraufhin habe ich mir im Backend den Stand angesehen (in der HTML-Ansicht) und den aktuelleren ausgewählt (gespeichert).

7. Backendbenutzer und Zugriffsrechte

7.1. Benutzer anlegen

Drei Testbenutzer mit unterschiedlichen Rollen:

• Abonnent: Testprofil 1

• Redakteur: Testprofil 2

• Autor: Testprofil 3

---

Bausteinprüfung 11.08.2026, Katrin Krumpholz, Kurs DIMA121h-08.1, Stuttgart