Select several elements, then evenly align, distribute, and adjust them. These features ensure that all the selected elements are positioned accurately, which is easier than trying to position them manually.
There's 2 ways to adjust multiple elements, from the Layouts panel, or by using the Editor Toolbar.
Aligning elements
Align your elements to keep your site tidy and organized. This feature ensures that all of your selected elements are aligned accurately, without needing to manually align each one.
To align multiple elements:
Multi-select the relevant elements.
Click the Layouts icon , or the Align icon on the Editor Toolbar.
Select an option:
Left : The elements are aligned to the left of the selected elements box.
Center : The elements are aligned to the center of the selected elements box on a vertical axis.
Right : The elements are aligned to the right of the selected elements box.
Top : The elements are aligned to the top of the selected elements box.
Middle : The elements are aligned to the middle of the selected elements box on a horizontal axis.
Bottom : The elements are aligned to the bottom of the selected elements box.
Distributing elements
Distributing your elements evenly on an axis helps keep your pages clean and prevent them from looking overcrowded.
To distribute multiple elements:
Multi-select the relevant elements.
Click the Layouts icon, or the Distribute icon on the Editor Toolbar.
Select an option:
Distribute horizontally : Elements are evenly distributed horizontally. They are spaced equally on a horizontal axis.
Distribute : Elements are evenly distributed horizontally and vertically. They are spaced equally on a horizontal and vertical axis.
Distribute vertically : Elements are evenly distributed vertically. They are spaced equally on a vertical axis.
Matching element size
Match your elements so that they have the same height, width, or overall size. This is a great way to keep your content looking consistent and professional, and prevents your visitors from getting distracted by differently-sized elements
To match the size in multiple elements:
Multi-select the relevant elements.
Click the Layouts icon , or the Match Size icon in the Editor Toolbar.
Select an option:
Match width : The width of the elements are adjusted to be the same.
Match : The size (height and width) of the elements are adjusted to be the same.
Match height : The height of the elements are adjusted to be the same.
Comments