Как создать простую текстовую область с помощью Divi

Текстовые вывески представляют собой область прокрутки текста на вашем веб-сайте, которая привлекает читателей полезными фрагментами контента. Их также называют тикерами (или тикерами новостей) и часто используются для отображения постоянного потока обновлений новостей вверху или внизу страницы. . Обычно анимация прокрутки выполняется с одной строкой контента в цикле, так что информация отображается повторно. К сожалению, <marquee> html <marquee> устарел, поэтому в наши дни мы рассчитываем на CSS и JavaScript для создания шатров. Однако с Divi вы можете создать простую рамку, не беспокоясь о настраиваемом коде.

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

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

Sneak Peek

Скачайте макет БЕСПЛАТНО

Чтобы получить доступ к дизайну из этого урока, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.

СКАЧАТЬ

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

Подпишитесь на наш канал Youtube

Чтобы импортировать макет на свою страницу, просто извлеките zip-файл и перетащите файл json в Divi Builder.

Давайте перейдем к руководству, ладно?

Что вам нужно для начала

Для начала вам понадобится следующее:

1. Тема Divi установлена ​​и активна
2. Новая страница, созданная для создания с нуля в интерфейсе пользователя (визуальный конструктор)

После этого у вас будет чистый холст, чтобы начать проектировать в Divi.

Часть 1: Создание простой текстовой области в Divi

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

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

Сначала создайте обычный раздел с строкой в ​​один столбец.

Затем перед добавлением модуля обновите строку с фиксированной шириной, тенью блока и радиусом границы следующим образом:

• Максимальная ширина: 200 пикселей
• Отступ: 10 пикселей сверху, 10 пикселей снизу.
• Круглые углы: 10 пикселей
• Box Shadow: см. Снимок экрана
• Горизонтальное переполнение: скрыто
• Вертикальный перелив: скрытый

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

Как только строка будет закончена, добавьте в нее новый текстовый модуль.

Затем обновите содержимое тела одной строкой текста. А пока убедитесь, что строка текста не прерывается на другую строку.

• Тело: «Это приговор»

Дизайн текстового модуля

Обновите настройки дизайна текстового модуля следующим образом:

• Маржа: -100% слева, 100% справа

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

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

Результат

А теперь посмотрим на результат.

Создание более длинных строк текста

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

Сначала в текстовом модуле замените основной текст следующим:

<p>This is a sentence in a marquee with a <a href="#">link</a></p>

Добавьте больше ширины и поля, чтобы разместить более длинную строку текста

Как вы могли заметить, текст теперь разбивается на три строки вместо одной.

Поэтому нам нужно настроить поля и интенсивность анимации.

• Ширина: 207%
• Маржа: -207% слева, 207% справа
• Интенсивность анимации: 75%

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

Результат

Вот окончательный результат.

Приостановка анимации выделенного текста при наведении курсора

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

Добавьте фрагмент CSS, чтобы приостановить анимацию при наведении курсора

Чтобы добавить фрагмент css, откройте настройки текстового модуля и добавьте следующий настраиваемый CSS-код к основному элементу на вкладке при наведении курсора :

animation-play-state: paused;

Конечный результат

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

Часть 2: Создание текстовой области как адаптивного элемента дизайна в Divi

Теперь, когда мы понимаем, как создать простую текстовую область в Divi, мы можем использовать ту же концепцию для создания адаптивного элемента дизайна текстовой области. Это хорошо подойдет для создания уникальных анимационных дизайнов для заголовков или заголовков разделов.

Для этого мы собираемся использовать готовый макет домашней страницы Divi Job Recruiter.

Добавить готовый макет

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

Удалить лишнее содержимое с макетом

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

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

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

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

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

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

Однако нам необходимо настроить остальные параметры следующим образом.

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

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

Обновить дизайн текста текстового модуля

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

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

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

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

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

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

Окончательный дизайн

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

Последние мысли

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

Я с нетерпением жду вашего ответа в комментариях.

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