Кнопки — один из важнейших элементов любого сайта. Они направляют действия пользователей, привлекают внимание к ключевым предложениям и напрямую влияют на конверсию. Виджет «Кнопка» в Elementor предоставляет гибкий инструментарий для создания привлекательных и функциональных кнопок без необходимости писать код. В этой статье мы подробно разберём все возможности виджета, от базовых настроек до продвинутых стилей и эффектов.
1. Что такое виджет «Кнопка» в Elementor
Виджет «Кнопка» (Button Widget) — это стандартный элемент Elementor, который позволяет добавлять на страницу интерактивные кнопки с настраиваемым текстом, ссылками, иконками и визуальным оформлением. Он доступен во всех версиях Elementor и не требует установки дополнительных плагинов.
Основные возможности виджета:
- Настройка текста и ссылки кнопки
- Выбор из пяти предустановленных стилей
- Добавление иконок из библиотеки FontAwesome
- Гибкая настройка внешнего вида (цвета, фон, границы, типографика)
- Настройка состояний при наведении (hover)
- Управление отступами, позиционированием и адаптивностью
2. Как добавить виджет «Кнопка» на страницу
Процесс добавления кнопки предельно прост и занимает всего несколько секунд:
- Откройте страницу в редакторе Elementor — перейдите в WordPress, выберите нужную страницу или запись и нажмите «Edit with Elementor».
- Найдите виджет — в левой панели элементов нажмите на иконку «+» или воспользуйтесь поиском, чтобы найти виджет «Кнопка».
- Перетащите виджет — захватите виджет «Кнопка» и перетащите его в нужную секцию или колонку на макете страницы.
После добавления кнопка появится на странице, и вы сможете приступить к её настройке.
3. Настройка содержимого кнопки (вкладка Content)
Вкладка
Content (Содержимое) отвечает за базовые параметры кнопки: текст, ссылку, иконку и тип оформления.
3.1. Тип кнопки (Type)
В поле
Type доступно пять предустановленных стилей оформления:
| Тип |
Описание |
| Default |
Стандартный стиль, который можно полностью настроить вручную |
| Info |
Синий/голубой акцент — подходит для информационных кнопок |
| Success |
Зелёный акцент — для кнопок подтверждения и успешных действий |
| Warning |
Жёлтый/оранжевый акцент — для предупреждений |
| Danger |
Красный акцент — для критических действий (удаление, отмена) |
Эти стили задают базовую цветовую схему, которую в дальнейшем можно доработать во вкладке Style.
3.2. Текст кнопки (Text)
В поле
Text вводится надпись, которая будет отображаться на кнопке. Рекомендуется использовать короткие, понятные и побуждающие к действию фразы: «Купить сейчас», «Подробнее», «Зарегистрироваться», «Скачать». Вместо универсального «Нажмите здесь» лучше выбрать конкретное действие, которое совершит пользователь.
3.3. Ссылка (Link)
Поле
Link — это главный функциональный элемент кнопки. Сюда вставляется URL-адрес, по которому будет переходить пользователь после нажатия.
- Внутренние ссылки — можно начать вводить название страницы или записи, и Elementor предложит автодополнение.
- Внешние ссылки — необходимо вставлять полный URL с протоколом.
Рядом с полем ссылки находится значок шестерёнки, который открывает дополнительные параметры:
- Open in new window — ссылка будет открываться в новой вкладке. Это особенно полезно для внешних ссылок, чтобы пользователь не покидал ваш сайт.
- Add nofollow — добавляет атрибут nofollow, который сообщает поисковым системам не передавать вес страницы по этой ссылке. Используется для внешних ссылок, чтобы не ассоциировать свой сайт с сомнительными ресурсами.
3.4. Иконка (Icon)
Виджет позволяет добавить иконку к кнопке для улучшения визуального восприятия и повышения кликабельности.
- Выбор иконки — нажмите на поле и выберите иконку из библиотеки FontAwesome. Также можно загрузить собственный SVG-файл.
- Позиция иконки (Icon Position) — выберите, будет ли иконка располагаться слева или справа от текста.
- Расстояние до текста (Icon Spacing) — настройте отступ между иконкой и текстом.
3.5. Идентификатор кнопки (Button ID)
Поле
Button ID позволяет присвоить кнопке уникальный идентификатор. Это пригодится для настройки событий в Google Analytics, Meta Pixel и других системах аналитики.
4. Настройка стилей кнопки (вкладка Style)
Вкладка
Style (Стиль) предоставляет широкие возможности для визуального оформления кнопки. Здесь можно настроить практически любой аспект внешнего вида.
4.1. Типографика (Typography)
Раздел
Typography управляет шрифтовым оформлением текста кнопки:
- Font Family — выбор шрифта
- Font Size — размер шрифта
- Font Weight — насыщенность (жирность)
- Transform — регистр текста (прописные, строчные, заглавные)
- Line Height — межстрочный интервал
- Letter Spacing — межбуквенный интервал
4.2. Цвет текста (Text Color)
Настраивается цвет текста кнопки в обычном состоянии и при наведении (Hover). Для каждого состояния можно задать отдельный цвет.
4.3. Фон кнопки (Background)
Раздел
Background позволяет выбрать тип заливки кнопки:
- Classic — сплошной цвет
- Gradient — градиентная заливка (можно настроить направление и цвета)
- Image — в качестве фона можно использовать изображение
Для каждого состояния (обычное и Hover) настраивается отдельный фон.
4.4. Границы (Border)
Раздел
Border управляет обводкой кнопки:
- Border Type — тип границы (сплошная, пунктирная, точечная и т.д.)
- Border Width — толщина границы
- Border Color — цвет границы (отдельно для обычного состояния и Hover)
- Border Radius — скругление углов. Для создания круглой кнопки установите высокое значение (например, 50px)
4.5. Размеры и отступы (Size & Padding)
Размер кнопки регулируется через параметры
Padding (внутренние отступы):
- Увеличение вертикального и горизонтального padding делает кнопку больше
- Уменьшение padding — компактнее
Также доступны предустановленные размеры в некоторых версиях Elementor: Extra Small, Small, Medium, Large, Extra Large.
4.6. Тень (Box Shadow)
Раздел
Box Shadow добавляет тень кнопке:
- Normal — тень в обычном состоянии
- Hover — тень при наведении (можно создать эффект «поднятия» кнопки)
Настраиваются параметры: горизонтальное и вертикальное смещение, размытие, растяжение и цвет тени.
4.7. Другие стили
- Text Shadow — тень для текста кнопки
- Alignment — выравнивание кнопки по горизонтали (влево, по центру, вправо, по ширине)
5. Настройка состояний (Normal и Hover)
Одна из сильных сторон виджета «Кнопка» — возможность настраивать внешний вид отдельно для обычного состояния (Normal) и состояния при наведении курсора (Hover).
Для каждого состояния можно настроить:
- Цвет текста
- Цвет и тип фона
- Цвет и толщину границы
- Тень
- Размер и отступы
Это позволяет создавать приятные интерактивные эффекты: изменение цвета при наведении, появление тени, анимацию фона и многое другое.
6. Расширенные настройки (вкладка Advanced)
Вкладка
Advanced (Дополнительно) содержит общие настройки позиционирования и поведения элемента.
6.1. Отступы (Margin & Padding)
- Margin — внешние отступы вокруг кнопки, регулируют расстояние до соседних элементов
- Padding — внутренние отступы внутри кнопки, влияют на её размер
Для каждого параметра можно задать значения отдельно для верхнего, нижнего, левого и правого отступа, а также использовать адаптивные значения для разных устройств.
6.2. Позиционирование (Positioning)
- Width — ширина кнопки (можно задать в пикселях, процентах или других единицах)
- CSS Classes & ID — возможность добавить пользовательские CSS-классы и идентификатор для дополнительной стилизации
6.3. Эффекты движения (Motion Effects)
Раздел
Motion Effects позволяет добавить анимацию появления кнопки:
- Entrance Animation — анимация при загрузке страницы (Fade In, Slide, Zoom и др.)
- Animation Duration — длительность анимации
- Animation Delay — задержка перед началом анимации
6.4. Адаптивность (Responsive)
Elementor позволяет настраивать отображение кнопки отдельно для трёх типов устройств:
- Desktop — настольные компьютеры
- Tablet — планшеты
- Mobile — мобильные телефоны
Для каждого устройства можно изменять размер шрифта, отступы, ширину и другие параметры.
7. Дополнительные возможности и плагины
Стандартный виджет «Кнопка» уже обладает широким функционалом, но при необходимости его можно расширить с помощью дополнений:
- Magic Buttons for Elementor — добавляет новый виджет с 15 эксклюзивными эффектами при наведении и анимациями
- Animation Addons — расширяет возможности кнопок дополнительными стилями и эффектами
- Element Pack Pro — предлагает «продвинутый» виджет кнопки с дополнительными настройками
8. Практические примеры использования
Виджет «Кнопка» универсален и может применяться в самых разных сценариях:
| Сценарий |
Пример текста |
Рекомендуемый стиль |
| Призыв к подписке |
«Подписаться» |
Success |
| Начало бесплатного периода |
«Начать бесплатно» |
Info |
| Скачивание файла |
«Скачать сейчас» |
Default |
| Регистрация на событие |
«Зарегистрироваться» |
Warning |
| Оформление заказа |
«Оформить заказ» |
Success |
| Переход в каталог |
«Смотреть все товары» |
Default |
| Социальные сети |
«Мы в Instagram» |
Info |
9. Заключение
Виджет «Кнопка» в Elementor — это мощный и гибкий инструмент, который позволяет создавать кнопки любой сложности без написания кода. От базовой настройки текста и ссылки до продвинутой стилизации с эффектами при наведении и анимациями — все доступно в удобном визуальном интерфейсе.
Ключевые выводы:
- Используйте понятные и побуждающие к действию тексты
- Настраивайте отдельно обычное состояние и состояние при наведении для интерактивности
- Применяйте адаптивные настройки для корректного отображения на всех устройствах
- Экспериментируйте с иконками, градиентами и тенями для создания уникального дизайна
- Не забывайте про SEO-параметры ссылок (nofollow, открытие в новом окне)
