Bilder Gutenberg

Bilder, Cover und Galerie
Gutenberg Tutorial Teil 5

Letztes Update: 28-01-2020

Im 5. Teil meines Tutorials erkläre ich das Einfügen von Bildern und Galerien sowie das Erstellen eines Covers im Gutenberg Editor. Denn was wäre eine Webseite ohne Bilder?

Bilder auf Webseiten

Sowohl auf Landing Pages als auch bei Beiträge erfüllen Abbildungen die unterschiedlichsten Aufgaben. Vor allem auf der Startseite dienen sie meistens als „Eyecatcher“. Einerseits sollen sie die Aufmerksamkeit und das Interesse des Besuchers wecken und Vertrauen aufbauen. Andererseits können sie dem Besucher eine visuelle Vorstellung vom Inhalt der Seite / des Beitrags vermitteln. Oder sie verdeutlichen einen im Text beschriebenen Sachverhalt wie dies z. B. bei Infografiken der Fall ist. Manchmal lockern sie einen längeren Text aber auch nur einfach auf.

1. Tipp:
Selbst erstellte bzw. für dich angefertigte Bilder und Grafiken sind nach Möglichkeit Fotos aus dem Internet vorzuziehen.

Die Wahl eines Bildes hängt maßgeblich davon ab, zu welchem Zweck es eingesetzt werden soll. Wenn es nur als Blickfang oder zur Auflockerung dienen soll, greifen viele auf Stockfotos (Bilder von Foto-Portalen) zurück. Jedoch haben diese zwar Vorteile, aber auch gravierende Nachteile. Deshalb ist es wesentlich besser, eigene Fotos oder Grafiken zu verwenden, die du entweder selbst gemacht hast oder die ein Profi speziell für dich erstellt hat. Aber vergiss auch hierbei nicht, später unterhalb der Abbildung den Urheber (Inhaber der Rechte) bzw. die Bildquelle anzugeben.

Bildvorbereitung

Nachdem dir nun die passenden Fotos oder Grafiken vorliegen, könntest du mit dem Einbau auf deiner Webseite beginnen. Wenn da nicht die Suchmaschinenoptimierung wäre. Denn Abbildungen, vor allem Fotos, bringen eine große Datenmenge mit, die die Ladezeit deiner Webseite in die Knie zwingt. Um das zu vermeiden, solltest du jede Abbildung vor dem Hochladen bearbeiten:

  • Das Format (Höhe – Breite in px) an die Vorgaben deines Themes anpassen
  • Alle Abbildungen komprimieren z. B. mit TinyPNG (auch für jp(e)g-Dateien geeignet)

Anschließend könntest du die Bilder in die WordPress Mediathek hochladen. Oder du lädst sie an der Stelle hoch, an der du sie einsetzen möchtest, also als Block im Gutenberg Editor. Wobei ich im Folgenden sowohl Fotos als auch grafische Elemente unter dem Begriff Bilder zusammenfasse.

Möglichkeiten Bilder einzufügen

Der Gutenberg Editor bietet vier Optionen an. Zunächst erstellst du immer einen neuen Block. Im Auswahlmenü findest du in der Kategorie

  • Allgemeine Blöcke: Bild, Cover und Galerie sowie unter
  • Layout-Elemente: Medien und Text.

Abweichend von der Reihenfolge im Menü des Editors beginne ich mit dem Cover, da dieses meistens den Kopf einer Seite oder eines Beitrags bildet.

Bilder als Cover

Wie die Bezeichnung Cover (Titel einer Seite) bereits andeutet, handelt es sich um große Bilder mit Text. Um ein Cover zu erstellen, wählst du den Cover-Block aus. Anschließend hast du folgende Optionen (s. Abb. 18 oben):

  • Hochladen (vom PC),
  • Auswählen aus der WP Mediathek oder
  • mittels der angezeigten Farbfelder nur einen farbigen Hintergrund festlegen.

Nachdem du dich für eine davon entschieden hast, erscheint das Bild bzw. die Farbfläche als neuer Block. Im Zentrum befindet sich ein Textblock – Schreibe einen Titel…. Falls du ein Bild gewählt hast, ist ein dunkles Overlay voreingestellt. Jedoch kannst du die einzelnen Teile des Covers individuell anpassen. Zunächst zu den Einstellungen für das Hintergrundbild.

Anpassung des Cover-Bilds

Einerseits richtet sich die Höhe nach der Anzahl der Textzeilen und der Schriftgröße. Je länger der Text und je größer die Schrift ist, desto höher ist am Ende der Cover-Block. Wenn der Text z. B. aus einer Zeile in normaler Schriftgröße besteht, ist das spätere Cover nur ein recht schmaler Streifen. Um trotz wenig Text ein höheres Cover zu erhalten, könntest du ober- und/oder unterhalb des Textes noch einen Spacer (Abstandshalter) einfügen.

Andererseits kannst die Höhe auch durch Bewegen des blauen Punkts am unteren Rand des Bildes verringern. Falls du einen fixierten Hintergrund (Parallax-Effekt) bevorzugst, bei dem sich beim Scrollen der eigentliche Beitragsbereich nach oben über das Bild schiebt, kannst du rechts in der Seitenleiste eine Mindesthöhe in Pixeln bestimmen (s. Abb. 18 unten).

Wenn du diese Option nicht nutzt, hast du zusätzlich die Möglichkeit den Fokus des Bildes zu verschieben (s. Abb. 19). Abschließend stellst du in der Bearbeitungsleiste ein, ob das Bild links-, rechtsbündig bzw. zentriert sein soll oder du wählst weite Breite bzw. gesamte Breite aus. Außerdem passt du in der Seitenleiste die

  • Deckkraft (Schieberegler 0 bis 100%) und
  • Farbe des Overlays sowie
  • die Hintergrundfarbe (z. B. bei png-Dateien mit transparentem Hintergrund) an.

Leider ist die Beschriftung des Farbwahlbereichs etwas irreführend. Zwar bestimmst du hier die Overlayfarbe, aber gleichzeitig ist dies auch die Hintergrundfarbe. Wenn du dort beispielsweise einen Blauton auswählst, erhält das Bild ein blaues Overlay. Nachdem du die Deckkraft auf 0% verringert hast, siehst du zwar kein Overlay mehr, aber alle zuvor transparenten Bereiche des Ausgangsbildes sind nun blau.

Danach bearbeitest du den Textblock und fügst eventuell weitere Textblöcke oder Buttons etc. hinzu.

Einfache Bilder einfügen

Um ein einfaches Bild vor den Textblöcken oder als Illustration zwischen anderen Blöcken einzufügen, erstellst du wieder einen neuen Block. Diesmal klickst du in der Auswahl jedoch auf Bild. Auch hierbei entscheidest du dich zwischen

  • direktem Hochladen (vom PC),
  • Auswählen aus der WP Mediathek oder
  • Einfügen der URL eines Bildes.

Anschließend kannst du das Bild über die Bild bearbeiten-Schaltfläche jederzeit durch ein anderes Bild ersetzen. Nachdem das gewünschte Bild angezeigt wird, nimmst du folgende Einstellungen vor (s. Abb. 21 unten):

  1. Alternativen Text eingeben: Er sollte das Schlüsselwort für deinen Beitrag enthalten
  2. Eine Beschriftung hinzufügen: Hinweis auf den Rechteinhaber / die Bildquelle (und optional einen Titel)
  3. Bildgröße einstellen

Bilder anpassen

Entweder wählst du eine der vorgegebenen Bildgrößen Vorschaubild (Thumbnail) – mittel – groß – vollständige Größe aus oder du gibt die Maße in Pixeln manuell ein. Dabei solltest du aber das ursprüngliche Verhältnis von Breite zu Höhe beibehalten. Falls das Ausgangsbild das Format 1024 x 600 px hat, wäre z. B. eine Anpassung auf 341 x 200 px = ein Drittel denkbar. Dagegen wäre 300 x 200 px ungünstig, da das nicht nur die Größe, sondern auch den sichtbaren Teil des Bildes verändern würde.

Außerdem hast du die „elegantere“ Möglichkeit, das Bild über die Schaltflächen 100% – 75% – 50% – 25% anzupassen. Damit bleibt der sichtbare Teil des Originals erhalten, nur die Höhe und Breite verändern sich (s. Abb. 22).

Darüber hinaus bietet dir der Gutenberg Editor neben der Standard-Maske (Rechteck) auch noch eine Kreis-Maske an (s. Abb. 23). Letztere wäre z. B. für einen Biografie-Block geeignet, hat jedoch den Nachteil, dass nur der mittlere Teil des Bildes sichtbar ist. Zuletzt legst du über die Bearbeitungsleiste noch die Orientierung fest:

  • Links- / Rechtsbündig
  • Zentriert
  • Weite Breite: Über die gesamte Seitenbreite; Bildhöhe bleibt unverändert
  • Gesamte Breite: wie oben, aber größere Bildhöhe

Um dem Besucher zu ermöglichen, direkt durch einen Klick auf das Bild z. B. zu einem anderen Beitrag zu gelangen, verlinkst du das gesamt Bild. Dafür klickst du auf das Link-Symbol in der Bearbeitungsleiste und fügst die URL der Zielseite ein (s. auch Gutenberg Tutorial Teil 4).

Mehrere Bilder – Galerie

Wenn du auf deiner Landing Page oder in Blog-Beiträgen mehrere zusammenhängende Bilder anzeigen möchtest, erstellst du einen Galerie-Block. Einerseits kannst du auch wieder mehrere Bilder direkt von deinem PC hochladen. Andererseits ist es in diesem Fall komfortabler, die Bilder aus deiner WP Mediathek auszuwählen (s. Abb. 24).

  1. Im Block auf Mediathek klicken und
  2. die gewünschten Bilder markieren

Anschließend öffnet sich ein neues Fenster, in dem du die Reihenfolge der Bilder noch verändern kannst. Außerdem könntest du hier jedes einzelne Bild beschriften bzw. mit einem Hinweis auf den Rechteinhaber versehen (s. Abb. 25).

2. Tipp:
Insbesondere bei Galerien sollten alle Bilder im gleichen Ausgangs-Format vorliegen, so dass sie sich gleichmäßig in die Maske einfügen und nicht verzerrt oder unvollständig dargestellt werden.

Nachdem du auf Einfügen geklickt hast, passt du die Galerie an. Du legst fest, ob der gesamte Galerie-Block links-, rechtsbündig oder zentriert angezeigt wird. Oder du entscheidest dich für die Weite Breite bzw. die Gesamte Breite (s. o.).

Außerdem bestimmst du die Anzahl der Spalten (1 – 3), d. h. der Bilder pro Zeile. Wenn du mehrere Bilder-Zeilen untereinander verwenden möchtest, bestimmst du für jede einzelne Zeile die Anzahl der Spalten. Des weiteren hast du die Möglichkeit, Vorschaubilder zu beschneiden, um sie besser auszurichten (s. Abb. 26). Für eine Verlinkung der gesamten Galerie nutzt du die Option in der Seitenleiste.

Medien und Text

Um ein Bild und den (dazu gehörigen) Text in zwei Spalten nebeneinander darzustellen, benötigst du den Medien und Text-Block. Diesen findest du im Block-Auswahlmenü unter Layout-Elemente. Nachdem du den Block eingefügt hast, befindet sich auf der linken Seite die Eingabemaske für das Bild und auf der rechten der Textbereich. Die Vorgehensweise zur Bearbeitung des Text-Bereichs entspricht der bei Gutenberg-Blöcken üblichen (s. Abb. 27).

3. Tipp:
Der Medien und Text – Block wirkt am besten, wenn sich die Höhe des Bildes und die des Textbereichs in etwa entsprechen.

Auch beim Einfügen des Bildes hast du wieder die Optionen Hochladen oder Auswahl aus der WP Mediathek. Die weiteren Einstellungsmöglichkeiten unterscheiden sich jedoch gegenüber dem vorher für Bilder beschriebenen. Lediglich die Eingabe eines alternativen Textes ist dieselbe.

Block anpassen

In der Seitenleiste über dem Alt-Text findest du bei diesem Block zwei Schalter. Einerseits kannst du festlegen, ob Bild und Text auf mobilen Geräten gestapelt werden sollen. Dies ist i. d. R. sinnvoll, da nebeneinander liegende Spalten je nach Bildschirmgröße nicht optimal dargestellt werden. Andererseits kannst du das Bild auch noch zuschneiden. Wenn die Größe deines Ausgangsbildes an dein Theme angepasst ist, ist das normalerweise nicht notwendig (s. Abb. 28).

Bilder Abbildungen
Alle Abbildungen

Alle weiteren Anpassungen nimmst du über die Bearbeitungsleiste oberhalb des Blocks vor:

  1. Gesamter Block: Weite oder gesamte Breite sowie
  2. Bild links oder rechts des Text-Teils.
  3. Ausrichtung des Bildes: Vertikal oben, mittig oder unten.

In den meisten Fällen bietet sich vertikal mittig an. Falls der Textbereich jedoch höher als das Bild ist, käme für das Bild eventuell eher vertikal oben in Frage. Denn der Text sollte beispielsweise nicht oberhalb der oberen Bildkante beginnen, um dann mit der unteren Bildkante abzuschließen. Wenn du den Text nicht kürzen möchtest, dann sollte er zumindest erst in Höhe der oberen Bildkante beginnen.

Nachdem du deine Seite / deinen Beitrag nun mit Bildern verschönert hast, erkläre ich in meinem Gutenberg Tutorial Teil 6 das Einfügen spezieller Blöcken wie Zitat, Liste etc.


Gutenberg Tutorials

android apple apps bloggen browser cloud dsl-wlan e-mail foto google internetsicherheit ios macOS messenger microsoft mobilfunk onlinedienste recht seo social tutorials updates windows wordpress

Schreibe einen Kommentar