Как добавить анимированный текст с помощью Elementor, чтобы посетители сосредоточились на вашем сообщении

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

Например, посмотрите на мою домашнюю страницу, заметили что-нибудь? Правильно, анимированный текст. Я использую анимированный текст с 2016 года, но до сих пор это было сложно сделать.

И один из дополнений Elementor сделает это невероятно простым.

Что такое анимированный заголовок?

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

Хотя в прошлом для создания таких заголовков требовалось много технических ноу-хау, теперь это очень легко сделать, используя комбинацию бесплатной версии Elementor и Ultimate Addons для Elementor или просто Elementor Pro.

Теперь создавать привлекательные заголовки, подобные этим, можно простым перетаскиванием!

Зачем добавлять анимированный текст на сайт?

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

Добавление анимированного текста на ваш сайт — отличный способ добавить визуального интереса. Это также может помочь выделить важную информацию или объяснить сложные концепции простым для понимания способом.

Анимированный текст также можно эффективно использовать как часть призыва к действию или для привлечения внимания к специальным предложениям и акциям.

Если вы хотите, чтобы ваш веб-сайт выделялся из толпы, добавление анимированного текста — отличный способ сделать это!

Как добавить анимированный текст с помощью Elementor

Добавление анимированного текста на ваш веб-сайт Elementor — отличный способ добавить изюминку и индивидуальность.

Есть несколько разных способов сделать это, но здесь мы будем использовать Ultimate Addons for Elementor (UAE).

UAE — это один из продвинутых дополнений Elementor, который предлагает множество новых интерактивных блоков для оформления ваших страниц. Ваша подписка в ОАЭ действительна на неограниченном количестве веб-сайтов, а также доступен пожизненный план!

Наряду с продвинутыми анимированными заголовками, ОАЭ предлагает:

• Анимированный текст абзаца
• Динамический таймер обратного отсчета
• Анимированные фоновые видео
• Отзывчивые карты Google
• Анимированные иконки
• Карусели изображений
• Таблицы цен
• Карусели товаров WooCommerce

Вы можете найти полный список всех блоков Ultimate Addons for Elementor, щелкнув « Виджеты » в меню главной страницы.

Теперь давайте приступим к созданию анимированного текста с помощью Elementor и Ultimate Addons для Elementor!

Шаг 1: Установите и активируйте плагин ОАЭ

Первый шаг — установить Ultimate Addons для Elementor. Этот плагин добавляет гораздо больше функций в Elementor, делая его еще более мощным, чем раньше!

• Установите его с веб-сайта Ultimate Addons for Elementor. Если вы еще не создали свою учетную запись, вам необходимо это сделать.
• После входа в свою учетную запись вы можете загрузить zip-файл для Ultimate Addons.
• Теперь перейдите в панель управления WordPress > Плагины > Добавить новый.
• Здесь нажмите кнопку « Загрузить плагин » в верхней части страницы.
• Выберите zip-файл, который вы только что загрузили, и нажмите « Установить» .

Вот и все! Ultimate Addons для Elementor теперь будут установлены на вашем сайте. Идите вперед и активируйте плагин, чтобы начать его использовать.

Шаг 2: Добавьте модный виджет заголовка в нужное место.

Вот как выглядит причудливый заголовок!

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

Давайте посмотрим, как мы можем добавить этот виджет на наши страницы.

• Начните с редактирования любой из ваших страниц с помощью Elementor.
• В поле поиска элементов Elementor найдите заголовок Fancy.

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

• После этого вы можете приступить к его настройке.

Шаг 3: Стиль вашего анимированного заголовка

Существует несколько типов анимации, которые вы можете добавить к своим заголовкам и настройкам.

Просто щелкните раздел « Эффект » под анимированным заголовком и начните настраивать анимацию.

Вы можете настроить, как текст переключается между разными частями, выбрав эффект. Вы также можете настроить скорость и время паузы между каждым изменением.

Эти параметры дадут вам идеальный эффект для вашего веб-сайта и помогут вам сделать его именно таким, каким вы хотите его видеть!

Добавление анимированного текста с помощью Elementor Pro

Кроме того, вы также можете создавать анимированные заголовки с помощью нового виджета «Анимированные заголовки» Elementor Pro.

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

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

Шаг 1. Установите и активируйте лицензию Elementor Pro.

Шаг 2: В панели администратора WordPress перейдите в «Страницы » > « Добавить новый ».

Шаг 3: Нажмите «Редактировать с помощью Elementor» .

Шаг 4: Найдите виджет « Анимированный заголовок» в списке доступных виджетов. Теперь перетащите его на свою страницу.

Шаг 5: Введите текст заголовка, разделив его на « Перед текстом», «Выделенный текст» и « После текста ». Выделенный текст — это тот, где активируется ваша анимация.

Шаг 6. Настройте тип анимации в раскрывающемся списке.

Шаг 7: Предварительно просмотрите и опубликуйте свои изменения!

Вот и все!

Теперь вы можете легко добавить анимированный заголовок на свой сайт с помощью Elementor Pro.

Хотите ли вы привлечь внимание своих посетителей или сделать свой контент более привлекательным, этот мощный виджет сделает это быстро и легко.

Так зачем ждать?

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