Инструмент «Выравнивание объектов»
В данном видеоуроке подробно показаны функции, принципы работы и возможности инструмента «Выравнивание объектов» в визуальной верстке CMS Smart Engine.
Выравнивание объектов в визуальной верстке
Шаг #1. В разделе «Наполнение» на панели инструментов выберите «Подложка» → перетащите элемент в среду визуальной верстки.
Шаг #2. В появившейся панели «Информация» установите ширину и высоту подложки (ширина: 20 px, высота: 20 px).
Шаг #3. В «Настройках» укажите высоту блока - 640 px.
Шаг #4. Нажмите на подложку → над группой (в верхнем левом углу) появятся иконки с возможными действиями. Нажмите на иконку «Копировать» (знак «+») → скопируйте подложку 2 раза.
Шаг #5. Распределите подложки в верхней части блока, на небольшие расстояния друг от друга.
Шаг #6. Примените вертикальное выравнивание, по верху (в данном случае за точку выравнивания берется объект который находится выше всего, т. к. мы выравниваем по верху) → выделите все элементы одновременно → во вкладке «Выравнивание» выберите вертикальное по верху.
Шаг #7. Нажмите на подложку → над группой (в верхнем левом углу) появятся иконки с возможными действиями. Нажмите на иконку «Копировать» (знак «+») → скопируйте подложку 2 раза.
Шаг #8. Распределите подложки в верхней части блока, на небольшие расстояния друг от друга.
Шаг #9. Примените вертикальное выравнивание по низу (в данном случае за точку выравнивания берется объект, который находится ниже всего, т. к. мы выравниваем по низу) → выделите последние 3 скопированных элемента одновременно → во вкладке «Выравнивание» выберите вертикальное, по низу.
Шаг #10. Нажмите на подложку → над группой (в верхнем левом углу) появятся иконки с возможными действиями. Нажмите на иконку «Копировать» (знак «+») → скопируйте подложку 2 раза.
Шаг #11. Распределите подложки в средней части блока, на небольшие расстояния друг от друга.
Шаг #12. Примените вертикальное выравнивание, по середине (в данном случае все объекты имеют одинаковую центральную точку) → выделите последние 3 скопированных элемента одновременно → во вкладке «Выравнивание» выберите вертикальное, по середине.
Шаг #13. С помощью инструмента «Выравнивание» мы можем применить к объектам горизонтальное выравнивание.
Шаг #14. Выделите все подложки находящиеся в 1-ом столбце → примените горизонтальное выравнивание по левому краю (в данном случае за точку выравнивания берется объект, который находится левее всего, т. к. мы выравниваем по левому краю) → во вкладке «Выравнивание» выберите горизонтальное, по левому краю.
Шаг #15. Выделите все подложки находящиеся в 3-ем столбце → примените горизонтальное выравнивание по правому краю (в данном случае за точку выравнивания берется объект, который находится правее всего, т. к. мы выравниваем по правому краю) → во вкладке «Выравнивание» выберите горизонтальное, по правому краю.
Шаг #16. Выделите все подложки находящиеся во 2-м столбце → примените горизонтальное выравнивание, по центру (в данном случае все объекты имеют одинаковую центральную точку) → во вкладке «Выравнивание» выберите горизонтальное, по центру.
