Medien in der Schule (Teil 2): Mit einer eigenen Podcast-Seite durchstarten

Im ersten Teil habe ich beschrieben, wie man eine WordPress-Instanz auf einem Webserver installiert und mithilfe des Podlove Publisher Plugins einen Podcast veröffentlicht. In diesem Beitrag geht es darum, wie sich die WordPress-Seite optisch gestalten lässt – denn schließlich soll der Podcast nicht nur gut klingen, sondern auch gut aussehen.

WordPress ist weltweit eines der beliebtesten Systeme für Webseiten – entsprechend groß ist die Auswahl an vorgefertigten Layouts und Themes. Theoretisch lassen sich komplette Webseitenvorlagen nutzen, bei denen nur noch die Beispielinhalte durch eigene ersetzt werden müssen.

Ich gebe ehrlich zu: Damit bin ich nicht gut zurechtgekommen. Stattdessen setze ich auf ein schlankes und flexibles Theme namens Blocksy – damit kann ich die Seite Schritt für Schritt so gestalten, wie ich es mir vorstelle.

Was ist ein WordPress-Theme?

Ein Theme in WordPress bestimmt das Aussehen und Layout deiner Webseite – also wie alles dargestellt wird: Farben, Schriftarten, Menüs, Seitenaufbau, Startseite, Blog-Ansicht, usw.

Man kann sich ein Theme vorstellen wie ein Kleidungsstück für deine Website: Die Inhalte (z. B. Podcastfolgen, Texte, Bilder) bleiben gleich – aber mit dem Theme entscheidest du, wie sie „angezogen“ und präsentiert werden.

Es gibt tausende kostenlose und kostenpflichtige Themes. Manche sind ganz schlicht, andere bringen gleich komplette Beispielseiten mit, die du nur noch anpassen musst. Einige Themes – wie das von mir genutzte Blocksy – lassen sich sehr flexibel anpassen, ohne dass man dafür programmieren muss.

Ich habe für meine Projekte bewusst dasselbe Theme verwendet – bei allen Seiten kommt Blocksy zum Einsatz. Die Struktur der Seiten ähnelt sich dadurch, weil ich ein klares, wiedererkennbares Layout mag. Und trotzdem: tonuniversum.de, sebastiao.org, NataTalk.com und mikrofonhelden.de sehen ganz unterschiedlich aus. Das liegt daran, dass ein Theme zwar den Rahmen vorgibt – aber innerhalb dieses Rahmens viele Gestaltungsfreiheiten lässt: Farben, Schriften, Bilder, Startseitengestaltung und mehr.

Was dabei besonders wichtig ist: Inhalt und Design sind bei WordPress getrennt.
Das bedeutet: Ich kann das Aussehen der Seite verändern, ohne meine Inhalte neu einpflegen zu müssen. Und ich könnte sogar zu einem völlig anderen Theme wechseln – der Inhalt bleibt dabei erhalten. Diese Trennung macht WordPress so flexibel und für viele Projekte einsetzbar.

Blocksy: Flexibel, modern und einsteigerfreundlich

Ich habe mich für Blocksy entschieden, weil es modern, leichtgewichtig und unglaublich flexibel ist – und trotzdem auch für Einsteiger:innen gut bedienbar bleibt. Die Einstellungen sind übersichtlich im Customizer untergebracht, viele Dinge lassen sich direkt per Mausklick anpassen: Farben, Schriftarten, Header und Footer, Seitenleisten, Buttons – und vieles mehr.

Besonders praktisch: Blocksy funktioniert hervorragend mit dem Gutenberg-Editor, sodass ich ohne zusätzliche Page Builder auskomme. Ein weiterer Vorteil für mich: Blocksy ist modular aufgebaut – ich kann also gezielt nur die Funktionen aktivieren, die ich wirklich brauche. Das hält die Seite schnell und übersichtlich.

So installierst du ein Theme wie Blocksy

Um ein Theme wie Blocksy zu installieren, öffnest du das WordPress-Backend, klickst in der linken Seitenleiste auf Design → Themes und suchst dort nach „Blocksy“. Mit einem Klick auf „Installieren“ und anschließend „Aktivieren“ wird das Theme übernommen – und schon kannst du loslegen.

Ich erkläre dir die nächsten Schritte anhand von Blocksy, weil ich damit arbeite. Aber keine Sorge: Andere Themes funktionieren ganz ähnlich. Es kann sein, dass bestimmte Menüpunkte anders heißen oder sich einzelne Funktionen unterscheiden – dafür bieten andere Themes vielleicht Features, die Blocksy nicht hat. Wichtig ist: Das Grundprinzip bleibt gleich.

Die eigene Startseite gestalten

Jetzt geht’s an die Gestaltung der Startseite – quasi das digitale Schaufenster meines Podcasts. Als zentrales Element möchte ich dort zunächst mein Logo bzw. Podcast-Cover platzieren. Dazu öffne ich im WordPress-Backend den Bereich Seiten → Alle Seiten und lösche zunächst alle vorinstallierten Beispielseiten. Danach klicke ich auf „Erstellen“, um eine neue, leere Seite anzulegen. Als Titel gebe ich schlicht „Start“ ein.

Im Editor wähle ich dann einen Bild-Block aus und lade mein Podcast-Cover hoch. Das landet automatisch in der Mediathek. Wichtig: Ich trage dort auf der rechten Seite einen Alternativtext für das Bild ein – das verbessert die Barrierefreiheit und hilft Suchmaschinen. Mit einem Klick auf „Auswählen“ füge ich das Bild in die Seite ein – und voilà: Die Startseite zeigt jetzt mein Logo bzw. Coverbild. Die Veränderungen möchte ich als nächstes speichern. Dazu gibt es zwei Möglichkeiten. Da niemand meine Webseite kennt, klicke ich auf veröffentlichen. Wenn ich erst das fertige Ergebnis präsentieren möchte wähle ich links daneben den Punkt Entwurf speichern.

Die Startseite festlegen

Damit WordPress weiß, dass diese neue Seite als Startseite angezeigt werden soll, muss ich das noch in den Einstellungen festlegen. Dazu gehe ich im Backend auf Einstellungen → Lesen. Unter dem Punkt „Deine Homepage zeigt“ wähle ich „Eine statische Seite“ aus. Danach wähle ich im Dropdown-Menü bei „Homepage“ die Seite „Start“ aus – also die, die ich gerade erstellt habe. Ab jetzt wird beim Aufruf der Domain automatisch mein Coverbild angezeigt – ein schöner erster Eindruck für alle, die meine Seite besuchen.

Farben definieren – der Look deiner Seite

Für mich ist klar: Die Farben meines Podcast-Covers sollen auch die Farben meiner Website bestimmen. So wirkt alles wie aus einem Guss und die Seite bekommt einen einheitlichen, wiedererkennbaren Look. Um die genaue Farbe zu übernehmen, nutze ich einen Color Picker – ein kleines Werkzeug, mit dem ich den Farbcode (Hex-Wert) aus einem Bild auslesen kann. Der Hintergrund meines Covers hat den Wert #52bad3.

Diesen Wert übernehme ich in WordPress folgendermaßen: Ich klicke oben links im Backend auf das WordPress-Symbol, dann auf Design → Customizer → Farben. Dort lege ich die neue Hintergrundfarbe meiner Seite fest – und schon spiegelt sich das Design meines Podcasts auch visuell auf der Website wider.

Seitentitel ausblenden – ganz einfach im Editor

Wenn du nicht möchtest, dass der Titel wie „Start“ auf deiner Seite angezeigt wird, kannst du ihn direkt im Editor ausblenden:

Öffne die entsprechende Seite (z. B. „Start“) im Seiteneditor
Klicke oben auf den Seitentitel
Links erscheint ein Menü. Bei dem Menüpunkt Elemente mit einem Augen-Symbol
Wenn du auf das Auge neben den Eintrag Titel klickst, wird der Titel ausgeblendet

So bleibt deine Seite aufgeräumt – ohne dass du etwas löschen oder verstecken musst. Der Titel bleibt im System erhalten (z. B. für die Navigation oder SEO), wird aber nicht auf der Seite angezeigt.

Den Header gestalten – Farbe, Stil und ein individuelles Banner

Der nächste Schritt: Ich möchte den Header – also den oberen Bereich meiner Website – optisch an mein Podcast-Design anpassen.

Dazu klicke ich im Customizer direkt in den Header und wähle anschließend die Hauptzeile aus. Unter dem Punkt Design kann ich nun die Hintergrundfarbe festlegen. Mit einem Color Picker suche ich mir dafür eine weitere Farbe aus meinem Podcast-Cover heraus – so bleibt das Farbschema stimmig. Den Hex-Wert trage ich als Hintergrundfarbe ein.

Damit die Kopfzeile noch persönlicher wirkt, möchte ich ein eigenes Bannerbild gestalten. Als Grundlage verwende ich mein Podcast-Cover – aber ich nehme einzelne Elemente daraus und ordne sie entweder neben- oder übeinander an. So entsteht ein neues, breites Banner, das perfekt in den Header passt.

Für mein Logo habe ich eine Bildgröße von 700 × 240 Pixeln verwendet – ein querformatiges Maß, das sich gut in den Header einfügt, ohne zu viel Höhe einzunehmen.

Zur Erstellung nutze ich aktuell Affinity Photo, weil ich mich in das Programm bereits eingearbeitet habe. Eigentlich sollte ich dafür aber GIMP verwenden – eine leistungsstarke und kostenlose Open-Source-Alternative, die im Netz frei verfügbar ist. Das wäre auch ein tolles Beispiel für meine Schüler:innen: Gute Gestaltung ist nicht an teure Programme gebunden – man kann mit Open-Source-Tools genauso professionell arbeiten.

Lesbarkeit nicht vergessen – Linkfarben anpassen

Ein Punkt, der mir beim Feintuning besonders wichtig ist: die Textfarben und vor allem die Farben der Links. Da ich ein Blau als Grundfarbe gewählt habe, passt das Standard-Blau für Links nicht gut dazu – der Kontrast ist zu gering und die Links wirken auf dem Hintergrund fast wie eingebettet.

Auch hier bediene ich mich wieder an meinem Podcast-Cover: Mit dem Color Picker suche ich mir eine passende Farbe aus, die sich besser abhebt – aber trotzdem zum Gesamtlook passt.

In Blocksy (und vielen anderen Themes) kann ich die Linkfarbe und Hover-Farbe ganz einfach im Customizer unter „Farben“ anpassen. So stelle ich sicher, dass die Texte gut lesbar bleiben – auf Desktop und mobil, bei Tageslicht und dunklen Displays.

Weitere Seiten anlegen – das Impressum

Wenn ich eine weitere Seite erstellen möchte, gehe ich im WordPress-Backend wieder auf Seiten → Alle Seiten und klicke auf „Erstellen“, um eine neue Seite anzulegen. Als Nächstes bietet es sich an, ein Impressum hinzuzufügen. Wie die Startseite ist auch das Impressum eine statische Seite – ihr Inhalt wird nicht regelmäßig aktualisiert, sondern bleibt im Wesentlichen gleich.

In Deutschland ist ein Impressum auf vielen Websites Pflicht – geregelt durch das Telemediengesetz (TMG). Im Netz gibt es zahlreiche kostenlose Generatoren, die dabei helfen, ein rechtssicheres Impressum zu erstellen. Da ich kein Unternehmen bin, sondern die Seite privat betreibe, reicht für mein Impressum eine einfache Angabe meiner Adresse und eine E-Mail-Kontaktmöglichkeit. Sollte sich das ändern, weil mein Podcast so erfolgreich wird, dass ich Kooperationen und Werbung machen kann – dann muss ich das entsprechend anpassen.

Navigationsmenü anpassen – Seiten richtig anordnen

Meine Startseite habe ich bewusst „Start“ genannt – ein klarer, verständlicher Titel. Auch das Impressum habe ich als statische Seite hinzugefügt. Beim Blick auf die Navigation fällt allerdings schnell auf: WordPress sortiert die Seiten standardmäßig alphabetisch. Das sieht auf den ersten Blick ordentlich aus – aber inhaltlich ergibt es oft wenig Sinn.

Gerade das Impressum möchte ich am Ende der Navigation platzieren – nicht zwischen „Kontakt“ und „Über mich“. Klar, ich könnte die Startseite einfach in „Home“ umbenennen, damit sie weiter oben steht – aber das ist keine saubere Lösung. Spätestens bei mehreren Seiten stößt man damit an Grenzen.

Deshalb erstelle ich ein eigenes Menü:

Ich gehe im Backend auf Design → Menüs
Unter „Menüstruktur“ vergebe ich einen Namen, z. B. Hauptmenü
Ich setze die Häkchen bei „Header Menü 1“ und „Mobil-Menü“
Dann klicke ich auf „Menü erstellen“

Anschließend wähle ich links unter „Seiten → Alle anzeigen“ die gewünschten Seiten aus – z. B. „Start“ und „Impressum“ – und füge sie dem Menü hinzu. Jetzt kann ich die Reihenfolge der Menüpunkte ganz einfach per Drag & Drop anpassen – unabhängig von der alphabetischen Sortierung. Und: Ich kann jederzeit neue Seiten hinzufügen oder bestehende Menüeinträge verändern, ohne dass sich das Layout automatisch verschiebt.

Das soll für heute reichen – im nächsten Blogeintrag geht’s weiter mit den nächsten Schritten: Wir schauen uns an, wie wir endlich unsere erste Episode eines Podcasts veröffentlichen.