Seiten mit Gutenberg-Editor

  1. Grundlegende Editor-Oberfläche
    • Block-Struktur verstehen
    • Hauptmenü des Editors
  2. Inhalte hinzufügen
    • Hinzufügen von Absätzen
    • Einfügen von Überschriften
    • Textformatierung
  3. Der Bereich AKTUELLES (Beiträge)
    • Hinzufügen und Editieren
    • Ausgeblendeter Text (Weiterlesen-Funktion)
    • Sortieren von Beträgen
    • Ausblenden von Beträgen
  4. Der Bereich PARTNER & REFERENZEN
    • Hinzufügen von Logos
    • Sortieren der Logos
  5. Formulareinträge
    • Zugesandte Formulareinträge einsehen
  6. Statische Inhaltselemente
    • Header
    • Footer
  7. Backup

1. Grundlegende Editor-Oberfläche

Der Gutenberg-Editor bietet eine benutzerfreundliche Oberfläche, die auf Blöcken basiert. Jeder Block repräsentiert einen Abschnitt oder eine Funktion auf Ihrer Seite. Hier ist ein Überblick über die grundlegenden Elemente:

  • Block-Struktur verstehen:
    Der Editor besteht aus einem vertikalen Stapel von Blöcken, die den Seiteninhalt repräsentieren. Jeder Block kann unterschiedliche Typen haben, wie Absatz, Überschrift, Bild, Liste, etc. Die Struktur erleichtert die Organisation und Bearbeitung verschiedener Teile Ihrer Seite.
  • Hauptmenü des Editors:
    Oben im Editor finden Sie das Hauptmenü mit verschiedenen Optionen:
    • Block hinzufügen: Hier können Sie neue Blöcke hinzufügen, um verschiedene Arten von Inhalten einzufügen.
    • Rückgängig/Wiederholen: Diese Schaltflächen ermöglichen das Rückgängigmachen oder Wiederholen von Aktionen.
    • Block-Einstellungen: Hier können Sie die Einstellungen des ausgewählten Blocks anpassen.
    • Vorschau: Zeigt eine Vorschau Ihrer Seite an, wie sie für Besucher erscheinen wird.
    • Veröffentlichen: Speichern Sie Ihre Änderungen oder veröffentlichen Sie die Seite.

2. Inhalte hinzufügen

Das Hinzufügen von Inhalten im Gutenberg-Editor ist einfach und intuitiv. Hier sind die grundlegenden Schritte, um Absätze und Überschriften einzufügen:

  • Hinzufügen von Absätzen:
    • Klicken Sie auf die Stelle in Ihrem Text, an der Sie einen neuen Absatz einfügen möchten.
    • Verwenden Sie die Schaltfläche „Block hinzufügen“ oben links im Editor und wählen Sie den Blocktyp „Absatz“ aus oder erzeugen Sie mit der RETURN-Taste einen neuen Absatz.
    • Beginnen Sie mit dem Schreiben Ihres Textes.
  • Einfügen von Überschriften:
    • Gehen Sie zum Ort, an dem Sie die Überschrift platzieren möchten.
    • Verwenden Sie die Schaltfläche Block hinzufügen und wählen Sie den Blocktyp Überschrift aus.
    • Wählen Sie die gewünschte Überschriften-Ebene (z. B. H1, H2, H3) und geben Sie den Text ein.
  • Zeilenumbrüche
    • Zeilenumbrüche werden mit gehaltener SHIFT-Taste + RETURN erzeugt

Diese Schritte bilden die Grundlage für das Hinzufügen von Textinhalten zu Ihrer WordPress-Seite. Sie können diese Techniken erweitern, um Medien, Listen und andere Elemente einzufügen, indem Sie entsprechende Blocktypen auswählen.

3. Der Bereich AKTUELLES (Beiträge)

Der Bereich AKTUELLES zeigt die Beiträge der Kategorie NEWS an. Die Beitragsliste ist über den Menüpunkt Beträge in der linken Seitenleiste zu erreichen. Die Beiträge bestehen aus einem Titel, der Überschrift, Textinhalt, Beitragsbild.
Es besteht die Option weiteren Text hinzuzufügen und auszublenden. Über einen >-Button wir der Text dann eingeblendet.

  • Hinzufügen und Editieren

Über den Menüpunkt Neuen Beitrag erstellen wird das Editierfenster für eine neuen Beitrag aufgerufen.
Bestehende Beiträge können editiert werden, indem per Mouse-Over in der Beitragsliste das Kontextmenü aufgerufen wird und der Punkt Bearbeiten aufgerufen wird.

Der Beitrag besteht aus einem Titel, welcher ausschließlich zur Identifikation des Beitrags verwendet wird.

Jeder Beitrag beginnt mit einer Überschrift H2.
Am Einfachsten lässt sich diese erstellen, indem das erste Textfeld mit der Überschrift ausgefüllt wird und dieses Textfeld dann in eine Überschrift umgewandelt wird. Das entsprechende Kontextmenü wird per Mouse-Over eingeblendet

Durch Hinzufügen einen neuen Blocks (RETURN-Taste) wird ein neuer Textabsatz hinzugefügt und die Eingabe des Inhalts kann eingegeben werden.

In der rechten Seitenleiste gibt es die Rubrik Beitragsbild. Durch Klicken in das Feld Beitragsbild festlegen öffnet sich die Medien-Bibliothek und es lässt sich ein vorhandenes Bild auswählen oder ein neues Bild hochladen und anschließend auswählen.

Durch Veröffentlichen bzw. Aktualisieren wird der Inhalt gespeichert und auf der Webseite angezeigt. Wird der Beitrag als Entwurf gespeichert, lässt sich dieser zu einem späteren Zeitpunkt über Veröffentlichen live schalten.

  • Ausgeblendeter Text (Weiterlesen-Funktion)

Soll ein Textabschnitt über den Weiterlesen-Button aus- und eingeblendet werden, muss erstmal der Marker erstellt werden, an welcher Stelle der ausgeblendete Text beginnt.

Dazu wird ein Textabsatz erstellt. Als Inhalt wird ein einzelnes Zeichen eingegeben, z.B. ein > . Anschließend muss diesem Textblock eine CSS-Klasse zugewiesen werden.
Über die rechte Seitenleiste wird der Menüpunkt Block > Erweitert geöffnet und unter CSS-Klasse die die Klassenbezeichnung read-more-link eingegeben.

Die folgenden Textblöcke werden nun auf der Webseite ausgeblendet.

Über das Kontextmenü des Blocks lässt sich dieser Block nach oben und unten verschieben.

  • Sortieren von Beträgen

Das Sortieren der Beiträge erfolgt über die Änderung des Bearbeitungsdatums.

Dazu wird in der Übersicht aller Beiträge wieder durch Mouse-Over des jeweiligen Beitrags der Punkt QuickEdit aufgerufen.
Im nun eingeblendeten Fenster kann das Datum so angepasst werden, dass sich der Beitrag an gewünschte Position verschoben wird.

  • Ausblenden von Beträgen

Im demselben Fenster wie die Sortierung geändert werden kann, lässt sich auch der Status von Veröffentlicht zu Entwurf ändern um Beiträge offline zu schalten oder vorbereitete Beiträge online zu stellen.

4. Der Bereich PARTNER & REFERENZEN

Die Logos im Bereich Partner & Referenzen werden über das Plugin WP-Carousel gesteuert. In der linken Seitenleiste kann über den Menüpunkt WP-Carousel die Liste aufgerufen werden und der Eintrag Referenzen ausgewählt und in den Bearbeitungsmodus geschaltet werden.

  • Hinzufügen von Logos

Im Bearbeitungsmodus werden ganz oben die Logos angezeigt. Im grau hinterlegten Feld Edit Image lässt sich kann die Bildgalerie bearbeitet werden.

Im Editiermodus: linke Seitenleiste > Zu Galerie hinzufügen
Es öffnet sich die Medienübersicht und es kann ein Bild ausgewählt oder hochgeladen werden.

Nachdem ein Bild ausgewählt wurde wird dies unten rechts mit Zur Galerie hinzufügen bestätigt und anschließend an derselben Position mit mit Galerie aktualisieren gespeichert.

Damit die Bilder korrekt in der Leiste dargestellt werden, müssen sie das Format 282 x 70px haben.

  • Sortieren der Logos

In demselben Bearbeitungsmodus wie das Hinzufügen erfolgt, lässt sich auch per Drag&Drop die Reihenfolge ändern.
Anschließend Galerie aktualisieren.

5. Formulareinträge

Alle zugesendeten Formulareinträge lassen sich über den Menüpunkt Ninja Forms > Einsendungen in der linken Seitenleiste aufrufen.
Dort wird oben im Pulldon-Menü das Formular Infos + Abfrage ausgewählt.

6. Statische Inhaltselemente

Die statischen Inhaltselemente Header und Footer werden nicht im üblichen Inhaltskontext bearbeitet. Beide Blöcke gehören zu den Layout- und Designelementen. Änderungen werden auf allen Seiten und Folgeseiten wirksam.

  • Header

Der Header enthält die Navigation und die Animation.
Beide Blöcke sollten nicht editiert werden.

  • Footer

Der Inhalt im Footer lässt sich editieren:

Unter Design > Website-Editor > Vorlagen > (Template-Teile) Footer werden zwei Footer-Vorlagen aufgelistet. Die Vorlage conact-footer lässt sich wie gewohnt bearbeiten.

Das Bild lässt sich über Mouse-over (auf das Bild) > Ersetzen austauschen ohne die Einstellungen zu neu eingeben zu müssen.

7. Backup

Wöchentlich werden von den wichtigsten Seitenelementen und Formatierungen automatische Backups erstellt.

Unter BackWPup > Aufträge wird eine Liste der verschiedenen Backup-Optionen angezeigt.

Mit einem Mouse-Over über den ersten Eintrag DB + Child-Theme lässt sich die Aktion Jetzt starten auswählen. Das empfiehlt sich um vor größeren Änderungen ein Backup zu erstellen und zu gewährleisten, dass sich dieser Punkt wiederherstellen lässt.