Как сделать виджет «Сравнение изображений» (До/После) в Elementor без плагинов

Виджет сравнения изображений (Before/After) — популярный инструмент для демонстрации результатов работы, часто используемый на сайтах клиник, строительных компаний и ретушеров. В базовом функционале Elementor Pro этот виджет отсутствует. Вместо установки дополнительных тяжелых плагинов (аддонов), которые замедляют загрузку страницы и перегружают DOM-дерево, эту задачу можно решить с помощью чистого HTML и CSS.

В этой инструкции мы создадим легкий кастомный слайдер «До/После», который работает без сторонних JavaScript-библиотек, поддерживает свайпы на мобильных устройствах и не влияет на показатели Google PageSpeed.

Шаг 1: Подготовка изображений

Главное правило для корректной работы любого слайдера сравнения: оба изображения (исходное и результат) должны иметь идентичные размеры и пропорции еще до загрузки в медиабиблиотеку WordPress. Оптимальный формат — WebP, размер — в зависимости от сетки (например, строго 800×600 px).

Шаг 2: Добавление HTML-структуры

1. Откройте нужную страницу в редакторе Elementor.
2. Перенесите стандартный виджет HTML в подготовленный контейнер.
3. Вставьте в поле виджета следующий код:

<div class="custom-ba-slider">
  <!-- Изображение "После" (нижний слой) -->
  <img src="ССЫЛКА_НА_ФОТО_ПОСЛЕ.jpg" alt="Результат после процедуры" class="ba-image ba-image-after">
  
  <!-- Изображение "До" (верхний слой, обрезаемый через CSS) -->
  <img src="ССЫЛКА_НА_ФОТО_ДО.jpg" alt="Исходное состояние" class="ba-image ba-image-before">
  
  <!-- Информационные ярлыки -->
  <span class="ba-label ba-label-before">ДО</span>
  <span class="ba-label ba-label-after">ПОСЛЕ</span>

  <!-- Ползунок управления позицией шторки -->
  <input type="range" min="0" max="100" value="50" class="ba-range" aria-label="Сравнение изображений" oninput="this.parentElement.style.setProperty('--position', this.value + '%')">
  
  <!-- Визуальные элементы слайдера -->
  <div class="ba-slider-line"></div>
  <div class="ba-slider-button">
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#6b449b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <polyline points="15 18 9 12 15 6"></polyline>
    </svg>
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#6b449b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <polyline points="9 18 15 12 9 6"></polyline>
    </svg>
  </div>
</div>

Обратите внимание: замените текст ССЫЛКА_НА_ФОТО... на прямые URL ваших изображений из медиабиблиотеки.

Шаг 3: Настройка CSS и стилизация

Секрет работы этого слайдера заключается в использовании CSS-свойства clip-path и HTML-тега <input type="range">.

Добавьте стили ниже прямо под HTML-кодом в тот же виджет, обернув их в тег <style>:

<style>
.custom-ba-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3; /* Задайте пропорции ваших фото, например 1/1 или 16/9 */
  overflow: hidden;
  border-radius: 16px;
  --position: 50%; 
}

.ba-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* Динамическая обрезка верхнего изображения */
.ba-image-before {
  clip-path: polygon(0 0, var(--position) 0, var(--position) 100%, 0 100%);
}

/* Стилизация ползунка */
.ba-range {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  outline: none;
  z-index: 20;
  cursor: ew-resize;
}

.ba-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 40px;
  height: 100%;
  background: transparent;
  cursor: ew-resize;
}

/* Разделительная линия */
.ba-slider-line {
  position: absolute;
  top: 0;
  left: var(--position);
  width: 2px;
  height: 100%;
  background: #ffffff;
  transform: translateX(-50%);
  z-index: 10;
  pointer-events: none;
}

/* Кнопка по центру */
.ba-slider-button {
  position: absolute;
  top: 50%;
  left: var(--position);
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  background: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  pointer-events: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Ярлыки */
.ba-label {
  position: absolute;
  top: 16px;
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #333;
  z-index: 15;
  pointer-events: none;
}
.ba-label-before { left: 16px; }
.ba-label-after { right: 16px; }
</style>

Этот подход обеспечивает идеальную производительность: браузер математически вычисляет область видимости изображения, не требуя загрузки тяжелых скриптов, что положительно сказывается на ранжировании сайта.

Читайте также:

Инструкция как получить Elementor Pro бесплатно и легально

Добавляйтесь в мой телеграм. Там больше советов про сайты, заработок, фриланс. И можем лично пообщаться.