Создание лендинга: Урок #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. Сохраните изменения.

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

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