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

В данном уроке мы покажем, как создать анимированный текст и научим работе с колонками.

Создание анимированного текста, работа с колонками

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

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

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

Шаг #4. Нажмите на иконку «Оформление» → перейдите в раздел «Цвет фона».

Шаг #5. Задайте цвет фона (#eed3cd).

Шаг #6. Правой клавишей мышки нажмите на блок → в появившейся панели выберите «Добавить колонку».

Шаг #7. Задайте ширину колонки 25% → задайте расположение колонки слева → нажмите «Добавить».

Шаг #8. Правой клавишей мышки нажмите на блок → в появившейся панели выберите «Добавить колонку №2».

Шаг #9. Задайте ширину колонки 25% → задайте расположение колонки слева → нажмите «Добавить».

Шаг #10. Правой клавишей мышки нажмите на блок → в появившейся панели выберите «Добавить колонку №3».

Шаг #11. Задайте ширину колонки 25% → задайте расположение колонки слева → нажмите «Добавить».

Шаг #12. Правой клавишей мышки нажмите на последнюю колонку №4 → В появившейся панели выберите «Свойства колонки» → укажите ширину колонки 25%.

Шаг #13. В разделе «Медиа» на панели инструментов выберите «Анимационную цифру». Перетащите элемент в среду визуальной верстки, в колонку №1.

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

Шаг #15. Настройте параметры цифры (Начало: 0, Завершение: 12).

Шаг #16. Настройте параметры анимации (Шаг: 1, Скорость: 2).

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

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

Шаг #19. Настройте параметры цифры (Начало: 0, Завершение: 12).

Шаг #20. Настройте параметры анимации (Шаг: 1, Скорость: 2).

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

Шаг #22. Настройте порядок объектов в панели слоев → необходимо, чтобы скопированный объект оказался под своим оригиналом.

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

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

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

Шаг #26. Над текстом (в верхнем левом углу) нажмите на иконку «Редактировать» (знак карандаша) → вставьте или наберите текст (Часов ежемесячно/ Именно столько тратят женщины на рутинный ежедневный уход. Это домашние маски, уход за ногтями, окраска волос, эпиляция. / Часто такой уход делается уже вечером, после работы и не приносит должного удовольствия. Мы поможем сократить это время и сделать его более эффективным.) → отбейте интервалы межу абзацами.

Шаг #27. Выделите заголовок (Часов ежемесячно) → в текстовом редакторе выберите стиль для заголовка (Заголовок черный (50 px)) → задайте данному тексту заголовок уровня H2.

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

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

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

Шаг #31. В разделе «Медиа» на панели инструментов выберите «Анимационную цифру» → перетащите элемент в среду визуальной верстки, в колонку №3.

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

Шаг #33. Настройте параметры цифры (Начало: 0, Завершение: 20).

Шаг #34. Настройте параметры анимации (Шаг: 1, Скорость: 1).

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

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

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

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

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

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

Шаг #41. В появившейся панели «Информация» установите ширину и высоту изображения (ширина: 76 %, высота: 1 px) → переключитесь во вкладку «Ориентация» → укажите ориентацию объекта (по середине, по центру) → укажите отступы от базовой точки (по оси x: 0 px, по оси y: 0 px).

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

Шаг #43. Выделите «Анимационные цифры» → в появившейся панели «Выравнивание» выберите выравнивание по правому краю (важно, чтобы скопированный элемент стоял левее оригинала).

Шаг #44. Нажмите на скопированную «Анимационную цифру» → в появившейся панели «Ориентация» установите расположение элемента → укажите ориентацию объекта (сверху, по центру) → укажите отступы от базовой точки (по оси x: 0 px, по оси у: 295 px).

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

Шаг #46. Настройте параметры цифры (Начало: 0, Завершение: 5).

Шаг #47. Настройте параметры анимации (Шаг: 1, Скорость: 1).

Шаг #48. Нажмите на «Текст» → над элементом (в верхнем левом углу) появятся иконки с возможными действиями. Нажмите на иконку «Копировать» (знак «+») → разместите скопированный элемент под скопированную «Анимационную цифру» .

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

Шаг #50. Выделите текстовые элементы → в появившейся панели «Выравнивание» выберите выравнивание по правому краю (важно, чтобы скопированный элемент стоял левее оригинала).

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

Шаг #52. Нажмите на разделитель → над элементом (в верхнем левом углу) появятся иконки с возможными действиями. Нажмите на иконку «Настройки» (знак шестеренки) → укажите цвет разделителя (#deafa5).

Шаг #53. Выделите все элементы из колонки №3 (Ctrl+C) → вставьте элементы в колонку №4 (Ctrl+V).

Шаг #54. Нажмите на «Анимационную цифру» → над цифрой (в верхнем левом углу) появятся иконки с возможными действиями → нажмите на иконку «Настройки» (знак шестеренки) → настройте параметры цифры (Начало: 0, Завершение: 45) → настройте параметры анимации (Шаг: 1, Скорость: 1).

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

Шаг #56. Нажмите на «Анимационную цифру» под разделителем → над цифрой (в верхнем левом углу) появятся иконки с возможными действиями → нажмите на иконку «Настройки» (знак шестеренки) → настройте параметры цифры (Начало: 0, Завершение: 2) → настройте параметры анимации (Шаг: 1, Скорость: 1).

Шаг #57. Нажмите на скопированный текст → над элементом (в верхнем левом углу) нажмите на иконку «Редактировать» (знак карандаша) → вставьте или наберите текст (Секунды ухоженной женщине достаточно короткого взгляда в зеркало, чтобы понять, что она неотразима.).

Шаг #58. Сохраните изменения.

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

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