Как создать красивую кнопку в Elementor

Добавление собственных CSS стилей в бесплатной версии Elementor

Создавать сайты в конструкторе Elementor очень просто. Однако, бывают случаи, когда невозможно обойтись только инструментами конструктора, и нужно применять навыки владения кодом. В этой статье я покажу, как в Elementor работать с кастомными стилями. Для тех, кто лучше воспринимает визуальную информацию, ниже аналогичное видео.

Допустим, у нас есть задача создать объект с красивыми эффектами, которые невозможно сделать в Elementor в бесплатной его версии. В версии Pro есть опция для вставки собственных стилей для каждого элемента. В бесплатной версии такой возможности нет. Тем не менее, обладая бесплатной версией, все-таки можно создавать собственные стили для объектов.

Итак, создадим такую кнопку со стеклянным эффектом фона и двойным свечением:

Для этого выполняем следующие действия в Elementor:

1. Открываем страницу, находим виджет кнопки и перетаскиваем его в нужную область страницы.
2. Во вкладке Расширенные в самом первом разделе, который называется Расширенные, находим поле CSS классы и задаем произвольное имя классу, например custom-btn. Внимание, в этом поле имя класса задается без точки вначале.
3. Выходим из Elementor и заходим в кастомайзер. Внешний вид > Настроить.
4. В меню справа находим самую нижнюю опцию. В разных темах она может называть по-разному, например, Дополнительные стили.
5. Заходим в этот раздел и в открывшемся поле вставляем следующий код

/* Custom button */
.custom-btn {
    --btn-width: 180px;
    --btn-height: 50px;
	  --btn-background: #e9204f;
	  --left-gradient: #BDEDFC;
	  --right-gradient: #B5E5F2;
}
.custom-btn a {
  position: relative;
  width: var(--btn-width);
  height: var(--btn-height);
}
.custom-btn a:before,
.custom-btn a:after {
  content: '';
  position: absolute;
  inset: 0;
  transition: 0.5s;
}
.custom-btn a:nth-child(1):before,
.custom-btn a:nth-child(1):after {
  background: linear-gradient(105deg,var(--left-gradient),var(--btn-background),var(--btn-background),var(--right-gradient));
}
.custom-btn a:hover:before {
  inset: -2px;
}
.custom-btn a:hover:after {
  inset: -2px;
  filter: blur(10px);
}
.custom-btn a span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--btn-background);
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* Glass Background Effect */
.custom-btn a span::before {
  content: '';
  position: absolute;
  top: 0;
  left: -50%;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.2);
  transform: skew(160deg);
}

6. Нажимаем Опубликовать, и кнопка теперь приняла совершенно новый вид.

Дальше можно изменять в этих стилях цвета, параметры градиентов, размеры кнопки и пр. Этот способ подойдёт не только для создания красивых кнопок, а также при работе и с другими виджетами.

Всем огромных побед и вдохновения.