В новых версиях Elementor (начиная с внедрения flex-контейнеров в v4) интерфейс и принципы построения макетов изменились. Часто стандартный виджет «Кнопка» не позволяет реализовать сложные дизайнерские задумки — например, независимую настройку отступов стрелки или сложные hover-эффекты.
Оптимальное решение для профессиональной верстки — создание кнопки из Flex-контейнера. Однако при таком подходе возникает проблема: анимация иконки срабатывает только при наведении курсора на саму иконку, а не на всю площадь кнопки. Ниже описано, как связать эти элементы с помощью CSS-классов.
Шаг 1: Сборка кастомной кнопки из контейнера
Вместо базового виджета мы создадим масштабируемую структуру:
- Добавьте пустой Контейнер на страницу.
- В настройках макета установите направление Горизонтально (Строка), а ширину — In-flx (Inline-flex), чтобы контейнер облегал текст.
- Поместите внутрь два виджета: Текст (или Заголовок) и Иконка (например, SVG-стрелка).
- Во вкладке «Макет» главного контейнера измените HTML-тег на
a(ссылка) и задайте нужный URL-адрес. - Настройте
padding(внутренние отступы) и цвет фона во вкладке «Стиль», чтобы элемент принял вид классической кнопки.
Шаг 2: Присвоение CSS-классов
Чтобы CSS-код понимал, с какими элементами взаимодействовать, необходимо задать им уникальные идентификаторы:
- Выделите главный контейнер-кнопку. Классы CSS и впишите:
custom-btn-wrapper - Выделите виджет Иконки. Классы CSS и впишите:
custom-btn-arrow
Шаг 3: Написание глобального CSS-кода
Для корректной работы связки состояний :hover (наведение) необходимо использовать глобальные стили темы, так как инлайн-поле element.style в Elementor не поддерживает работу с вложенными селекторами.
- В административной панели WordPress перейдите в Настройки сайта ➔ Пользовательские CSS (Additional CSS).
- Добавьте следующий код:
CSS
/* Базовое состояние иконки и настройка плавности анимации */
.custom-btn-arrow {
transition: transform 0.3s ease-in-out;
}
/* Сдвиг иконки вправо при наведении на площадь контейнера */
.custom-btn-wrapper:hover .custom-btn-arrow {
transform: translateX(6px);
}
Преимущества этого метода: Такой подход полностью соответствует современным стандартам UI/UX. Микроинтеракция происходит плавно (за счет свойства transition), код является переиспользуемым (достаточно назначить эти два класса любой новой кнопке на сайте), а использование SVG-иконок вместо текстовых спецсимволов гарантирует корректное отображение (рендеринг) стрелки на любых устройствах и операционных системах.
Добавляйтесь в мой телеграм. Там больше советов про сайты, заработок, фриланс. И можем лично пообщаться.
