WordPress Handbuch

Inhaltsverzeichnis

WordPress-Handbuch

Einleitung

Dieses Handbuch soll Ihnen den Einstieg in die Arbeit mit WordPress und dem Gutenberg-Editor erleichtern. Dargestellt werden hier grundlegende Konzepte und Funktionsweisen.

Hinweis. Hinweis: Was Sie im WordPress-Backend genau sehen, kann abhängig von Ihrer Benutzer-Rolle, Ihren Benutzer-Einstellungen, der WordPress-Version, dem Theme und den installierten Plugins von den Texten und Screenshots in diesem Handbuch abweichen.

Das WordPress Backend

Nachdem Sie sich im WordPress-Backend angemeldet haben, werden Sie zunächst auf das “Dashboard” (engl. Armaturenbrett) weitergeleitet. Über die Schaltfläche “Ansicht anpassen” oben rechts können Sie auswählen, welche Inhalte hier angezeigt werden sollen. WordPress Dashboard.

Werkzeugleiste

Die Werkzeugleiste am oberen Rand des WordPress-Backends wird standarmäßig auch im Frontend angezeigt, solange Sie eingeloggt sind. Dies erleichtert den Wechsel zwischen Front- und Backend, indem Sie beispielsweise auf einer Seite oben “Seite bearbeiten” auswählen können, um direkt im Backend zur Bearbeitungs-Ansicht dieser Seite zu gelangen. Im Backend erhalten Sie den Link “Seite anzeigen”, um in die Frontend-Ansicht zu wechseln. Sehr praktisch. Sollte die Werkzeugleiste im Frontend einmal stören, können Sie entweder das Frontend in einem privaten Fenster (je nach Browser auch Inkognito-Fenster o.ä. genannt) öffnen oder in Ihrem Benutzerprofil die Option “Werkzeugleiste für mich auf der Website anzeigen” deaktivieren.

Hauptmenü

Auf der linken Seite auf dunklem Grund ist das Hauptmenü zu sehen, über das die einzelnen Inhalte und Einstellmöglichkeiten von WordPress zu erreichen sind.

Übersicht über die Module des Hauptmenüs

Beiträge

Zeigt eine Liste aller Beiträge sowie die Möglichkeit, neue Beiträge zu erstellen, vorhandene Beiträge zu bearbeiten und zu löschen. Über die Schaltfläche “Ansicht anpassen” oben rechts können Sie die Liste nach Ihren Bedürfnissen anpassen.

In der Seiten- und Beitrags-Liste haben Sie über den Link "Quick Edit" schnellen Zugriff auf bestimmte Eigenschaften der Seiten oder Beiträge. Der Link erscheint, wenn Sie mit der Maus über den betreffenden Listen-Eintrag fahren.

Liste der Beiträge.

Beiträge –> Kategorien

Verwaltungsseite Ihrer Beitragskategorien wie z.B. Produkte, Stellenangebote, Mitarbeiter. Anlegen können Sie Kategorien auch auf der Seite zum Bearbeiten eines Beitrags. Aber nur hier auf der Verwaltungsseite funktioniert das so schön übersichtlich, und auch nur hier lassen sich Kategorien wieder löschen. Kategorien können im Gegensatz zu Schlagwörtern hierarchisch sein, es ist also möglich, Kategorien Unterkategorien zu geben (einer Kategorie »Rezepte« könnten beispielsweise die Unterkategorien »Vorspeise«, »Hauptspeise« und »Nachspeise« zugeordnet werden).

Liste der Beitragskategorien.

Beiträge –> Schlagwörter

Ähnlich wie bei den Kategorien verwalten Sie Schlagwörter auf dieser Seite etwas übersichtlicher (inklusive der Option zum Löschen) als direkt auf einer Beitragsseite. Der Unterschied zu Kategorien ist semantischer Natur. Kategorien bzw. Unterkategorien stammen aus einer verschachtelten Taxonomie (einer Kategorie »Rezepte« könnten beispielsweise die Unterkategorien »Vorspeise«, »Hauptspeise« und »Nachspeise« zugeordnet werden). Schlagwörter sind konzeptionell wild durcheinander angeordnet. Am Ende liegt es bei Ihnen, wie Sie diese Ordnungssysteme einsetzen.

Medienübersicht

Zeigt alle hochgeladenen Medien an, entweder als Kachel-Ansicht oder als Liste. Zu Medien zählen auch Audiodateien, Videoclips und Dokumente wie PDFs, aber sehr wahrscheinlich verwalten Sie in dieser Mediathek hauptsächlich Bilder. Klicken Sie auf eine der Voransichten, um Details zur Mediendatei zu bearbeiten, z. B. Beschriftung, Beschreibung oder Alternativtext.

Datei hinzufügen

Seite zum Hochladen neuer Dateien. Am einfachsten ziehen Sie alle hochzuladenden Dateien aus Ihrem Datei-Explorer in das gestrichelt umrahmte Feld. Hinweis: Nach dem Hochladen können Sie über den Link “Bearbeiten” auf der rechten Seite weitere Daten pro Bild eingeben. Geben Sie möglichst zu jedem inhaltlich relevanten Bild einen beschreibenden Altenativtext ein, am besten mit einem Punkt (.) am Ende.

Datei-Upload in WordPress.

Seiten

Wie bei Beiträgen erhalten Sie auf dieser Seite eine übersichtliche Liste all Ihrer Seiten, aber ohne Kategorien und Schlagwörter – diese sind den Beiträgen vorbehalten. Über die Schaltfläche “Ansicht anpassen” oben rechts können Sie die Liste nach Ihren Bedürfnissen anpassen.

In der Seiten- und Beitrags-Liste haben Sie über den Link "Quick Edit" schnellen Zugriff auf bestimmte Eigenschaften der Seiten oder Beiträge. Der Link erscheint, wenn Sie mit der Maus über den betreffenden Listen-Eintrag fahren.

Seitenliste Hover.

Seite oder Beitrag erstellen und veröffentlichen

Erstelle ich eine Seite oder einen Beitrag?

Seiten im Backend entsprechen eins zu eins Seiten im Frontend. Sie eignen sich für die Kontaktseite, “Über uns”, die Datenschutzerklärung, das Impressum und Ähnliches. Außerdem können Seiten genutzt werden, um Sammlungen von Beiträgen zu präsentieren, z.B. eine “News”-Seite oder eine Produkte-Seite mit den jeweiligen Archiv-Elementen, also eine Liste der neuesten News oder eine Liste aller Produkte.

Beiträge eignen sich für Inhalte, die in Kategorien zusammengefasst werden können, um sie dann übersichtlich auf Seiten zu präsentieren. Typische Beispiele hierfür sind Produkte, News, Stellenangebote oder Ansprechpartner. Legen Sie zum Beispiel für ein Stellenangebot einen Beitrag mit der Kategorie “Stellenangebote” an. Anschließend legen Sie die Seite “Stellenangebote” an und binden dort einen Block vom Typ “Abfrage-Loop” ein, in dem Sie die Beiträge der Kategorie “Stellenangebote” präsentieren.

Seite oder Beitrag erstellen

Um eine Seite oder einen Beitrag in WordPress zu erstellen, wählen Sie links im Hauptmenü „Beiträge“ –> „Erstellen“ oder „Seiten“ –> „Erstellen“. Alternativ können Sie oben in der Werkzeugleiste „Neu“ und dann „Seite” bzw. “Beitrag” auswählen.

Veröffentlichen: Status und Sichtbarkeit festlegen

Wenn Sie Inhalte wie eine Seite oder einen Beitrag erstellt oder verändert haben, möchten Sie sicher Ihren Arbeitsstand sichern. Oben rechts in der Editor-Leiste gibt es zu dem Zweck einige Buttons:

Entwurf speichern

Diesen Button sehen Sie nur, wenn der Beitrag oder die Seite noch nie veröffentlicht wurde. Sie müssen keinen gesonderten Speichernamen für Ihren Text hinterlegen, wie das bei Dokumenten auf Ihrem Rechner der Fall ist. Beim ersten Klick auf Entwurf speichern erhält Ihr Text automatisch eine Nummer, unter der er in der Datenbank hinterlegt wird. Zusätzlich erhält der Beitrag/die Seite einen Permalink, eine Aufbereitung der Überschrift für URLs. WordPress speichert Ihre Texte in regelmäßigen Abständen automatisch.

Auf Entwurf umstellen

Dies erscheint anstelle von Entwurf speichern, wenn der Text veröffentlicht wurde, und entzieht dem Beitrag/der Seite den Veröffentlichungsstatus, d. h., der Text ist nicht mehr live abrufbar und befindet sich nun in Bearbeitung. Auf den Entwurfsmodus stellen Sie beispielsweise zurück, wenn Sie nach erfolgtem Live-Gang feststellen, dass sich leider mehr Fehler eingeschlichen haben, als Sie schnell reparieren können. Im Entwurfsmodus haben Sie dann wieder alle Zeit, denn die Seite oder der Beitrag ist nicht mehr zu sehen, wenn man nicht eingeloggt ist.

Vorschau –> Vorschau in neuem Tab

Dies speichert Ihren Text und öffnet einen neuen Browser-Tab, in dem Sie den Beitrag/die Seite fertig ins Webseitenlayout eingesetzt sehen. War solch ein Browser-Tab bereits von der letzten Vorschau offen, wird der Inhalt aktualisiert (das sehen Sie ganz kurz am Aus- und Einblenden des Tab-Titels). Die Vorschau ist ein praktisches Hilfsmittel, um sich einen Eindruck vom Endergebnis zu verschaffen und die letzten Fehler zu korrigieren.

Veröffentlichen/Aktualisieren/Planen

Der auffällige blaue Button mit weißem Text stellt Ihre Seite oder Ihre Änderungen live. Veröffentlichen ist dabei der erste Live-Gang eines neuen Beitrags. Bereits veröffentlichte Inhalte können Sie "Aktualisieren". WordPress geht dabei auf Nummer sicher und fragt Sie in einem zweiten Schritt, ob Sie tatsächlich jetzt veröffentlichen wollen – klicken Sie einfach erneut auf den Veröffentlichen-Button. "Aktualisieren" ändert bereits live gestellte Inhalte. "Planen" ist nur dann sichtbar, wenn Sie das Veröffentlichen-Datum im Block darunter in die Zukunft setzen. Die Veröffentlichung erfolgt dann automatisch zum eingegebenen Zeitpunkt.

Veröffentlichung planen.

Hinweis. Hinweis: Dieser Abschnitt gilt nicht für Seiten mit “Full-Site-Editing”

Menüs können unter „Design“ –> „Menüs“ erstellt und bearbeitet werden. Wenn Sie unter „Design“ nicht den Punkt „Menüs“ sehen sondern den Punkt „Editor“, haben Sie eine Seite mit “Full-Site-Editing” und dieser Abschnitt gilt nicht für Ihre Seite.
Abhängig vom Theme stehen mehr oder weniger Menüs zur Verfügung, die an verschiedenen Stellen im Frontend angezeigt werden. Welches Menü an welcher Position angezeigt werden soll, wird unter „Positionen verwalten“ festgelegt.
In der Ansicht „Menüs bearbeiten“ steht auf der linken Seite unter „Menüeinträge hinzufügen” eine Auswahl möglicher Menüpunkte zur Verfügung. Einzelne Punkte können hier ausgewählt und mit einem Klick auf den Button „Zum Menü hinzufügen“ zum Menü hinzugefügt werden.
Auf der rechten Seite können die vorhandenen Einträge per Drag-And-Drop sortiert und hierarchisch in maximal 3 Ebenen angeordnet werden.
Jeder Eintrag hat rechts oben einen kleinen Pfeil, über den weitere Optionen erreicht werden können, z.B. den Text für den Menüpunkt im Menü (aber nicht den Titel auf der Seite) anpassen, den Menüpunkt löschen oder per Mausklick verschieben.

Benutzer-Konto

Ihr Benutzerprofil rufen Sie entweder über den Menüpunkt “Benutzer” –> Ihr Benutzername auf oder über das Dropdown oben rechts unter “Willkommen [Benutzername]” –> “Profil bearbeiten”. Dort können Sie auch Ihre Benutzerrolle sehen. Sollten Sie Administrator sein, haben Sie Zugriff auf alle Inhalte und Einstellungen. Redakteure haben auf einige Bereiche und Einstellungen keinen Zugriff.

Der Gutenberg-Editor

WordPress Gutenberg Editor.

Der Editor kann in drei Bereiche unterteilt werden.

  1. Die Editor-Leiste (im Bild rot umrandet)
  2. Inhalts-Editor (im Bild hellblau umrandet)
  3. Seitenleiste (im Bild gelb umrandet)

1. Die Editor-Leiste

Die Editor-Leiste enthält links einen blauen Button mit einem weißen Plus (+), um einen Block einzufügen. Daneben finden sich Buttons, mit denen die letzte Aktion rückgängig gemacht oder wiederholt werden kann. Über den Info-Button können Sie sich Informationen über die Seite anzeigen lassen, wie die Anzahl der Wörter, Überschriften, Absätze und Blöcke.

Sie können hier auch eine Strukturübersicht für die Seite oder den Beitrag anzeigen lassen. Diese zeigt, ob die inhaltliche Struktur sinnvoll ist. Strukturieren Sie Ihre Dokumente mit Überschriften. Nutzen Sie dabei die Überschriften in der Reihenfolge H1 > H2 > H3 > H4 > H5 > H6, ohne eine Ebene zu überspringen. Verwenden Sie die H1 nur einmal pro Seite oder Beitrag. Eine einfache aber sinnvolle Struktur ist schon mit 2 Überschriften-Ebenen möglich, z.B.:

Sie können über die Listenansicht Elemente hinzufügen, verschieben und löschen.

Sie können über die Listenansicht im Dokument navigieren. Die einzelnen Elemente sind nämlich verlinkt und mit einem Klick landet man an der entsprechenden Stelle im Dokument.

In der rechten Hälfte der Editor-Leiste können Sie eine Seite als Entwurf speichern, sich eine Vorschau anzeigen lassen oder auch die Seite veröffentlichen. Speichern Sie eine Seite, so bleibt das Browser-Fenster mit Ihrer Seite geöffnet, so dass Sie unmittelbar weiterarbeiten können. Dieser Button dient also auch dazu, während der Arbeit zwischenzuspeichern. Sie können eine Seite aber auch für einen späteren Zeitpunkt als Entwurf speichern, um z. B. erst am nächsten Tag daran weiterzuarbeiten. Um zu einem späteren Zeitpunkt einen Entwurf wieder aufzurufen, gibt es mehrere Möglichkeiten:

Der Vorschau-Button zeigt, wie die Seite aussehen würde, wenn sie veröffentlicht wird. Das Zahnrad blendet die verschiedenen Einstellungen ein. Diese Einstellungen können den aktuell ausgewählten Block oder die aktuell zu bearbeitende Seite betreffen.

Unter dem Button “Ansicht anpassen” findet man zudem die Möglichkeiten vom Visuellen Editor in den Code Editor zu wechseln, man kann die Werkzeugleiste am oberen Bildrand fixieren und den Spotlight-Modus aktivieren oder in den Vollbildmodus wechseln bzw. diesen deaktivieren.

Im Spotlight-Modus werden Blöcke, die man gerade nicht bearbeitet teilweise ausgeblendet, sodass man sich nur auf den einen aktiven Block konzentrieren kann.

Hier findet man zudem die folgenden Werkzeuge:

2. Der Editor

An zentraler Stelle findet man den Editor, in dem der Inhalt eingefügt wird. Zu Beginn sollte hier ein Seitentitel vergeben werden. Der Titel ist eines der wichtigsten Elemente Ihres Beitrags oder Ihrer Seite. Er ist die Gesamtüberschrift des bald an dieser Stelle vorliegenden Textes, aus dem später eine Webseite wird. Die Über uns-Seite, eine Produktinfo, ein Blogeintrag, und sogar das Impressum sind Beispiele für Webseiten. Der Titel erscheint in der Regel plakativ oben auf der betreffenden Webseite, oben in der Fensterleiste und/oder im Browser-Tab, als Favoriten- oder Bookmark-Markierung, in der Chronik, im RSS-Feed der Website, auf Kategorie-Übersichtsseiten und oft auch im Website-Menü (wobei man zu lange Überschriften wegen Platzmangel und Lesbarkeit abkürzen sollte).

3. Die Seitenleiste

Am rechten Rand finden Sie sämtliche Einstellungen, die Sie für das Dokument, also den Beitrag oder die Seite, machen können, aber auch für den gerade im Editor ausgewählten Block. Sie können diesen Einstellungsbereich ein- und ausblenden, indem Sie auf den Button „Einstellungen“ (das Zahnrad in der Editor-Leiste) klicken.

Den Permalink legen Sie rechts in der Sidebar im Bereich Permalink fest.

Der Permalink ist der in der Adresszeile des Browsers darstellbare Titel – kleingeschrieben und ohne Sonder- und Leerzeichen. Hinweis: Nach Eingabe des Titels generiert WordPress automatisch einen Permalink aus dem Seitentitel (s.o.). Zum jetzigen Zeitpunkt prüfen Sie also nur das Ergebnis, in der Regel passt das schon. Umlaute werden in die lateinischen Langversionen verwandelt (»ä« → »ae«), und aus Leer- werden Minuszeichen – das ist für alle Rechner, die mit dieser URL umgehen müssen, praktikabler. Der Permalink lässt sich nachträglich ändern. In der Regel werden intern von Seite zu Seite vergebene Links in WordPress auch automatisch angepasst. Mit als Lesezeichen gespeicherten Links sieht das anders aus. Für sie braucht man einen sogenannten Redirect, eine Umleitung von der alten zur neuen Adresse. Es ist also sinnvoll, sich vorher zu überlegen, wie die Permalinks aussehen sollen, um nachträglich möglichst keine Änderungen mehr vornehmen zu müssen.

Blöcke

Im Gutenberg-Editor stehen ihnen viele verschiedene Blöcke zur Verfügung, um ihre Inhalte zu strukturieren. Im Folgenden werden nur die Blöcke beschrieben, die eine WordPress-Installation ohne Plugins beinhaltet. Es ist also durchaus möglich, dass Sie mehr Blöcke zur Verfügung haben als hier beschrieben werden.

Blöcke können über den "Plus"-Button in der Editor-Leiste eingefügt werden oder über "Plus"-Buttons im Editor selbst. Wenn Sie mit dem Cursor (Mauszeiger) über den Bereich des Editors fahren erscheint ein Pluszeichen in einem Quadrat. Auch in der Bearbeitungsleiste der einzelnen Blöcke gibt es die Möglichkeit, über das "Dreipunkt"-Untermenü einen Block davor oder danach einzufügen.

Wenn Sie mit dem Cursor über den oberen oder unteren Rand eines bereits bestehenden Blocks fahren, erhalten Sie die Möglichkeit einen Block entweder vor oder nach dem ausgewählten einzufügen.

Wenn Sie den „+“-Button anklicken, öffnet sich eine Liste mit verfügbaren Blöcken, aus der Sie einen Block auswählen können. Über das Suchfeld können Sie nach einem bestimmten Block suchen.

Sie können im Textfeld im Editor aber auch direkt einen Schrägstrich eingeben, so werden Ihnen die am häufigsten genutzten Blöcke zur Auswahl angeboten.

Ergänzt man diesen Schrägstrich noch mit einem Buchstaben, so werden selektiv Blöcke aufgelistet.

Wenn Sie im Editor „einfach so“ darauf losschreiben, wird der Text automatisch als Absatz-Block eingefügt.

Alle Blöcke können gelöscht, dupliziert und gespeichert (Zu wiederverwendbaren Blöcke hinzufügen) werden oder aber gruppiert werden. All diese Optionen sowie die erweiterten Einstellungen findet man über den „Mehr Optionen“-Button (die drei Punkte untereinander ganz rechts in der Bearbeitungsleiste) des jeweiligen Blocks.

In der Bearbeitungsleiste, die oberhalb des ausgewählten Blocks angezeigt wird, findet man zudem ganz links die Möglichkeit den Block in einen anderen umzuwandeln und blockspezifische Buttons, wie z. B. die Ausrichtung und Formatierung von Texten oder das Einfügen von Links.

Rechts neben dem Block-Symbol in der Bearbeitungsleiste des Blocks finden Sie zudem kleine Pfeile, die nach oben und unten zeigen sowie einen „Anfasser“. Mit einem Klick auf diese können Sie Blöcke verschieben bzw. beliebig platzieren.

Wenn man mehrere Absätze markiert, können diese auch gemeinsam verschoben werden.

 

Block-Bearbeitungsleiste
WordPress Gutenberg Editor: Block-Bearbeitungsleiste.

  1. Das Block-Symbol oder Block-Icon (hier ein Absatz)
  2. Der Anfasser, mit dem der Block verschoben werden kann
  3. Pfeile, mit denen der Block jeweils einen Block nach oben oder nach unten verschoben werden kann
  4. Einstellmöglichkeit für die Textausrichtung
  5. Einstellmöglichkeit für fetten Schriftschnitt
  6. Einstellmöglichkeit für kursiven Schriftschnitt
  7. Möglichkeit, ausgewählten Text im Absatz zu verlinken
  8. Weitere Textformatierungsmöglichkeiten
  9. "Dreipunkt"- oder „Mehr Optionen“-Button

 

Meistgenutzte Blöcke
Absatz

Dieser Block beinhaltet einen gewöhnlichen Absatz, wobei Sie noch die Möglichkeit haben den Text zu formatieren.

Wenn Sie den Cursor in den Textblock setzen oder Inhalt markieren erscheint eine Buttonleiste zur Formatierung. 1. Textausrichtung ändern (linksbündig, zentriert, rechtbündig) 2. Der entsprechende Abschnitt wird als sehr wichtig hervorgehoben bzw. fett formatiert. 3. Der entsprechende Abschnitt wird als wichtig hervorgehoben bzw. kursiv formatiert. 4. Einen Link einfügen/ändern. 5. Mehr Steuerelemente (z.B. durchgestrichen, Inline-Bild, Inline-Code)

Während der Arbeit mit dem visuellen Editor können Sie auch auf Tastatur- und Formatierungskürzel zurückgreifen.

Tastaturkürzel aktivieren eine Formatierung, die dann für den folgenden Absatz gilt. Alternativ dazu kann mit den Tastaturkürzeln auch ein markierter Absatz nachträglich eine Formatierung zugewiesen bekommen.

Tastaturkürzel Formatierung
Strg + b fett
Strg + i kursiv
Strg + u unterstrichen
Erweiterte Einstellungen

Dem Textabsatz kann über die Erweiterten Einstellungen eine CSS-Klasse zugewiesen werden. Außerdem kann man einen Initialbuchstaben und die Schriftgröße festlegen, wenn diese vom Standard abweichen soll. Zudem kann man eine Hintergrund- und Textfarbe festlegen.

  1. Den Text oder das Bild auswählen bzw. markieren.
  2. In der zu dem Block gehörenden Werkzeugleiste auf das Link-Symbol klicken.
  3. Entweder direkt die gewünschte URL in das Textfeld kopieren und weiter mit 5.
  4. Oder den Titel der zu verlinkenden Seite tippen und die gewünschte Seite aus der Liste mit Suchergebnissen auswählen.
  5. Legen Sie fest, ob der Link in einem neuen Tab/Fenster geöffnet werden soll.
  6. Die „Eingabe“-Taste oder den Button mit dem eckigen Pfeil drücken.

Wenn Sie einen Link im Nachhinein ändern möchten, klicken Sie mit dem Maus-Cursor in den verlinkten Bereich. Es öffnet sich das Bearbeiten-Feld für den Link. Klicken Sie auf das Stift-Symbol, um das Link-Ziel zu bearbeiten. Wenn Sie die Verlinkung insgesamt entfernen möchten, platzieren Sie den Cursor in den verlinkten Text und wählen dann den Button Link entfernen.

Bild

Mit diesem Block können Sie ein Bild einfügen.

Wenn Sie ein Bild einfügen möchten, müssen Sie zunächst entscheiden, wo das Bild „liegt“ - müssen Sie es also zunächst von Ihrem Rechner hochladen oder ist es schon in der Mediathek gespeichert oder ist es über eine URL erreichbar?

Haben Sie ein Bild auf Ihrem Rechner gespeichert, dass Sie in die Seite einfügen möchten, so klicken Sie entweder auf den Button Hochladen oder Sie ziehen die Bilder aus einem geöffneten Fenster einfach mit der Maus in den mittleren Bereich. Im ersten Fall öffnet sich ein Fenster, in dem Sie die Datei auswählen. Öffnen Sie das Bild, um es in WordPress hochzuladen. Dieser Vorgang kann je nach Bildgröße ein paar Sekunden dauern.

Wenn Sie ein Bild schon zu einem früheren Zeitpunkt hochgeladen haben, können Sie es über den entsprechenden Button Aus der Mediathek hinzufügen. Dafür wählen Sie das entsprechende Bild aus und bestätigen diese Auswahl. Ist das Bild ausgewählt und eingefügt, können Sie einige Angaben dazu machen, die die Darstellung beeinflussen.

Zum einen können Sie die Größe des Bildes beeinflussen, indem Sie das Bild durch Klicken und Ziehen verkleinern oder vergrößern. Unterhalb des Bildes können Sie auch eine Beschriftung einfügen, die dann im Frontend erscheint. Auch hier können Sie den Text formatieren und verlinken.

Oberhalb des Bildes finden Sie eine Werkzeugleiste mit den folgenden: 1. Block-Stile: Auswahl einer Kreismaske sowie Umwandeln des Bildes in einen anderen Block, wie z. B. Galerie oder Cover 2. Bildausrichtung 3. Bild ersetzen 4. Bild verlinken. Dabei kann man auswählen, ob es überhaupt eine Verlinkung geben soll und falls ja, wohin diese führt. Möglich ist hierbei die Verlinkung zur Medien-Datei selbst, zur Anhang-Seite oder zu einer individuellen URL, die dann im Feld darunter eingegeben werden kann. Auf der Anhang-Seite wird neben dem Bild auch die Beschreibung, die Sie evtl. eingefügt haben, angezeigt. 5. Mehr Optionen

Bild bearbeiten

Bei den Anhang-Details in der Mediathek, finden Sie unterhalb des Vorschaubildes den Link Bild bearbeiten. Dieser führt Sie zu einer Arbeitsoberfläche, die es Ihnen ermöglicht Ihr hochgeladenes Bild rudimentär zu bearbeiten.

Sie können Ihr Bild hier beschneiden, drehen, spiegeln oder skalieren. In den meisten Fällen empfiehlt es sich jedoch Bilder vor dem Hochladen mit einem Desktop-Bildbearbeitungsprogramm zu bearbeiten.

Erweiterte Einstellungen

Bei den erweiterten Einstellungen für ein Bild haben Sie die Möglichkeit neben dem Stil (Standard oder Kreismaske) einen Alternativtext anzugeben und auch eine der Standardgrößen (siehe: Einstellungen/Mediathek) für das Bild auszuwählen.

Als Alternativtext sollten Sie eine aussagekräftige Bezeichnung wählen, denn dies ist der Inhalt des alt-Attributs, das erscheint, wenn das Bild nicht geladen werden kann. Sollten Sie dieses Feld leer lassen, wird der Titel als Alternativtext angezeigt. Der Inhalt wird zudem von Screenreadern als Bildbeschreibung genutzt. In einem weiteren Abschnitt kann auch hier eine CSS-Klasse für den Block festgelegt werden.

Datei

Um Dateien zum Download bereit zu stellen, gibt es den Block “Dateien”.

Hiermit kann man eine Datei einbinden, die dann zum Download bereitsteht. Dabei kann man auswählen, ob man einen verlinkten Namen und/oder einen Button anzeigen lässt, wobei man den Textlink auch zur Anhangseite zeigen lassen kann. Der Button-Link führt immer direkt zur Datei.

Erweiterte Einstellungen

Es ist möglich, dass der Textlink sich in einem neuen Fenster öffnet und der Download-Button ausgeblendet wird. Der Datei kann über die Erweiterten Einstellungen eine CSS-Klasse zugewiesen werden.

Galerie

Der Block Galerie gleicht dem Block „Bild“, mit dem Unterschied, dass Sie hier mehrere Bilder zu einer Galerie zusammenfassen und präsentieren können. Auch hier müssen Sie die Bilder entweder hochladen oder aus der Mediathek auswählen. Sie können alle Bilder mit einem Alternativtext versehen und einer Beschriftung. Auch die Galerie selbst kann beschriftet werden.

Erweiterte Einstellungen

Bei den Erweiterten Einstellungen zur Galerie kann man entscheiden in wie vielen Spalten die Bilder angezeigt werden sollen und auch, ob die Bilder alle in der gleichen Größe dargestellt, also eventuell zugeschnitten werden sollen. Außerdem kann man auswählen in welcher Standardgröße die Bilder für die Darstellung in der Galerie verwendet werden sollen.

Nun kann man entscheiden, womit die einzelnen Vorschau- bzw. Miniaturbilder verknüpft bzw. verlinkt sein sollen (Link zu). Medien-Datei bedeutet, dass die Bilder, wie bei Vorschaubildern üblich, mit ihrem eigenen Original verlinkt sind. Die Option Anhang-Seite öffnet eine Galerieseite, auf der auch die Beschreibung des Bildes, die Sie evtl. eingefügt haben, zu finden ist. Außerdem können Besucher (je nach eingesetztem Theme) auf den Galerieseiten zum vorhergehenden und nächsten Bild navigieren. Zu guter Letzt können Sie auch hier eigene CSS-Klassen festlegen.

Liste

Wenn Sie eine Liste einfügen möchten, wählen Sie den Listen-Block. Sie können nun eine Liste mit mehreren Elementen anlegen und dabei auf die folgenden Möglichkeiten zurückgreifen:

  1. Blocktyp ändern: hiermit können Sie eine Liste in einen anderen Blocktyp umwandeln, z. B. einen Absatz oder ein Zitat
  2. Eine ungeordnete Liste einfügen (mit Bullet-Points)
  3. Eine geordnete Liste einfügen (mit Zahlen)
  4. Listenelement ausrücken
  5. Listenelement einrücken
  6. Der entsprechende Abschnitt wird als sehr wichtig hervorgehoben bzw. fett formatiert.
  7. Der entsprechende Abschnitt wird als wichtig hervorgehoben bzw. kursiv formatiert.
  8. Einen Link einfügen/ändern.
  9. Weitere Möglichkeiten: durchgestrichen, Inline-Bild, Inline-Code

Wenn Sie eine verschachtelte Liste erstellen möchten, rücken Sie die Listenelemente ein, indem Sie am Anfang der Zeile ein Leerzeichen eingeben. Umgekehrt können Sie am Anfang der Zeile die Löschen-Taste drücken, um den Einzug zu verringern.

Erweiterte Einstellungen

Bei den erweiterten Einstellungen der Listen finden Sie die Möglichkeit, eigene CSS-Klassen festzulegen.

Titelbild (Cover)

Ähnlich wie beim Einfügen eines Bildes können Sie ein Titelbild auswählen und es ausrichten. Sie haben aber auch die Möglichkeit eine farbige Fläche als Cover zu wählen. In beiden Fällen können Sie auf dem Bild oder der Fläche Texte und Buttons platzieren und formatieren.

Das gesamte Coverbild kann dabei, wenn das Theme es zulässt, auch über die volle Breite der Seite gehen.

Erweiterte Einstellungen

Bei den erweiterten Einstellungen können Sie dann neben dem Anlegen einer eigenen CSS-Klasse auch den Abdunklungsgrad (mit verschiedenen Farben) des Hintergrunds einstellen, so dass die helle Beschriftung auch in jedem Fall gut sichtbar ist. Sie können zudem den Hintergrund beim Scrollen der Seite fixieren (Parrallax-Effekt). Auch eine Mindesthöhe des Covers (in Pixeln) kann angegeben werden.

Überschrift

Der Block „Überschrift“ gibt Ihnen die Möglichkeit eine Überschrift einzufügen und zu formatieren.

Zur Verfügung stehen Ihnen dabei die folgenden Möglichkeiten: 1. Blocktyp ändern: hiermit können Sie eine Überschrift in einen anderen Blocktyp umwandeln, z. B. einen Absatz oder ein Zitat 2. Überschriftebene auswählen 3. Textausrichtung wählen 4. Der entsprechende Abschnitt wird als sehr wichtig hervorgehoben bzw. fett formatiert. 5. Der entsprechende Abschnitt wird als wichtig hervorgehoben bzw. kursiv formatiert. 6. Einen Link einfügen/ändern. 7. Weitere Möglichkeiten: durchgestrichen, Inline-Bild, Inline-Code, Textfarbe

Da der Titel der Seite in der Regel als Überschrift erster Ordnung deklariert ist, steht er Ihnen hier nicht (mehr) zur Verfügung.

Erweiterte Einstellungen

Bei den Überschriften-Einstellungen haben Sie jedoch die Möglichkeit eine Überschrift auch als Überschrift erster Ordnung zu erstellen. Sie können außerdem die Textfarbe auswählen. Zudem ist es Ihnen möglich einen HTML-Anker festzulegen, also eine ID, die dann als Ziel für eine Sprungmarke dienen kann.

Auch eigene CSS-Klassen können angegeben werden.

Tabelle

Mit dem Tabellenblock können Sie einfach und bequem Tabellen einfügen. Nach der Auswahl wie viele Zeilen und Spalten die Tabelle umfassen soll, können Sie die Tabelle mit Inhalten füllen und gestalten.

Der Tabelle können verschieden Stile zugewiesen werden, sie kann linksbündig, zentriert und rechtsbündig ausgerichtet werden. Falls das Theme es zulässt, kann die Tabelle auch als „Weite Breite“ oder „Volle Breite“ dargestellt werden. Außerdem können Sie festlegen, wie die Spalten ausgerichtet sein sollen.

Innerhalb der Tabelle bzw. der Tabellenzellen, können Sie per Button Zeilen und Spalten hinzufügen und löschen. Der Text in den Zellen kann formatiert (fett, kursiv, durchgestrichen), ausgerichtet und verlinkt werden.

Erweiterte Einstellungen

In den erweiterten Einstellungen können dem Block eigene CSS-Klassen zugewiesen werden. Sie können zudem auswählen, ob Tabellenzellen eine feste Breite haben sollen. Zusätzlich dazu können Sie eine Kopf- und Fußzeile sowie eine Hintergrundfarbe festlegen.

Abstandshalter

Mit Hilfe des Abstandhalter-Blocks können leere Abstände zwischen Elementen bzw. anderen Blöcken eingefügt werden. Dabei kann man die Höhe des Abstandes in Pixeln festlegen.

Erweiterte Einstellungen

In den erweiterten Einstellungen können dem Block eigene CSS-Klassen zugewiesen werden.

Button

Mit dem Buttons-Block haben Sie die Möglichkeit, einen oder mehrere Buttons einzufügen und zu gestalten. Beachten Sie bitte, dass ein einzelner Button immer in einem Buttons-Block verschachtelt wird. Sie haben also immer einen Block "Buttons", (Plural) der einen oder mehrere Blöcke "Button" (Singular) enthalten kann, aber nie einen Button-Block ohne Eltern-Element "Buttons". Der Buttons-Block gibt Ihnen die Möglichkeit, einen oder mehrere Buttons einzufügen und diese auszurichten (links, zentriert, rechts). Diesem „Eltern-Block“ kann auch eine CSS-Klasse zugewiesen werden.

Wenn Sie dann einen einzelnen Button anklicken, können Sie für diesen – abhängig vom Theme mehr oder weniger frei – den Stil auswählen und die Verlinkung festlegen.

Der Buttons Block.

Gelb markiert ist das Symbol für den ausgewählten rechten Button. Die Bearbeitungsleiste bezieht sich auf den ausgewählten Button. Orange hinterlegt ist das Symbol für das Eltern-Element "Buttons" links von der Bearbeitungsleiste für den Button. Mit einem Klick auf das (hier zu Anschauungszwecken) orange hinterlegte Kästchen könnten Sie in die Bearbeitung des Eltern-Elements wechseln.

Erweiterte Einstellungen

In den erweiterten Einstellungen können dem Button eigene CSS-Klassen zugewiesen werden. Auch der Eckenradius kann angepasst werden.

Sie können zudem festlegen, ob die Verlinkung in einem neuen Tab/Fenster geöffnet werden soll und sie haben die Möglichkeit ein rel-Attribut anzugeben.

Medien und Text

Für die Platzierung von Medien und Text nebeneinander gibt es den Block „Medien und Text“.

Dabei kann man entscheiden, ob der Block über die volle oder die weite Breite gehen soll und auf welcher Seite das Medium bzw. Bild platziert werden soll. Auch die vertikale Ausrichtung kann festgelegt werden.

Erweiterte Einstellungen

Bei den erweiterten Einstellungen kann festgelegt werden, ob der Inhalt des Block in der mobilen Ansicht „gestapelt“ werden soll, d. h. das Bild und der Text erscheinen dort unter- und nicht nebeneinander. Zusätzlich dazu können eine Hintergrundfarbe sowie CSS-Klassen festgelegt werden.

Spalten

Mit Hilfe von Spalten können Sie unterschiedliche Inhalte in Spalten darstellen. Beachten Sie bitte, dass eine einzelne Spalte immer in einem Spalten-Block verschachtelt wird. Sie haben also immer einen Block "Spalten", (Plural) der einen oder mehrere Blöcke "Spalte" (Singular) enthalten kann, aber nie einen Spalte-Block ohne Eltern-Element "Spalten".

Wenn Sie einen Block "Spalten" einfügen, werden Sie aufgefordert, ein vorgegebenes Layout auszuwählen. Dieses Layout können Sie nachträglich anpassen. Sie können die Aufteilung der Spalten auch komplett selbst vornehmen.

Innerhalb der Spalten können Sie nahezu beliebige andere Blöcke platzieren, so dass diese (ab einer bestimmten Bildschirmbreite) nebeneinander dargestellt werden.

Erweiterte Einstellungen

In den erweiterten Einstellungen kann dem Eltern-Block "Spalten" eine eigene CSS-Klassen zugewiesen werden. Außerdem kann jede Spalte eine Breite (in %) zugewiesen bekommen und eine eigene CSS-Klasse.

Trennzeichen

Mit Hilfe von Trennzeichen kann ein Text optisch aufgelockert oder strukturiert werden. Dabei kann man zwischen einer kurzen Linie, einer breiten Linie oder Punkten für die Darstellung wählen.

Erweiterte Einstellungen

In den erweiterten Einstellungen können dem Block eigene CSS-Klassen zugewiesen werden. Außerdem kann die Farbe des Trennzeichens festgelegt werden.

Gruppe

Mit dem Block „Gruppe“ haben Sie die Möglichkeit, mehrere unterschiedliche Blöcke zusammenzufassen und beispielsweise mit einem einheitlichen farbigen Hintergrund darzustellen. So kann eine Seite durch verschiedene Gruppen in Bereiche aufgeteilt werden.

Auch bereits erstellte Blöcke lassen sich im Nachhinein zu einer Gruppe zusammenfassen bzw. gruppieren. Dafür müssen Sie nur markiert und „gruppiert“ werden.

Erweiterte Einstellungen

In den erweiterten Einstellungen kann dem Block eine ID für einen HTML-Anker zugewiesen werden sowie eigene CSS-Klassen. Außerdem können die Text- und Hintergrundfarbe festgelegt werden.

Plugin-Übersicht

Die Funktionalität von WordPress lässt sich durch so genannte Plugins erweitern. Nicht für jede Website ist jede Funktion erforderlich. Mit Plugins kann Ihre Website mit überschaubarem Aufwand an Ihre individuellen Bedürfnisse angepasst werden.

Hinweis. Hinweis: Die folgenden Plugins und Funktionen sind nicht für alle Websites verfügbar.

Mehrsprachigkeit mit WPML

In einigen Websites ist das Plugin “WPML” mit einigen Begleit-Plugins enthalten, um die Übersetzung der Seite zu ermöglichen. Um eine Ihrer Seiten oder Beiträge in einer neuen Sprache hinzuzufügen, können Sie entweder das Plus-Zeichen in der jeweiligen Übersicht nutzen oder in der jeweiligen Seite bzw. Beiträge im Feld „Sprache“ eine neue Version in der gewünschten Sprache hinzufügen und die Version(en) in einer bereits vorhandenen Sprache bearbeiten.

Nach einem Klick auf die jeweiligen Symbole öffnet sich eine Ansicht, in der alle Textinhalte von der Seite oder dem Beitrag gezeigt werden. In der linken Spalte befindet sich der originale Inhalt, in der rechten Spalte die Textfelder, in der die Übersetzungen eingetragen werden können.

In der Fußleiste der Ansicht gibt es verschiedene Informationen und Aktionen. So zeigt eine Fortschrittsleiste an, wie viel Prozent der verfügbaren Textinhalte bereits übersetzt wurden. Daneben gibt es die Option, bereits abgeschlossene Übersetzungen in dieser Ansicht auszublenden, um so mehr Übersichtlichkeit zu gewinnen. Zum Abschluss können unter „Speichern“ oder „Speichern & Schließen“ die Übersetzungen gesichert werden.

–

Kontaktformulare mit Contact Form 7

In einigen Websites ist das Plugin “Contact Form 7” mit dem Begleit-Plugin “Flamingo” enthalten. Hiermit werden Formulare erstellt, über die Besucherinnen und Besucher der Website Anfragen stellen können.
Eingegangene Nachrichten werden dabei per E-Mail versendet und im WordPress-Backend gespeichert. Die Liste eingegangener Nachrichten können Sie unter “Nachrichten-Eingang” (oder Flamingo –> Nachrichten-Eingang) im Hauptmenü aufrufen. Die Formulare können unter “Contact” bzw. “Formulare” bearbeitet werden. Dies empfehlen wir nur, wenn Sie über entsprechende Programmierkenntnisse verfügen, also in der Regel nicht.

Kontaktformular einfügen

Vorhandene Formulare können über den Block “Contact Form 7” in Seiten und Beiträge eingefügt werden. Wählen Sie dazu den Block aus der Liste mit Blocks aus und anschließend gegebenenfalls das Formular, das Sie einfügen möchten, aus dem Dropdown-Menü in dem Block (falls für Ihre Seite mehrere Formulare konfiguriert sind).

–

Block-Sichtbarkeit mit Block Visibility

Um Inhalte im Editor vorzubereiten, diese aber nicht im Frontend anzeigen zu lassen, enthalten einige Websites ein Plugin für die Block-Sichtbarkeit. Bei Auswahl eines Blocks im Editor kann über das Modul „Visibility“ in der rechten Einstellungs-Seitenleiste der Block versteckt oder wieder angezeigt werden. Zudem sind weitere Einstellungen wie z.B. eine automatische Anzeige über die Einstellung von Datum und Uhrzeit möglich.

Der ausgeblendete Block erhält im Editor eine gestrichelte blaue Umrandung und ein durchgestrichenes Auge-Icon in der oberen rechten Ecke.

–

Baumstruktur (für Listen im Backend) mit CMS Tree Page View

Um die Nutzerfreundlichkeit für die Auflistungen der Seiten und Beiträge im Backend zu verbessern, enthalten einige Websites ein entsprechendes Plugin. Mit diesem lässt sich per Auf- und Zuklappen eine übersichtliche Struktur der angelegten Seiten anzeigen. Bei Auswahl einer Seite kann zudem direkt aus der Baumstruktur in den Inhalts-Editor gesprungen werden.

–

Medienkategorien mit Happy Files

WordPress bietet im Standard keine Kategorien für Medien an, sondern listet alle Medien in einem „Ordner“ auf. Für große Mediensammlungen wird dies manchmal unübersichtlich. Mit dem Plugin „Happy Files“ können ineinander verschachtelbare Kategorien angelegt werden. Zudem können einfach per Drag & Drop die einzelnen Medien den Kategorien mehrfach zugeordnet werden.

Dia-Show mit Tiny Slider

Mit dem Tiny Slider Block können Sie eine Reihe von Inhalten erstellen, die im Frontend im Wechsel angezeigt wird. Dies wird oft Slider, Dia-Show oder ähnlich genannt. Der Block bietet zahlreiche Einstellmöglichkeiten, die Sie einmal in Ruhe auf einer Test-Seite ausprobieren sollten.

–

Spezielle Blöcke mit Willers Blocks

Das Plugin Willers Blocks bietet weitere, standardmäßig nicht verfügbare Blocks, wie zum Beispiel einen Akkordeon-Block, einen Hintergrund-Block, eine spezielle Beitragsliste und weitere.

–

Bild-Dateien ersetzen mit Enable Media Replace

Falls das Plugin Enable Media Replace installiert ist, können Sie für vorhandene Medien-Dateien eine neue Datei hochladen und die alte ersetzen, anstatt eine neue Datei hochzuladen und die “alte” Datei in Ihrem System zu belassen. Das kann Speicherplatz auf dem Server sparen.

–

Cacheing für eine schnellere Website

Je nach Installation und Hosting kann Ihre Website-Installation ein Cacheing-Plugin enthalten, um die Auslieferung der Seite im Frontend zu beschleunigen. In manchen Fällen müssen Sie im Backend den Cache leeren, um die Änderungen, die Sie an Inhalten vorgenommen haben, im Frontend zu sehen. Diese Funktion ist oft in der oberen Werkzeugleiste unter “Cache leeren” zu finden, manchmal heißt sie jedoch auch anders, zum Beispiel “FVM”, “Autoptimize” oder “Breeze”.

–

Suchmaschinenoptimierung mit Yoast SEO

Für die Suchmaschinenoptimierung Ihrer Website nutzen wir in der Regel das Plugin Yoast SEO.
Abgesehen von den grundlegnden Einstellungen, die die Indexierung Ihrer Website betreffen und die wir für Sie vornehmen, gibt das Plugin in der Seiten-/Beitragsübersicht Informationen über den Optimierungsgrad des Inhalts mit farbigen Markierungen zu SEO- und Lesbarkeitsstatus, und ein Zähler zeigt die Zahl der internen Links (SEO-Tipp: möglichst viele, aber sinnvolle interne Links setzen). Weitere Einstellungsmöglichkeiten finden Sie in den Bearbeitungs-Ansichten von Beiträgen und Seiten.

Yoast SEO ergänzt Seiten- und Beiträge-Detailseiten um einen weiteren Kasten unter dem Editor (über Ansicht anpassen ein- und ausblendbar), der Ihnen im SEO-Tab Hilfestellung für die Optimierung des Inhalts bietet:

  1. Fokus-Keyphrase: Die Eingabe eines Fokus-Keywords hilft Ihnen bei der Streuung des Keywords im Fließtext, aber auch zum Beispiel in den Alternativtexten für Bilder, in Textlinks usw. Das Ergebnis sehen Sie im SEO-Analyse-Kasten.
  2. Google-Vorschau: Das ist eine Vorschau der Ansicht Ihrer Seite auf der Google-Suchergebnis-Seite, die Sie zwischen Mobil- und Desktop-Ansicht hin- und herschalten können. Unter der Vorschau finden Sie Felder zum Bearbeiten des “SEO-Titels” und der “Meta-Beschreibung” für das Google-Snippet. Beachten Sie, dass Sie einen aussagekräftigen Titel und eine einladende Beschreibung für Ihre Seite oder Ihren Beitrag vergeben. Die farbige Anzeige unter den Feldern zeigt Ihnen, ob die Inhalte zu kurz, zu lang, oder passend sind.
    Die “Titelform” ändern Sie am besten nicht.
  3. Der SEO-Analyse-Kasten zeigt, wie häufig und passend das Fokus-Keyword eingesetzt wird, und gibt Tipps, wie lang der Text sein sollte, stellt fest, ob keine Bilder oder zu viele externe Links enthalten sind oder ob die Überschrift zu kurz ist. All das kann man sich mal zu Gemüte führen, es sollte aber nicht dazu verleiten, in Google-Abstrafungspanik zu verfallen, wenn nicht direkt alle Bullet-Punkte grün leuchten.

Glossar

Adminleiste / Werkzeugleiste
Die dunkel hinterlegte Leiste am oberen Rand des WordPress-Backends. Ganz rechts zeigt sie Ihren Benutzernamen mit Links zu Ihrem Profil und zum Abmelden aus dem Backend an.
Anker
Sprungmarke innerhalb eines HTML-Dokuments. Weisen Sie einem Block einen Anker zu, um innerhalb der Seite mit dem Raute- / HashTag-Zeichen dorthin zu verlinken. Wenn z..B. der Anker "anker" heißt, müsste als Link "#anker" eingetragen werden (jeweils ohne Anführungszeichen).
Backend
Die Website, mit der Sie die Inhalte Ihrer Website verwalten und die nur Personen mit den entsprechenden Zugangsdaten sehen.
Block
Blöcke heißen die Inhalts- oder Layout-Module, aus denen Sie die Inhalte der Seiten und Beiträge Ihrer Website zusammensetzen können.
Dropdown
Ein Menü, das ausklappt und weitere Unterpunkte anzeigt, wenn Sie darauf klicken oder mit der Maus darüberfahren.
Editor / Block-Editor / Gutenberg-Editor
So wird der Teil von WordPress genannt, in dem Sie die Blöcke eines Beitrags oder einer Seite bearbeiten können.
Frontend
Die Website, die Ihre Kundinnen und Kunden sehen und deren Inhalte Sie im WordPress-Backend verwalten.
Titelform / Permalink / Slug
Der Teil der Adresse einer Seite, eines Beitrags, eines Mediums oder sonstigen Inhalts Ihrer Website, der nach dem Domain-Namen kommt. Für die Seite “Produkte” unter der Domain beispiel.de könnte das zum Beispiel /produkte/ sein, wie in https://beispiel.de/produkte/ .
Offizielle Anleitung auf Englisch
WordPress-Hilfe für den Block-Editor „Gutenberg“ (Englisch)