Need help? We've got your back.

The builder 2.0 gives you the ability to align elements and components effortlessly. Whether using the toolbar or the editing panel, it’s easy to align any part of the design.

With the multi-selector option, you can basically select more than one child inside of a parent div and align them altogether. Instead of adjusting each one manually, you can select and align multiple parts at once.

How Multi-Select Works

First, enable the multi-selector option from the top bar inside the builder 2.0.

With multi-selector enabled, left-click the parts, one after the other, that you want to align at once.

[Note: You can also hold SHIFT key and click on an item to activate the multi-select feature.]

Remember that you can only select relative child designs inside of a common parent or wrapper. For example, here we’ve selected the cards where each card is a child of the common parent div or box element.

But, we cannot select a card and then go on to select the text inside that card, for example. This is because the text is a child of the card, and not of the outward box element. In other words, each card itself is a parent to the text (“Life Coaching”) and the icon it contains.

You can select all the children under the common parent with a click of a button. Simply click the “select all” icon which will appear after you select at least one child.

Horizontal Alignments

Once you’ve selected your desired child items, select “H” from the visible toolbar for horizontal alignment options.

You’ll find the three standard alignment options:

Align Left aligns the selected children to the left of the parent container/div. Align Right puts the selected children to the right of the parent container. And Align Center simply arranges them in the center of the parent div.

There are also three other advanced alignment options to help you make easy alignments.

Space Between: Aligns the selected items keeping a gap in-between each selected item.

Space Around: Aligns the selected items keeping a gap on both left and right side of each item.

Space Evenly: Keeps an equal gap before the first item, between all items, and after the last item. Every item is distributed in a perfect symmetry.

[Note: Hover your mouse over an option to see its label.]

Vertical Alignments

Select the “V” option to see all the vertical alignment options. 

You can align the selected items on top, middle, and bottom of the parent div. For these, simply use the Align Top, Align Middle, and Align Bottom options respectively.

The next three options are Vertical Space Between, Vertical Space Around, and Vertical Space Evenly. The first one keeps a gap only in-between all the selected items, the second one keeps a gap on both above and below the items, and the third one simply distributes the items symmetrically with respect to the space available.

The final three options are for adjusting the vertical alignment of items placed side by side. For example, think of the three pricing cards. Here’s how they align on the three different options.

1. Inline Top: Aligns the selected elements to the top edge of the tallest item in the row.

2. Inline Center: Vertically centers all selected elements relative to each other in the same row.

3. Inline Bottom: Aligns the selected elements to the bottom edge of the lowest item in the row.

Resizing & Moving Items

You can use keyboard shortcuts after selecting items to quickly resize multiple items. This helps to achieve consistency in the size.

Here’s an example to illustrate how you can use keyboard shortcuts to resize. In the screenshot, only the first two cards have the right size and suppose you need to resize all the other cards to have the same size as the first two.

[Note: You cannot drag or resize items like usual when you are using the multi-select option]

First, enable the multi-select option and select all the other cards except for the first two. Then you can use two keyboard shortcuts: 

1. SHIFT + Arrow Keys: Use the up and down arrow keys while holding SHIFT. This will resize the items from the top. The left and right arrow keys will help to adjust the size from the left side.

2. ALT + Arrow Keys: Use the up and down arrow keys while holding ALT. This will resize the items from the bottom. The left and right arrow keys will help to adjust the size from the right side of the items. 

For moving, you can just use the arrow keys. All the selected items will move simultaneously in the desired direction.