Über das Projekt

RespiraRoots – Entwicklung einer professionellen B2B-Website für Breath at Work

RespiraRoots entwickelt kurze und alltagstaugliche Atempausen für Unternehmen. Das B2B-Angebot richtet sich insbesondere an HR, People & Culture, Betriebliches Gesundheitsmanagement sowie an Führungskräfte und Teams. Im Mittelpunkt steht „Breath at Work“: professionell angeleitete Atemübungen, die sich unkompliziert in den Arbeitsalltag integrieren lassen.

Ziel des Projekts ist die Entwicklung einer professionellen WordPress-Website, die das Angebot verständlich präsentiert und RespiraRoots klar im Bereich Corporate Wellbeing positioniert. Die Website soll Unternehmen dabei unterstützen, sich über Einsatzmöglichkeiten, Pilotprogramme und den konkreten Ablauf einer Zusammenarbeit zu informieren. Gleichzeitig soll sie Vertrauen schaffen und qualifizierte Interessierte zu einem ersten unverbindlichen Gespräch führen.

Der zentrale Call-to-Action lautet: „Buchen Sie Ihre 15-Minuten-Demo“. Ergänzend ist ein Insights-Bereich mit praxisnahen Inhalten zu Atempausen, Stressregulation und Wohlbefinden im Arbeitsalltag vorgesehen.

Umsetzung der bewertungsrelevanten Aufgaben mit WordPress und Astra

Projektfokus: Breath at Work für Unternehmen · CMS: WordPress · Theme: Astra

Diese Dokumentation fasst die für die Bausteinprüfung relevanten Arbeitsschritte des Projekts RespiraRoots kompakt zusammen. Im Mittelpunkt stehen die tatsächlich umgesetzten WordPress-Funktionen, die wichtigsten Entscheidungen und ihre Begründung. Bereits vorhandene Projektnachweise werden bewusst wiederverwendet, damit die Dokumentation übersichtlich und prüfbar bleibt.

1. Projektvorstellung und Ausgangssituation – Dokumentation des WordPress-Projekts
RespiraRoots

RespiraRoots ist als B2B-Webauftritt für das Angebot „Breath at Work“ konzipiert. Ziel ist es, kurze Atemroutinen für den Arbeitsalltag professionell darzustellen und Unternehmen einen klaren Weg von der Information bis zur Demo-Anfrage zu bieten.

Das Projekt wurde zunächst als HTML5-/CSS-Webseite in Visual Studio Code entwickelt. Vorhandene Dateien wie index.html, breath-at-work.html, demo-buchen.html und style.css dienten anschließend als inhaltliche und gestalterische Grundlage für die WordPress-Version. Bei der Übertragung wurde bewusst versucht, die vorhandene Markenidentität beizubehalten und gleichzeitig die CMS-Funktionen von WordPress und Astra zu nutzen.

Im Verlauf der Umsetzung zeigte sich, dass globale Elemente wie Header, Hauptnavigation und Footer nicht als vollständige eigenständige HTML-Struktur in einer WordPress-Seite geführt werden sollten. Für die finale CMS-Struktur wird deshalb die globale Navigation über WordPress/Astra organisiert; eigene HTML-/CSS-Bestandteile werden auf projektspezifische Inhalte und Gestaltung begrenzt.

2. Das Backend

Backend einrichten

Unter Einstellungen wurden die grundlegenden WordPress-Konfigurationen für RespiraRoots eingerichtet und überprüft. Der Website-Titel lautet „RespiraRoots“, der Untertitel beschreibt das Angebot als „Breath at Work für Unternehmen“. Damit sind Name und Zweck der Website bereits in den globalen Grundeinstellungen klar erkennbar.

Die Permalink-Struktur wurde von einer datumsbasierten Variante auf „Beitragsname“ umgestellt. Diese Entscheidung erzeugt kürzere und verständlichere URLs, wirkt professioneller und ist langfristig besser für eine Unternehmenswebsite geeignet. Datumsangaben in der URL sind für die überwiegend zeitlosen RespiraRoots-Inhalte nicht erforderlich.

Die Kommentareinstellungen wurden so geprüft und angepasst, dass normale Kommentare für die Bewertung möglich bleiben, während Pingbacks und Trackbacks reduziert werden. Die Medieneinstellungen organisieren Uploads in jahres- und monatsbasierten Ordnern. Dadurch bleiben Mediendateien technisch übersichtlicher verwaltet.

Abb. 1: Zentrale Backend-Nachweise – Allgemein, Diskussion, Medien und Permalinks.

3. Themes und Menüverwaltung

Astra installieren und anpassen

Als Theme wurde Astra eingesetzt. Astra eignet sich für das Projekt, weil globale Design- und Layoutentscheidungen über den Customizer gesteuert werden können und die vorhandenen RespiraRoots-Inhalte trotzdem individuell gestaltet bleiben. Die visuelle Gestaltung orientiert sich an der bestehenden Markenidentität mit Grün-, Beige- und Goldtönen.

Im Customizer wurden die für die Prüfung relevanten globalen Bereiche bearbeitet beziehungsweise in die Gestaltung einbezogen: Schrift, Farben, Logo, Buttons, globales Containerlayout sowie Header und Menüheader. Ziel war ein konsistentes Erscheinungsbild zwischen dem ursprünglichen HTML5/CSS-Projekt und der WordPress-Version.

Abb. 2: Astra-Customizer und sichtbare Website-Navigation als Nachweis der Theme- und Headerarbeit.

Hauptmenü

Das Hauptmenü wurde als primäre Navigation verwendet und enthält mehr als drei Einträge. Für die Aufgabenstellung wurden unterschiedliche Eintragstypen berücksichtigt: Seiten, ein einzelner Beitrag, ein externer Link sowie ein nicht klickbarer Menüeintrag. Dadurch wird nicht nur die Navigation der Website abgebildet, sondern auch die WordPress-Menüverwaltung praktisch demonstriert.

Die ursprüngliche HTML-Navigation aus dem VS-Code-Projekt wird in der finalen WordPress-Struktur nicht als zweites globales Menü verwendet. Die zentrale Navigation soll ausschließlich über WordPress/Astra laufen, damit keine doppelten Menüs und keine veralteten .html-Links entstehen.

4. Beiträge

Kategorien und Schlagwörter

Für die thematische Struktur des Blogs wurden mindestens drei Kategorien angelegt: „Breath at Work“, „Stressmanagement“ und „Betriebliches Gesundheitsmanagement“. Ergänzend wurden mindestens drei passende Schlagwörter verwendet: „Breathwork für Unternehmen“, „Betriebliches Gesundheitsmanagement“ und „Atempausen im Arbeitsalltag“.

Kategorien bündeln Beiträge in übergeordneten Themenbereichen. Schlagwörter beschreiben einzelne Inhalte genauer und erleichtern die thematische Zuordnung. Die Kombination ist deshalb für einen wachsenden Unternehmensblog sinnvoll.

Abb. 3: Beiträge, Kategorien und Schlagwörter im WordPress-Backend.

Blog-Beitrag

Der Beitrag „Atempausen im Arbeitsalltag: Breathwork für Unternehmen“ wurde als thematisch passender Blog-Beitrag erstellt und veröffentlicht. Dem Beitrag wurden passende Kategorien und Schlagwörter zugeordnet; „Uncategorized“ wurde nicht als inhaltliche Hauptkategorie verwendet. Der Beitrag ist mit mehreren Zwischenüberschriften strukturiert und erfüllt damit die geforderte Mindeststruktur von zwei Überschriften.

Die Überschriften verbessern die Lesbarkeit und helfen Besucherinnen und Besuchern, längere Inhalte schnell zu erfassen. Der Beitrag wurde sowohl im Editor als auch im Frontend geprüft.

Beitragsseiten und Einzelbeiträge

Für Blog- und Einzelbeitragsdarstellung wurde Astra verwendet, damit die Beitragsansicht zur übrigen Website passt. Besonders der Einzelbeitrag wurde im Astra-Bereich kontrolliert und im Frontend mit der RespiraRoots-Gestaltung geprüft. Für das Blog-Archiv wird die gleiche Logik verwendet: klare Lesbarkeit, konsistente Abstände und eine einheitliche visuelle Sprache.

5. Seiten

Seiten anlegen

Für das Projekt existieren eine Startseite sowie weitere WordPress-Seiten. Als zusätzliche veröffentlichte Seite wird unter anderem die Demo-Seite genutzt, über die Interessierte eine Demo-Anfrage stellen können. Damit ist die Mindestanforderung von zwei Projektseiten erfüllt.

Verschiedene Inhaltselemente

Die Seiten kombinieren unterschiedliche Inhaltselemente wie Überschriften, Absätze, Bilder beziehungsweise Galerien und Handlungsaufforderungen. Für die finale WordPress-Fassung ist wichtig, diese Inhalte als native WordPress-/Gutenberg-Elemente zu führen, anstatt eine vollständige eigenständige HTML-Seite inklusive globaler Navigation einzubetten. Dadurch bleiben Inhalte im CMS leichter bearbeitbar und die Aufgabenstellung wird deutlicher sichtbar.

Die Darstellung wurde wiederholt im Frontend geprüft, insbesondere bei der Demo-Seite, dem Blog-Beitrag und der Navigation.

6. Widgets und Plugins

Widgets

Für die bewertungsrelevante Widget-Aufgabe werden Seitenleiste und Footer als WordPress-Bereiche genutzt. Für eine Blog-Seitenleiste eignen sich insbesondere Kategorien und „Neueste Beiträge“, weil sie Besucherinnen und Besucher direkt zu weiteren Inhalten führen. Im Footer werden mindestens zwei sinnvolle Widgets eingesetzt, damit auch dort zusätzliche Navigation beziehungsweise Projektinformationen verfügbar sind.

Die Entscheidung für wenige, funktionale Widgets hält die Seite übersichtlich und unterstützt die Orientierung, ohne den B2B-Auftritt visuell zu überladen.

Plugin WPForms

Als Plugin wurde WPForms eingesetzt. Das Formular „Demo Buchen“ wurde für eine B2B-Demo-Anfrage konfiguriert und in die entsprechende WordPress-Seite eingebunden. Zu den bearbeiteten Punkten gehören Formularfelder, der Button „Demo-Anfrage senden“, Benachrichtigung, Reply-To, Bestätigung und eine Datenschutz-Einwilligung.

WPForms wurde gewählt, weil das Plugin die benötigte Formularfunktion direkt in WordPress bereitstellt und damit keine eigene Formularprogrammierung erforderlich ist. Bei der Plugin-Auswahl sind Aktualität, Kompatibilität mit WordPress, seriöse Quelle, Bewertungen beziehungsweise Verbreitung und der tatsächlich benötigte Funktionsumfang wichtige Qualitätskriterien.

Abb. 4: Konfiguration des Formulars „Demo Buchen“ mit WPForms.

7. Medien

Mediathek organisieren

In der WordPress-Mediathek werden mehrere RespiraRoots-Bilder mit beschreibenden Dateinamen verwaltet, darunter beispielsweise team-atempause-buero.webp, atemroutine-arbeitsalltag.webp, fokus-vor-praesentation.webp und weitere projektbezogene Motive. Für die Prüfungsaufgabe werden mindestens fünf Bilder mit aussagekräftigen Dateinamen, Alternativtext und Beschreibung gepflegt.

Alternativtexte beschreiben den wesentlichen Bildinhalt für Screenreader und verbessern damit die Barrierefreiheit. Ein dokumentiertes Beispiel ist: „Mitarbeitende machen gemeinsam eine kurze Atempause im Büro“. Die Suchfunktion der Mediathek dient anschließend dazu, die Dateien über ihre Metadaten schnell wiederzufinden.

Abb. 5: Mediathek, Bild-Metadaten und Galerie als zentrale Medien-Nachweise.

Medien einbinden

Die Medienaufgabe verbindet unterschiedliche Medientypen in einer Seite oder einem Beitrag. Verwendet werden ein einzelnes Bild, eine WordPress-Galerie mit mindestens drei Bildern, ein eingebettetes YouTube-Video sowie der Gutenberg-Block „Medien und Text“. Die Galerie von „Breath at Work“ zeigt mehrere Arbeitssituationen und eignet sich besonders gut als visueller Nachweis für das Projekt.

Durch die Kombination unterschiedlicher Medientypen wird demonstriert, wie WordPress Inhalte nicht nur textlich, sondern auch visuell und multimedial strukturiert bereitstellen kann.

8. Backendbenutzer und Zugriffsrechte

Zur Prüfung der WordPress-Rollen werden drei Testbenutzer mit unterschiedlichen Berechtigungen verwendet: Redakteur, Autor und Abonnent. Anschließend werden die Konten nacheinander angemeldet und die sichtbaren Backend-Menüpunkte und Funktionen verglichen.

Der Redakteur besitzt weitreichende Rechte zur Verwaltung von Inhalten, der Autor kann vor allem eigene Beiträge erstellen und veröffentlichen, und der Abonnent verfügt nur über sehr eingeschränkte Funktionen. Der Vergleich verdeutlicht das Least-Privilege-Prinzip: Benutzer erhalten nur die Rechte, die sie für ihre Aufgabe tatsächlich benötigen.

Der separate Administrator-Zugang der Lehrkraft dient ausschließlich der Prüfung des Projekts und ist nicht mit den drei Testrollen gleichzusetzen.

9. Übertragung des HTML5-/CSS-Projekts nach WordPress

Die RespiraRoots-Website wurde vor der WordPress-Phase als eigenständiges HTML5-/CSS-Projekt entwickelt. Bei der ersten Migration wurden umfangreiche HTML-Strukturen und das bestehende Stylesheet als Grundlage übernommen. Dadurch konnte das bereits entwickelte Erscheinungsbild schnell in WordPress sichtbar gemacht werden.

Im weiteren Projektverlauf wurde deutlich, dass globale CMS-Bestandteile – insbesondere Header, Hauptnavigation und Footer – besser von WordPress/Astra gesteuert werden. Eine vollständige HTML-Dokumentstruktur innerhalb einer WordPress-Seite kann sonst zu doppelten Menüs, nicht mehr passenden .html-Links und Überschneidungen mit dem Theme führen.

Für die finale WordPress-Struktur wird deshalb die globale Navigation über Astra/WordPress geführt. Projektspezifische Gestaltung, Texte, Bilder und einzelne Komponenten können weiterhin aus dem bestehenden RespiraRoots-Design übernommen werden. Diese Trennung erhält die Markenidentität und nutzt gleichzeitig die Stärken eines Content-Management-Systems.

10. Projektstatus und Ergebnis

Die zentralen Bereiche des Projekts wurden in WordPress übertragen und für die Prüfung strukturiert: Backend-Grundeinstellungen, Astra, Hauptmenü, Kategorien und Schlagwörter, Blog-Beitrag, Projektseiten, WPForms sowie umfangreiche Medieninhalte sind im Projekt vorhanden und durch vorhandene Nachweise dokumentiert. Die Dokumentation konzentriert sich bewusst auf die bewertungsrelevanten Anforderungen und auf nachvollziehbare Entscheidungen.

Besonders wichtig war die Verbindung zwischen dem zuvor entwickelten RespiraRoots-Design und einer sauberen WordPress-Struktur. Die abschließende technische Kontrolle konzentriert sich deshalb auf die WordPress-native Startseitenstruktur, die sichtbaren Widget-Bereiche, den vollständigen Mediennachweis und den Rollenvergleich der Testbenutzer. Nach dieser Abschlusskontrolle kann die Lehrkraft das Projekt über den bereitgestellten Backend-Zugang direkt prüfen.

Hinweis zur Dokumentation: Die Abbildungen wurden aus den bereits vorhandenen Projektnachweisen übernommen. Dadurch wird der tatsächliche Arbeitsverlauf dokumentiert, ohne unveränderte Einstellungen nur für neue Screenshots erneut zu öffnen.