Blöcke

Blöcke »Bildblock

Verwende den Bildblock, um auf deinen Seiten und in deinen Beiträgen einen visuellen Akzent zu setzen.

Inhaltsverzeichnis

Bildblock hinzufügen

Füge den Bildblock zu einer Seite hinzu, indem du auf den Button „Block hinzufügen“ klickst. Alternativ kannst du auch /image eingeben und die Eingabetaste drücken.

Füge Bilder mit einem Hotkey-Befehl hinzu.
Füge Bilder mit einem Schrägstrichbefehl hinzu.

Eine detaillierte Anleitung zum Hinzufügen von Blöcken findest du hier.


Bild hinzufügen

Im Fenster mit den Medienoptionen werden drei Optionen geladen: Hochladen, Bild auswählen und Von URL einfügen.

Es gibt drei Möglichkeiten, Bilder hinzuzufügen: „Hochladen“, „Bild auswählen“ und „Von URL einfügen“.
  • Mit der Option Hochladen kannst du auf deinem Computer ein Bild auswählen und dieses auf deine Website hochladen.
  • Mit der Option Bild auswählen kannst du ein Bild aus den auf deiner Website vorhandenen Bildern (Mediathek) oder aus Google Fotos oder dem kostenlosen Fotoarchiv von Pexels auswählen.
  • Mit der Option Von URL einfügen kannst du ein Bild verwenden, das bereits live im Internet ist.

Weitere Informationen zum kostenlosen Fotoarchiv erhältst du hier.


Block-Toolbar

Jeder Block verfügt über eigene blockspezifische Steuerelemente, mit denen du den Block direkt im Editor ändern kannst. So sieht die Toolbar des Bildblocks aus:

Die Icons in der Bildblock-Toolbar von links nach rechts:

  • Block-Typ ändern
  • Block nach oben oder unten verschieben
  • Ausrichtung ändern (linksbündig, zentrieren oder rechtsbündig + Optionen für „breit“ und „volle Breite“, wenn diese vom Theme unterstützt werden)
  • Link einfügen
  • Bild ersetzen
  • Weitere Optionen

Ausrichten von Bildern

Wenn du ein Bild innerhalb eines Absatzes ausrichten möchtest, musst du das Bild zunächst direkt über dem Absatzblock ausrichten.

Klicke auf das Bild und wähle die linksbündige oder rechtsbündige Ausrichtung aus, um das Bild in den Absatzblock einzufügen.

Ändere abschließend die Größe des Bildes in die gewünschte Breite und Höhe.


Bilder mit weiter und voller Breite

Sobald unseren Themes die Unterstützung für den neuen Editor hinzugefügt wurde, werden dir Icons für Bilder mit weiter und voller Breite angezeigt. Mit diesen beiden Bildgrößen kannst du das Bild über die übliche Inhaltsbreite des Themes hinaus erweitern.

Ein „breites“ Bild im Editor.

Mithilfe der Linkeinstellungen kannst du deine Bilder per Hyperlink verlinken. Du kannst festlegen, ob beim Klicken auf das Bild eine Anhangsseite, die ursprüngliche Mediendatei oder eine individuelle URL deiner Wahl geöffnet wird.

Wenn du eine individuelle URL auswählst, gib in das angezeigte Textfeld die URL ein, mit der das Bild verknüpft werden soll. Wenn du neben diesem Feld auf den Nach-unten-Pfeil klickst, kannst du auswählen, ob der Link in einem neuen Tab geöffnet werden soll.

Wenn du darüber hinaus ein Bild mit einer Seite oder einem Beitrag auf deiner Website verlinken möchtest, beginne im Suchfeld mit der Eingabe des Titels der Seite oder des Beitrags. Daraufhin kannst du deine Seite bzw. deinen Beitrag aus den Ergebnissen auswählen und das Bild damit verlinken.

Dein Bild kann auf eine Anhangsseite, eine Mediendatei oder eine individuelle URL verweisen.

Ändern der Bildgröße

Sobald das Bild zum Editor hinzugefügt wurde, kannst du die Größe und Ausrichtung der Bilder ändern, um sie besser an den umgebenden Inhalt anzupassen.

Ändere die Größe eines Bildes mithilfe der Ziehpunkte.
Ändere die Größe eines Bildes mithilfe der Ziehpunkte.

Um die Größe eines Bildes zu ändern, klicke auf das Bild, um die Ziehpunkte für die Größenänderung anzuzeigen. Klicke dann auf die Ziehpunkte für die Größenänderung und ziehe das Bild auf die gewünschte Größe.

Um die Größe eines Bildes zu ändern, klicke auf das Bild, um die Ziehpunkte für die Größenänderung anzuzeigen. Klicke dann auf die Ziehpunkte für die Größenänderung und ziehe das Bild auf die gewünschte Größe.

Alternativ kannst du auch in den Blockeinstellungen auf der rechten Seite die Breite und Höhe des Bildes anpassen. Es gibt auch einige praktische Optionen in den Blockeinstellungen, um das Bild auf 100, 75, 50 und 25 % der Originalgröße festzulegen.


↑ Inhaltsverzeichnis ↑

Beschriftungen

Es gibt zwei Möglichkeiten, Beschriftungen zu Bildern hinzuzufügen. Wenn du einer einzelnen Instanz eines Bildes eine Beschriftung hinzufügen möchtest, gib diese in das Beschriftungsfeld unter dem Bild im Editor ein.

Wenn die gleiche Beschriftung für alle Instanzen eines Bildes verwendet werden soll, musst du dem Bild die Beschriftung über die Mediathek hinzufügen, indem du auf den „Ersetzen→Bearbeiten“-Button im Bildblock klickst.


↑ Inhaltsverzeichnis ↑

Block-Einstellungen

Jeder Block weist neben den Optionen in der Toolbar des Blocks auch spezifische Optionen in der Seitenleiste des Editors auf. Wenn die Seitenleiste nicht angezeigt wird, klicke auf das Zahnrad-Icon neben dem Veröffentlichen-Button.

Die Blockeinstellungen sind in der Seitenleiste zu finden.
Die Blockeinstellungen sind in der Seitenleiste zu finden.

↑ Inhaltsverzeichnis ↑

Bildeinstellungen

Bilder können durch Prozentsätze oder Pixelangaben verändert werden.

Die Bildeinstellungen bieten ein Textfeld, um eine alternative Textbeschreibung hinzuzufügen, die für die Barrierefreiheit und SEO wichtig ist.

Du kannst die Breite und Höhe eines Bildes auch in 25 %-Schritten oder mit genauen Pixelangaben ändern.

Es gibt viele Möglichkeiten, eine Bildgröße im WordPress-Editor zu ändern.
Es gibt viele Möglichkeiten, eine Bildgröße im WordPress-Editor zu ändern.

↑ Inhaltsverzeichnis ↑

Erweitert

Auf dem Tab „Erweitert“ kannst du eine CSS-Klasse zu deinem Block hinzufügen, sodass du individuelles CSS erstellen und den Bildblock nach deinen Wünschen gestalten kannst. Weitere Informationen.

Im Tab Erweitert kannst du deinem Block eine CSS-Klasse hinzufügen.
Im Tab Erweitert kannst du deinem Block eine CSS-Klasse hinzufügen.

↑ Inhaltsverzeichnis ↑

Zusätzliche AMP-Optionen sind in den Business- und E-Commerce-Tarifen verfügbar

Bei Business- und E-Commerce-Tarifen beinhaltet der Bildblock folgende Optionen:

  • AMP-Noloading – Aktiviere diese Option, wenn du das Ladesymbol ausblenden möchtest, das angezeigt wird, wenn die Einbettung auf der AMP-Seite geladen wird.
  • AMP-Lightbox-Effekt – Aktiviere diese Option, um die Lightbox-Komponente des AMP-Bildes zuzulassen, wodurch AMP-Bilder erweitert werden können, um das Ansichtsfenster auszufüllen.
AMP-Einstellungen im Bildblock für Business- und E-Commerce-Websitetarife

Außerdem hast du mehrere Optionen zum Einrichten der AMP-Layout-Einstellungen. Das AMP-HTML-Layout erklärt diese Attribute.

Seiten: 1 2