Die eigene Webseite in 90 Minuten (Site Editor Version)

Vielleicht kennen Sie dieses Problem: Es soll in möglichst kurzer Zeit eine Webseite erstellt werden, natürlich muss sie gut aussehen und leicht wartbar sein. Und auch die Kosten sollten im Rahmen bleiben, wie es oft so schön heisst. Wie kann dieses Problem gelöst werden? Ganz einfach, mit WordPress! Dieser Beitrag zeigt Ihnen, wie sie in weniger als 90 Minuten eine eigene Website erstellen können, die alle genannten Kriterien erfüllt: Sie sieht gut aus und lässt sich einfach und schnell verändern; und sie ist auch über mehrere Jahre mit wenig Aufwand problemlos wartbar.

Vorarbeiten

Alles, was Sie für Ihren Auftritt benötigen, ist ein Webserver Abonnement, das die Installation von WordPress ermöglicht. Bei Hosttech gibt es das passende Paket «easyM» bereits ab 2.10 Franken pro Monat, bei SolNet bezahlen Sie 29.90 Franken pro Jahr, für dieses Geld bekommen Sie den Webserver und ein vorinstalliertes nagelneues WordPress; die Domain ist wie bei Hosttech im Preis inbegriffen. Versteckte Kosten? Diesmal keine – versprochen!

Falls Sie WordPress selber installieren müssen: Es ist keine Hexerei. Grundsätzlich teilt sich die Installation in vier Schritte auf: Herunterladen von WordPress und entpacken des ZIP Archivs. Anschliessend werden alle Dateien mit FTP (File Transfer Protocol) auf den Webserver kopiert. Im dritten Schritt wird eine MySQL Datenbank erstellt. Im vierten und letzten Schritt rufen Sie Ihre neue Seite im Webbrowser auf, WordPress meldet sich dann mit einer freundlichen Installationsseite. Keine Sorge, es genügt, die Zugangsdaten der MySQL Datenbank anzugeben. Dann ist WordPress bereits installiert! Wenn Sie Probleme oder Fragen haben, kontaktieren Sie den Kundendienst Ihres Providers. Freundliche Hosting Anbieter (…zu denen Hosttech und SolNet gehören) helfen Ihnen bei der Installation gerne oder erledigen diesen Schritt für Sie!

Falls der letzte Absatz Ihnen nicht ganz verständlich vorkommt: Tut mir leid! Hier finden Sie eine detaillierte Installationsbeschreibung. Ich hoffe, dass Ihnen diese weiterhilft.

Warum gerade WordPress?

Es gibt viele gute CMS (Content Management System), keine Frage! Da sind Joomla!, Drupal, E107, Typo3 und viele weitere. Und damit haben wir hier nur die bekanntesten erwähnt. WordPress ist aber mit Abstand das populärste CMS von allen, was gute Gründe hat. Zählen wir hier nur die wichtigsten auf: WordPress ist leicht zu installieren und zu warten, das Erstellen neuer Seiten oder Blogbeiträge geht leicht von der Hand, die Auswahl an Themes (Gestaltungsvorlagen) und Plugins ist riesig! Wie sieht es mit den Kosten aus? WordPress kostet – nichts! Auch die meisten Plugins und Themes sind gratis! Die Anbieter verdienen ihr Geld mit Support und mit sogenannten «Pro» Versionen. Wenn Sie beispielsweise ein schönes Theme wie «GeneratePress» verwenden, kostet es sie in der Basisversion nichts. Wenn Sie aber alle Funktionen von GeneratePress verwenden möchten, müssen Sie doch noch zur Kreditkarte greifen! Die meisten Themes kosten zwischen 30 und 70 Franken pro Jahr! Dies ist das übliche Geschäftsmodell in der WordPress Welt. Und es funktioniert hervorragend, wie die Praxis zeigt. Rund um WordPress ist in den letzten Jahren eine gigantische Softwareindustrie entstanden.

Und es gibt noch etwas, das für WordPress spricht: Gemäss aktuellen Erhebungen (Januar 2022) verwenden mehr als 44% aller CMS-basierten Webseiten weltweit WordPress.

WordPress Dashboard
WordPress Dashboard

Rein ins Dashboard!

Nun ist WordPress also installiert und Sie haben das Administrator Login für das Dashboard erhalten – oder es selbst definiert. Sie können Ihre Seite im Webbrowser jetzt auch wie folgt aufrufen, ich werde von nun an die Domain hockey-masters.ch als Beispiel verwenden:

Seite aufrufen: http://www.hockey-masters.ch
Dashboard: http://www.hockey-masters.ch/wp-admin

Der Begriff «Dashboard» sagt Ihnen noch nichts? Bei WordPress ist das Dashboard der Admin Bereich. Also der Ort, an dem Sie Ihre Webseite verwalten, Texte schreiben, Bilder hochladen, Themes und Plugins installieren, und so weiter. Kurz: Alles, was benötigt wird, um eine Webseite von A-Z zu erstellen und zu warten. Wenn Ihnen die WordPress-Fachbegriffe noch nicht vertraut sind, finden Sie hier eine kurze Einleitung: Was Sie über WordPress wissen müssen.

Falls Sie WordPress noch nicht so gut kennen, empfehle ich Ihnen, sich etwas Zeit für die WordPress Online-Kurse zu nehmen, hier finden Sie aktuelle Workshops und Kurse für einen schnellen Einstieg in unser CMS. Alle Anleitungen sind in englischer Sprache, wenn Sie eine deutsche Dokumentationen bevorzugen, werden Sie auf der Schulhomepage fündig. Hier werden zahlreiche aktuelle Tutorials in freundlichem Deutsch gelistet.

Themes und der Site Editor

Sie haben sich etwas eingelesen? Prima, weiter geht’s! Das erste, was nun folgt, ist die Installation eines Themes. Vorab noch etwas zur Terminologie: Themes sind Gestaltungsvorlagen, die das Aussehen Ihrer Webseite in groben Strichen vorzeichnen. Seit der Version 5.9 unterscheidet WordPress zwischen zwei verschiedenen Theme Typen, auf die wir hier kurz eingehen müssen:

Standard Themes: Bis zum 25. Januar 2022 waren alle Themes Standard Themes. Jedes Theme legte selbst fest, welche Bereiche der Seite von Ihnen verändert werden können – und in welcher Form. Bei Standard Themes sind der Kopf- und Fussbereich meist nur eingeschränkt änderbar. Auch der Standort der Menus ist meist vorgegeben, heisst statisch. Und nicht selten sind Standard Themes für eine bestimmte Anwendung oder Branche optimiert, wie zum Beispiel ein Photo-Blog oder ein Online-Shop. Natürlich gibt es aber auch viele Themes, die Wert auf eine allgemeine Einsatzmöglichkeit legen! Beliebte Themes beim Abfassen dieses Beitrages sind Astra, OceanWP und GeneratePress.

Rückblick: WordPress startete 2005 als Blogging Plattform, die Entwicklung von Websiten war nur am Rande ein Thema; erst in den kommenden Jahren wurden Webseiten-Bausteine wie Menus, Seiten und Themes ergänzt. Einen ersten grossen Schritt hin zum Page-Designer kam 2018 mit dem Block-Editor (auch Gutenberg genannt). Mit dem Site Editor folgt nun ein weiterer Schritt!

Block Themes: Block Themes können mit dem neuen Site Editor verwendet werden, der seit dem 25. Januar 2022 (Version 5.9) zu WordPress gehört (wir kommen gleich auf diesen neuen Editor zu sprechen…) Block Themes haben gegenüber den Standard Themes einen entscheidenden Vorteil: Ein Block Theme erlaubt das Verändern aller Bereiche einer Webseite. Sie können sich das wie ein leeres blatt Papier vorstellen, auf dem nun Inhalte wie Bilder, Texte, Titel und Zitate platziert werden. Sie können dabei selbst bestimmten, was, wo und in welcher Formatierung zu stehen kommt!

Blocks spielen bei WordPress eine entscheidende Rolle! Alle Inhalte einer Seite bestehen aus Blocks: Text, Bild, Liste, Titel, etc. Und jeder dieser Blöcke kann grundsätzlich überall auf der Seite platziert werden: Im Kopf- Fuss- oder Navigationsbereich – überall halt. Es gibt rund 100 verschiedene Blocktypen, die sie auch gruppieren und als eigene Vorlagen speichern können. Wenn Sie diese Zahl jetzt aufschreckt, keine Sorge, die wirklich wichtigen Blocktypen können an zwei Hönden abgezählt werden!

…Moment, wenn bei einem Block Theme alles verändert werden kann, wozu braucht es dann überhaupt noch ein Theme? Antwort: Block Themes bestimmen das Aussehen Ihrer neuen Seite mit einer Reihe von Vorlagen (z.B. Header, Inhalt, Footer). Aendern Sie daran nichts, bekommen Sie das für ein Theme charakteristische Aussehen. Sie können aber alles, auch die Vorlagen, nach Ihren eigenen Vorstellungen verändern.

Eine kurze Einführung in den Site Editor

Formulieren wir es pathetisch: Der Site Editor macht WordPress zu einem komplett neuen CMS! Mit dem Site Editor nimmt WordPress Abschied von seinen Wurzeln als Blogging Plattform, es wird zum Page Generator, also zum einem Werkzeug, dass die Gestaltung der kompletten Webseite von einem zentralen Werkzeug aus ermöglicht. Eben, dem Site Editor! Und so sieht er aus:

WordPress Site Editor
WordPress Site Editor

Auf der linken Seite sehen Sie die hierarchische Listenansicht aller Blöcke auf der Seite mit Header, Inhalt (Abfrage) und einem Fussbereich. Jeder dieser Blöcke hat mehrere untergeordnete Blöcke, beim Header zum Beispiel das Logo, den Titel und das Menu. Wenn Sie diese Baumstruktur jetzt nicht sehen, dann klicken Sie auf das Symbol mit den drei versetzten Strichen oben links auf der Seite. Richten Sie Ihren Blick nun bitte nach rechts, dort erkennen Sie das Panel zum Verändern der einzelnen Inhaltsblöcke; ein Klick auf das Zahnradsymbol schaltet es ein oder aus. Hier können Sie ganz nebenbei auch die Eigenschaften der ganzen Seite anpassen.

Ganz wichtig: Den Site Editor können Sie nur mit Block Themes verwenden. Mit Standard Themes funktioniert der Block Editor nicht!

Und so funktioniert der Site Editor, ganz grob beschrieben: Klicken Sie oben links auf das Plus Symbol, um einen Block oder eine Vorlage in Ihre Seite einzufügen; die Eigenschaften können Sie anschliessend im Block Panel verändern. Ferner gibt es noch die Werkzeugleiste, die direkt über dem Block angezeigt wird, mit Ihr können Sie jeden Block auf der Seite verschieben oder ihn ausrichten. Alles ganz einfach? Ok, gehen wir weiter!

Wenn Ihnen das mit dem Site Editor nun doch etwas zu schnell voran geht, dann ist das überhaupt kein Problem. Nehmen Sie sich genug Zeit, um sich mit dem neuen Werkzeug und dem Block-Editor anzufreunden. Hier finden Sie das offizielle Block-Editor Handbuch.

Auswahl eines passenden Themes

Kehren wir noch einmal zurück zu den Themes: Jetzt geht es darum, für Ihre schöne neue Seite ein passendes Theme zu finden. Da wir im Folgenden ausschliesslich mit dem Site Editor arbeiten, ist die Auswahl an Themes zurzeit etwas eingeschränkt, es gibt im Moment (Stand 22. November 2022) etwa 180 Block Themes. Immerhin! Da ist auf jeden Fall etwas passendes für Sie dabei; und die Zahl der Block Themes nimmt rasch zu! Nun also, wählen Sie im Menu Design > Themes und klicken Sie dann auf Theme hinzufügen. Als nächstes wählen Sie die Option ⚙️Nach Funktionen filtern, aktivieren Sie die Option Site Editor und wenden Sie den Filter an.

WordPress Block Themes
Block Themes zur Auswahl

Es stehen also etwas weniger als 200 Themes zur Auswahl, alle ermöglichen es Ihnen, in kurzer Zeit eine attraktive Seite zu generieren. Ich bleibe für den folgenden Beitrag beim vorinstallierten Thema Twenty-Twenty-Three, weil es zu 100% für den Site Editor optimiert worden ist – und weil es in bezug auf Einfachheit und Klarheit kaum zu übertreffen ist!

Tipp: Wenn Ihnen Twenty Twenty Three nicht gefällt (…weil zehntausend andere es auch nutzen werden und es doch etwas spartanisch wirkt), versuchen Sie es mit Blockbase, einem schlanken Block Theme, das auf jegliche Zierart verzichtet und den Fokus auf den Inhalt legt. Es sieht gut aus und ist blitzschnell! Empfehlenswert ist auch ein direkter Nachfolger von Blockbase: Mayland.

Die Hockey Masters

Photo Hockey Masters
Photo: Markus Kammermann

Um die nun folgenden Erläuterungen anschaulicher gestalten zu können, erstelle ich eine fiktive Webseite, die Homepage der Hockey Masters. Eine Seite also, bei der sich alles um eine Eishockey Fangemeinschaft dreht. Ich benötige dazu ein Photo von Markus Kammermann, das Sie auf Pixabay finden können. Natürlich können Sie das Photo und die Texte gemäss Ihrem eigenen Projekt anpassen.

Mit dem Kopf voran…

Und nun sind Sie endgültig bereit, um Ihre Seite ins Leben zu rufen. Als erstes geht es darum, die Startseite für die eigenen Inhalte vorzubereiten, dazu werden zuerst alle (!) Vorlagen gelöscht. Und das geht so: Wählen Sie im Menu Design > Editor um den Site Editor für Ihre Startseite zu öffnen. Aktivieren Sie nun die Listenansicht, was mit der Tastenkombination Alt+Shift+o besonders schnell geht und klicken Sie auf das oberste Element in der Liste: Header. Drücken Sie dann die Delete Taste, um dieses Element zu löschen. Wiederholen Sie dies nun mit den Einträgen Gruppe (der Seitennhalt) und Footer. Und jetzt? Nun, jetzt ist Ihre Startseite leer. Vielleicht sehen Sie noch einen leeren Textblock, aber den können Sie so stehen lassen. Und jetzt platzieren Sie einen Header nach Ihren Wunsch auf der leeren Seite. Das erledigen Sie mit wenigen Klicks:

Hockey Masters, Header Vorlage auswählen
Header Vorlage auswählen
  1. Wählen Sie das Plus Symbol, um einen neuen Block einzufügen. Klicken Sie dann bei der Auswahl für Vorlagen und Blöcke zuerst auf Blöcke und scrollen Sie anschliessend nach unten zur Gruppe Theme; wählen Sie dort den Block Header aus. Damit wird ein neuer Dialog angezeigt (siehe Screenshot oben).
  2. Klicken Sie nun auf den Button Auswählen, damit werden Ihnen alle Header Vorlagen für das Theme Twenty-Twenty-Three angezeigt. Da dieses Theme nur eine einzige Header Vorlage kennt, fällt die Entscheidung nicht besonders schwer! Andere Themes wie zum Beispiel Mayland offerieren Ihnen zwei, vier oder noch mehr verschieden formatierte Header.
  3. Klicken sie auf das Auswahlelement „Header“, damit wird ein neuer Header in Ihre Seite eingesetzt. Er sieht jetzt noch sehr nüchtern aus, aber wir werden dies schon im nächsten Schritt ändern.
Hockey Masters, Aufbau Header
Aufbau des Headers

Unter dem Titel und der Navigation auf unserer neuen Seite soll nun das Photo angezeigt werden, das wir etwas weiter oben ausgewählt haben. Die Seite heisst schliesslich Hockey Masters und soll den Besucher schon bei der ersten Seite auf den beliebten Sport einstimmen! Um das Bild in den Header einzupassen, verwenden Sie am einfachsten die Listenansicht. Klicken Sie als erstes auf den Pfeil links neben dem neuen Eintrag Header, damit wird die Guppe angezeigt, die innerhalb des Headers angelegt wurde. Klicken Sie jetzt auf diese Gruppe, damit die Listenansicht aussieht wie im Beispiel rechts im Screenshot. Es ist wichtig, dass die Gruppe selektiert wird, damit das nun folgende Bild auch tatsächlich in den Header eingefügt wird. Und zwar so:

  1. Klicken Sie noch einmal auf das Plus Symbol oben links, um einen neuen Block einzusetzen.
  2. Wählen Sie den Cover Block. Damit wird ein Cover in den neuen Header eingesetzt, ein Cover kann Bilder und auch Text enthalten. Wir setzen nun unser Hockey Masters Photo in das Cover ein.
  3. Klicken Sie auf Hochladen und wählen Sie nun das Hockey Master Photo aus. Wenn Sie es nicht schon in die Mediathek hochgeladen haben, können Sie dies nun tun. Sobald Sie das Photo festgelegt haben, wird es im Header angezeigt; noch nicht perfekt, aber es ist schon gut zu erkennen, was daraus werden soll. In der Listenansicht sehen Sie, dass das Cover direkt unter der Headergruppe steht:
Hockey Masters, Header ohne Formatierung
Header mit Photo, noch ohne Formatierung

Tipp: Jedes neue Cover enthält nach dem Erstellen einen zentrierten Text. Wir benötigen diesen im Folgenden nicht; wenn er Sie stört, löschen Sie ihn einfach. Der Platzhalter „Schreiben Sie einen Titel“ wird nur im Site Editor angezeigt.

Grösse des Headers korrigieren

Ich weiss nicht, wie Sie es halten, aber ich mag es, wenn schon auf den ersten Blick möglichst viel von einer Seite zu sehen ist. Mit Käse fängt man bekanntlich Mäuse, und mit Bequemlichkeit Menschen… (hey, war nur Spass). Also wird nun die Höhe des Headers etwas zurechtgestutzt:

  1. Klicken Sie an einer beliebigen Stelle auf das Cover und stellen Sie die Mindest-Höhe auf 400 Pixel. Damit wird die Höhe des Covers, resp. des Bildes auf 400 Pixel festgelegt, ungeachtet der Seiten- oder Bildgrösse.
  2. Ändern Sie die Focuspunkt-Auswahl: Schieben Sie den Punkt ganz nach oben, um den oberen Teil des Bildes in den Focus zu bringen.
  3. Stellen Sie zum Schluss die Deckkraft auf 0. Nun hat das Bild wieder die Original-Helligkeit.

Seitentitel anpassen

Nun sieht unser Header schon viel professioneller aus! Einige Dinge stören den Gesamteindruck aber noch: Der Titel der Seite über dem Bild wirkt nun doch etwas klein. Ebenso ist es mit der Navigation rechts auf der Seite, sie scheint im Nichts zu verschwinden und dürfte etwas grösser sein. Dies wird nun korrigiert.

  1. Klicken Sie auf den Titel und verändern Sie im Block Panel die Grösse
  2. Bei der Navigation braucht es zwei Schritte: Wählen Sie in der Listenansicht den Navigations-Block und ändern Sie dann die Grösse. Wird die Navigation direkt auf der Seite angeklickt, ist die darin enthaltene Seitenliste markiert, die nicht partout formatiert werden kann! Die Seiteliste erstellt automatisch eine verlinkte Liste all Ihrer Seiten.

Noch etwas über Seitenlisten und Menus: WordPress unterscheidet zwischen automatischen Seitenlisten und selbst erstellten Menus. Seitenlisten, die die Vorgabe sind, listen einfach alle Seiten auf, die Sie erstellen. Sie können sehr einfach von Automatisch auf Manuell wechseln, indem Sie einen Seitenlisten-Block anklicken und dann in der Werkzeugleiste auf Bearbeiten klicken. Bei manuellen Menus sind Sie vollkommen frei; jeder Eintrag kann eine WordPress Seite oder auch ein ganz allgemeiner Link sein.

Kaffeepause…

Hockey Masters, Kaffee Pause

Vielen Dank, dass Sie bis hierher durchgehalten haben! Nun habe Sie bereits einiges erreicht: Ein neues WordPress vorbereitet, den Site Editor kennengelernt, einen Seitenheader erstellt und diesen farblich angepasst. Wie wärs mit einer Kaffeepause? Im nächsten Schritt geht es dann zügig voran mit den Inhalten!

Titel und Text für die Startseite

Eine Startseite soll gefällig aussehen und so aufgebaut sein, dass sie den Besucher beim ersten Blick anspricht und ihm innert Sekunden vermittelt, was hier angeboten wird. Farben spielen ein wichtige Rolle, Bilder ebenso; und manchmal ist weniger mehr! Ich werde als Inhalt einige ganz klassiche Elemente wählen: Einen Titel und dann drei Spalten mit Untertiteln und Texten. Dies entspricht einem Schema, das heute häufig anzutreffen ist.

Beginnen wir mit dem Titel: Willkommen bei den Hockey Masters! Sicher wissen Sie jetzt bereits, wie Sie einen Block auf Ihre Seite bekommen: Klicken Sie das Plus Symbol und wählen Sie aus dem Block-Verzeichnis die Überschrift. Klicken Sie den neuen Block auf der Seite an, geben Sie den Text ein und bestimmen Sie die Grösse; am besten indem Sie in der Werkzeugleiste H1 als Titelgrösse wählen. Eigentlich wird damit nicht die Grösse des Titels festgelegt, sondern dessen Stellenwert, H1 steht dabei für einen Titel der obersten Ebene H2 ist ein Untertitel, H3 ein Untertitel von H2, usw. Und wenn Sie gerade dabei sind, generieren Sie doch auch noch einen Lauftext unter dem Titel. Hier ist das Ergebnis:

Hockey Masters, Willkommenstext
Die Startseite mit dem Willkommenstext

Hinweis: Achten Sie darauf, wo der Text in der Seitenhierarchie eingefügt wird: Wenn zuvor eine Element des Headers markiert war, wird der Text auch in den Header eingesetzt, was wir nicht wollen. Um einen neuen Block an das Ende der Seite einzusetzen, klicken Sie zuerst irgenwo auf einen leeren Bereich der Seite, fügen Sie dann den neuen Block ein.

Tipp: Um neuen Blöcke einzufügen müssen Sie nicht jedesmal das Plus Symbol bemühen. Sobald der Cursor in einem leeren Block steht, geben Sie einen Schrägstrich ein (/), um eine Block-Auswahlmenu zu öffnen. Wenn Sie das Ansichtsmenu des Site Editor ( ⋮ ) oben rechts auf der Seite öffnen, finden Sie zudem eine Hilfsseite für alle Tastenkombinationen. Noch einfacher gehts mit der Tastenkombination Shift+Alt+h.

Nun steht das ganze Sortiment der Blöcke für Ihre Seite offen: Text, Bilder, Galerien, Cover, Listen, etc. Wenn Sie neue Inhalte einfügen, sehen Sie sich immer auch die Vorlagen an, sie bieten Ihnen viele Ideen für die Gestaltung Ihres Inhalts. In unserem Beispiel folgt auf den Titel noch eine kurze Erläuterung als Textblock:

Dies ist eine Eishockey Fanseite. Wir berichten über die Schweizer Eishockey-Szene, ohne das internationale Geschehen ausser Acht zu lassen. Alle Hockey Fans sind eingeladen, hier mitzumachen.

Exkurs: Stile

Hockey Masters, Stile

Eine wichtige Funktion des Site Editors darf nicht unerwähnt bleiben, ich erlaube mir deshalb hier einen kleinen Einschub. Seit Version 5.9 kennt WordPress die Stile, mit denen Sie global die Formatierung nahezu aller (!) Elemente Ihrer Seite verändern können. Mit Stilen können Sie zum Beispiel die meisten Blöcke wie Text, Überschrift, Liste und Cover vorformatieren. Wenn Sie zum Beispiel die Überschrift in den Styles fett formatieren, wir jede Überschrift, die Sie auf einer beliebigen Seite einfügen, diese Formatierung übernehmen. Zu den Stilen gelangen Sie, indem Sie oben rechts im Editor auf das Halbmond Symbol klicken.

Im folgenden soll die Überschrift mit Hilfe der Stile verändert werden. Mit den folgenden drei Schritten wird der Text auf Halbfett formatiert. Natürlich können Sie auch weitere Eigenschaften anpassen: Schriftart, Abstände, Farben, etc.:

  1. Aktivieren Sie die Stile mit einem Klick auf das Halbmond Symbol (siehe oben).
  2. Klicken Sie etwas weiter unten auf Blöcke >. Dies öffnet eine Liste aller Blocktypen, die Sie global verändern können. Die Liste ist zugegenermassen etwas lang! Nutzen Sie ggf. die Suchfunktion.
  3. Wählen Sie den Eintrag Überschrift und nehmen Sie die gewünschten Formatierungen vor: Schrift, Farben, Layout.

Hinweis: Sicher haben Sie gerade festgestellt, dass einige Formatierungen wir z.B. das Zentrieren nicht über die Stile vorgenommen werden können. Nutzen Sie dazu wie gewohnt das Block Panel.

Infoboxen

Als nächstes folgt auf der Beispielseite der Hockey Masters ein Bereich mit drei Spalten, in der Fachsprache gerne auch Feature List genannt. Sie werden dabei auch sehen, wie einfach Blöcke ineinander verschachtelt werden können:

  1. Erstellen Sie einen neuen Block: Spalten. Dies öffnet ein Menu, in dem Sie die Spaltenzahl definieren können. Wählen Sie die Option für drei Spalten.
  2. Nun wird der Spaltenblock angezeigt, in jeder der drei Spalten ist ein + Symbol zu erkennen. Klicken Sie dieses an, um innerhalb der jeweiligen Spalte einen Titel zu erstellen, darunter dann einen Text/Absatz.
Hockey Masters,, Drei Spalten
Drei Spalten

Spalten statt Tabellen: Verwenden Sie Spalten, um Inhalte vertikal zu gruppieren, niemals Tabellen! Warum nicht? Tabellenlayouts werden auf kleinen Bildschirmen nicht optimal dargestellt. Zudem bietet Ihnen das Spaltenlayout wesentlich mehr Gestaltungsmöglichkeiten, zum Beispiel das horizontale und vertikale Ausrichten des Inhalts.

Hockey Masters, Text mit Spalten
Text mit Spalten

Der rechts stehende Screenshot zeigt die drei Spalten, die je einen Titel und einen Text enthalten. Ich habe für die Titelgrösse H4 gewählt, dazu noch Fettschrift. Für den Spalteninhalt stehen Ihnen alle Möglichkeiten des Block Editors offen. Das Ergebnis können Sie wiederum im Screenshot rechts sehen. Es sieht schon ganz nett aus, aber es liegt noch mehr drin. Es folgt ein Vorschlag, wie das Aussehen der Spalten noch etwas «aufgepeppt» werden könnte:

  1. Wählen Sie für jede einzelne Spalte eine eigene Hintergrundfarbe – eine Spalte auswählen geht am einfachsten über die Listenansicht! Ich habe für mein Beispiel zwei Farben aus dem Foto gewählt, rot und blau. Um bestimmte Farben aus einem Photo herauszupicken verwenden Sie ein Bildbearbeitungsprogramm und wählen Sie die Funktion Pipette. Die Textfarbe muss nun natürlich auf Weiss angepasst werden!
  2. Definieren Sie für jede der drei Spalten einen Innenabstand von 10 Pixeln. Ohne diesen Abstand, «klebt» der Text am Rand der Spalte!
  3. Nun noch die Titel: Ich verwende neu H5, fett und zentriert. Um das Aussehen etwas kompakter zu gestalten, habe ich zudem bei jedem Titel den Aussenabstand auf 0 gesetzt. Hier ist das Ergebnis:
Hockey Masters, fertige Seite
Webseite Hockey Masters (Firefox)

Was fehlt nun noch? Ach ja, ein Fussbereich! Den können Sie abermals mit ein paar wenigen Mausaktionen am Ende der neuen Seite einsetzen: Erstellen Sie einen neuen Footer Block, wählen Sie dann eine Vorlage. Das Twenty-Twenty-Three Theme gibt sich auch hier minimalistisch und bietet nur einen einzige Vorlage für den Fussbereich an.

Erstellen Sie für Ihre Seiten immer einen Fussbereich. Dieser gibt dem Besucher ein klares visuelles Feedback, dass dies das Ende der Seite ist. Zudem können hier wichtige Elemente wie ein Impressum oder die Datenschutzerklärung platziert werden. Datenschutzerklärung? Igitt!! Ich weiss, aber sie ist eben wichtig, verwenden Sie im Zweifelsfall diejenige, die WordPress Ihnen anbietet.

Weitere Seiten

Eigentlich sind wir jetzt fertig. Die Seite steht! Gratuliere! Aber sicher werden auch Sie nun fragen: Wie weiter? Und vor allem: Wie kommen zusätzliche Seiten dazu? Neue Seiten erstellen Sie mit WordPress im Menu Seiten > Neu. Wählen Sie einen Titel für die Seite und erstellen Sie dann den Inhalt – genau so wie auf der Startseite! WordPress übernimmt automatisch den Kopf- und Fussbereich, den Sie für die Startseite festgelegt haben.

Wie kommen die Blog Beiträge auf Ihre Seite? Bis und mit WordPress 5.8 wurde mit dem Seiten-Customizer geregelt, was auf der Startseite zu sehen ist: Blogbeiträge oder eine statische Startseite. Neu können Sie auf jeder Seite eine Blog-Beitragsliste einbauen: Erstellen Sie eine neue Seite und fügen Sie eine passende Abfrage-Vorlage ein – voilà!

Vielen Dank, dass Sie bis zum Schluss mitgemacht haben, ich hoffe, das Tutorial hat Ihnen gefallen und Ihnen ein Bild vemittelt, wie WordPress 5.9 funktioniert.

Für Blogger

Vergessen Sie ob all den Neuerungen nicht, dass WordPress weiterhin wie zuvor verwendet werden kann! Dass bestehende Seiten weiterhin funktionieren ist ein zentrales Anliegen der WordPress-Entwickler. Den klassischen Customizer finden Sie unter der Rubrik Design – wenn Sie ein klassiches Theme gewählt haben, das nicht mit dem Site Editor verwendet werden kann. Und falls der Customizer doch nicht wie gewünscht angezeigt wird: Geben Sie in der Adresszeile hinter /wp-admin/ folgendes ein: customize.php. Der Customizer wird mindestens noch zwei Jahre zu WordPress gehören – keine Sorge also!