Кнопка по умолчанию получает щелчки; кнопка с небольшим движением получает их больше. The Креативные кнопки виджет в Мастер-аддоны для Elementor поставляет библиотеку пресетов эффекта наведения, от тонких фоновых разверток до анимации обмена текстом, поэтому призыв к действию может двигаться без написания строки CSS.
Вы выбираете предустановку, вводите текст, добавляете значок, если хотите, и стилизуете нормальные и наводящие состояния. это руководство охватывает весь виджет, кнопку перетаскивания до конца.
Что делает виджет Creative Buttons #
Виджет визуализирует одну кнопку вызова к действию с предварительно построенной анимацией наведения. анимации приходят как названные предустановки, более двадцати из них, каждый со своим собственным движением: фоны, которые скользят внутрь, границы, которые рисуют сами себя, текст, который переворачивается на альтернативное сообщение. все остальное работает как нормальная кнопка Элементор: текст, ссылка, значок, выравнивание, и полный контроль цвета для каждого состояния.
Прежде чем начать #
- WordPress с Элементор установлен и активен.
- Мастер-аддоны для Elementor установлен и активен. Новое в плагине? Видеть руководство установки.
- Виджет "Креативные кнопки" включен на панели параметров "Мастер-аддоны" в разделе "Базовые виджеты".
Как добавить виджет "Креативные кнопки" #
В редакторе Elementor выполните поиск Элементы панель для Креативные кнопки и перетащите виджет на страницу Появляется темная кнопка чтения “Добавить ваш контент CTA”, уже подключенная с эффектом по умолчанию.
Выберите предустановку эффекта кнопки #
Открытый Настройка и управление кнопками во вкладке Содержание. The Эффекты кнопки dropdown - сердце виджета: по умолчанию, Вайнона, Уджарак, Вайра, Тамайя, Райен, Пипалук, Моема, Иси, Айлен, Саки, Вапаша, Нина, Нанук, Нука, Антиман, Ицель, Найра, Квидель, Сакнит, Шикоба, и другие.
Каждое имя - это разная анимация наведения.Наведите кнопку на холсте после каждого выбора, и редактор воспроизводит эффект вживую, поэтому прослушивание предустановок занимает секунды. имена не намекают на то, что они делают, поэтому попытка четыре или пять - самый быстрый способ найти правильный. Выравнивание кнопки и Выравнивание текста кнопки расположитесь чуть ниже, каждый из которых имеет адаптивный переключатель для настроек каждого устройства.
Установите текст, ссылку и альтернативный текст #
The Кнопка управления группа охватывает контент. Текст кнопки это этикетка, и URL-адрес ссылки куда-то указывает кнопку со значком передачи для опций new-tab и nofollow.
Некоторые предустановки, такие как Вайнона и Райен, меняют метку на второе сообщение при наведении курсора. Выберите один из них и Альтернативный текст кнопки появляется поле; демо-версия устанавливает его в “Click NOW!” так что кнопка читает “Добавить свой CTA Content” в состоянии покоя и переворачивается на hover.
Добавить значок #
The Икона control открывает библиотеку значков Elementor со шрифтом Awesome и каждым установленным набором значков.
Выбрав один, Положение значка помещает его до или после этикетки, и Размещение значков устанавливает разрыв; демо-версия увеличивает его до 12 пикселей, чтобы значок и текст дышали.
Стиль кнопки #
Переключиться на Стиль вкладка и открыть Стили кнопок. Верхняя группа обрабатывает форму: Ширина, Типографика, Набивка кнопки, Тип границы, Граничный радиус (8 в демо, для мягко закругленных углов), Коробка Теньи Размер значка.
Ниже этого, Нормальный и Наведите курсор каждая вкладка имеет три цвета: Цвет текста, Цвет фонаи Цвет значка. В демо-версии указан белый текст нормального состояния на синем цвете:
Затем переворачивает состояние наведения на темный текст на зеленом, поэтому эффект оживляет два явно разных вида:
А Шаблоны секция внизу - это дополнительный Pro для декоративного фона кнопок.
Результат на странице #
На живой странице кнопка сидит в своих обычных цветах, пока не придет курсор Затем воспроизводится предустановка: фон перемещается в цвет наведения, значок и сдвиг текста, и появляется альтернативный текст, если предустановка использует один.
Обычные случаи использования #
- CTA секции героев где анимация привлекает внимание к основному действию.
- Кнопки ценовой страницы с обменом текстом, как “Get Started” на “It's Free!” на hover.
- Кнопки загрузки и регистрации в паре со значком для мгновенного распознавания.
- Разделы целевой страницы для этого нужна одна кнопка, чтобы выделиться среди значений темы по умолчанию.
Советы по улучшению креативных кнопок #
- Пресеты прослушивания на холсте. Наведите кнопку после каждого выбора "Эффекты"; анимация воспроизводится в редакторе, предварительный просмотр не требуется.
- Сделайте состояние наведения контрастным. Анимация лучше всего читается, когда обычные и зависающие цвета четко различаются, как в демоверсии от синего до зеленого.
- Сохраняйте альтернативный текст коротким. Пресеты обмена текстами выглядят чистыми, когда оба сообщения имеют одинаковую длину.
- Одна кнопка творчества в разделе. Движение привлекает внимание, три движущиеся кнопки подряд соревнуются друг с другом.
- Проверьте поведение касания на мобильном телефоне. Сенсорные экраны не имеют зависания, поэтому убедитесь, что нормальное состояние читается как кликабельное само по себе.
Видео Учебник #
Вы также можете посмотреть видео ниже, если хотите увидеть Креативную кнопку в действии, от выбора предустановленного эффекта до готовой анимации наведения на живой странице.
Часто задаваемые вопросы #
Что такое виджет Creative Buttons в Master Addons?
Это виджет Elementor для кнопок вызова к действию с предварительно созданной анимацией наведения. Вы выбираете из более чем двадцати пресетов именованных эффектов, устанавливаете текст, ссылку и значок, а также стилизуете нормальные состояния и состояния наведения отдельно от панели Elementor.
Сколько эффектов кнопок включено?
В раскрывающемся списке "Эффекты кнопки" перечислено более двадцати пресетов, включая Вайнону, Уджарака, Вайру, Тамайю, Райена, Моему, Найру и Шикобу. Каждый применяет различную анимацию наведения, и холст редактора воспроизводит эффект вживую, когда вы наводите кнопку.
Что такое поле Альтернативный текст кнопки?
Некоторые предустановки меняют метку кнопки на второе сообщение при наведении курсора При выборе одного из этих эффектов появляется поле Альтернативный текст кнопки, чтобы вы могли установить сообщение наведения курсора, например переключение “Get Started” на “It's Free!”.
Могу ли я добавить значок в кнопку "Созидание"?
Да. элемент управления значками открывает библиотеку значков Элементор. после выбора значка Icon Position помещает его до или после текста, Icon Spacing устанавливает пробел, а Icon Size и Icon Color живут на вкладке Стиль.
Могу ли я стилизовать состояние зависания отдельно?
Да. Стили кнопок имеют вкладки "Нормальный" и "Наведение", каждая из которых имеет свой собственный цвет текста, цвет фона и цвет значков. Предварительный набор анимирует между двумя состояниями, поэтому контрастные цвета делают эффект более заметным.
Завершая #
Виджет Creative Buttons превращает простой CTA в анимированный без пользовательского кода: выберите предустановку из раскрывающегося списка Эффекты, установите текст и значок, а также дайте нормальные и зависающие состояния цвета, между которыми стоит анимировать. Он хорошо сочетается с виджетом Creative Links для анимированных текстовых ссылок. Просмотрите полный набор Виджеты и расширения Master Addgetsи посмотрите страница ценообразования для дополнительных услуг Pro, таких как шаблоны кнопок.
