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


Урок #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: 53 px, по оси y: 70 px) → в этой же панели переключитесь во вкладку «Информация» → установите ширину (ширина: 260 px).   


 

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



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



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

 


Шаг #21. Нажмите на цифру → в появившейся панели «Ориентация» укажите ориентацию объекта (сверху, слева) → укажите отступы от базовой точки (по оси x: 48 px, по оси y: 65 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, Завершение: 5) → настройте параметры анимации (Шаг: 1, Скорость: 1).



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



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



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