Kapitel 2 · Für Editoren · Edit-Mode

Block: Bild

Ein Bild sagt mehr — der Bild-Block bindet ein Einzelbild aus den Assets ein.

🧱

Technischer Typ: CmsImage. Eingefügt im Edit-Mode über +.

Was es ist

Der Bild-Block zeigt ein Bild aus Ihren Assets.

Wann verwenden

  • Zur Illustration eines Abschnitts.
  • Als Blickfang zwischen Textblöcken.

Optionen

  • Bildauswahl aus Assets/Global Storage.
  • Alt-Text (Barrierefreiheit) und ggf. Bildunterschrift.

So fügen Sie ihn ein

So geht's konkret
  1. Edit-Mode anAuf der Seite Turn on edit mode.
  2. EinfügestelleAn die Position fahren → +.
  3. Blocktyp„Bild“ wählen.
  4. InhaltAsset auswählen und Alt-Text setzen.
  5. Speichern & prüfenEdit-Mode aus, Nutzersicht kontrollieren.

Beispiel

💡

Ein Screenshot des fertigen Dashboards mit Alt-Text „Dashboard mit Fortschrittsbalken“ und Bildunterschrift „So sieht Ihr Lernfortschritt aus“.

Tipps

  • Asset auswählen und Alt-Text setzen.
  • Ausreichend große, scharfe Bilder nutzen.
  • Alt-Texte immer pflegen.
  • Einheitliche Bildsprache pro Themenwelt.

Häufige Fehler

  • Fehlender Alt-Text — schlecht für Barrierefreiheit und SEO.
  • Zu kleine oder unscharfe Bilder.
  • Riesige Dateien ohne Not — die Seite lädt langsam.
👉

Zurück zum Edit-Mode.

Chapter 2 · For editors · Edit mode

Block: Image

A picture says more — the image block embeds a single image from the assets.

🧱

Technical type: CmsImage. Inserted in edit mode via +.

What it is

The image block shows an image from your assets.

When to use

  • To illustrate a section.
  • As an eye-catcher between text blocks.

Options

  • Image selection from Assets/Global Storage.
  • Alt text (accessibility) and, where applicable, a caption.

How to add it

Step by step
  1. Turn on edit modeOn the page, Turn on edit mode.
  2. Insertion pointMove to the position → +.
  3. Block typeChoose "Image".
  4. ContentSelect an asset and set the alt text.
  5. Save & checkTurn off edit mode, check the user view.

Example

💡

A screenshot of the finished dashboard with alt text "Dashboard with progress bar" and caption "This is what your learning progress looks like".

Tips

  • Select an asset and set the alt text.
  • Use sufficiently large, sharp images.
  • Always maintain alt texts.
  • Consistent visual language per topic world.

Common mistakes

  • Missing alt text — bad for accessibility and SEO.
  • Images that are too small or blurry.
  • Huge files with no need — the page loads slowly.
👉

Back to edit mode.