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.

Chapitre 2 · Pour les éditeurs · Edit-Mode

Bloc : Image

Une image en dit plus — le bloc image intègre une image individuelle depuis les Assets.

🧱

Type technique : CmsImage. Inséré dans l'Edit-Mode via +.

Ce que c'est

Le bloc image affiche une image issue de vos Assets.

Quand l'utiliser

  • Pour illustrer une section.
  • Comme accroche visuelle entre des blocs de texte.

Options

  • Sélection de l'image depuis les Assets/Global Storage.
  • Texte alternatif (accessibilité) et éventuellement légende.

Comment l'insérer

Concrètement
  1. Activer l'Edit-ModeSur la page, Turn on edit mode.
  2. Point d'insertionSe placer à l'endroit voulu → +.
  3. Type de blocChoisir « Image ».
  4. ContenuSélectionner l'Asset et définir le texte alternatif.
  5. Enregistrer & vérifierDésactiver l'Edit-Mode, contrôler la vue utilisateur.

Exemple

💡

Une capture d'écran du tableau de bord fini, avec le texte alternatif « Tableau de bord avec barre de progression » et la légende « Voici à quoi ressemble votre progression d'apprentissage ».

Astuces

  • Sélectionner l'Asset et définir le texte alternatif.
  • Utiliser des images suffisamment grandes et nettes.
  • Toujours renseigner les textes alternatifs.
  • Un langage visuel homogène par univers thématique.

Erreurs fréquentes

  • Texte alternatif manquant — mauvais pour l'accessibilité et le SEO.
  • Images trop petites ou floues.
  • Fichiers énormes sans nécessité — la page se charge lentement.
👉

Retour à l'Edit-Mode.

Rozdział 2 · Dla edytorów · Edit-Mode

Blok: Obraz

Obraz mówi więcej — blok obrazu osadza pojedynczy obraz z zasobów.

🧱

Typ techniczny: CmsImage. Wstawiany w Edit-Mode przyciskiem +.

Co to jest

Blok obrazu pokazuje obraz z Twoich zasobów.

Kiedy używać

  • Do zilustrowania sekcji.
  • Jako element przyciągający wzrok między blokami tekstu.

Opcje

  • Wybór obrazu z zasobów/Global Storage.
  • Tekst alternatywny (dostępność) i ewentualnie podpis.

Jak go wstawić

Jak to zrobić konkretnie
  1. Włącz Edit-ModeNa stronie Turn on edit mode.
  2. Miejsce wstawieniaNajedź na pozycję → +.
  3. Typ blokuWybierz „Obraz".
  4. TreśćWybierz zasób i ustaw tekst alternatywny.
  5. Zapisz i sprawdźWyłącz Edit-Mode, skontroluj widok użytkownika.

Przykład

💡

Zrzut ekranu gotowego dashboardu z tekstem alternatywnym „Dashboard z paskiem postępu" i podpisem „Tak wygląda Twój postęp w nauce".

Wskazówki

  • Wybierz zasób i ustaw tekst alternatywny.
  • Używaj wystarczająco dużych, ostrych obrazów.
  • Zawsze pielęgnuj teksty alternatywne.
  • Jednolity język obrazów w obrębie danego świata tematycznego.

Częste błędy

  • Brak tekstu alternatywnego — źle dla dostępności i SEO.
  • Zbyt małe lub nieostre obrazy.
  • Ogromne pliki bez potrzeby — strona ładuje się wolno.
👉

Powrót do Edit-Mode.

Capitolo 2 · Per gli editori · Edit-Mode

Blocco: immagine

Un'immagine dice di più — il blocco immagine inserisce una singola immagine dagli Assets.

🧱

Tipo tecnico: CmsImage. Inserito nell'Edit-Mode tramite +.

Che cos'è

Il blocco immagine mostra un'immagine dai Suoi Assets.

Quando utilizzarlo

  • Per illustrare una sezione.
  • Come elemento di richiamo tra blocchi di testo.

Opzioni

  • Selezione dell'immagine da Assets/Global Storage.
  • Testo alternativo (accessibilità) ed eventualmente didascalia.

Come inserirlo

Come procedere in concreto
  1. Attivare l'Edit-ModeSulla pagina, Turn on edit mode.
  2. Punto di inserimentoPortarsi nella posizione → +.
  3. Tipo di bloccoSelezionare „Immagine".
  4. ContenutoSelezionare l'asset e impostare il testo alternativo.
  5. Salvare e verificareDisattivare l'Edit-Mode e controllare la vista utente.

Esempio

💡

Uno screenshot della dashboard finita con testo alternativo „Dashboard con barra di avanzamento" e didascalia „Ecco come appare il Suo progresso di apprendimento".

Consigli

  • Selezionare l'asset e impostare il testo alternativo.
  • Utilizzare immagini sufficientemente grandi e nitide.
  • Curare sempre i testi alternativi.
  • Linguaggio visivo uniforme per ciascun mondo tematico.

Errori frequenti

  • Testo alternativo mancante — negativo per l'accessibilità e la SEO.
  • Immagini troppo piccole o sfocate.
  • File enormi senza necessità — la pagina si carica lentamente.
👉

Ritorno all'Edit-Mode.

Hoofdstuk 2 · Voor editors · Edit-Mode

Blok: Afbeelding

Een afbeelding zegt meer — het afbeeldingsblok sluit een enkele afbeelding uit de Assets in.

🧱

Technisch type: CmsImage. Ingevoegd in de Edit-Mode via +.

Wat het is

Het afbeeldingsblok toont een afbeelding uit uw Assets.

Wanneer gebruiken

  • Ter illustratie van een sectie.
  • Als blikvanger tussen tekstblokken.

Opties

  • Afbeeldingskeuze uit Assets/Global Storage.
  • Alt-tekst (toegankelijkheid) en eventueel bijschrift.

Zo voegt u het in

Zo werkt het concreet
  1. Edit-Mode aanOp de pagina Turn on edit mode.
  2. InvoegplekNaar de positie gaan → +.
  3. Bloktype„Afbeelding" kiezen.
  4. InhoudAsset selecteren en alt-tekst instellen.
  5. Opslaan & controlerenEdit-Mode uit, gebruikersweergave controleren.

Voorbeeld

💡

Een screenshot van het klare dashboard met alt-tekst „Dashboard met voortgangsbalken" en bijschrift „Zo ziet uw leervoortgang eruit".

Tips

  • Asset selecteren en alt-tekst instellen.
  • Voldoende grote, scherpe afbeeldingen gebruiken.
  • Alt-teksten altijd onderhouden.
  • Eenvormige beeldtaal per themawereld.

Veelgemaakte fouten

  • Ontbrekende alt-tekst — slecht voor toegankelijkheid en SEO.
  • Te kleine of onscherpe afbeeldingen.
  • Enorme bestanden zonder noodzaak — de pagina laadt langzaam.
👉

Terug naar de Edit-Mode.

Capitolul 2 · Pentru editori · Edit-Mode

Bloc: Imagine

O imagine spune mai mult — blocul de imagine încorporează o singură imagine din Assets.

🧱

Tip tehnic: CmsImage. Inserat în Edit-Mode prin +.

Ce este

Blocul de imagine afișează o imagine din Assets-urile dumneavoastră.

Când se folosește

  • Pentru ilustrarea unei secțiuni.
  • Ca punct de atracție între blocuri de text.

Opțiuni

  • Selectarea imaginii din Assets/Global Storage.
  • Text alternativ (accesibilitate) și, eventual, legendă.

Cum îl inserați

Cum se face concret
  1. Edit-Mode pornitPe pagină, Turn on edit mode.
  2. Locul de inserareDeplasați-vă la poziție → +.
  3. Tipul de blocAlegeți „Imagine".
  4. ConținutSelectați asset-ul și setați textul alternativ.
  5. Salvați & verificațiEdit-Mode oprit, controlați perspectiva utilizatorului.

Exemplu

💡

Un screenshot al dashboardului finit cu text alternativ „Dashboard cu bare de progres" și legendă „Așa arată progresul tău de învățare".

Sfaturi

  • Selectați asset-ul și setați textul alternativ.
  • Folosiți imagini suficient de mari și clare.
  • Întrețineți întotdeauna textele alternative.
  • Limbaj vizual unitar pe fiecare temă.

Erori frecvente

  • Text alternativ lipsă — prost pentru accesibilitate și SEO.
  • Imagini prea mici sau neclare.
  • Fișiere uriașe fără nevoie — pagina se încarcă lent.
👉

Înapoi la Edit-Mode.

Κεφάλαιο 2 · Για συντάκτες · Edit-Mode

Μπλοκ: Εικόνα

Μια εικόνα λέει περισσότερα — το μπλοκ εικόνας ενσωματώνει μια μεμονωμένη εικόνα από τα Assets.

🧱

Τεχνικός τύπος: CmsImage. Εισάγεται στον Edit-Mode μέσω +.

Τι είναι

Το μπλοκ εικόνας δείχνει μια εικόνα από τα Assets σας.

Πότε να το χρησιμοποιήσετε

  • Για την εικονογράφηση μιας ενότητας.
  • Ως σημείο έλξης ανάμεσα σε μπλοκ κειμένου.

Επιλογές

  • Επιλογή εικόνας από Assets/Global Storage.
  • Alt-Text (προσβασιμότητα) και ενδεχομένως λεζάντα εικόνας.

Πώς το εισάγετε

Έτσι γίνεται συγκεκριμένα
  1. Edit-Mode ενεργόςΣτη σελίδα Turn on edit mode.
  2. Σημείο εισαγωγήςΜετακινηθείτε στη θέση → +.
  3. Τύπος μπλοκΕπιλέξτε „Εικόνα“.
  4. ΠεριεχόμενοΕπιλέξτε Asset και ορίστε Alt-Text.
  5. Αποθήκευση & έλεγχοςEdit-Mode ανενεργός, ελέγξτε την οπτική του χρήστη.

Παράδειγμα

💡

Ένα screenshot του ολοκληρωμένου dashboard με Alt-Text „Dashboard με μπάρες προόδου“ και λεζάντα „Έτσι φαίνεται η μαθησιακή σας πρόοδος“.

Συμβουλές

  • Επιλέξτε Asset και ορίστε Alt-Text.
  • Χρησιμοποιήστε επαρκώς μεγάλες, ευκρινείς εικόνες.
  • Συντηρείτε πάντα τα Alt-Text.
  • Ενιαία εικαστική γλώσσα ανά θεματικό κόσμο.

Συχνά λάθη

  • Απουσία Alt-Text — κακό για την προσβασιμότητα και το SEO.
  • Πολύ μικρές ή θολές εικόνες.
  • Τεράστια αρχεία χωρίς λόγο — η σελίδα φορτώνει αργά.
👉

Επιστροφή στον Edit-Mode.

الفصل 2 · للمحررين · Edit-Mode

اللبنة: صورة

الصورة تقول أكثر — تُضمّن لبنة الصورة صورة مفردة من الأصول.

🧱

النوع التقني: CmsImage. تُدرَج في Edit-Mode عبر +.

ما هي

تعرض لبنة الصورة صورة من Assets الخاصة بك.

متى تُستخدم

  • لتوضيح قسم.
  • كنقطة جذب بين لبنات النص.

الخيارات

  • اختيار الصورة من Assets/Global Storage.
  • نص بديل (إمكانية الوصول) وعند الاقتضاء تعليق للصورة.

كيف تُدرجها

كيف يتم ذلك عمليًا
  1. تشغيل Edit-Modeعلى الصفحة Turn on edit mode.
  2. موضع الإدراجانتقل إلى الموضع → +.
  3. نوع اللبنةاختر «صورة».
  4. المحتوىاختر Asset واضبط النص البديل.
  5. الحفظ والفحصأطفئ Edit-Mode، وراقب منظور المستخدم.

مثال

💡

لقطة شاشة للوحة المعلومات المكتملة مع نص بديل «لوحة معلومات بشريط تقدّم» وتعليق «هكذا يبدو تقدّمك في التعلّم».

نصائح

  • اختر Asset واضبط النص البديل.
  • استخدم صورًا كبيرة وحادة بما يكفي.
  • صُن النصوص البديلة دائمًا.
  • لغة بصرية موحّدة لكل عالم موضوعي.

أخطاء شائعة

  • غياب النص البديل — سيّئ لإمكانية الوصول وSEO.
  • صور صغيرة أو غير حادة جدًا.
  • ملفات ضخمة دون داعٍ — تُبطئ تحميل الصفحة.
👉

العودة إلى Edit-Mode.

第 2 章 · 面向编辑 · Edit-Mode

Block：图片

一图胜千言——图片块用于嵌入来自 Assets 的单张图片。

🧱

技术类型：CmsImage。在 Edit-Mode 中通过 + 插入。

是什么

图片块展示来自您 Assets 的一张图片。

何时使用

  • 为某个段落配图。
  • 作为文本块之间的视觉焦点。

选项

  • 从 Assets/Global Storage 选择图片。
  • Alt 文本（无障碍）以及可选的图片说明。

如何插入

具体操作
  1. 开启 Edit-Mode在页面上 Turn on edit mode。
  2. 插入位置移动到目标位置 → +。
  3. 块类型选择“图片”。
  4. 内容选择 Asset 并设置 Alt 文本。
  5. 保存并检查关闭 Edit-Mode，核对用户视角。

示例

💡

一张成品仪表盘的截图，Alt 文本为“带进度条的仪表盘”，图片说明为“您的学习进度如此呈现”。

提示

  • 选择 Asset 并设置 Alt 文本。
  • 使用足够大、清晰的图片。
  • 始终维护 Alt 文本。
  • 每个主题世界保持统一的图片风格。

常见错误

  • 缺失 Alt 文本——不利于无障碍和 SEO。
  • 图片太小或不清晰。
  • 没必要地使用超大文件——页面加载缓慢。
👉

返回 Edit-Mode。