Gutenberg – Tipps & Tricks, Teil 3: Bilder & Buttons

Herzlich willkommen zu Teil 3: Gutenberg Tipps & Tricks. In diesem Beitrag geht es vor allem um das Einfügen von Bildern mit Gutenberg. Im letzten Abschnitte findet Ihr noch einen kleinen Tipp zum Thema Buttons.

Bilder mit Gutenberg

Das ist ein ärgerlicher Punkt und ich hoffe, dass dieser in den nächsten Gutenberg – Updates behoben wird. Wenn Du ein Foto in einem Block einfügst, dann verdeckt das Foto den darüberliegenden Text. Dies kannst Du verhindern, indem Du oberhalb des Fotos einen Platzhalter einfügst. Für mein letztes Projekt hat eine Höhe von 70px gut funktioniert. Wenn Du mit Spalten arbeitest, achte darauf den Platzhalter in der jeweiligen Spalte einzufügen.

Text und Bild mit Gutenberg

Die einfachste Variante ist, mit den Spalten von Gutenberg oder CoBlock zu arbeiten und eine Spalte für den Text und die andere Spalte für das Bild zu nutzen (nebeneinander oder auch übereinander).

Zusätzlich bietet Gutenberg zwei weitere Möglichkeiten:

a) Inline Bild – Wie Du siehst, kannst Du hierüber ein Bild einfügen. Allerdings kann weder das Bild bearbeitet werden, noch können die Abstände zwischen Bild und Text manipuliert werden. Das Ergebnis gibt nichts wünschenwertes her.

b) Medien und Text (über Layout-Elemente)

Hier können die Schriftgröße und die Farbeinstellungen geändert werden (in jedem Block individuell).

In der ersten Gutenberg-Version war dieses Element eine Katastrophe, aber mittlerweile funktioniert es auch an allen Breakpoints gut. Und das Bild passt sich den unterschiedlichen Displays gut an.

Schade ist weiterhin, dass keine Alt-Attribute für das Bild eingegeben werden können. Und bei längeren Texten ist die Bildposition nicht immer wünschenswert.

Abstandhalter – Seitenabsturz

Wenn ich die Höhe eines Abstandhalters ändere, stürzt mir die Seite häufig ab. In diesem Fall, kann man zwar einen Moment warten, aber in der Regel muss man die Seite verlassen und neu aufrufen. Meistens ist die Änderung gespeichert. Die Abstürze sind ärgerlich, aber ich bin sicher, dass auch dieser Punkt mit einem der nächsten Updates entfällt.

Button mit eigener Farbe und Hover (Atomic Blocks)

Die Buttons unter Gutenberg sind noch nicht ganz ausgereift. Unter anderem ist es nicht möglich eine individuelle Farbe zu nutzen. Wird eine individuelle Farbe eingegeben wird, färbt sich der gesamte Block, so dass nur noch der Text des Button sichtbar ist.

Atomic Blocks bietet eine gute Alternative zu den Gutenberg Button, mit mehr Auswahl und dem zusätzlichen Vorteil, dass diese Button einen Hovereffekt haben.


Mehr Gutenberg Tipps & Tricks:

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.