Всем привет! В конструкторе Elementor на CMS WordPress не предусмотрена возможность делать кнопки с градиентным фоном. В этой статье я расскажу как можно стилизовать кнопки на своём WordPress сайте в Elementor при помощи дополнения Piotnet Addons For Elementor (PAFE) и без него. Поехали!)
Способ-1 Делаем градиент кнопки при помощи дополнения Piotnet Addons
Устанавливаем плагин Piotnet Addons For Elementor (PAFE). Данный плагин находится в репозитории Вордпресс и можно установить прямо из админки в разделе плагины / добавить новый. После установки и активации, нужно перейти в настройки плагина в админ панели, включить функцию «Gradient Button» и нажать на сохранить «Save Settings»:
В конструкторе Elementor, в стилях кнопки появится функция «PAFE Gradient Button»:
Открываем данную функцию и включаем её:
У кнопки поменялся фон на градиент. В настройках градиента кнопки можно поменять цвета, угол наклона градиента, интенсивность перехода и положение. Также можно установить цвета для положения кнопки при наведении, нажав на «наведение». После изменений кнопки нажимайте на зелёную кнопку внизу «обновить» и все изменения сохранятся.
Способ-2 Делаем градиент кнопки без плагина в Elementor
Для стилизации кнопки без плагина нам понадобится сервис «CSS Gradient». И так, начинаем!)
Для начала необходимо перейти в элементор, в редактировать кнопку > расширенные:
Задаём данной копке какой-нибудь класс в поле «CSS классы». Я назвал btn-grad, вы можете назвать как захотите, главное чтобы название было маленькими латинскими буквами без цифр. Можно со знаком минус как у меня или с нижним подчёркиванием btn_grad без точки в начале. Копируем следующую конструкцию с вашим классом btn-grad :
/*Обычный цвет кнопки!*/
.btn-grad .elementor-button{
background: rgb(62,149,255);
background: linear-gradient(148deg, rgba(62,149,255,1) 0%, rgba(0,64,245,1) 100%);
}
/*Цвет кнопки при наведении!*/
.btn-grad .elementor-button:hover{
background: rgb(0,115,255);
background: linear-gradient(148deg, rgba(0,115,255,1) 0%, rgba(2,52,194,1) 100%);
} и вставляем этот код в «Custom CSS»:
После добавления данного кода цвет фона кнопки сразу преобразится в градиент.
Чтобы сделать свой цвет градиента кнопки, необходимо перейти в сервис «CSS Gradient», где можно визуально настраивать цвета, угол наклона градиента, положение и интенсивность. Переходим в сервис CSS Gradient:
Настраиваем необходимый цвет и копируем сгенерированный ниже CSS код, выделив его и скопировав, либо нажав на кнопку «Copy to Clipboard» — копирование одним кликом.
Скопированный код вставляем вместо моего фрагмента кода для обычного цвета кнопки:
Теперь снова генерируем свой цвет в сервисе «CSS Gradient», но для цвета кнопки при наведении и вставляем вместо моего кода здесь:
Данный способ применится только к одной кнопки, но если у вас на сайте много кнопок и вы хотите сделать все с градиентом, то для каждой кнопки необходимо задать ваш CSS класс например как у меня btn-grad без точки в начале, в поле «CSS классы» как показано ниже на изображении.
А если например хотите какие-то кнопки оставить без градиента, то просто не задавайте нужным кнопкам CSS класс, оставляя поле «CSS классы» пустым.
Таким образом можно сделать все кнопки с градиентным фоном.
Второй способ универсальный и подойдёт для любого сайта, но нужно будет не забыть поменять класс кнопки с .elementor-button на тот, который установлен на сайте.
Если данная статья была полезна, то поделитесь с друзьями. Также задавайте свои вопросы в комментарии.
