Пропустить

Как создать зону супергероя с анимированным текстом

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 701.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

Это руководство является дополнением к руководству, которое мы сделали несколько дней назад. Мы действительно показали вам, как добавить прокручиваемый текст в столбец на Divi. Сегодня мы покажем вам, как использовать ту же технику, чтобы добавить раздел «супергерой» (выражение, используемое для описания большой области веб-страницы, предназначенной для привлечения внимания и выделения определенных элементов) .

Давайте начнем.

Добавить предопределенный макет

Чтобы добавить макет на свою страницу, откройте меню настроек внизу конструктора Divi и щелкните значок плюса. Во всплывающем окне «Загрузить из библиотеки» выберите пакет макетов Job Recruiter. Затем щелкните, чтобы использовать макет домашней страницы.

Модель шаблона divi

Удалить дополнительный контент с макетом

После загрузки презентации на страницу разверните каркасное представление и удалите из презентации все содержимое, кроме полноразмерного заголовка и раздела чуть ниже него.

Раздел модификации дизайна divi

Создание анимации выделенного текста

Как видите, слово «наемный» уже используется как большой элемент текстового дизайна в текстовом модуле во втором разделе. Мы собираемся превратить этот текстовый мод в элемент дизайна отзывчивого текстового динамика. Чтобы сделать прямоугольник текста отзывчивым, необходимо убедиться, что строка и текстовый модуль занимают всю ширину окна браузера. Мы можем сделать это, используя 100% ширину. Затем мы можем использовать единицу длины vw для размера текста. Это сделает текст подходящим по ширине браузера. После этого мы применим те же принципы, которые мы использовали ранее, чтобы проиллюстрировать наш простой пример прокрутки текста.

Вот как это сделать.

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

Обновить параметры линии

Как упоминалось ранее, строка должна быть 100%, чтобы дизайн этого адаптивного выделения текста работал. Это позволяет нашему текстовому модулю использовать единицы длины vw относительно ширины браузера. Поскольку в нашем предопределенном макете уже есть линия шириной 100%, нам не нужно ничего делать.

Конфигурация ширины модуля Divi Line

Тем не менее, мы должны настроить остальные параметры следующим образом.

  • Маржа: -24vw вниз
  • Преобразовать преобразовать ось Y: -24vw
  • Горизонтальное переполнение: скрыто
  • Вертикальный перелив: скрытый

Конфигурация настроек Divi Line

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

Отрицательное нижнее поле предназначено для удаления отрицательного пространства, которое остается каждый раз, когда мы перемещаем строку с помощью команды transform translate. И нам нужно скрыть переполнение строки для нашего текстового эффекта выделения.

Обновление текстового оформления текстового модуля

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

Откройте текстовый модуль и обновите следующее:

  • Цвет текста текста: rgba (255,255,255,0.16)
  • Размер текста: 36vw
  • Маржа: -100% слева, 100% справа

В качестве размера текста используется единица длины vw, поэтому текст хорошо соответствует ширине браузера.

Конфигурация текстового модуля Divi

Добавить анимацию в текстовый модуль

  • Стиль анимации: слайд
  • Направление анимации: влево
  • Продолжительность анимации: 10000 мс
  • Интенсивность анимации: 100%
  • Анимация кривой скорости: линейная
  • Повтор анимации: петля

Конфигурация анимации текста DiviОкончательный дизайн

Теперь проверьте окончательный дизайн.

Наемная анимация дивиЗаключительные мысли

Текстовые поля могут быть удобным инструментом для веб-дизайна. Они не ограничиваются работой только в качестве телетайпов. Они также могут добавить интересный элемент анимации в ваш веб-дизайн. И самое приятное то, что Divi позволяет легко создавать и разрабатывать всевозможные красивые вещи. Надеюсь, этот урок поможет вам создавать простые тексты для выбора, когда они вам понадобятся.

Легко создайте свой интернет-магазин

Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [Рекомендуется]

Надеюсь получить известие от вас в комментариях.

За ваше здоровье!

Эта статья содержит комментарии 0

Оставить комментарий

Ваш электронный адрес не будет опубликован. Обязательные для заполнения поля помечены *

Этот сайт использует Akismet для уменьшения нежелательности. Узнайте больше о том, как используются ваши комментарии.

Вверх
2 акции
доля2
чирикать
Регистрация