AX - Layout

Überblick

AX - Layout ist eine Experience Cloud-Komponente, die andere Komponenten in strukturierte Zeilen und Spalten mit flexibler Größe und Ausrichtung auf Seiten von Experience Sites organisiert.

Verwenden Sie sie, um mehrspaltige Layouts, responsive Gitter oder benutzerdefinierte Seitenstrukturen zu erstellen, indem Sie Komponenten per Drag & Drop in Layout-Bereiche ziehen. Steuern Sie Spaltenbreiten, Abstände, Ausrichtung und responsives Verhalten für verschiedene Bildschirmgrößen im Experience Builder.

Perfekt für Dashboard-Layouts, Formularabschnitte, Inhaltsraster, Vergleichstabellen oder überall dort, wo Ihr Portal eine strukturierte, mehrspaltige Inhaltsorganisation benötigt, die sich an Mobil- und Desktopgeräte anpasst.

Diese Komponente nutzt Slots für erweiterte Anpassungen, wodurch sie ideal für LWR-Seiten ist. Aura-Seiten unterstützen dieses Anpassungsniveau nicht.

🎥 Tutorials

Name	Beschreibung
Erstellen Sie ein Rasterlayout	Lernen Sie, mit Avonni-Komponenten ein dynamisches Rasterlayout zu erstellen, um Produkte oder Funktionen zu präsentieren.
Avonni Layout so konfigurieren, dass es responsiv ist	Erfahren Sie, wie Sie mit Avonni Layout in Experience Cloud responsive, benutzerfreundliche Layouts für verschiedene Geräte erstellen.

Eigenschaften

Name	Beschreibung	Verwendung
Horizontale Ausrichtung	Passen Sie die horizontale Ausrichtung des Inhalts innerhalb des Layouts an	Nutzen Sie diese Einstellung, um sicherzustellen, dass Inhalte kohärent ausgerichtet sind und ein ausgewogenes, harmonisches Erscheinungsbild im gesamten Layout bewahren.
Vertikale Ausrichtung	Manipulieren Sie die vertikale Ausrichtung des Inhalts innerhalb des Layouts.	Optimieren Sie die vertikale Positionierung von Inhalten, damit sie in einer visuell ansprechenden Weise präsentiert werden, die mit den übergeordneten Designzielen übereinstimmt.
An den Rand ziehen	Erlauben Sie dem Inhalt, sich in Richtung der Ränder des Layouts auszudehnen.	Verwenden Sie diese Option, um Layouts zu erstellen, die den Raum maximieren und die Sichtbarkeit sowie Präsentation von Inhaltselementen verbessern.
Mehrere Reihen	Ermöglichen Sie die Unterbringung von Inhalten über mehrere Reihen.	Aktivieren Sie diese Funktion, wenn Ihr Layout die Verteilung von Inhalten in vertikaler Reihenfolge erfordert, um eine strukturierte und organisierte Darstellung zu ermöglichen.
Als Abschnitt anzeigen	Legen Sie fest, dass das Layout als eigener Abschnitt innerhalb der Seite angezeigt wird.	Legen Sie fest, dass das Layout als eigener Abschnitt innerhalb der Seite angezeigt wird.
Spalten-Layout	Bestimmen Sie, wie Inhalte innerhalb von Spalten angezeigt werden.	Passen Sie die Spaltenkonfiguration an, um eine gitterartige Struktur zu schaffen, die eine systematische und ordentliche Anordnung von Inhalten für eine verbesserte visuelle Navigation fördert.

Einstellungen für das Spalten-Layout

Die Einstellungen für das Spalten-Layout bieten Flexibilität bei der Organisation von Seiteninhalten und sorgen dafür, dass sie sich responsiv an verschiedene Bildschirmgrößen und Geräte anpassen und gleichzeitig ein sauberes, strukturiertes Erscheinungsbild beibehalten.

Typ

Bestimmt die Art des Spalten-Layouts.

• Optionen:

  • Flexibel: Spalten dieses Layout-Typs passen ihre Größe dynamisch basierend auf dem Inhalt und dem verfügbaren Bildschirmplatz an. Diese Option ist ideal für responsive Designs, bei denen sich das Layout an verschiedene Gerätegrößen anpassen muss.

  • Fest: Diese Option hält die Größe der Spalten konstant, unabhängig von der Bildschirmgröße oder dem Inhaltsvolumen. Feste Spalten sind hilfreich, wenn ein gleichmäßiges und konsistentes Layout erforderlich ist.

• Verwendung: Wählen Flexibel für fließende Layouts, die sich an verschiedene Bildschirmgrößen anpassen müssen, und Fest für Layouts, die Konsistenz in den Spaltenbreiten erfordern.

Größe

Legt die Breite der Spalten innerhalb des Rasters fest. Das Rastersystem basiert typischerweise auf einer 12-Einheiten-Struktur.

• Bereich: 1 bis 12, wobei jede Einheit einen Anteil der insgesamt verfügbaren Breite darstellt.

• Verwendung: Weisen Sie eine Größe zu, um zu definieren, wie viel Platz jede Spalte einnehmen soll. Zum Beispiel würde das Festlegen einer Größe von 4 in einem 12-Einheiten-Raster bedeuten, dass die Spalte ein Drittel des verfügbaren horizontalen Raums einnimmt.

Ausrichtungsversatz

Passt die Position der Spalte innerhalb ihres Containers an.

• Optionen:

  • Links: Verschiebt die Spalte in Richtung der linken Kante des Containers.

  • Rechts: Bewegt die Spalte in Richtung der rechten Kante.

  • Oben: Richtet die Spalte näher an der Oberseite des Containers aus.

  • Unten: Positioniert die Spalte in der Nähe der Unterseite des Containers.

• Verwendung: Verwenden Sie diese Einstellung, um die Position von Spalten relativ zu ihrer Umgebung fein abzustimmen und die visuelle Attraktivität sowie das räumliche Gleichgewicht des Layouts zu verbessern.

Innenabstand

Steuert den inneren Abstand der Spalte.

• Optionen:

  • Horizontal: Passt die Innenabstände an der linken und rechten Seite der Spalte an.

  • Rundherum: Fügt an allen Seiten der Spalte Innenabstand hinzu.

• Verwendung: Wenden Sie Padding an, um innerhalb der Spalte Platz zu schaffen, sodass der Inhalt nicht bündig an den Rändern liegt und die Lesbarkeit sowie die visuelle Ästhetik verbessert werden.

Die Einstellungen für das Spalten-Layout der Avonni Layout-Komponente sind entscheidend, um in Salesforce Experience Cloud-Seiten ausgefeilte und funktionale Layouts zu erstellen.