Bloecke Cat Medien

Block Bild

Name des Blocks: Bild
Englische Bezeichnung: Image
Ist in der Sektion: Medien
Getestet mit WordPress-Version: 5.6
Überarbeitet am: 1. November 2020
Getestet mit WordPress-Theme: Twenty Twenty
Block Bild

Werkzeugleiste

Spalten

Alle Blöcke können in Spalten umgewandelt werden. Klickt man auf das erste Icon der Block-Werkzeugleiste wird ein Menü aufgeklappt. 

Dort wurde mit WordPress 5.6 die Option “Spalten” hinzugefügt. Das fehlt auf einigen Abbildungen.

Icon mit Pfeil nach oben/unten

Wenn mehr als ein Block in den Inhaltsbereich eingefügt wird, erhält die Block-Werkzeugleiste zwei weitere Icons. Auf dem Bild rechts wird das Icon mit den Pfeilen nach oben und nach unten hervorgehoben.

Durch Klick auf eins der Pfeile wird der Block in die entsprechende Richtung bewegt.

Icon mit Drag-and-Drop-Funktion

Dieses Icon gibt es seit WordPress 5.5.2. Klick darauf, Mauszeiger gedrückt halten und den Block an die gewünschte Stelle ziehen.

Beide Icons sind auf den meisten hier abgebildeten Block-Werkzeugleisten nicht zu sehen.

Seitenleiste

Beitrag oder Seite statt Dokument

In der rechten Seitenleiste hieß der erste Tab bislang immer Dokument.

Dies wurde nun geändert, je nachdem, ob man an einer Seite oder einem Beitrag arbeitet, steht dort der entsprechende Name.

Für diese Änderung wurden die Abbildungen auf gutenberg-editor.de nicht extra neu erstellt.

Theme Twenty Twenty-One

Zusätzliche Styles

Alle Abbildungen auf gutenberg-editor.de wurden mit dem Theme Twenty Twenty erstellt. Mit WordPress 5.6 gibt es ein neues Standard-Theme: Twenty Twenty-One.

Im Großen und Ganzen ähneln sich die Darstellungen im Adminbereich. Doch hin und wieder hat das neue Theme zusätzliche Styles, zum Beispiel beim Block Bild die Styles Frame und Borders (Rahmen). 

Farbtafeln

Das neue Theme Twenty Twenty-One stellt andere Auswahlfarben zur Verfügung als das Theme Twenty Twenty.

Rechts ist oben die Farbtafel von Twenty Twenty und darunter die von Twenty Twenty-One zu sehen.

Selbstverständlich stehen in beiden Themes unter dem Link “individuelle Farbe” alle denkbaren Farben zur Verfügung.

Generell gilt: Jedes Theme kann hinsichtlich Darstellung variieren. Die Grundelemente jedoch sollten sich kaum unterscheiden.

Beschreibung: Block Bild

Der Block Bild ermöglicht das Einfügen eines einzelnen Bildes, das man vom Rechner hochladen, aus der Mediathek auswählen, per Drag-and-drop hineinziehen oder über das Setzen eines Links einfügen kann.

Die Größe des Bildes kann über die Seitenleiste, aber auch über Anfasser direkt am Bild (blaue Punkte rechts und unten) geändert werden. Die Proportionen des Bildes bleiben unverändert.

Über Styles (Bildstile) besteht die Möglichkeit, das Bild abgerundet darzustellen.

Unterhalb des Bildes besteht die Möglichkeit, eine Bildunterschrift (Caption) einzufügen.

Werkzeugleiste

Der Block Bild kann über die Werkzeugleiste links, zentriert oder rechts ausgerichtet werden und auf die Inhaltsbreite oder Bildschirmbreite vergrößert, bearbeitet (ausgetauscht) und verlinkt werden. 

Ein Klick auf das Icon „Zuschneiden“ verändert die Werkzeugleiste und weitere Icons werden sichtbar, über die man das Bild zuschneiden, Drehen oder mittig hinein zoomen kann.

Unterhalb des Bildes kann die Bildunterschrift über eine weitere Werkzeugleiste formatiert werden, siehe Spalte “Werkzeugleiste”.

Seitenleiste

Die Seitenleiste bietet zusätzlich die Optionen, einen ALT-Text und/oder einen HTML-Anker einzutragen, die Bildgröße zu ändern und das Bild mit abgerundeten Ecken einzufügen. Das Drop-down-Menü “Bildgröße” stellt die physisch gespeicherten Bilder/Bildgrößen (Vorschaubild, Mittel, Groß, Vollständige Größe) zur Verfügung, die im Adminbereich unter Einstellungen –>  Medien eingerichtet wurden.

Vorsicht! Wählt man hier zum Beispiel “Vorschaubild” aus, wird das kleine Bild eingefügt. Ändert man nun unter “Bildabmessungen” Breite oder Höhe, wird dieses kleine Bild vergrößert und sehr unscharf und pixelig.

Theme Twenty Twenty-One

Das neue Standard-Theme von WordPress 5.6 fügt 2 weitere Optionen zum Block Bild hinzu: Rahmen und Frame.

Twenty Twenty-One ansehen: Stand 1.11.2020

Rahmen

3px breite schwarze Umrandung (Breite wird dynamisch berechnet)
CSS-Klasse: is-style-twentytwentyone-border

2021 Bild Border
Bitte aufs Bild klicken

Frame

3px breite schwarze Umrandung mit 20px Abstand zum Bild (Breite und Abstand werden dynamisch berechnet)
CSS-Klasse: is-style-twentytwentyone-image-frame

2021 Bild Frame
Bitte aufs Bild klicken

Werkzeugleiste

T Bild 01
T Bild 02
T Bild 03

Von links nach rechts:

  1. Block-Typ ändern
  2. Ausrichtung und  Breite
    1. Block links ausrichten
    2. Block zentrieren
    3. Block rechts ausrichten
    4. Block  auf Bildschirmbreite
    5. Block  auf Inhaltsbreite
  3. Link
  4. Zuschneiden
    1. Zoomen
    2. Seitenverhältnis
    3. Drehen
  5. Ersetzen
  6. Weitere Optionen

Bildunterschrift

  1. Text fett markieren
  2. Text kursiv markieren
  3. Link
  4. Dreieck
    1. Text durchstreichen
    2. Hochgestellt
    3. Inline-Bild
    4. Code-Auszeichnung
    5. Textfarbe
    6. Tiefgestellt
Formatierungen ansehen
Formatierungs Icons
Zum Vergrößern Klick aufs Bild
Tastaturkürzel ohne eckige Klammern ausführen.

Seitenleiste

Bild eingefügt

S Bild 03

WordPress 5.3

Video-Anleitung zum Block Bild

Mit Klick auf das Bild wird eine Verbindung zu YouTube hergestellt, was datenschutzrechtliche Relevanz hat. Mehr dazu in der Datenschutzerklärung.

Funktionsübersicht: Block Bild

Block-Kategorie:
Medien
Block-Ausrichtung:
Keine, Links, Rechts, Zentriert
Block-Breite (Theme):
Bildschirmbreite, Inhaltsbreite
Beschriftungs-Formatierung:
Durchgestrichen, Fett, Hochgestellt, Inline-Bild, Inline-Code, Kursiv, Textfarbe, Tiefgestellt
Beschriftungs-Link:
Ja
Bild-Größe:
Bildschirmbreite, Gespeicherte Größen, Inhaltsbreite, Nur proportional, Per Drag-and-drop
Link auf Bild:
Ja
Link auf Bildtext:
Ja
Bildtext-Formatierung:
Durchgestrichen, Fett, Inline-Bild, Inline-Code, Kursiv
Block-Typ-Umwandlung in:
Sonstiges:
Abgerundete Ecken, Drehen, HTML-Anker, Zoom, Zuschneiden
Änderung in Block-Stil:
Abgerundet, Standard
Standard-Stil festlegen:
Ja
CSS-Klasse (Block-Stil):
is-style-default, is-style-rounded
Mit Block Classic erstellbar:
Ja, minus minus abgerundete Ecken, Drehen, Zoom, Zuschneiden
Scroll to Top