Layout

Overview

The Avonni Layout component is designed to optimize and streamline content presentation on your Experience Cloud site. Offering a blend of alignment and display choices ensures your site's content is organized, responsive, and tailored to various device sizes.

🎥 Tutorials

NameDescription

Learn to create a dynamic grid layout with Avonni Components for showcasing products or features.

Learn to create responsive, user-friendly layouts with Avonni Layout in Experience Cloud across various devices.

Properties

NameDescriptionUsage

Horizontal Align

Adjust the horizontal alignment of content within the layout

Utilize this setting to ensure content aligns cohesively, maintaining a balanced and harmonized appearance across the layout.

Vertical Align

Manipulate the vertical alignment of content within the layout.

Optimize the vertical positioning of content, ensuring it is presented in a visually appealing manner that resonates with the overall design goals.

Pull to Boundary

Allow content to extend towards the boundaries of the layout.

Utilize this option to craft layouts that maximize space, enhancing the visibility and presentation of content elements.

Multiple Rows

Enable the accommodation of content across multiple rows.

Activate this feature when your layout demands the distribution of content in a vertical sequence, facilitating a structured and organized presentation.

Display as Section

Set the layout to manifest as a distinct section within the page.

Set the layout to manifest as a distinct section within the page.

Column Layout

Determine the manner in which content is displayed within columns.

Customize the column configuration to establish a grid-like structure, fostering a systematic and neat arrangement of content for enhanced visual navigation.

Column Layout Settings

The Column Layout settings provide flexibility in organizing page content, ensuring it adapts responsively to different screen sizes and devices while maintaining a clean, structured appearance.

Type

Determines the nature of the column layout.

  • Options:

    • Flexible: Columns in this layout type adjust their size dynamically based on the content and the available screen space. This option is ideal for responsive designs where the layout needs to adapt to various device sizes.

    • Fixed: This option maintains a constant size for the columns, regardless of the screen size or content volume. Fixed columns are helpful when a uniform and consistent layout is required.

  • Usage: Choose Flexible for fluid layouts that need to adjust to different screen sizes, and Fixed for layouts that require consistency in column widths.

Size

Sets the width of the columns within the grid. The grid system is typically based on a 12-unit structure.

  • Range: 1 to 12, where each unit represents a proportion of the total available width.

  • Usage: Assign a size to define how much space each column should occupy. For instance, setting a size of 4 in a 12-unit grid would mean the column takes up one-third of the available horizontal space.

Alignment Bump

Adjusts the position of the column within its container.

  • Options:

    • Left: Shifts the column towards the left edge of the container.

    • Right: Moves the column towards the right edge.

    • Top: Aligns the column closer to the top of the container.

    • Bottom: Positions the column near the bottom of the container.

  • Usage: Use this setting to fine-tune the position of columns relative to their surroundings, enhancing the layout's visual appeal and spatial balance.

Padding

Controls the internal spacing of the column.

  • Options:

    • Horizontal: Adjusts padding on the left and right sides of the column.

    • Around: Adds padding on all sides of the column.

  • Usage: Apply padding to create space within the column, ensuring the content is not flush against the edges, improving readability and visual aesthetics.

The column layout settings of the Avonni Layout Component are essential for creating polished and functional layouts in Salesforce Experience Cloud sites.

Last updated