Align and Spread

Adding multiple elements such as buttons, sliders,and list boxes to a page can create disarray. Dragging and dropping each items is easy, but keeping them organized is not. the Align and Spread tools help you to organize your page elements.
Follow the steps in this article to both align and space your elements within the center page of the Builder.

Selecting Multiple Interface Elements

Select Multiple Interface Elements in the following ways:

• Click and drag a box around a group of images.
• Click the first element, then hold the Control key and click to select additional elements.
  

A red box appears around all selected elements.

Aligning Elements

After selecting the relevant images, click one the following options to align the elements to the anchor element:

• Center horizontally – Moves images based on the center X coordinate of the highlighted area.
• Center vertically – Centering an image vertically will move the secondary images based on the Y coordinate of the highlighted area.
• Align Left – Arranges all items based on the lowest value X coordinate of the highlighted area.
• Align Right – Arranges all items based on the highest value X coordinate of the highlighted area.
• Align Top – Arranges all items based on the lowest value Y coordinate of the highlighted area.
• Align Bottom – Arranges items based on the highest value Y coordinate of the highlighted area.
  

Spacing

The spacing tool is used to create equal distance between X or Y coordinates of your highlighted items.

• Spreading items horizontally will adjust the items location within the row of the page.
  The spacing will be calculated by determining the overall distance of the X coordinates of your highlighted area and the number of items that exist within that area
• Spreading items vertically will adjust items the items location within the column of the page
  The spacing will be calculated by the overall distance of the Y coordinates of your highlighted area and number of items that exist within that area