AAM Editor – Kartenhintergründe gestalten - Versionsgeschichte

Asphyx: Die Seite wurde neu angelegt: „''Im Karten-Grid kann jede Karte eine eigene Hintergrundfarbe oder ein individuelles Hintergrundbild erhalten.'' Zur Übersicht: AAM Editor Hosting == Kartenhintergründe == Das Karten-Grid kann Karten mit unterschiedlichen Hintergründen darstellen. Für jede Karte können abhängig von der Editor-Version folgende Werte eingestellt werden:

Hintergrundfarbe
2026-07-13T11:52:53Z

Die Seite wurde neu angelegt: „''Im Karten-Grid kann jede Karte eine eigene Hintergrundfarbe oder ein individuelles Hintergrundbild erhalten.'' Zur Übersicht: AAM Editor Hosting == Kartenhintergründe == Das Karten-Grid kann Karten mit unterschiedlichen Hintergründen darstellen. Für jede Karte können abhängig von der Editor-Version folgende Werte eingestellt werden: <ul> <li>Hintergrundfarbe</…“

Neue Seite
''Im Karten-Grid kann jede Karte eine eigene Hintergrundfarbe oder ein individuelles Hintergrundbild erhalten.''

Zur Übersicht: [[:Kategorie:AAM Editor Hosting|AAM Editor Hosting]]

== Kartenhintergründe ==

Das [[AAM Editor – Core-Sektionstypen#Karten-Grid|Karten-Grid]] kann Karten mit unterschiedlichen Hintergründen darstellen.

Für jede Karte können abhängig von der Editor-Version folgende Werte eingestellt werden:

<ul>
<li>Hintergrundfarbe</li>
<li>Hintergrundbild</li>
<li>Abdunklung des Bildes</li>
<li>Icon</li>
<li>Titel und Beschreibung</li>
</ul>

Nicht gesetzte Werte werden von der Sektion oder vom globalen Theme übernommen.

== Hintergrundfarbe einstellen ==

<ol>
<li>Die Seite mit dem gewünschten Karten-Grid öffnen.</li>
<li>Die Karten-Grid-Sektion auswählen.</li>
<li>Im Bearbeitungspanel die gewünschte Karte öffnen.</li>
<li>Den Bereich '''Hintergrund''' oder '''Kartenhintergrund''' aufklappen.</li>
<li>Das Farbfeld anklicken.</li>
<li>Eine Farbe auswählen oder einen Hexadezimalwert eingeben.</li>
<li>Die Darstellung in der Vorschau kontrollieren.</li>
</ol>

Beispiel für einen Hexadezimalwert:

<pre>
#1A1A1A
</pre>

Eine eigene Kartenfarbe überschreibt innerhalb dieser Karte die normale Hintergrundfarbe des Themes.

== Hintergrundbild verwenden ==

<ol>
<li>Die gewünschte Karte im Bearbeitungspanel öffnen.</li>
<li>Im Bereich '''Hintergrundbild''' auf '''Hochladen''' oder '''Bild auswählen''' klicken.</li>
<li>Ein vorhandenes Bild auswählen oder eine neue Datei hochladen.</li>
<li>Den Bildausschnitt in der Vorschau prüfen.</li>
<li>Bei Bedarf die Abdunklung einstellen.</li>
</ol>

Alternativ kann je nach Sektion eine direkte Bildadresse eingetragen werden.

Beispiel:

<pre>
images/karten/projekt-01.webp
</pre>

Bilder sollten möglichst über [[AAM Editor – Medien verwalten|Medien]] oder [[AAM Editor – Hintergrundbilder verwalten|Hintergrundbilder]] verwaltet werden.

== Bildabdunklung ==

Die Abdunklung legt eine halbtransparente dunkle Fläche über das Hintergrundbild.

Sie verbessert die Lesbarkeit von Texten auf hellen oder detailreichen Bildern.

Typischer Einstellbereich:

<pre>
0 bis 90 Prozent
</pre>

<ul>
<li>'''0 Prozent:''' keine Abdunklung</li>
<li>'''20 bis 40 Prozent:''' leichte Abdunklung</li>
<li>'''40 bis 60 Prozent:''' deutliche Textunterstützung</li>
<li>'''über 60 Prozent:''' Bild tritt stark in den Hintergrund</li>
</ul>

Die Abdunklung sollte nur so stark gewählt werden, dass Text gut lesbar bleibt, das Bild aber weiterhin erkennbar ist.

== Geeignete Bilder ==

Für Kartenhintergründe eignen sich Bilder mit:

<ul>
<li>ruhigen Flächen für Text</li>
<li>ausreichendem Kontrast</li>
<li>passendem Seitenverhältnis</li>
<li>klar erkennbarem Hauptmotiv</li>
<li>moderater Dateigröße</li>
</ul>

Wichtige Motive sollten nicht direkt am Bildrand liegen, da Karten abhängig von Bildschirmbreite und Layout unterschiedlich zugeschnitten werden.

== Textlesbarkeit ==

Bei Hintergrundbildern müssen Titel und Beschreibung auf allen Bildschirmgrößen lesbar bleiben.

Mögliche Maßnahmen:

<ul>
<li>Bild abdunkeln</li>
<li>helle oder dunkle Textfarbe verwenden</li>
<li>ruhigen Bildausschnitt wählen</li>
<li>Textmenge reduzieren</li>
<li>statt eines Bildes eine einfarbige Fläche verwenden</li>
</ul>

Die Darstellung sollte sowohl auf Desktop- als auch auf Mobilansicht geprüft werden.

== Hintergrundbild entfernen ==

<ol>
<li>Die gewünschte Karte öffnen.</li>
<li>Das Bildfeld oder die eingetragene Bildadresse auswählen.</li>
<li>Auf das Entfernen-Symbol klicken oder das Feld leeren.</li>
<li>Die Vorschau kontrollieren.</li>
</ol>

Nach dem Entfernen verwendet die Karte wieder ihre Hintergrundfarbe oder die Vorgaben der Sektion.

Die Bilddatei selbst bleibt im Medienbestand erhalten, bis sie dort separat gelöscht wird.

== Einheitliche Gestaltung ==

Einzelne Karten dürfen unterschiedliche Hintergründe verwenden. Trotzdem sollte das Karten-Grid als zusammengehörige Sektion erkennbar bleiben.

Einheitlichkeit entsteht beispielsweise durch:

<ul>
<li>ähnliche Farbstimmung</li>
<li>gleichartige Bildausschnitte</li>
<li>identische Abdunklung</li>
<li>gleiche Textposition</li>
<li>vergleichbare Bildqualität</li>
<li>einheitliche Kartenhöhe</li>
</ul>

Sehr unterschiedliche Bilder, Farben und Kontraste können das Raster unruhig wirken lassen.

== Karten im Carousel ==

Kartenhintergründe funktionieren auch im Carousel-Modus.

Dabei sollte zusätzlich geprüft werden:

<ul>
<li>ob alle Karten bei wechselnder Breite lesbar bleiben</li>
<li>ob Bilder auf Mobilgeräten sinnvoll zugeschnitten werden</li>
<li>ob der Übergang zwischen sehr hellen und sehr dunklen Karten stimmig wirkt</li>
<li>ob Pfeile und Navigation ausreichend sichtbar sind</li>
</ul>

Weitere Informationen zum Karten-Grid enthält [[AAM Editor – Core-Sektionstypen#Karten-Grid|Core-Sektionstypen]].

== Empfehlungen ==

<ul>
<li>Hintergrundbilder vor dem Upload komprimieren.</li>
<li>WebP oder JPG für fotografische Bilder verwenden.</li>
<li>Textlesbarkeit nicht allein durch Schriftfarbe lösen.</li>
<li>Abdunklung bei detailreichen Bildern einsetzen.</li>
<li>Innerhalb eines Karten-Grids eine gemeinsame Bildsprache verwenden.</li>
<li>Darstellung auf mehreren Bildschirmgrößen prüfen.</li>
<li>Nicht mehr verwendete Bilder erst nach Kontrolle aller Seiten löschen.</li>
</ul>

== Weiterführende Seiten ==

<ul>
<li>[[AAM Editor – Core-Sektionstypen|Core-Sektionstypen]]</li>
<li>[[AAM Editor – Sektionen bearbeiten|Sektionen bearbeiten]]</li>
<li>[[AAM Editor – Hintergrundbilder verwalten|Hintergrundbilder verwalten]]</li>
<li>[[AAM Editor – Medien verwalten|Medien verwalten]]</li>
<li>[[AAM Editor – Sektionsfarben verwenden|Sektionsfarben verwenden]]</li>
</ul>

[[Kategorie:AAM Editor – Gestaltung und Medien|Kartenhintergründe gestalten]]