Editor und Blöcke

Inhalte für Seiten und Beiträge pflegen Sie in WordPress im sogenannten Gutenberg-Editor. Der Inhalt im Gutenberg-Editor ist in Blöcken organisiert. Blöcke können Sie nach Belieben hinzufügen, bearbeiten und auch wieder entfernen.

Generelles zum Gutenberg-Editor

Der Gutenberg-Editor öffnet sich, wenn Sie eine Seite oder einen Beitrag bearbeiten oder neu anlegen.

In der oberen Bearbeitungsleiste können Sie verschiedene Aktionen durchführen, wie beispielweise

  • über das Plus-Symbol einen Block hinzufügen
  • eine Änderung rückgängig machen
  • eine Änderung wiederherstellen
  • sich die Listenansicht aller vorhandenen Blöcke auf der Seite oder in dem Beitrag anzeigen lassen
  • die Seite oder den Beitrag veröffentlichen,
  • die Seite oder den Beitrag auf einen Entwurf umstellen (diese ist dann nicht mehr öffentlich sichtbar)
  • sich eine Vorschau des aktuellen Bearbeitungsstandes anzeigen lassen,
  • die Seite aktualisieren (ihre Änderungen speichern)
  • das Einstellungsmenü ein- oder ausblenden

Inhaltspflege mit Blöcken

Über das Plus-Symbol in der oberen Bearbeitungsleiste können Sie Blöcke über Drag & Drop hinzufügen. Für jeden Inhaltstyp gibt es auch verschiedene Blocktypen. Wählen Sie sich aus der Liste, die sich auf der linken Seite Ihres Bildschirmes öffnet, den gewünschten Block aus, oder suchen Sie nach einem bestimmten Block über das Suchfeld.

Einige Einstellungen für den Block oder bestimmte Teile (z. B. Wörter / Wortgruppen) nehmen Sie nicht in den allgemeinen Blockeinstellungen in der Sidebar rechts vor, sondern nutzen den Menübalken, der sich über jedem Block befindet. Dort können Sie auch beispielsweise über das Symbol mit den drei Punkten verschiedene Aktionen durchführen, wie beispielsweise einen Block löschen, duplizieren, kopieren, …

Auch in der Listenansicht können Sie mit einem Klick auf die drei Punkte an der Seite eines jeden Blockes verschiedene Aktionen durchführen, wie beispielsweise einen Block löschen, duplizieren, kopieren, …

Einen Block (zeitgesteuert) ein- und ausblenden

In den Blockeinstellungen in der Sidebar rechts finden Sie die Visibility-Einstellung. Diese ist für jeden Block(typ) möglich: Mit “Hide Block” können Sie festlegen, ob der ausgewählte Block verborgen werden soll (Sie sehen diesen dann nur im Editor, nicht im Frontend). Dies ist hilfreich, wenn Sie Inhalte wie Texte bereits auf einer veröffentlichten Seite oder einen veröffentlichten Beitrag formulieren, aber noch nicht veröffentlichen wollen.

Sie haben auch die Möglichkeit, eine bestimmte Zeitspanne zu definieren, in welcher der ausgewählte Block öffentlich sichtbar sein soll. Beispiel für einen Anwendungsfall: Sie möchten mit einer Grafik auf Ihrer Startseite auf eine Veranstaltung aufmerksam machen. Nachdem die Veranstaltung stattgefunden hat, soll die Grafik wieder verschwinden – dies können Sie hier einstellen, ohne selbst nach der Veranstaltung daran denken zu müssen, den Block wieder zu löschen.

Unter “User Role” können Sie gegebenenfalls noch auswählen, wenn der Block nur für einige Nutzergruppen (z. B. Redakteure) sichtbar sein soll.

Des Weiteren können Sie unter “Screen Size” festlegen, für welche Endgeräte Sie den Block gegebenenfalls ausblenden möchten.

Blocktypen

Folgend erhalten Sie eine Übersicht über die gebräuchlichsten Blocktypen. Möchten Sie mehr über einen Block erfahren, wofür diese einsetzbar sind und welche unterschiedlichen Einstellungsmöglichkeiten diese bieten, klicken Sie auf den jeweiligen Namen:

Überschrift

Fügen Sie mit diesem Block Überschriften ein. Über die Menüleiste können Sie auswählen, welcher Hierarchieebene die Überschrift angehört (H1 bis H6).

In den Blockeinstellungen auf der rechten Seite können Sie ggf. noch eine individuelle Schriftgröße und das Design der Überschrift festlegen, außerdem Schriftfarbe, Hintergrundfarbe der Überschrift oder Link-Farbe einstellen. Nehmen Sie hier keine individuellen Einstellungen vor, wird automatisch die Einstellung vom Theme übernommen – wir empfehlen diese auch beizubehalten für ein einheitliches Erscheinungsbild Ihrer Website.

Tipp vom SEO-Experten: Es sollte immer nur eine H1-Überschrift auf einer Seite oder in einem Beitrag existieren, diese entspricht automatisch schon dem Seitentitel, den Sie für einen Beitrag oder eine Seite ganz oben im Editor festlegen. Fügen Sie einen Überschrift-Block ein, wählt WordPress automatisch schon die H2, also die rangniedrigere Überschrift bezogen auf den Seitentitel.


Absatz

Mit dem Absatz-Block können Sie Texte / Absätze schreiben.

In den Blockeinstellungen auf der rechten Seite können Sie ggf. noch eine individuelle Schriftgröße und eine Schriftfarbe, Hintergrundfarbe des Textes des gesamten Absatzes oder Link-Farbe einstellen. Nehmen Sie hier keine individuellen Einstellungen vor, wird automatisch die Einstellung vom Theme übernommen – wir empfehlen diese auch beizubehalten und individuelle Farb- und Schriftgrößen nur für Hervorhebungen zu nutzen.

Mit der Option “Handwriting” verleihen Sie Ihrem Text ein handgeschriebenes Aussehen. Wir empfehlen allerdings, dies nur für bestimmte Textabsätze, Wörter oder Wortgruppen – beispielsweise für Zitate, als persönliche Unterschrift vom Autor eines Beitrags / Ansprechpartners o. Ä. – zu verwenden und nicht für den gesamten Text einer Seite oder eines Beitrags.

Über den Menübalken können Sie beispielsweise die Textausrichtung anpassen und verschiedene Formatierungen / Hervorhebungen für Teile des Textes (Wörter, Wortgruppen) vornehmen. Markieren Sie Ihren Text, den Sie entsprechend hervorheben möchten und klicken Sie im Menübalken auf das entsprechende Symbol (Beispiel: “B” für Fettmarkierung des ausgewählten Textes, “I” für Kursivschreibung, das Link-Symbol, um hinter dem markierten Text einen Link zu hinterlegen u. v. w. m.

Tipp für das Hinterlegen von Links: Möchten Sie eine interne Verlinkung setzen, so müssen Sie nicht die komplette URL kopieren und einfügen, sondern können im Suchfeld anfangen, den Seitentitel einzutippen – WordPress schlägt Ihnen dann sowohl Seiten als auch Beiträge vor, die auf Ihrer Website bereits existieren. Mit einem Mausklick auf die entsprechende zu verlinkende Seite / den Beitrag setzen Sie die Verlinkung fest.


Spalte

Dieser Block bietet die Möglichkeit, den Inhalt Ihrer Seite oder Ihres Beitrags in Spalten nebeneinander zu organisieren.

Nachdem Sie eine Anfangsvariante (Anzahl + Anordnung der Spalten) gewählt haben, können Sie auch über die Blockeinstellungen für den Block “Spalten” nachträglich die Anzahl der Spalten (bis zu maximal 6) über den Schieberegler festlegen, oder den Innenabstand der Spalten zu den darin befindlichen Blöcken festlegen.

Auf Mobilgeräten stapeln: Standardmäßig ist festgelegt, dass die Darstellung der Spalten auf Mobilgeräten untereinander platziert (gestapelt) ist. Wenn Sie möchten, dass die Inhalte trotzdem, auch auf Mobilgeräten nebeneinander dargestellt werden, dann deaktivieren Sie die Option.

Bei Bedarf können Sie noch Farben für Text, Hintergrund oder Linkfarbe festlegen.

Innenabstand und Farbe können Sie auch pro einzelne Spalte in den Blockeinstellungen einstellen. Außerdem können Sie noch nachträglich anpassen, welche Breite die jeweils ausgewählte Spalte haben soll. Über den Menübalken legen Sie bei Bedarf die vertikale Ausrichtung der Inhalte (oben, mittig oder unten) in der ausgewählten Spalte fest.

Über die Plus-Symbole fügen Sie Blöcke in die jeweiligen Spalten ein. Hier können Sie entweder nach bestimmten Blöcken suchen, oder über “Alle durchsuchen” die Liste aller Blöcke zur Auswahl angezeigt bekommen. Art und Anzahl der Blöcke sind hier nicht begrenzt.

Wir empfehlen, für die Organisation der Inhalte in den Spalten, vor allem, wenn Sie mehrere Blöcke in mehreren Spalten anordnen möchten, die Listenansicht zu verwenden. Sie vereinfacht die Übersicht und Anordnung der einzelnen Blöcke.


Gruppe

Mit dem Block “Gruppe” gruppieren Sie einzelne, beliebig viele und unterschiedliche Blöcke. Dies erleichtert zum Beispiel das Verschieben von Inhalten an eine andere Stelle oder das (zeitgesteuerte) Ausblenden (ANKERLINK) von Inhalten, die aus mehreren Blöcken bestehen.

Auch hier können Sie wieder Style-Einstellungen vornehmen, wie beispielsweise zum Layout der Gruppe, Farben oder einen Rahmen festlegen.


Bild

Mit diesem Block fügen Sie Bilder und Grafiken aus der Mediathek auf Ihre Seite oder in Ihren Beitrag ein. Sie haben auch die Möglichkeit, über diesen Block direkt neue Bildinhalte in die Mediathek einzuspielen.

WordPress bietet keine Möglichkeit, Bilder umfangreich zu bearbeiten – nur einige Grundeinstellungen können Sie vornehmen, wie in unserer Anleitung zur Mediathek beschrieben. Bearbeiten Sie Ihre Bilder und Grafiken daher am besten schon vor dem Upload.

In den Blockeinstellungen können Sie noch einige Style-Einstellungen am Bild vornehmen. Wenn Sie möchten, dass Ihr Bild abgerundet dargestellt wird, stellen Sie bei Stil “Abgerundet” ein.

Abgerundete Ecken verleihen Sie Ihrem Bild mit der Option “Rahmen” – hier können Sie den Radius des Rahmens mit dem Schieberegler selbst festlegen.

Im Abschnitt “Bildeinstellungen” legen Sie noch bei Bedarf die Größe des Bildes fest. Wir empfehlen, hier die Größe des Bildes bei Bedarf noch zu reduzieren, um die Performance Ihrer Website zu optimieren. Laden Sie beispielsweise Originalbilder mit einer großen Dateigröße hoch, aber Sie möchten diese nur in einer Spalte mit einer Größe von 300 x 150 Pixel darstellen, dann macht es Sinn, die Bildgröße zu reduzieren, indem Sie hier beispielsweise “Mittel” auswählen.

Des Weiteren können Sie einen Alt-Text (= Alternativer Text) zum Bild ergänzen. Wir empfehlen, für jedes Bild einen Alt-Text festzulegen. So können Menschen mit Einschränkungen, die beispielsweise einen Screenreader nutzen, Inhalte Ihrer Website besser verstehen, auch wenn sie die Bilder nicht sehen können.


Neueste Beiträge

Dieser Block zeigt eine Auflistung der neuesten Beiträge an. Diesen können Sie gut für eine Übersichtsseite für News, Pressemitteilungen oder aktuelle Informationen nutzen. Über die Menüleiste können Sie zwischen zwei Layouts wählen: Listenansicht (alle Beiträge werden untereinander dargestellt) und Rasteransicht (die Beiträge werden in einem Spalten-Layout dargestellt).

In den Blockeinstellungen haben Sie noch folgende weitere Einstellungsmöglichkeiten für den Block:

Einstellungen für Beitragsinhalte: über den Schieberegler können Sie festlegen, ob ein Beitragsinhalt mit in der Übersicht angezeigt werden soll. Ist der Regler aktiviert, haben Sie die Möglichkeit zwischen folgenden Inhaltstypen zu wählen:

  • “Textauszug”: Hier wird der für den jeweiligen Beitrag in den Beitragseinstellungen festgelegte Textauszug angezeigt. Dabei können Sie noch die maximale Anzahl der Wörter einstellen, die angezeigt werden sollen. Sollte bei einem Beitrag kein Textauszug festgelegt sein, wird der Anfang des tatsächlichen Beitragstextes hinterlegt, dabei aber nur so viele Wörter, wie von Ihnen bei der maximalen Anzahl an Wörtern im Textauszug festgelegt.
  • “Vollständiger Beitrag”: Der vollständige Inhalt (Text) des Beitrages wird angezeigt.

Beitrags-Meta-Einstellungen: Hier haben Sie die Möglichkeit festzulegen, ob Name des Autors, der den Beitrag verfasst hat, und das Datum der Veröffentlichung (Beitragsdatum) angezeigt werden sollen.

Beitragsbild-Einstellungen: Legen Sie fest, ob das Beitragsbild angezeigt werden soll. Nach Aktivierung des Schiebereglers haben Sie noch die Möglichkeit, Einstellungen für die Bildgröße und Bildabmessungen (Breite, Höhe, Bildausrichtung) vorzunehmen. Des Weiteren können Sie festlegen, ob ein Link zum Beitragsbild hinzugefügt wird – das heißt, dass Besucher mit Klick auf das Bild auf den Beitrag selbst gelangen.

Sortieren und Filtern: Hier legen Sie fest, wie die Beiträge sortiert werden sollen (von Neu nach Alt, von Alt nach Neu, von A bis Z oder von Z bis A).
Geben Sie unter “Kategorien” die Kategorien ein, dessen Beiträge in der Übersicht angezeigt werden sollen. Diese Option ist hilfreich, wenn Sie verschiedene Themengebiete (Kategorien) für Ihre Beiträge haben und diese auch auf unterschiedlichen News-Übersichtsseiten darstellen wollen. Tragen Sie nichts ein, werden die Beiträge aller Kategorien angezeigt.
Des Weiteren können Sie auch nur Beiträge eines bestimmten Autors anzeigen lassen.
Unter Anzahl Elemente legen Sie fest, wie viele Beiträge Sie hier anzeigen lassen möchten. Wenn Sie dies nicht begrenzen wollen (sprich: alle Beiträge angezeigt werden sollen), ziehen Sie den Regler ganz nach rechts. Haben Sie die Layoutoption “Rasteransicht” gewählt, können Sie nun auch noch die Anzahl der Spalten festlegen, in der die Beiträge angeordnet werden sollen.

Alternativ können Sie auch eine Beitragsliste aus den Vorlagen verwenden.


Karte

Mit dem Karten-Block fügen Sie einen selbst gewählten Ausschnitt einer Google Maps-Karte auf Ihrer Website ein, um Besuchern beispielsweise die Lage Ihrer Einrichtung zu zeigen.

In den Blockeinstellungen bei “Adresse” geben Sie die Adresse ein, die angezeigt werden soll. Dabei reicht manchmal auch schon der Name Ihrer Einrichtung, ohne die komplette Adresse eingeben zu müssen.

Bei Zoom legen Sie bei Bedarf über den Schieberegler fest, wie weit Sie in die Karte reinzoomen möchten. Dabei kommt es darauf an, wie viel Sie vom Umkreis Ihrer Adresse darstellen wollen.

Über den Schieberegler bei “Höhe” bestimmen Sie die dargestellte Höhe des Blocks, also des Ausschnitts der Karte.


Akkordeon

Das Akkordeon-Element ermöglicht das Ein- und Ausblenden von Inhalten. Es besteht zum einen aus einer Überschrift, welche permanent dargestellt wird. Hier können Sie auch die Hierarchie-Ebene (H2, H3, …) individuell festlegen.

Mit dem Klick auf das Plus-Symbol neben der Überschrift wird der Inhalt des Akkordeons dann eingeblendet.

Die Inhalte des Akkordeons können Sie individuell bestimmen, es stehen Ihnen alle vorhandenen Blöcke des Gutenberg-Editors zur Auswahl.

Dieser Block eignet sich beispielsweise hervorragend für einen FAQ-Bereich auf Ihrer Website, oder wenn Sie Haupt-Informationen gebündelt / auf einem Blick darstellen, dem Nutzer aber bei Bedarf im Einzelnen nochmal detailreich erläutern möchten.

Einstellungsmöglichkeiten für den Akkordeon-Block gibt es folgende:

  • Open by Default: Aktivieren Sie diese Option, ist der Inhalt des Akkordeon-Blocks ständig sichtbar (ausgeklappt)
  • Click to Close: Ermöglicht, dass ein Akkordeon-Block, welches geöffnet wurde, wieder geschlossen werden kann.
  • Auto Close: Der zuletzt geöffnete Akkordeon-Block wird automatisch geschlossen, sobald ein anderer geöffnet wird.
  • Scroll to Accordion Item: Die Seite scrollt automatisch zum Titel des Akkordeon-Blocks herunter, wenn Sie es öffnen.

Diakonie Losungen

Mit dem Block “Diakonie Losungen” wird die aktuelle Losung des Tages angezeigt. Der Block wird automatisch täglich aktualisiert, sodass für Sie kein redaktioneller Pflegeaufwand entsteht.


Bildergalerie (WPCarousel)

Mit dem Block WPCarousel wählen Sie eine vorher in der Administration unter WPCarousel konfigurierte (oder von der V2 migrierte) Bildergalerie aus, welche auf Ihrer Seite oder in Ihrem Beitrag angezeigt werden soll. Die Auswahl erfolgt über die Blockeinstellungen über die Dropdownliste bei “Select a shortcode”.


Bildergalerie mit Lightbox (Gutenslider Pro)

Mithilfe des Blocks “Gutenslider Pro” können Sie eine Bildergalerie mit Lightbox anlegen. Mehr dazu in unserer Anleitung zur Bildergalerie mit Lightbox.


Formulare (WPForms)

Mit dem Block WPForms fügen Sie ein vorher in der Administration bei WPForms angelegtes Formular ein. Über die Dropdownliste wählen Sie das gewünschte Formular aus.

In den Blockeinstellungen können Sie bei Bedarf noch festlegen, ob der Formulartitel und die Beschreibung angezeigt oder nicht angezeigt werden sollen.

Wie man Formulare anlegt und bearbeitet, lesen Sie in unserer Anleitung zu Formularen (WPForms).


Veranstaltungskalender (Mini Calendar)

Über den Veranstaltungskalender können sich die Besucher Ihrer Website über aktuell geplante Veranstaltungen informieren. Dargestellt wird ein digitaler Kalender, darunter werden die jeweiligen Veranstaltungen des ausgewählten Tages aufgelistet.


Veranstaltungsliste

Die Veranstaltungsliste stellt alle aktuell geplanten Veranstaltungen als Liste dar. Sie können hier einen Titel für die Liste festlegen, außerdem filtern, welche Veranstaltungen angezeigt werden sollen, basierend auf der Kategorie der Veranstaltung (Taxonomy).

Des Weiteren können Sie festlegen, welche Informationen angezeigt werden sollen (Preis, Veranstaltungsort, Veranstalter, …), aber auch, wer / welche Nutzer mit bestimmen Rollen (Administrator, Redakteur, …) die Liste überhaupt sehen dürfen.


Video

Mit diesem Block können Sie Videos einfügen – auch hier gilt: WordPress hat kein integriertes Videobearbeitungsprogramm, das Video wird so wiedergegeben, wie Sie es hochladen. Bearbeiten Sie das Video daher, wenn gewünscht, vorher in einem separaten Videobearbeitungsprogramm und laden Sie es dann hoch.

Die maximale zulässige Dateigröße für den Upload beträgt 100 MB.

In den Blockeinstellungen können Sie dann noch folgendes festlegen:

  • Automatische Wiedergabe: Sobald ein Besucher die Seite oder den Beitrag aufruft, wird das Video automatisch wiedergegeben.
  • Schleife: Das Video wird in Endlosschleife abgespielt, d. h. sobald es zu Ende abgespielt wurde, beginnt es erneut von vorn.
  • Stummgeschaltet: Der Ton des Videos ist standardmäßig ausgeschaltet.
  • Wiedergabe-Steuerung: Hier können Sie einstellen, ob die Wiedergabe-Steuerung des Videos gegebenenfalls deaktiviert werden soll. Achtung: Somit kann der Nutzer das Video nicht mehr selbst steuern.
  • Inline abspielen: Mit dieser Funktion wird das Video auf Mobilgeräten nicht im Vollbildmodus, sondern innerhalb der Seite abgespielt.

Manchmal macht es Sinn, dem Video ein separates Vorschaubild (sogenanntes Thumbnail) zu geben. Dieses können Sie unter “Vorschaubild” aus der Mediathek auswählen. Legen Sie kein eigenes Vorschaubild fest, zeigt WordPress als Vorschaubild i. d. R. ein Standbild des ersten Videoframes.

Möchten Sie Ihren Nutzern größere oder längere Videodateien zur Verfügung stellen, nutzen Sie eine externe Plattform (wie z. B. YouTube, Vimeo usw.), über die Sie die Videos veröffentlichen und hier mithilfe eines entsprechenden Blocks einbetten. Zum Einbetten eines Videos von externen Plattformen benötigen Sie nur die URL des Videos.


Individuelles HTML

Mithilfe des Blocks “Individuelles HTML” können Sie externe, individuelle Inhalte hinzufügen, wie beispielsweise Angebote aus Stellenbörsen oder Seminarangebote aus einem externen Bildungsprogramm.

Voraussetzung ist, dass Ihr externes Programm die Möglichkeit bietet einen HTML-Code (Snippet) zu erzeugen, den Sie dann auf Ihrer Website einbinden können.

Den erzeugten Code kopieren Sie dann einfach in das Element “Individuelles HTML” und der Inhalt wird auf der Website angezeigt.

Haben Sie den Code eingesetzt, können Sie sich im Bearbeitungsmodus der Seite eine Vorschau des Snippets anzeigen lassen

Beispiel für ein individuelles HTML: Das Spendenformular der Diakonie Mitteldeutschland