Создание лендинга: Урок #3

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

Cоздание групп. Работа с анимацией при наведении

Шаг #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 блок. Все текстовые и медиа файлы вы можете скачать по ссылке.

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

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