WordPress: Inline Elemente Block – so fügst du ein Bild zum Text hinzu

inline-elemente-block-06

Dieser Beitrag zeigt dir den Inline Elemente Block im neuen Gutenberg Editor von WordPress und wie du damit ein Bild zum Text hinzufügen kannst.

Der Inline Elemente Block

inline-elemente-block-01

Den Inline Elemente Block findest du unter > Inline Elemente > Inline Bild. Mit diesem Block kannst du Bilder zu einem Text hinzufügen.

Während du im Paragraph Block nur reinen Text einfügen kannst, und im Image Block nur Bilder hinzufügen kannst, kannst du:

im Inline Elemente Block zu deinem Text auch ein Bild hinzufügen.

Und so sieht’s aus:

Inline Block Element im  Frontend:

inline-elemente-block

Inline Block Element im Backend :

inline-elemente-block-02

Achtung: Das Backend ist an meine persönlichen Styles angepasst und weicht vom Gutenberg Standard Design etwas ab, bzw. dort ist der Hintergrund weiß, hat keine Borders und auch eine andere Schriftart 🎉.

 Inline Elemente Block hinzufügen.

Normalerweis kannst du einen neuen Block hinzufügen, indem du einen Paragraph Block öffnest, und dort einen / Slash eingibst gefolgt von dem Anfangsbuchstaben des Blocks, den du suchst.

Allerdings wirst du auf diese Weise in der Liste den Inline Elemente Block nicht finden. Dafür musst du ganz oben links auf den Inserter Button – Plus im Kreis- klicken, um die Block Bibliothek zu öffen.

Inline Elemente Block öffnen

Füge einfach einen neuen Paragraph Block hinzu und fülle diesen mit Text. Dann führe den Cursor an die Stelle, wo du das Inline Bild haben möchtest und gehe nun links oben auf den Inserter Button und wähle den Inline Block aus.

Es öffnet sich die Mediathek und du kannst dein Bild auswählen. Danach kannst du das Bild noch in der Größe ändern. Dazu klicke einfach auf das Bild. Achtung ! Es gibt keinen Bleistift, zum bearbeiten. Aber blaue Punkte. An denen kannst du das Bild in der Größe verändern.

Anwendung vom Inline Bild – was sieht gut aus

Die Beispiele oben zeigen dir ein Inline Bild, welches sich nicht optimal in den Textfluss einfügt. Aus diesem Grund ist es am besten, du wählst ein sehr kleines Bild und spielst ein wenig herum, bis das Bild ungefähr Zeilenhöhe hat.

Dann kannst du auch auf das Bild einen Link setzen.

Inline Bilder – zwei Beispiele

inline-elemente-block-04

Dieses schmale WKO Badge eignet sich zum Beispiel sehr gut für so ein Inline Bild. Ausserdem kann man sehr gut einen Link auf das Bild setzen. Bilder in dieser Größe waren immer sehr schwer zwischen den Text “ reinzubringen “ .

FAZIT:

Der Inline Elemente Block ist eine coole Ergänzung bzw. Erweiterung, kleine Bilder ilnine zwischen Text einzufügen und ihnen auch noch einen Link zuzuweisen.

Für größere Bilder eigenet sich ein Inline Elemente Block weniger, weil dadurch unschöne Weißräume entstehen, siehe Beispiele am Anfang des Beitrages.

Ich möchte hier noch einen Beitrag verlinken, der mir eigentlich klar gemacht hat, wofür dieser Inline Elemente Block überhaupt gut ist. > photographworks.me- Inline elements in gutenberg

Bis dorthin habe ich mich eigetlich nur geärgert und mir gedacht, wofür soll denn das gut sein, denn, größere Bilder sahen immer so hässlich aus 😂💡.

 

 

Dies ist nur ein Gravatar ♥ pure intuition

Blogartikel von mediendesign-quer. WordPress, Webdesign, Social Media .. Alle Neuigkeiten erfahren >> Werde Fan auf Facebook und Google +

 

Veröffentlicht in Kategorie: WordPress Gutenberg / Block Editor