Движущееся слово в заголовке тянет глаз туда, где нет статической линии. Анимированный заголовок виджет в Мастер-аддоны для Elementor разделите заголовок на фиксированную часть и анимированную часть, затем циклически перемещайте анимированную часть через список слов с такими эффектами, как вращение, набор текста, слайд и клип.
Вы пишете первый заголовок, добавляете слова, которые вращаются, выбираете предустановку анимации, затем стилизуете обе части. это руководство проходит через каждую настройку виджета.
Что делает виджет Animated Headline #
Виджет строит один заголовок из двух частей. The Первый заголовок остается на месте, и Второй заголовок вращается через список слов с выбранной вами анимацией. так что “Master Addons” может сидеть рядом со словом, которое меняется от Ultimate Addons к Unique Design к Unlimited Variations на цикле.
Он имеет три вкладки. Содержание содержит текст, список слов, предустановку и время. Стиль цвета и размеры каждой товарной позиции. Продвинутый имеет обычные параметры расстояния между Элементором и видимости.
Прежде чем начать #
- WordPress с Элементор установлен и активен.
- Мастер-аддоны для Elementor установлен и активен. Новое в плагине? Видеть руководство установки.
- Ваш текст с фиксированным заголовком и список слов, которые вы хотите изменить.
Как добавить виджет "Анимированный заголовок" #
В редакторе Elementor откройте Элементы панель и поиск Анимированные заголовки, или прокрутите в раздел Главные дополнения (виджеты несут фиолетовый значок МА). перетащите его на свою страницу, и он загружается с образцом заголовка, готового к редактированию.
Установите заголовки и список слов #
Открыть Содержание вкладка. Первый заголовок является ли статический текст и Вторые заголовки является повторителем слов, которые вращаются.
- Пресет стиля: анимация, используемая для вращающегося слова.
- Первый заголовок: фиксированная часть строки с опцией "Запись с помощью искусственного интеллекта".
- Вторые заголовки: один элемент на вращающееся слово. используйте "Добавить элемент", чтобы добавить слова, значок "Копия" для дублирования и X для удаления.
- Выравнивание и HTML-тег: выровняйте заголовок и установите уровень его заголовка (от H1 до H6).
- Задержка анимации: сколько времени каждое слово показывает перед следующим, в миллисекундах.
Выберите предустановку анимации #
The Стиль Пресет раскрывающийся список устанавливает, как вращающееся слово входит и уходит. Каждый из них придает заголовку разное ощущение.
- Поворот 1, 2, 3: переверните или закройте слово на место.
- Набор текста: введите слово "символ за символом", как на пишущей машинке.
- Загрузка Бар, Слайд, Клип: раскройте слово с помощью планки, слайда или маски.
- Увеличение, Масштаб, Нажмите: масштабируйте или выталкивайте слово внутрь и наружу.
The Загрузка Бар например, Preset протирает каждое слово за движущейся планкой перед загрузкой следующего.
Стиль первого заголовка #
The Стиль вкладка разделяется на Первый заголовок, Второй заголовоки Шаблоны (опция Pro). Открыть Первый заголовок чтобы стилизовать фиксированный текст.
- Цвет текста и фон: фиксированный цвет слова и необязательный подсветка позади него.
- Типографика: шрифт, размер и вес.
- Набивка, маржа, граница, коробка. Тень: поле вокруг текста.
Стиль анимированного слова #
Открытый Второй заголовок чтобы самостоятельно стилизовать вращающееся слово. Дайте ему контрастный цвет или фон выделения, и анимация выделяется вместо того, чтобы смешиваться с фиксированным текстом.
Он имеет те же элементы управления, что и первый заголовок, поэтому вы можете установить другой цвет текста, фон выделения, типографику и границу для движущейся части.
Обычные случаи использования #
- Заголовки героев это меняется через ваши основные точки продаж.
- Лендинги велосипедная аудитория или варианты использования (для блоггеров, для магазинов, для агентств).
- Разделы функций выделение того, что делает продукт, несколькими вращающимися словами.
- Портфолио вступления с типирующим эффектом на вашу роль или навыки.
- Анонсирующие бары рисование глаза одним оживленным словом.
Советы по работе с виджетом Animated Headline #
- Сохраняйте вращающиеся слова одинаковыми по длине. Прыжки большой длины заставляют линию смещаться по мере ее анимации.
- Установите задержку в соответствии со скоростью чтения. Примерно от 2000 до 3000 мс позволяет людям читать каждое слово.
- Сравните оживленное слово. Другой цвет или подсветка подсказывает посетителям, какая часть движется.
- Сопоставьте предустановку с тоном. Печатание подходит личному сайту; Поворот и скольжение подходят смелому герою.
- Установите правильный тег HTML. Используйте H1 для основного заголовка страницы, чтобы он оставался правильным для SEO.
Смотрите видеоурок #
Предпочитаете следовать на экране? Видеоурок ниже проходит через элемент "Анимированный заголовок" от начала до конца, показывая, как работает каждый предустановленный вариант, список слов и вариант стиля в редакторе Elementor.
Часто задаваемые вопросы #
Что такое виджет Animated Headline в Master Addons?
Это виджет Элементор, который строит заголовок из фиксированной первой части и анимированной второй части. вторая часть вращается через список слов с эффектами, такими как вращение, набор текста и слайд, все они установлены на панели Элементор без кода.
Какие стили анимации включает виджет Animated Headline?
Десять предустановок: Поверните 1, Поверните 2, Поверните 3, Набор текста, Загрузка панели, Слайд, Клип, Масштаб, Масштаб, и Нажмите Каждый меняет как вращающееся слово входит и уходит, от эффекта пишущей машинки к показу полосы или вращению.
Как добавить или изменить вращающиеся слова?
Откройте вкладку Содержимое и используйте повторитель Вторых заголовков Каждый элемент является одним вращающимся словом. используйте Добавить элемент для добавления слов, значок копирования для дублирования одного и X для его удаления. виджет циклически перемещается по ним по порядку.
Могу ли я контролировать, как быстро меняются слова?
Да. поле Задержка анимации на вкладке Содержимое устанавливает, сколько времени каждое слово показывает перед следующим, в миллисекундах. значение около 2000 до 3000 дает посетителям время прочитать каждое слово, прежде чем оно повернется.
Могу ли я сделать заголовок эффекта типирования в Elementor?
Да. установите предустановку стиля для ввода, и вращающиеся слова введите символ за символом, как пишущая машинка, затем удалите и введите следующее слово. это хорошо подходит для личных сайтов и портфолио.
Завершая #
Виджет "Анимированный заголовок" превращает плоский заголовок в движущийся: напишите фиксированную часть, перечислите слова, которые нужно повернуть, выберите предустановку, например "Набор текста" или "Поворот", а затем переставьте обе половины. дополнительные виджеты заголовка см. в разделе Виджет с двумя заголовками и Виджет заголовка Gradient, просмотр всего Виджеты и расширения Master Addgetsи проверьте страница ценообразования за то, что включает каждый план.
