Инструмент «Выравнивание объектов»


В данном видеоуроке подробно показаны функции, принципы работы и возможности инструмента «Выравнивание объектов» в визуальной верстке 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-м столбце → примените горизонтальное выравнивание, по центру (в данном случае все объекты имеют одинаковую центральную точку) → во вкладке «Выравнивание» выберите горизонтальное, по центру.

Была ли полезна для вас данная статья?

Мы используем файлы Cookie, чтобы сделать работу с сайтом проще и удобнее. Нажимая кнопку «Принять Cookie» или продолжая просмотр сайта, вы разрешаете их использование.
Подробная информация
 тут

Cookies в CMS Smart Engine