Создание лендинга


Урок #3: создание групп. Работа с анимацией при наведении

В данном уроке мы покажем, как создать группу из нескольких объектов и как настроить анимацию при наведении.

Шаг #1. В разделе «Блоки» на панели инструментов выберите «Адаптивный блок» → перетащите элемент в среду визуальной верстки.

 

 

Шаг #2. Нажмите на блок в любом свободном месте → в нижнем или в верхнем углу блока появится иконка «Настройки» → нажмите на иконку.

 


Шаг #3. В «Настройках» укажите высоту блока - 520 px.



Шаг #4. В разделе «Медиа» на панели инструментов выберите «Фото» → перетащите элемент в среду визуальной верстки.  

 

 

Шаг #5. Загрузите изображения для блока (все текстовые и медиафайлы вы можете скачать по ссылке в описании).  



Шаг #6. Нажмите на одно из изображений, которое вы только что загрузили → в появившейся панели «Информация» установите ширину и высоту изображения (ширина: 31 %, высота: 500 px) → в этой же панели переключитесь во вкладку «Ориентация» → укажите ориентацию объекта (слева, сверху) → укажите отступы от базовой точки (по оси x: 2 %, по оси y: 0 px) → нажмите «Сохранить».  

  


Шаг #7. В разделе «Наполнение» на панели инструментов выберите «Подложка» → перетащите элемент в среду визуальной верстки.

 


Шаг #8. Нажмите на подложку → в появившейся панели «Информация» установите ширину и высоту изображения (ширина: 31 %, высота: 500 px) → в этой же панели переключитесь во вкладку «Ориентация» → укажите ориентацию объекта (слева, сверху) → укажите отступы от базовой точки (по оси x: 2 %, по оси y: 0 px) → нажмите «Сохранить». 



Шаг #9. Над подложкой (в верхнем левом углу) появятся иконки с возможными действиями. Нажмите на иконку «Настройки» (знак шестеренки) → укажите цвет подложки (#000000, прозрачность: 0.3).

 


Шаг #10. Нажмите на подложку → над подложкой (в верхнем левом углу) появятся иконки с возможными действиями. Нажмите на иконку «Эффекты» → выберите анимацию при взаимодействии → тип анимации: проявление → перейдите во вкладку «Настройки» → укажите скорость анимации 0.3 секунды.


 

Шаг #11. В разделе «Медиа» на панели инструментов выберите «Текст» → перетащите элемент в среду визуальной верстки.   



Шаг #12. Над текстом (в верхнем левом углу) нажмите на иконку «Редактировать» (знак карандаша) → вставьте или наберите текст (ВОЛОСЫ) → выделите данный текст → в текстовом редакторе выберите ориентацию текста по центру. 

 

 

Шаг #13. Нажмите на текст → над текстом (в верхнем левом углу) появятся иконки с возможными действиями → нажмите на иконку «Настройки» (знак шестеренки) → выберите стиль текста (Заголовок белый (50 px)).  



Шаг #14. Нажмите на текст → в появившейся панели ««Информация» установите ширину (ширина: 24%).



Шаг #15. Выделите текстовый элемент и подложку → в появившейся панели выберите вкладку «Выравнивание» → выберите горизонтальное выравнивание, по центру → укажите отступ текстового элемента по оси Y (по оси y: 70 px).


 

Шаг #16. В разделе «Медиа» на панели инструментов выберите «Текст» → перетащите элемент в среду визуальной верстки.   



Шаг #17. Над текстом (в верхнем левом углу) нажмите на иконку «Редактировать» (знак карандаша) → вставьте или наберите текст (Модные стрижки, стильные укладки и современные методы окрашивания. Лечение волос. Кератиновое выпрямление.) → выделите данный текст → в текстовом редакторе выберите ориентацию текста по центру.



Шаг #18. Нажмите на текст → над текстом (в верхнем левом углу) появятся иконки с возможными действиями → нажмите на иконку «Настройки» (знак шестеренки) → выберите стиль текста (Текст белый (16 px)).  


 

Шаг #19. Нажмите на текст → в появившейся панели ««Информация» установите ширину (ширина: 21%).



Шаг #20. Выделите текстовый элемент и подложку → в появившейся панели выберите вкладку «Выравнивание» → выберите горизонтальное выравнивание, по центру → укажите отступ текстового элемента по оси Y (по оси y: 202 px).


Шаг #21. В разделе «Наполнение» на панели инструментов выберите «Кнопка» → перетащите элемент в среду визуальной верстки. 

 


Шаг #22. Над изображением (в верхнем левом углу) появятся иконки с возможными действиями. Нажмите на иконку «Настройки» (знак шестеренки) →  в оформлении выберите необходимый стиль для кнопки (как создавать стили вы можете ознакомиться по ссылке) → наберите текст кнопки (ЗАПИСАТЬСЯ).

 


Шаг #23. Выделите кнопку и текстовый элемент → в появившейся панели выберите вкладку «Выравнивание» → выберите горизонтальное выравнивание, сначала по левому краю, а потом по центру → укажите отступ кнопки по оси Y (по оси y: 375 px).



Шаг #24. Нажмите на подзаголовок → над текстом (в верхнем левом углу) появятся иконки с возможными действиями → нажмите на иконку «Эффекты» → выберите анимацию при взаимодействии → тип анимации: проявление → перейдите во вкладку «Настройки» → укажите скорость анимации 0.3 секунды.



Шаг #25. Выделите все элементы → в панели слоев выберите действие «Группировка элементов» или нажмите (Ctrl+G).



Шаг #26. Нажмите на созданную группу → над группой (в верхнем левом углу) появятся иконки с возможными действиями. Нажмите на иконку «Эффекты» → выберите анимацию при прокрутке экрана → тип анимации: проявление снизу → укажите скорость анимации 0.2 секунды.



Шаг #27. Внутри группы выберите заголовок → в появившейся панели выберите вкладку «Ориентация» → установите ориентацию сверху, по центру.



Шаг #28. Внутри группы выберите подзаголовок → в появившейся панели выберите вкладку «Ориентация» → установите ориентацию по середине, по центру.



Шаг #29. Внутри группы выберите кнопку → в появившейся панели выберите вкладку «Ориентация» → установите ориентацию по середине, по центру.



Шаг #30. Нажмите на группу → над группой (в верхнем левом углу) появятся иконки с возможными действиями. Нажмите на иконку «Копировать» (знак «+») → в появившейся панели «Ориентация» установите расположение группы→ укажите ориентацию объекта (по центру, сверху) → укажите отступы от базовой точки (по оси x: 0 px, по оси y: 0 px).

 


Шаг #31. В панели слоев выберите элемент «Изображение» (в только что скопированной группе) → над изображением (в верхнем левом углу) появятся иконки с возможными действиями. Нажмите на иконку «Заменить фото» → выберите необходимое изображение.  



Шаг #32. В панели слоев выберите элемент «Текст» (Заголовок) → над текстом (в верхнем левом углу) появятся иконки с возможными действиями. Нажмите на иконку «Редактировать» (знак карандаша) → вставьте или наберите текст (КОСМЕТОЛОГИЯ).



Шаг #33. В панели слоев выберите элемент «Текст» (Подзаголовок) → над текстом (в верхнем левом углу) появятся иконки с возможными действиями. Нажмите на иконку «Редактировать» (знак карандаша) → вставьте или наберите текст (Пилинги и anti-age уход. Ультразвуковая чистка. Массаж лица. Микротоки и прессотерапия.).



Шаг #34. Нажмите на созданную группу → над группой (в верхнем левом углу) появятся иконки с возможными действиями. Нажмите на иконку «Эффекты» → выберите анимацию при прокрутке экрана → тип анимации: проявление снизу → укажите скорость анимации 0.4 секунды.



Шаг #35. Нажмите на группу → над группой (в верхнем левом углу) появятся иконки с возможными действиями. Нажмите на иконку «Копировать» (знак «+») → в появившейся панели «Ориентация» установите расположение группы → укажите ориентацию объекта (cправа, сверху) → укажите отступы от базовой точки (по оси x: 2 %, по оси y: 0 px).

 


Шаг #36. В панели слоев выберите элемент «Изображение» (в только что скопированной группе) → над изображением (в верхнем левом углу) появятся иконки с возможными действиями. Нажмите на иконку «Заменить фото» → выберите необходимое изображение.  



Шаг #37. В панели слоев выберите элемент «Текст» (Заголовок) → над текстом (в верхнем левом углу) появятся иконки с возможными действиями. Нажмите на иконку «Редактировать» (знак карандаша) → вставьте или наберите текст (МАНИКЮР).



Шаг #38. В панели слоев выберите элемент «Текст» (Подзаголовок) → над текстом (в верхнем левом углу) появятся иконки с возможными действиями. Нажмите на иконку «Редактировать» (знак карандаша) → вставьте или наберите текст (Спа-уход за руками. Парафинотерапия. Наращивание ногтей и традиционный маникюр.).



Шаг #39. Нажмите на созданную группу → над группой (в верхнем левом углу) появятся иконки с возможными действиями. Нажмите на иконку «Эффекты» → выберите анимацию при прокрутке экрана → тип анимации: проявление снизу → укажите скорость анимации 0.6 секунд.



Шаг #40. Во избежание случайного перемещения объектов, заблокируйте группы → нажмите на группу → в панели слоев выберите действие «Заблокировать перемещение» → подобным образом заблокируйте оставшиеся группы  → сохраните изменения. 



Шаг #41. Аналогичным образом создайте 4 блок.  Все текстовые и медиа файлы вы можете скачать по ссылке.



В следующем уроке вы узнаете, как создать анимированный текст.