AAM Editor – Kartenhintergründe gestalten

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
Hintergrundbild
Abdunklung des Bildes
Icon
Titel und Beschreibung

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

Hintergrundfarbe einstellen

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

Beispiel für einen Hexadezimalwert:

#1A1A1A

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

Hintergrundbild verwenden

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

Alternativ kann je nach Sektion eine direkte Bildadresse eingetragen werden.

Beispiel:

images/karten/projekt-01.webp

Bilder sollten möglichst über Medien oder 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:

0 bis 90 Prozent

0 Prozent: keine Abdunklung
20 bis 40 Prozent: leichte Abdunklung
40 bis 60 Prozent: deutliche Textunterstützung
über 60 Prozent: Bild tritt stark in den Hintergrund

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:

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

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:

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

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

Hintergrundbild entfernen

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

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:

ähnliche Farbstimmung
gleichartige Bildausschnitte
identische Abdunklung
gleiche Textposition
vergleichbare Bildqualität
einheitliche Kartenhöhe

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:

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

Weitere Informationen zum Karten-Grid enthält Core-Sektionstypen.

Empfehlungen

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

Weiterführende Seiten