Текстовите маркировки предоставят скролираща текстова област на вашия уебсайт, която ангажира читателите с полезни откъси от съдържание. Те се наричат ​​още тикери (или новинарски тикери) и често се използват за показване на редовен поток от новинарски актуализации в горната или долната част на страницата. . Обикновено анимацията на превъртане се извършва с един ред съдържание в цикъл, така че информацията да се показва многократно. За съжаление, <marquee>Тъй като html тагът е остарял, в наши дни разчитаме на CSS и JavaScript, за да създаваме маркировки. С Divi обаче можете да създадете прост правоъгълник за избор, без да се притеснявате за персонализирания код.

В този урок ще обясним колко лесно е да създадете прост текст за подбор с Divi. Ще видим дори как да поставим на пауза превъртащата анимация на текст при нанасяне на курсора и как да добавим голям скролиращ текст като уникален елемент на дизайна за вашите заглавки.

Нека да започнем.

изследване

Какво трябва да започнете

За да започнете, се нуждаете от следното:

1. Le Тема на Divi инсталиран и активен
2. Нова страница, създадена за изграждане от нулата на предния край (визуален конструктор)

След това ще имате празно платно, за да започнете да проектирате в Divi.

Начало на зачеването

Ето как да го направите.

Започнете, като създадете редовен раздел с ред колона.

• Максимална ширина: 200px
• Тапицерия: 10px в горната част, 10px в долната част
• Кръгли ъгли: 10px
• Box Shadow: вижте екранната снимка
• Хоризонтално преливане: скрито
• Вертикално преливане: скрито

Добавете текстовия модул

Когато редът е завършен, добавете нов текстов модул към реда.

След това актуализирайте основното съдържание с един ред текст. Засега се уверете, че редът от текста не се разделя на друг ред.

• Body: "Това е изречение"

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

Актуализирайте параметрите на дизайна на текстовия модул, както следва:

• Марж: -100% вляво, 100% вдясно

Това позиционира текстовия модул отляво на реда. Тъй като видимост скрит ред е скрит, модулът ще бъде скрит, докато не добавим анимация, за да го направим видим.

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

резултат

Нека видим резултата сега.

Създаване на по-дълги текстови редове

В опростения текстов дизайн за избор по-горе ограничихме ширината на текстовия ред до същата ширина като реда. Ако обаче искаме да направим по-дълъг ред текст със същата ширина, ще трябва да променим настройките малко.

Първо върху текстовия модул и заменете тялото на текста със следното:

Това е фаза с връзка

Добавете повече ширина и поле, за да се побере най-дългият ред на текста

Както може да забележите, текстът е разделен на три реда, вместо на един.

Следователно трябва да коригираме полето и интензивността на анимацията.

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

Номерът тук е да увеличите ширината и да актуализирате стойностите на полетата, така че да остане само достатъчно място за един ред текст. След това регулирайте интензивността на анимацията, така че да няма голяма пауза между цикличната анимация.

резултат

Ето и крайния резултат.

Поставяне на пауза на анимацията на текста при избиране на курсора на мишката

Тъй като този правоъгълник за избор включва връзка, ще бъде трудно за потребителите да кликнат върху връзката, докато се движат. Въпреки това, можем да добавим малко css фрагмент към текстовия модул, който ще спре паузата на анимацията при задържане.

Добавете CSS фрагмент за пауза на анимацията при нанасяне на курсора на мишката

За да добавите css фрагмента, отворете настройките на текстовия модул и добавете следния персонализиран CSS код към основния елемент под раздела за задържане :

анимация-игра-състояние: пауза;

Краен резултат

Сега вижте крайния резултат. Имайте предвид, че текстовата анимация спира, когато курсорът се задържи над текста, позволявайки на потребителя да щракне върху връзката.

Това е всичко за този урок, надявам се, че ви е научил как да добавяте превъртащ текст в Divi.

Блеър Jersyer

Разработчик на WordPress и запален по всичко, свързано с новите технологични тенденции. Автори на добавки, Теми на WordPress и други уеб приложения. Автор в BlogPasCher.com.

Вижте пълната биография