Elements

Модуль сравнения

Универсальный модуль «Было / Стало» для Tilda Zero Block: сравнение двух состояний при перетаскивании ручки или при наведении, поддержка нескольких экземпляров в одном блоке и гибкая настройка через параметры.

Как собрать в Tilda Классы и конфиг

Примеры работы модуля сравнения

Почему это удобно

Подходит для сценариев «Было / Стало», сравнений дизайна, интерфейсов и любых двух состояний в одном Zero Block.

Работает при перетаскивании ручки и при наведении, поддерживает горизонтальное и вертикальное сравнение.

Поддерживает несколько независимых модулей сравнения в одном Zero Block с отдельными идентификаторами.

Для fullscreen flex-групп можно включить принудительное наложение слоев.

После добавления в Tilda параметры можно менять через панель Tildify Elements без ручного редактирования кода.

1. Как собрать модуль сравнения в Tilda

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

Если слои before и after собраны как fullscreen flex-группы и Tilda не дает расположить их друг над другом, включи в настройках опцию Принудительное наложение.

Видеоинструкция: модуль сравнения в Tilda

Добавь в Zero Block элемент Модуль сравнения из Tildify Elements или вставь готовый пример с демо-страницы через импорт блока.

Нижнему слою, (это может быть картинка, шейп или группа), который будет являться элементом «ДО» задай класс tf_compare-before, верхнему слою, который будет являться «ПОСЛЕ» задай класс tf_compare-after. Ручка с классом tf_compare-handle опциональна и нужна только если хочешь показывать видимый перетаскиваемый элемент.

Если в одном Zero Block несколько сравнений, используй одинаковое окончание у всех связанных классов: tf_compare-before-sale, tf_compare-after-sale, tf_compare-handle-sale.

Добавь настройки модуля через меню Tildify Elements. Если модулей несколько, укажи в ID экземпляра тот же идентификатор, что и в классах.

Проверь, что слой «ПОСЛЕ» расположен поверх слоя «ДО», иначе Модуль сравнения визуально не заработает.

После добавления настроек не обязательно редактировать код вручную. Выдели HTML-блок модуля сравнения или его связанные элементы и открой настройки на панели Tildify Elements: там будет более понятная форма для параметров.

2. Классы в Tilda

tf_compare-before

Слой «ДО»

Ставится на нижний слой. Если модулей несколько, добавь тот же идентификатор в конец класса, например tf_compare-before-sale.

tf_compare-after

Слой «ПОСЛЕ»

Ставится на верхний слой, который модуль показывает частично. Если модулей несколько, используй tf_compare-after-sale.

tf_compare-handle

Ручка

Опциональный элемент ручки. Если модулей несколько, используй tf_compare-handle-sale. Для hover-сценариев ручку можно не добавлять.

3. Важные замечания

Если в одном Zero Block несколько модулей сравнения, всегда используй один и тот же идентификатор у связанных классов и data-compare-id.

Слой tf_compare-after должен быть выше слоя tf_compare-before, иначе визуально модуль будет выглядеть сломанным.

Если нужен нестандартный внешний вид ручки, меняй сам элемент ручки, а не связанные служебные классы.

Если структура нарушена, встроенная проверка подскажет, какого слоя, настройки или связи не хватает.