Component Placement Settings

Configure how a Component is aligned and the padding around it.

In the Layout section of Page Properties, Studio users can set the 'Number Of Columns' each Page contains. This allows for more customization in the Page design. The Placement properties Column Start and Column Span are related to the number of columns set for that particular page.

• Column Start: Set the first column in which the Component will appear.
• Column Span: Set how many columns the Component will span.
• Alignment: Select from the dropdown to set the Component's horizontal alignment.
  • Default: Default selection
  • Center: Places the Component in the center of the Page or columns it is set to span.
  • Right: Places the Component to the right of the Page or columns it is set to span.
  • Left: Places the Component to the left of the Page or columns it is set to span.
• Vertical Alignment: Select from the dropdown to set the Component's vertical alignment.
  • Default: Default selection
  • Middle: Places the Component in the middle of the area it occupies on a Page. This is typically the best option when trying to align two side by side Components within a Page with multiple columns.
  • Bottom: Places the Component at the bottom of the area it occupies on a Page.
  • Top: Places the Component at the top of the area it occupies on a Page.

The Padding properties set how much space will appear on the top, bottom, left, and right of the Component. When building a Page with multiple Components, the Padding will determine the overall spacing between Components.

• Padding Left (px): Default set to 0.
• Padding Right (px): Default set to 0.
• Padding Top (px): Default set to 0.
• Padding Bottom (px): Default set to 0.

• Display Mode: Select from the dropdown
  • Both: Default selection
  • Degraded
  • Optimal