Der Gutenberg Block-Editor ist Standard in WordPress. In der alten Multisite im alten Layout setzen wir den Classic Editor ein. Der Editor ist der größte Unterschied zwischen der alten Multisite unter www.blogs.uni-mainz.de und der neuen Multisite unter cms.zdv.uni-mainz.de. Das Dashboard unterscheidet sich hingegen nicht merklich, auch alles andere ist identisch. Wie das Login oder der Customizer, mit dem man die allen Seiten gemeinsamen Elemente ändert.
- Obere Werkzeugleiste (Top-Toolbar): Die Werkzeugleiste befindet sich oben im Editor. Von links nach rechts:
- Über das W wechseln Sie ins Dashboard,
- mit dem blauen Plus, dem Block-Inserter, fügen Sie neue Blöcke ein,
- mit dem Stift wechseln zwischen Bearbeiten und Auswählen,
- mit dem Pfeil machen Sie die letzte Änderung rückgängig
- drei waagerechte Linien öffnen die Dokumentenübersicht, eine Spalte links mit dem Blockaufbau der jeweiligen Seite .
- Speichern, Vorschau, Veröffentlichen
- mit dem schwarzen Quadrat steuern Sie das aus- oder einblenden der Einstellungen, die Block-Inspektor-Controls rechts
- die 3-Punkte führen zu Editor- und Einstellungs-Optionen, dem Code-Editor, WordPress-eigene Hilfe (empfehlenswert!) und Willkommens-Guide.
- Blockbibliothek: Dies sind die grundlegenden Bausteine, aus denen der Inhalt Ihrer Seiten und Beiträge besteht. Es gibt Blöcke für Text, Überschriften, Bilder, Listen und Tabellen. Die roten Blöcke sind speziell für die JGU, die anderen sind Standard-Blöcke.
- Block-Einstellungen (Block-Werkzeugleiste / Block-Toolbar): Jeder Block hat eigene Einstellungen, die Sie sich einerseits als Leiste über dem Block öffnen (Block-Werkzeugleiste) und rechts in der Spalte befinden (Block-Inspektor-Controls). Damit ändern Sie z.B. Größe, Farbe, Schriftart und anderes mehr.
- Sidebar: rechte Spalte mit Block- und Seiten-Einstellungen
- Inhaltsbereich: Dies ist der Hauptbereich des Editors, in dem Sie Ihre Blöcke hinzufügen und anordnen.
- Formatierungswerkzeuge: Sind in den Blöcken vorhanden, die Text enthalten. Verwenden Sie diese Werkzeuge, um den Text innerhalb Ihrer Blöcke zu formatieren, wie z.B. Kursiv- oder Fettdruck.
Zwei Hinweise: für das leichtere Arbeiten stellen Sie oben rechts bei den drei Punkten (Werkzeugleiste) und wählen Sie den obersten Punkt „obere Werkzeugleiste“, dann werden die Block-einstellungen immer oben angezeigt. Das ist übersichtlicher als mittem im Text der Seite. Verwenden Sie zum Arbeiten den Firefox, denn im Moment gibt es einen Fehler, so daß Sie Markierungen nicht sehen, wenn Sie andere Browser verwenden.
- 1 = Werkzeugleiste
- 2 = Blockbibliothek
- 3 = Block-Einstellungen
- 4 = Sidebar
- 5 = Inhaltsbereich
- 6 = Formatierungswerkzeuge
Der Block-Editor stellt jedes Bild, jeden Absatz, jedes Video als einen eigenen Inhaltsblock dar. Jeder Block hat seine eigenen Einstellungen für Farbe, Breite usw. Die Blöcke verschieben, verdoppeln oder löschen Sie. Sie finden alle Blöcke in der Block-Bibliothek. Diese öffnen Sie über das blaue Plus oben im Editor, das Plus unterhalb eines Blocks oder den vorwärtsgewandten Schrägstrich (das ist der über der 7) am Anfang eines neuen Absatzes.
- Im Dashboard: Seite > Neue Seite erstellen. Aus der AdminBar des Dashboards: Neu > Seite
- Der Titel ist nicht nur für Sie intern. Er wird im Menü, im Breadcrumb, im Tab des Browsers und als Lesezeichentext angezeigt.
- Rechte Spalte – Seiteneigenschaften:
- Aus dem Titel wird die URL erzeugt. Passen Sie die URL an! Die URL finden Sie in den Seiteneigenschaften in der rechten Spalte (Sidebar). Klicken Sie dort auf die URL. Anschließend wird darunter das Feld ‚Permalink‘ angezeigt, in dem Sie die URL der Seite ändern können.
- Ziehen Sie eine Webseite um? Jede Seite im alten Auftritt, die nach dem Umzug weiterhin findbar sein soll, muß die gleiche URL bekommen, sonst gibt es einen „Seite nicht gefunden“-Fehler!
- Ist Ihr Titel eher lang? Kürzen Sie den URL auf etwas, was Sie ohne Umbrüche auch in einer E-Mail verschicken können!
- Alle Seiten sind öffentlich! Den Schutz (Entwurf/Privat) stellen Sie selbst an und aus.
- Aus dem Titel wird die URL erzeugt. Passen Sie die URL an! Die URL finden Sie in den Seiteneigenschaften in der rechten Spalte (Sidebar). Klicken Sie dort auf die URL. Anschließend wird darunter das Feld ‚Permalink‘ angezeigt, in dem Sie die URL der Seite ändern können.
- Veröffentlichen Sie Ihre neue Seite über Veröffentlichen oben rechts.
- Überprüfen Sie Ihre neue Seite, indem Sie auf die Vorschau klicken, um sicherzustellen, dass alles korrekt angezeigt wird.
Teile einer Seite: Öffnen Sie die Dokumentenübersicht und markieren Sie die Elemente so: Klick auf das oberste. Umschalt-Klick auf das unterste. Strg-C. Maus an die neue Stelle. Strg-V . Verwenden Sie unbedingt Strg-C statt rechter Maus.
Komplette Seite: Sie können Inhalte durch copy und paste zum Beispiel in eine Seite bringen. Sie befinden sich im Blockeditor auf der Seite, deren Inhalt sie kopieren wollen. Klicken Sie auf die drei Punkte ganz rechts oben und wählen aus dem Menü Alle Blöcke kopieren. Legen Sie eine neue leere Seite an, positionieren den Cursor an den Anfang der Seite drücken strg-v.
Am Beispiel eines Studiensteckbriefs wird eine neue Seite von Grund auf erstellt. Video Tutorial für die Erstellung eines Studiensteckbriefs
Folgende Punkte wurden dort abgehandelt (Kapitelüberschriften und wann sie beginnen):
- 00:00 – Einführung
- 03:55 – Seiteneinstieg mit Bild
- 08:00 – Seiteneinstieg mit Breadcrumb
- 09:10 – Ankernavigation
- 09:47 – Abschnitte für verschiedene Hintergrundfarben (dunkelgrau, hellgrau, weiß)
- 11:00 – Ankerpunkt
- 11:30 – Überschrift / Heading
- 12:55 – Key Facts und Key Facts Element (neue geschachtelte Elemente anlegen, per drag&drop verschieben, kopieren, duplizieren).
- 16:30 – Layout für viel Text (Key Fact in breitem Layout)
- 16:40 – Vorschau für Desktop und Mobil (F12 in der Vorschauseite)
- 17:40 – Weitere Ankerpunkte mit Überschriften
- 18:30 – Aufklappbarer Bereich
- 19:00 – Kopieren aus Word, mit (Strg-V) und ohne (Strg-Shift-V) Formatierung
- 20:15 – Akkordeon
- 20:50 – Links und andere Formatierungen im Lauftext setzen
- 22:00 – Akkordeonelemente
- 23:20 – Akkordeon-Einstellungen: Alle/Eins öffnen, Suche aktivieren
- 23:50 – Schwerpunkte: Prozentangaben und Icons, Tabellarische Darstellung
- 25:50 – Spalten: Dinge nebeneinander darstellen
- 26:50 – Teaserbox (Benachrichtigungsboxen, Linklisten, Icons)
- 32:20 – Modal – Miniseite auf der Seite selbst, Darstellung in einem Extra-Fenster
- 32:50 – Prozessablauf: mit Illustrationen, Texten
- 37:00 – Testimonial: Zitattext
- 37:45 – Slider und Slider Elemente (Auf Deskop und Mobil)
- 40:00 – Bildergalerie
- 41:45 – Videos von Vimeo, Panopto und Youtube per ID in einem Slider
- 44:00 – Bild neben Text: per Block Medien und Text oder als Spalten
- 44:40 – Registerkarten / Tabs
- 46:20 – Erweiterte Liste
- 49:30 – Templateseite anlegen – alle Blöcke kopieren und per Strg-V in neue Seite einfügen
- 50:20 – Wiederverwendbare Blöcke anlegen, einbauen und pflegen
- 55:40 – Wiederverwendbaren Block als Vorlage verwenden
Eine Website besteht aus einer ganzen Reihe von notwendigen Seiten. Wie Sie Ihre Website erstmalig einrichten und die Überschreibungsvorlagen verwenden, erfahren Sie im folgenden Tutorial:
Leider passt der aktuelle Editor zunehmend nicht mehr zur Programmierung der Agentur.
Daher müssen wir seit 2025 die Version 16.8. des Gutenberg-Editors via Plugin einsetzen.
Sie merken es daran, daß Sie im Chrome und Edge markierte Stellen nicht sehen. Verwenden Sie den Firefox, wenn Sie diese Funktion benötigen.