Karte

Überblick

Die Avonni-Kartenkomponente wurde entwickelt, um verschiedene Inhalte strukturiert und ansprechend darzustellen. Karten sind nützlich, um gut organisierte, leicht verdauliche Inhaltslayouts für die Anzeige von Produktdetails, Profilen, Artikeln und mehr zu erstellen.

Diese Komponente nutzt Slots für erweiterte Anpassungen und ist damit ideal für LWR-Seiten. Aura-Seiten unterstützen dieses Maß an Anpassung nicht.

Konfiguration der Avonni-Karte

Fügen Sie einen Kartentitel hinzu

Geben Sie Ihrer Avonni-Karte einen klaren und informativen Titel, damit Benutzer den Inhalt schnell erkennen können. So geht's:

• Suchen Sie das Attribut "Kartentitel": Diese Einstellung befindet sich in den Konfigurationsoptionen der Avonni-Kartenkomponente in Ihrem Experience Cloud Site Builder.

• Geben Sie Ihren Titel ein: Geben Sie den Text ein, der als Titel angezeigt werden soll. Halten Sie ihn knapp und aussagekräftig.

• Platzierung: Der Titel erscheint automatisch auf der linken Seite Ihrer Avonni-Karte und bietet einen visuellen Ankerpunkt.

Beispiel:

Wenn Ihre Avonni-Karte Produktinformationen anzeigt, könnten Sie einen Kartentitel wie "Standort" verwenden.

Kopfzeile anzeigen

Aktivieren Sie das Attribut "Kopfzeile anzeigen", um einen vielseitigen Bereich oben rechts auf Ihrer Avonni-Karte hinzuzufügen. Dadurch können Sie:

• Karteninhalt anpassen: Sie können andere Komponenten wie Schaltflächen, Symbole oder zusätzlichen Text per Drag & Drop direkt in die Kopfzeile ziehen.

• Flexible Layouts erstellen: Ordnen Sie Elemente innerhalb der Kopfzeile an, um das perfekte Aussehen und die gewünschte Funktionalität Ihrer Karte zu erreichen.

Beispiel: Fügen Sie auf einer Kundenkonto-Seite eine Schaltfläche "Neuen Fall erstellen" hinzu. Ein Klick auf diese Schaltfläche würde einen Flow-Dialog auslösen, der den Benutzer durch das Einreichen eines neuen Support-Falls führt und alle erforderlichen Informationen sammelt.

Fußzeile anzeigen

Diese Option aktiviert einen Footer-Bereich am unteren Rand Ihrer Avonni-Karte. Sie können den bereitgestellten Footer-Slot verwenden, um Inhalte wie Links, Schaltflächen oder zusätzlichen Text hinzuzufügen.

Abstand um Inhalte ziehen

Passen Sie den Abstand um den Inhalt innerhalb Ihrer Karte an. Verwenden Sie diese Einstellung, um ein kompakteres Layout mit am Rand anliegenden Inhalten zu erstellen oder mehr Luft zu schaffen.

Tutorials

Name	Beschreibung
Erstellung einer MapCard-Präsentation	Erfahren Sie, wie Sie mit der Avonni-Karte und Map-Komponenten eine MapCard-Präsentation erstellen

Erscheinungsbild

Größe

• Breite: Steuert die horizontale Breite der Karte. Sie können feste Breiten (Pixel, Prozentsatz) verwenden oder die Karte an ihren Inhalt bzw. die Containergröße anpassen lassen.

• Höhe: Steuert die vertikale Höhe der Karte. Ähnlich wie bei der Breite können Sie feste oder flexible Höheneinstellungen verwenden.

• Überlauf: Gibt an, wie die Karte mit Inhalten umgeht, die ihre Abmessungen überschreiten. Optionen können umfassen:

  • Sichtbar: Inhalte fließen über die Grenzen der Karte hinaus.

  • Versteckt: Inhalte werden an den Rändern der Karte abgeschnitten.

  • Scroll: Fügt der Karte Bildlaufleisten hinzu, wenn Inhalte überlaufen.

Kopfzeile

• Hintergrundfarbe: Legt die Hintergrundfarbe des Kopfzeilenbereichs der Karte fest.

• Textfarbe: Legt die Farbe aller Textelemente innerhalb der Kopfzeile fest.

• Schriftgröße: Steuert die Größe des Kopfzeilentextes.

• Schriftstärke: Legt die Fettheit des Kopfzeilentextes fest (z. B. normal, fett, leicht).

• Schriftfamilie: Gibt die Schriftart an, die für den Kopfzeilentext verwendet wird.

• Unterer Rand Größe: Legt die Dicke des unteren Rands fest, der die Kopfzeile vom Hauptinhalt der Karte trennt.

• Unterer Rand Farbe: Legt die Farbe des unteren Rands in der Kopfzeile fest.

Medien

• Breite: Steuert die Breite des Medienbereichs der Karte (wahrscheinlich für Bilder oder Videos).

• Höhe: Steuert die Höhe des Medienbereichs der Karte.

• Objektanpassung: Bestimmt, wie ein Bild oder Video skaliert werden soll, um in seinen Container zu passen. Optionen umfassen:

  • Ausfüllen: Streckt den Inhalt, um den Raum zu füllen, und kann dabei das Seitenverhältnis verzerren.

  • Beinhalten: Skaliert den Inhalt so, dass er vollständig in den Raum passt, wodurch möglicherweise leere Bereiche entstehen.

  • Abdecken: Skaliert den Inhalt so, dass der gesamte Raum abgedeckt wird, wodurch möglicherweise Teile beschnitten werden.

  • Keine: Zeigt den Inhalt in seiner Originalgröße an.

  • Verkleinern: Der Inhalt wird verkleinert, wenn er die Containerabmessungen überschreiten würde, andernfalls wird er in Originalgröße angezeigt.

• Randgröße: Steuert die Dicke des Rahmens um das Medienelement.

• Randfarbe: Legt die Farbe des Rahmens um das Medienelement fest.

Rahmen

• Größe: Legt die Gesamtstärke des Rahmens fest, der die gesamte Karte umgibt.

• Radius: Steuert, wie abgerundet die Ecken der Karte sind.

• Farbe: Legt die Farbe des Kartenrahmens fest