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

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

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

Работа с текстовыми и графическими элементами

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

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

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

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

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

Шаг #6. Над текстом (в верхнем левом углу) нажмите на иконку «Редактировать» (знак карандаша) → вставьте или наберите текст (SMART BEAUTY/ Хорошая укладка, красивый маникюр и расслабляющий массаж способны заменить женщине и антидепрессанты и тренинг личностного роста. Ухоженная женщина счастлива, уверена в себе и полна сил. Ощущение собственной привлекательности оказывает магическое влияние и на окружающих людей - они начинают считать женщину красивой.  Мы помогаем женщинам стать красивыми и менять мир к лучшему) → отбейте интервалы межу абзацами(если после редактирования интервал автоматически исчез, то повторно отбейте интервал и добавьте пробел). 

Шаг #7. Выделите заголовок → в текстовом редакторе выберите стиль текста (Заголовок черный (60 px)) → задайте данному тексту заголовок уровня H1( это одна из функций, позволяющих адаптировать сайт для поисковых систем, более подробнее о настройках SEO вы можете ознакомиться по ссылке).

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

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

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

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

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

Шаг #13. В появившейся панели «Информация» установите ширину и высоту подложки (ширина: 45 % высота: 410 px).

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

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

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

Шаг #17. Загрузите изображение с компьютера или из интернета.

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

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

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

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

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