AX - Layout

Übersicht

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

Verwenden Sie sie, um mehrspaltige Layouts, responsive Raster oder benutzerdefinierte Seitenstrukturen zu erstellen, indem Sie Komponenten per Drag-and-Drop in Layoutbereiche 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 strukturierte, mehrspaltige Inhaltsorganisation benötigt, die sich an Mobilgeräte und Desktops anpasst.

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

🎥 Tutorials

Name	Beschreibung
Ein Grid-Layout erstellen	Lernen Sie, mit Avonni-Komponenten ein dynamisches Rasterlayout zu erstellen, um Produkte oder Funktionen zu präsentieren.
Avonni Layout auf Responsivität konfigurieren	Lernen Sie, mit Avonni Layout in Experience Cloud auf verschiedenen Geräten responsive, benutzerfreundliche Layouts zu erstellen.

Eigenschaften

Name	Beschreibung	Verwendung
Horizontale Ausrichtung	Richten Sie die horizontale Ausrichtung des Inhalts innerhalb des Layouts an	Verwenden Sie diese Einstellung, um sicherzustellen, dass der Inhalt kohärent ausgerichtet ist und über das gesamte Layout hinweg ein ausgewogenes und harmonisches Erscheinungsbild bewahrt.
Vertikale Ausrichtung	Manipulieren Sie die vertikale Ausrichtung des Inhalts innerhalb des Layouts.	Optimieren Sie die vertikale Positionierung des Inhalts und stellen Sie sicher, dass er auf ansprechende Weise präsentiert wird, die mit den allgemeinen Designzielen übereinstimmt.
Zur Begrenzung ziehen	Erlauben Sie dem Inhalt, sich bis zu den Grenzen 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 Zeilen	Ermöglichen Sie die Aufnahme von Inhalt über mehrere Zeilen hinweg.	Aktivieren Sie diese Funktion, wenn Ihr Layout die Verteilung von Inhalt in einer vertikalen Reihenfolge erfordert und so eine strukturierte und organisierte Darstellung erleichtert.
Als Abschnitt anzeigen	Legen Sie fest, dass das Layout als eigenständiger Abschnitt auf der Seite angezeigt wird.	Legen Sie fest, dass das Layout als eigenständiger Abschnitt auf der Seite angezeigt wird.
Spaltenlayout	Bestimmen Sie, auf welche Weise Inhalte in Spalten angezeigt werden.	Passen Sie die Spaltenkonfiguration an, um eine rasterähnliche Struktur zu schaffen und eine systematische und ordentliche Anordnung von Inhalten für eine verbesserte visuelle Navigation zu fördern.

Spaltenlayout-Einstellungen

Die Spaltenlayout-Einstellungen bieten Flexibilität bei der Organisation von Seiteninhalten und stellen sicher, dass sie sich responsiv an verschiedene Bildschirmgrößen und Geräte anpassen, während ein sauberes, strukturiertes Erscheinungsbild erhalten bleibt.

Typ

Bestimmt die Art des Spaltenlayouts.

• Optionen:

  • Flexibel: Spalten in diesem Layouttyp passen ihre Größe dynamisch an den Inhalt und den 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 behält eine konstante Größe für die Spalten bei, unabhängig von Bildschirmgröße oder Inhaltsmenge. Feste Spalten sind hilfreich, wenn ein einheitliches und konsistentes Layout erforderlich ist.
• Verwendung: Wählen Sie Flexibel für fließende Layouts, die sich an verschiedene Bildschirmgrößen anpassen müssen, und Fest für Layouts, die Konsistenz bei 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 festzulegen, wie viel Platz jede Spalte einnehmen soll. Beispielsweise würde eine Größe von 4 in einem Raster mit 12 Einheiten 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: Verschiebt die Spalte in Richtung der rechten Kante.
  • Oben: Richtet die Spalte näher am oberen Rand des Containers aus.
  • Unten: Positioniert die Spalte in der Nähe des unteren Randes des Containers.
• Verwendung: Verwenden Sie diese Einstellung, um die Position von Spalten im Verhältnis zu ihrer Umgebung fein abzustimmen und so die visuelle Attraktivität und den räumlichen Ausgleich des Layouts zu verbessern.

Innenabstand

Steuert den inneren Abstand der Spalte.

• Optionen:

  • Horizontal: Passt den Innenabstand links und rechts der Spalte an.
  • Rundum: Fügt auf allen Seiten der Spalte Innenabstand hinzu.
• Verwendung: Wenden Sie Innenabstand an, um innerhalb der Spalte Platz zu schaffen, damit der Inhalt nicht direkt an den Rändern anliegt, und verbessern Sie so die Lesbarkeit und die visuelle Ästhetik.

Die Spaltenlayout-Einstellungen der Avonni-Layout-Komponente sind unerlässlich, um in Salesforce Experience Cloud Sites ausgefeilte und funktionale Layouts zu erstellen.