Layout

Übersicht

Die Avonni Layout-Komponente wurde entwickelt, um die Inhaltsdarstellung auf Ihrer Experience Cloud-Seite zu optimieren und zu vereinfachen. Eine Kombination aus Ausrichtungs- und Anzeigeoptionen stellt sicher, dass die Inhalte Ihrer Seite organisiert, responsiv und an verschiedene Gerätegrößen angepasst sind.

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.

🎥 Tutorials

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

Eigenschaften

Name	Beschreibung	Verwendung
Horizontale Ausrichtung	Passen Sie die horizontale Ausrichtung von Inhalten innerhalb des Layouts an	Verwenden Sie diese Einstellung, um sicherzustellen, dass Inhalte kohärent ausgerichtet sind und ein ausgewogenes, harmonisches Erscheinungsbild im gesamten Layout gewahrt bleibt.
Vertikale Ausrichtung	Manipulieren Sie die vertikale Ausrichtung von Inhalten innerhalb des Layouts.	Optimieren Sie die vertikale Positionierung von Inhalten, sodass sie in einer optisch ansprechenden Weise präsentiert werden, die mit den übergeordneten Designzielen übereinstimmt.
An die Begrenzung ziehen	Ermöglichen Sie, dass Inhalte sich bis an die Grenzen des Layouts erstrecken.	Nutzen Sie diese Option, um Layouts zu gestalten, die den Platz maximieren und die Sichtbarkeit sowie Präsentation von Inhaltselementen verbessern.
Mehrere Reihen	Ermöglichen Sie die Anordnung von Inhalten über mehrere Reihen.	Aktivieren Sie diese Funktion, wenn Ihr Layout die Verteilung von Inhalten in einer vertikalen Reihenfolge erfordert, um eine strukturierte und organisierte Darstellung zu erleichtern.
Als Abschnitt anzeigen	Legen Sie das Layout so fest, dass es als eigener Abschnitt innerhalb der Seite erscheint.	Legen Sie das Layout so fest, dass es als eigener Abschnitt innerhalb der Seite erscheint.
Spaltenlayout	Bestimmen Sie, wie Inhalte innerhalb von Spalten angezeigt werden.	Passen Sie die Spaltenkonfiguration an, um eine rasterähnliche Struktur zu schaffen, die eine systematische und ordentliche Anordnung von Inhalten für eine verbesserte visuelle Navigation fördert.

Einstellungen für das Spaltenlayout

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

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.

  • Fixiert: Diese Option behält eine konstante Größe für die Spalten bei, unabhängig von Bildschirmgröße oder Inhaltsmenge. Fixierte Spalten sind hilfreich, wenn ein einheitliches und konsistentes Layout erforderlich ist.

• Verwendung: Wählen Flexibel für flüssige Layouts, die sich an verschiedene Bildschirmgrößen anpassen müssen, und Fixiert 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. Beispielsweise würde die Festlegung 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 nahe 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 und räumliche Balance des Layouts zu verbessern.

Innenabstand

Steuert den inneren Abstand der Spalte.

• Optionen:

  • Horizontal: Passt das Padding an den linken und rechten Seiten der Spalte an.

  • Rundum: Fügt auf allen Seiten der Spalte Padding hinzu.

• Verwendung: Wenden Sie Padding an, um innerhalb der Spalte Platz zu schaffen, damit der Inhalt nicht direkt an den Kanten anliegt und die Lesbarkeit sowie die visuelle Ästhetik verbessert werden.

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