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


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


Скачать все файлы к курсу «Лендинг»





Работа с текстовыми элементами и анимацией

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

 

 

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

 


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



Шаг #4. Нажмите на иконку «Оформление» → в разделе «Фон блока» нажмите «Выбрать фон» → загрузите изображение с компьютера или из интернета.  

 

 

Шаг #5. Ниже в выпадающем списке выберите параметр «Заполнить». 



Шаг #6. Укажите ориентацию по центру.

  


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

 


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



Шаг #9. Перейдите во вкладку дополнительно → укажите скорость анимации 1.3 секунды. 

 


Шаг #10. Перейдите в раздел «Тип анимации»  → выберите анимацию «Ветер».


 

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



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

 

 

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



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


 

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



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



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


 

Шаг #18. Над изображением (в верхнем левом углу) появятся иконки с возможными действиями. Нажмите на иконку «Настройки» (знак шестеренки) → наберите текст кнопки (УЗНАТЬ БОЛЬШЕ)  →  в оформлении выберите необходимый стиль для кнопки (как создавать стили вы можете ознакомиться по ссылке).  



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



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



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

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

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

Cookies в CMS Smart Engine