Откройте редактор сайта
В админке Яндекс КИТ откройте «Редактор сайта» и нажмите «Редактировать».
До / После 01
ГлавнаяМедиаИнтерактивное сравнение двух изображений с перетаскиваемым разделителем.
kit-agency.ru
Увидите разницу
Передвигайте разделитель, чтобы сравнить изображения до и после.
Добавить в Яндекс КИТ
Нужно скопировать три файла в редактор - это просто.
Создайте кастомную секцию
Перейдите во вкладку «Секции» и нажмите «Добавить секцию». Если пункта нет — .
Создайте кастомную секцию
В блоке «Кастомные секции» нажмите «Создать секцию».
Вставьте HTML, CSS и JSON Schema
Скопируйте три файла выше. Откройте вкладки HTML, CSS и JSON Schema, вставьте код и сохраните секцию.
4Загрузите изображения
В полях «Изображение «До»» и «Изображение «После»» загрузите фото через документированный ImageModel. В превью KIT Apps используются демо-фото. Чтобы сравнение выглядело точно, снимайте оба кадра с одной точки и одинаковым кадрированием.
5Сохраните и добавьте на страницу
Нажмите «Сохранить» и перетащите секцию на главную. Ссылку задавать не нужно — сравнение работает внутри секции.
Нужно больше, чем готовая секция?
Посмотреть услуги →KIT Agency разрабатывает, настраивает и продвигает магазины на Яндекс КИТ.
Вам также может подойти
Фото + текстовая мозаика 01
Посмотреть →Редакционная сетка из изображений и текстовых карточек для истории бренда или коллекции.
Изображение + показатели 01
Посмотреть →Большое изображение с преимуществами и показателями продукта.
Сравнение брендов 01
Посмотреть →Секция преимуществ с наглядным сравнением вашего бренда с альтернативами.