CodeCanyon Before & After Images Comparison - Плагин WordPress

Руководство по настройке CodeCanyon Before & After Images Comparison для WordPress

CodeCanyon Before & After Images Comparison нужен не для обычной галереи, а для точного визуального сравнения двух состояний: до обработки и после, старого дизайна и нового, исходного снимка и результата работы. В этом руководстве разберем, как безопасно установить плагин, подготовить изображения, выбрать горизонтальное или вертикальное сравнение, настроить подписи, задать стартовую позицию ползунка и проверить, что блок нормально работает на странице WordPress.

Официальные материалы CurlyThemes подтверждают два основных способа вывода: шорткод [images-comparison] и элемент Image Comparison для Visual Composer. В карточке CodeCanyon также указаны ключевые возможности: сравнение слева направо или сверху вниз, стартовая точка сравнения, подписи для двух изображений и возможность добавить собственные классы CSS.

У продукта есть важный нюанс: официальная карточка привязана к старым версиям WordPress и Visual Composer. Поэтому это руководство не обещает безусловную совместимость с любой современной сборкой. Правильный подход - сначала проверить плагин на копии сайта или тестовой странице, затем подключать его к реальным посадочным страницам, портфолио, кейсам и страницам услуг.

Для каких задач нужен before after слайдер

Интерактивное сравнение полезно там, где разницу сложно объяснить текстом. Посетителю не нужно верить описанию услуги - он сам двигает разделитель и видит, что изменилось. Такой блок особенно хорошо работает в материалах, где есть заметная трансформация формы, цвета, чистоты, планировки, качества изображения или состояния объекта.

Главное правило применения: пара изображений должна доказывать один понятный результат. Если в одном блоке одновременно меняются ракурс, свет, масштаб и объект, пользователь увидит не результат, а хаос. Плагин помогает показать разницу, но не исправляет слабую подготовку визуального материала.

Сценарии, где плагин раскрывается лучше всего

• Портфолио ретушера, фотографа или студии обработки изображений, где нужно показать исходник и финальную версию.
• Страницы косметологии, стоматологии, ухода за кожей, ремонта, клининга или реставрации, где результат виден по фотографии.
• Кейсы веб-дизайна, когда сравниваются старый экран сайта и новый экран после переработки интерфейса.
• Обучающие статьи, где нужно показать разницу между настройкой по умолчанию и результатом после оптимизации.
• Лендинги услуг, где один сравнительный блок объясняет ценность быстрее, чем длинный абзац.

Когда обычная галерея будет честнее

Если у вас много независимых фотографий, разные ракурсы или серия работ без пары "до и после", лучше использовать галерею, карусель или портфолио. Before after слайдер требует строгой пары. Он плохо работает как декоративный блок и быстро теряет смысл, если посетитель не понимает, что именно сравнивается.

Кому подходит и кому может не подойти этот плагин

CodeCanyon Before & After Images Comparison хорошо подходит владельцам сайтов и редакторам, которым нужен простой способ вставить одну или несколько пар изображений без разработки собственного JavaScript. Его сильная сторона - прямолинейность: два изображения, подписи, ориентация, стартовая точка и CSS-класс для внешней доработки.

Плагин особенно удобен, если сайт уже использует Visual Composer совместимой ветки или если редактор спокойно работает с шорткодами. В этом случае сравнительный блок можно вставить в страницу услуг, запись блога, карточку кейса или посадочную страницу без отдельного конструктора галерей.

Кому стоит присмотреться

• Сайтам услуг, где визуальный результат важнее длинного описания.
• Небольшим WordPress-проектам, которым нужен один тип интерактивного блока без громоздкого набора функций.
• Редакторам, которые хотят управлять выводом через шорткод и не зависят от современного блока Gutenberg.
• Проектам с уже подготовленными изображениями одинакового размера и ракурса.

Где лучше не начинать с него

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

Практический вывод: используйте этот плагин, когда нужна компактная пара "до и после", а не полноценная система портфолио с категориями, фильтрами и множеством стилей.

Что проверить перед установкой

Перед установкой важно не только убедиться, что архив открывается в WordPress. Надо понять, впишется ли плагин в текущую редакторскую схему сайта. У продукта есть шорткод и элемент Visual Composer, а официальная карточка CodeCanyon указывает совместимость со старыми ветками WordPress и Visual Composer. Это не означает, что он обязательно сломается на более новой сборке, но означает, что проверку нельзя пропускать.

Техническая подготовка

• Сделайте резервную копию сайта или проверьте плагин на копии, если страница уже получает трафик.
• Уточните, какой редактор используется на нужной странице: классический редактор, блочный редактор, Visual Composer или другой конструктор.
• Проверьте, можно ли вставлять шорткоды в выбранный тип контента. В блочном редакторе для этого обычно используется блок Shortcode.
• Подготовьте две фотографии одинакового размера. Минимум - одинаковое соотношение сторон, лучше - одинаковые размеры в пикселях.
• Проверьте кеш, оптимизацию изображений и отложенную загрузку на сайте. Эти инструменты могут влиять на запуск интерактивных элементов.

Контентная подготовка

Для before after блока не хватает двух случайных картинок. Нужна пара, где отличие видно без объяснений. Если это интерьер, снимайте из одной точки. Если это ретушь, сохраняйте одинаковый кадр. Если это косметология или медицина, не используйте изображение без разрешения и не обещайте одинаковый результат для всех людей. Если это интерфейс сайта, сравнивайте один и тот же экран.

Слабая пара изображений делает даже правильно настроенный слайдер бесполезным. Перед загрузкой откройте обе картинки рядом в любом редакторе и проверьте: совпадают ли границы объекта, не меняется ли масштаб, не отвлекает ли фон и ясно ли, какая сторона считается "до", а какая "после".

Установка и первичная проверка в WordPress

Официальная документация CurlyThemes описывает два варианта установки: загрузку папки плагина по FTP в /wp-content/plugins/ и загрузку ZIP-архива через админ-панель WordPress. Для обычного пользователя безопаснее начинать с админ-панели, потому что WordPress сам проверит структуру архива и покажет ошибку, если загружен не тот файл.

Установка через админ-панель

1. Откройте Plugins и перейдите в Add New.
2. Нажмите Upload Plugin и выберите архив плагина. В документации CurlyThemes для установки указан файл images-comparison.zip.
3. Нажмите Install Now.
4. После установки нажмите Activate Plugin.
5. Перейдите в список установленных плагинов и убедитесь, что плагин активен.

Когда нужен FTP-вариант

FTP или файловый менеджер хостинга пригодится, если загрузка ZIP через админ-панель не проходит из-за лимита размера файла, прав доступа или особенностей хостинга. В этом случае из общего архива CodeCanyon надо извлечь именно папку плагина, которую документация называет image-comparison, и поместить ее в /wp-content/plugins/. После этого плагин активируется в разделе Plugins.

Первая тестовая вставка

Не начинайте с боевой страницы. Создайте черновик страницы, загрузите две легкие тестовые картинки в медиатеку и вставьте минимальный шорткод:

[images-comparison image_1="https://example.com/before.jpg" image_2="https://example.com/after.jpg"]

Замените адреса на фактические URL изображений из вашей медиатеки. Если в редакторе используется блоковый интерфейс, вставьте код в блок Shortcode, а не в обычный абзац. После публикации черновика или предпросмотра проверьте страницу в публичной части сайта: должен появиться интерактивный блок с двумя изображениями и разделителем.

Настройка шорткода и элемента Visual Composer

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

Минимальный шорткод

Минимальный вариант содержит два обязательных изображения. В документации они называются image_1 и image_2. Логически первое изображение лучше использовать как "до", второе - как "после", потому что именно так работают параметры подписей.

[images-comparison image_1="https://example.com/before.jpg" image_2="https://example.com/after.jpg"]

Подписи для двух сторон

Чтобы пользователь не гадал, где исходное состояние, добавьте подписи через before_label и after_label. В русскоязычном контенте можно использовать короткие подписи "До" и "После", но если сайт мультиязычный, лучше согласовать их с языком страницы.

[images-comparison before_label="До" after_label="После" image_1="https://example.com/before.jpg" image_2="https://example.com/after.jpg"]

Горизонтальная и вертикальная ориентация

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

[images-comparison orientation="vertical" image_1="https://example.com/before.jpg" image_2="https://example.com/after.jpg"]

Стартовая точка сравнения

Параметр default_offset_pct задает начальное положение ползунка. Официальная документация указывает диапазон от 0 до 1, где 0.5 соответствует середине. Для большинства блоков разумно оставить середину, но иногда выгодно показать больше стороны "после" или, наоборот, оставить акцент на исходном состоянии.

[images-comparison default_offset_pct="0.4" before_label="До" after_label="После" image_1="https://example.com/before.jpg" image_2="https://example.com/after.jpg"]

Не ставьте крайние значения без причины. Если ползунок стартует почти у края, часть пользователей может не понять, что блок интерактивный. Практичный диапазон для первого теста - примерно от 0.35 до 0.65, а затем уже можно подбирать точку под конкретную фотографию.

Настройка через Visual Composer

Если страница редактируется в Visual Composer совместимой версии, добавьте элемент Image Comparison через Add Element. В документации CurlyThemes перечислены поля: Before Image, After Image, Before Label, After Label, Default Offset Point, Orientation и CSS Classes. Это те же настройки, что и в шорткоде, только без ручного набора параметров.

После сохранения страницы проверьте публичный просмотр, а не только редактор. У конструкторов иногда отличается вывод в админ-панели и на сайте, особенно если тема или кеш объединяют JavaScript-файлы.

Подготовка изображений для чистого сравнения

Плагин сравнивает не две идеи, а два пиксельных слоя. Поэтому лучшее улучшение результата часто делается до WordPress: в съемке, кадрировании, сжатии и названиях файлов. Если слои не совпадают, разделитель будет выглядеть технически правильно, но пользователь не увидит честной разницы.

Размер и кадрирование

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

Вес файлов и скорость страницы

Before after блок загружает сразу две картинки. Если каждая весит несколько мегабайт, страница станет тяжелее, особенно на мобильной сети. Сжимайте изображения до разумного веса, используйте размеры, близкие к фактическому выводу, и не вставляйте полноразмерные исходники, если в дизайне они показываются в узкой колонке.

Альтернативный текст и смысл изображений

WordPress позволяет заполнить альтернативный текст в медиатеке. Это полезно для доступности и для понимания изображения, если оно не загрузилось. Для пары "до и после" не пишите одинаковый alt для обеих картинок. Лучше описать состояние: "фасад дома до очистки" и "фасад дома после очистки". Если изображение медицинское или косметологическое, избегайте обещаний результата и используйте нейтральные формулировки.

Подписи на самом слайдере

Подписи before_label и after_label должны быть короткими. Длинные фразы перекрывают изображение и плохо смотрятся на узких экранах. Для большинства русскоязычных страниц достаточно "До" и "После". Если блок сравнивает интерфейс, можно использовать "Старый экран" и "Новый экран". Если сравнивается обработка фотографии - "Исходник" и "Ретушь".

Практический пример: блок для страницы услуги

Разберем предметный сценарий: у сайта ремонтной или реставрационной услуги есть страница с описанием работы, и нужно показать результат одной выполненной задачи. Цель - вставить один интерактивный блок после поясняющего абзаца, чтобы посетитель мог сравнить состояние объекта до и после.

Цель

Получить понятный before after блок в середине страницы: слева исходное состояние, справа результат, стартовая точка примерно в центре, подписи на двух сторонах, без лишних эффектов и без нарушения верстки.

Подготовка

1. Выберите две фотографии одного объекта из одного ракурса.
2. Обрежьте их до одинакового размера в графическом редакторе.
3. Сожмите изображения и сохраните понятные имена файлов, например kitchen-before.jpg и kitchen-after.jpg.
4. Загрузите оба файла в медиатеку WordPress.
5. Скопируйте URL каждого файла из карточки медиафайла.

Шаги вставки

Если используется блочный редактор, добавьте блок Shortcode в нужное место страницы. Если используется классический редактор, вставьте шорткод в текстовый контент. Для первого рабочего варианта подойдет такая структура:

[images-comparison before_label="До" after_label="После" default_offset_pct="0.5" image_1="https://example.com/wp-content/uploads/kitchen-before.jpg" image_2="https://example.com/wp-content/uploads/kitchen-after.jpg"]

После сохранения откройте страницу как обычный посетитель. Не ограничивайтесь предпросмотром в админ-панели: интерактивный JavaScript может загружаться иначе на публичной стороне.

Проверка

• На странице видны оба состояния, а разделитель можно двигать мышью или пальцем.
• Подписи не закрывают важную часть изображения.
• Блок не выходит за ширину контентной области.
• На мобильном экране изображение не обрезается неожиданно и не создает горизонтальную прокрутку.
• При очистке кеша и повторной загрузке страницы слайдер снова работает.

Нюанс, который часто упускают

Если в одной паре изображения разного размера, проблема может проявиться не сразу. На широком экране блок выглядит терпимо, а на мобильном разделитель смещается или часть слоя растягивается. Поэтому после каждого нового сравнения проверяйте не только страницу, но и сами размеры медиафайлов.

Как проверить результат и не сломать скорость страницы

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

Мини-чек перед публикацией

• Откройте страницу в приватном окне браузера, чтобы не видеть админские панели и кеш авторизованного пользователя.
• Проверьте блок в Chrome, Firefox или другом доступном браузере, если страница важна для рекламы или продаж.
• Очистите кеш сайта и кеш оптимизатора, если они включены.
• Проверьте страницу на узком экране или через режим адаптивной проверки в браузере.
• Убедитесь, что сравнение не является единственным источником важной информации. Краткое текстовое пояснение рядом все равно нужно.

Когда не стоит ставить много сравнений на одну страницу

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

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

Собственные CSS-классы без правки файлов плагина

Документация CurlyThemes подтверждает параметр el_css в шорткоде и поле CSS Classes в Visual Composer. Это безопасная точка для аккуратной стилизации, потому что вы не редактируете файлы плагина. Но важно понимать границу: сам разработчик в документации отдельно отмечает, что поддержка не занимается сложной кастомизацией CSS.

Когда нужен собственный класс

Класс полезен, если на сайте нужно ограничить ширину конкретного блока, добавить внешний отступ, отличить блок услуги от блока портфолио или подключить стили только к одному сравнению. Пример шорткода:

[images-comparison el_css="case-before-after" before_label="До" after_label="После" image_1="https://example.com/before.jpg" image_2="https://example.com/after.jpg"]

Безопасная CSS-правка

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

.case-before-after {
  max-width: 920px;
  margin: 24px auto;
}

Проверка простая: после сохранения откройте страницу в публичной части сайта, убедитесь, что изменился только нужный блок, затем очистите кеш. Чтобы откатить правку, удалите CSS-фрагмент и уберите значение el_css из шорткода.

Не используйте CSS для исправления плохо подготовленных фотографий. Если изображения отличаются по пропорциям, правильнее пересобрать пару, а не пытаться растянуть ее стилями.

Частые проблемы и диагностика

Официальных публичных веток поддержки с большим набором конкретных ошибок по этому продукту найти не удалось, поэтому ниже собрана практическая диагностика для его подтвержденной схемы работы: шорткод, Visual Composer, два изображения, CSS и JavaScript. Это не список "ошибок продукта", а безопасный порядок проверки типичных проблем before after слайдеров в WordPress.

На странице виден текст шорткода

Симптом: вместо слайдера отображается строка [images-comparison ...]. Возможная причина - плагин не активен, шорткод вставлен в место, где он не обрабатывается, или блок редактора экранирует содержимое.

Проверьте, активен ли плагин в Plugins. В блочном редакторе используйте блок Shortcode. Если шорткод вставлен в виджет, шаблон темы или поле конструктора, проверьте, поддерживает ли это поле обработку шорткодов.

Слайдер появился, но одно изображение пустое

Симптом: виден контейнер сравнения, но одна сторона не загружается. Чаще всего указан неверный URL, файл удален из медиатеки, закрыт внешним ограничением или адрес содержит лишние символы после копирования.

Откройте каждый URL изображения в отдельной вкладке. Если файл не открывается напрямую, исправьте ссылку в шорткоде. Для надежности используйте изображения из медиатеки текущего сайта, а не чужие внешние адреса.

Изображения растянуты или не совпадают

Симптом: разделитель двигается, но объект "прыгает", слои не совпадают или одна картинка обрезается. Причина почти всегда в разных размерах, соотношении сторон или ракурсе.

Исправление - пересобрать пару изображений в одном размере. CSS может ограничить ширину контейнера, но не сделает плохую пару точной. Если после подготовки проблема остается, временно отключите оптимизацию изображений и проверьте, не подменяет ли она размеры файлов.

Ползунок не двигается

Симптом: изображения видны, но интерактивности нет. Возможные причины - конфликт JavaScript, агрессивное объединение скриптов, отложенная загрузка или ошибка темы.

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

Элемент Visual Composer не находится

Симптом: в конструкторе нет элемента Image Comparison. Проверьте, активен ли сам плагин, используется ли совместимый Visual Composer и не отключены ли сторонние элементы в настройках конструктора. Если сайт работает на другом редакторе, используйте шорткод вместо поиска элемента.

Когда CodeCanyon Before & After Images Comparison будет удачным выбором

Этот плагин стоит использовать, если вам нужен понятный before after слайдер без лишней системы галерей: две картинки, подписи, ориентация, стартовая точка и возможность добавить CSS-класс. Он особенно уместен на страницах услуг, кейсах и обучающих материалах, где один интерактивный блок помогает быстро доказать визуальный результат.

Перед работой на реальном сайте проверьте совместимость с вашим редактором, темой и кешем. Подготовьте пару изображений одинакового размера, вставьте минимальный шорткод, проверьте публичную страницу, затем добавляйте подписи, вертикальный режим или CSS-класс. После такой проверки можно скачать последнюю версию CodeCanyon Before & After Images Comparison и безопасно протестировать ее в рабочем сценарии.

Если же вам нужны Gutenberg-блок, Elementor-виджет, фильтруемые галереи, видео-сравнение или большая панель дизайна, лучше сразу сравнить продукт с более современными альтернативами. Так вы не будете усложнять простой плагин задачами, для которых он изначально не задуман.