Виджет анимационной кнопки Elementor с эффектами креативного наведения
Креативная кнопка - это бесплатный виджет Master Addons для кнопок вызова к действию со встроенной анимацией наведения. выберите эффект из списка Эффекты кнопки, введите текст и дополнительное второе сообщение для наведения курсора, добавьте значок и создайте стиль нормальных и зависающих цветов. бесплатный плагин включает 6 эффектов: по умолчанию, Winona, Ujarak, Wayra, Tamaya и Rayen. Мастер Аддоны Про добавляет еще 15, от Пипалука до Шикобы, всего 21.
Как добавить анимированную кнопку в Elementor
Вам нужен Elementor и бесплатный плагин Master Addons от WordPress.org.
- Убедитесь, что кнопка "Креатив" включена ниже Мастер-аддоны, виджеты.
- В редакторе Elementor выполните поиск Креативная кнопка и перетащите его на страницу.
- Выберите эффект Эффекты кнопки и наведите кнопку, чтобы просмотреть его.
- Введите текст кнопки, альтернативный текст кнопки и URL-адрес ссылки.
- Добавьте значок и выберите "До" или "После".
- На вкладке "Стиль" установите заполнение, радиус границы и различные цвета "Нормальный" и "Наведение", чтобы анимацию было легко увидеть.
Для более длительного прохождения с расширениями, такими как всплывающие подсказки и раскрытие анимации, читайте Как создать анимационные кнопки Elementor. Каждая настройка находится в. Настройки виджета Creative Button.
21 эффект зависания: 6 бесплатно, 15 с Pro
Каждое имя в Эффекты кнопки является другой CSS hover анимация, как фон, который скользит в, граница, которая рисует вокруг кнопки или текст, который меняется на второе сообщение. по умолчанию, Вайнона, Уджарак, Вайра, Тамайя и Райен свободны. Пипалук, Моема, Иси, Айлен, Саки, Вапаша, Нина, Нанук, Нука, Антиман, Ицель, Найра, Квидель, Сакнит и Шикоба нуждаются Про. Наведите кнопку на холст, чтобы просмотреть каждый из них.
- Выравнивание кнопок и выравнивание текста кнопок, устанавливаемое для каждого устройства.
- Дополнительные цвета фона до и после для эффектов, в которых используется многослойный фон.
- Скорость анимации фиксируется каждым эффектом. Настройки продолжительности перехода нет.
Текст кнопки, альтернативный текст, значок и стиль
Установить Текст кнопки и а URL-адрес ссылки с обычной новой вкладкой и параметрами nofollow. Каждый эффект, кроме по умолчанию, показывает Альтернативный текст кнопки поле для сообщения о наведении. Добавить Икона до или после текста с Icon Spacing. In Стили кнопокустановите ширину, типографику, накладку кнопок, границу, радиус границы, тень коробки и размер значка, затем выберите цвет текста, фона и значка для нормального и наведите курсор.
- “Get Started”, который меняется на “Это бесплатная” при наведении.
- Значок стрелки после текста, показывающий направление.
- Округленные пуговицы-таблетки с каймой, меняющей цвет при зависании.
Кнопка Элементор против Креативной кнопки Master Addons
Бесплатный виджет Elementor Button уже имеет анимацию наведения. Вот где каждый подходит.
| Особенность | Кнопка Элементор | Мастер Аддоны Креативная Кнопка |
|---|---|---|
| Цена | Бесплатно в Элементоре | 6 эффектов бесплатно, 21 с Pro |
| Анимация наведения | Список анимации Elementor Hover, такой как Grow, Pulse, Bob и Wobble | Названные эффекты CSS со скользящим фоном, границами и многослойными цветами |
| Обмен текстом при наведении | Нет | Альтернативный текст кнопки |
| Фон | Классика или градиент для нормального и ховера | Сплошные цвета, а также цвета "До" и "После" на некоторых эффектах |
| Скорость перехода | Настройка "Переходная продолжительность" | Исправлено каждым эффектом |
| Икона | До или после, с интервалом | До или после, с интервалом, размером и цветом зависания |
Используйте кнопку Элементор для градиентов, пользовательской скорости перехода или простого роста или пульса. используйте Креативную кнопку, когда вы хотите развернуть фон или обмен текстом без пользовательских CSS. для анимированных текстовых ссылок см Креативные ссылки.
Часто задаваемые вопросы для творческой кнопки
Виджет Creative Button бесплатен?
Да. виджет и 6 эффектов (По умолчанию, Вайнона, Уджарак, Вайра, Тамайя и Райен) бесплатны. остальные 15 эффектов нужны Мастер Аддоны Про.
Могу ли я использовать его как кнопку отправки формы?
Нет. Кнопка Creative - это ссылка, а не кнопка формы. Чтобы создать стиль кнопки отправки, используйте виджет формы для своего плагина, например Контактная форма 7 или WPФормы виджет.
Работают ли эффекты зависания на телефонах?
Сенсорные экраны не имеют зависания, поэтому большинство посетителей на телефонах видят нормальное состояние и сразу переходят по ссылке. убедитесь, что нормальные цвета и текст работают сами по себе.
Могу ли я изменить скорость анимации наведения?
Не в панели. каждый эффект имеет свой собственный тайминг. вы можете изменить его с пользовательским CSS на кнопке, или использовать виджет кнопки Элементор, который имеет настройку Продолжительность перехода.
Чем это отличается от анимации наведения кнопки Элементор?
Кнопка Элементор перемещает всю кнопку, например расти или пульсировать Эффекты Creative Button оживляют внутреннюю часть кнопки, например, скользящий фон или текст, меняющийся на текст альтернативной кнопки.
Виджеты и расширения трендовых элементов
Создавайте сложные веб-сайты за меньшее время.
Стекломорфизм
Дополнительные контейнеры
Шаблоны
![Расширение Master Addons Post/Page Duplicator для Elementor: ссылка на строку MA Duplicator в списке WordPress Pages, создающая целевую страницу - [Дублированный № 128] черновик](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Дубликатор сообщений/страниц
