Насколько просто делать сайты на Tilda?

Благодаря удобной панели инструментов на Тильде, я легко справляюсь с поставленными задачами заказчиком и работой по ТЗ.

Какие возможности функционала Tilda?

Тильда - это конструктор сайтов, но её возможности для творчества не ограничены. На сегодняшний день 90% потребностей заказчика возможно внедрить на Тильде.

Насколько удобно управлять сайтом на Tilda?

Благодаря удобному и понятному интерфейсу, вы без труда будете самостоятельно изменять контент на своем сайте а так же управлять заказами CRM от Тильды.

Разработка и создание сайтов на TILDA

Заказать звонок

+7 (978) 755-48-31

ПРО

Слайдер До/После в зеро блоке в Тильда

Видео инструкция

Что делает

Фотография «после» сама по себе не продаёт: без контекста непонятен масштаб работы. Шторка даёт сравнение в одном движении: посетитель тянет ручку вправо и видит, как уставшее помещение превращается в готовый результат. Для ремонта, строительства, косметологии, фотообработки и дизайна это один из самых убедительных блоков.

Мод не рисует картинки сам: вы кладёте в Zero Block два изображения друг на друга и даёте им классы dev-ba-before и dev-ba-after. Всё остальное скрипт делает сам: собирает шторку, добавляет ручку, слушает мышь и касания, поддерживает стрелки клавиатуры и корректно ведёт себя для посетителей с редуцированным движением.

Пример работы модификации

Как добавить шторку «До / После» на сайт

Займёт около 5 минут: конструктор, Zero Block и два класса.

1

Подготовьте две картинки одинакового размера — «До» и «После». Загрузите их на сайт и скопируйте ссылки.

2

Вставьте ссылки в поля «Картинка До» и «Картинка После» в конструкторе — превью сразу покажет ваши изображения.

3

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

4

Нажмите «Сгенерировать код» и скопируйте код кнопкой «Копировать код».

5

В Tilda добавьте на страницу блок T123 «HTML-код» и вставьте код в него.

6

В Zero Block разместите две картинки ровно друг на друге: нижняя — «До», верхняя — «После».

7

В настройках каждой картинки найдите поле «Класс» и добавьте: нижней — dev-ba-before, верхней — dev-ba-after.

8

Опубликуйте страницу и проверьте шторку. Готово! 🎉

Шторка не появилась? Проверьте, что классы добавлены без пробелов именно тем картинкам: «до» — нижней, «после» — верхней. Шторка работает мышью, пальцем на телефоне и с клавиатуры: стрелки ← → (Shift — быстрее).