Как сделать слайдер до после в Tilda. Пошаговая инструкция
Вступление
Слайдер до и после в Tilda (или “before and after slider”) — это популярный инструмент веб-дизайна. Он позволяет пользователю увидеть изменения на веб-странице, сравнивая ее состояние до и после применения определенных изменений. Например, вы можете использовать слайдер до и после, чтобы показать изменения в дизайне сайта.
Tilda — это популярный конструктор сайтов, который предоставляет своим пользователям широкий выбор инструментов и функций для создания красивых и эффективных веб-страниц. Один из таких инструментов — это слайдер до и после, который может быть легко добавлен на любую страницу, созданную с помощью Tilda.
Как добавить слайдер до после в Tilda
Чтобы добавить слайдер до и после в Tilda, необходимо выполнить несколько простых шагов. Вот они:
- Создайте zero block.
- Удалите лишние элементы в блоке.
- Нажмите на кнопку «+» и выберите «Add Image».
- Загрузите в зеро блок первое изображение для вашего слайдера.
- Точно также загрузите второе изображение.
- Оба изображения вынесите за пределы видимости зеро блока.
- Нажмите на кнопку «+» и выберите «Add HTML».
- Cкопируйте в html элемент следующий код:
Модификация для создания слайдера до/после в тильде
Код доступен только тем, кто зарегистрировался и оплатил подписку
Подписка стоит 400 руб./мес. или 1500 руб. в год
Покупая подписку, ты получаешь:
– доступ ко всем уникальным модификациям
– отключение всей рекламы на сайте
– неограниченный размер загружаемых файлов в LF Cloud
- Сохраните изменения и закройте html элемент.
- Нажмите на первое изображение правой кнопкой мыши и выберите пункт «Copy image url».
- Вернитесь в html элемент и вставьте скопированную ссылку на изображение вместо первого слова «ссылка».
- Таким же образом скопируйте ссылку на второе изображение и вставьте её в код вместо второго слова «ссылка».
- Выделите html элемент левой кнопкой мыши.
- В полях «W» и «H» вместо пикселей выберите проценты.
- Нажмите на «+container», в поле «CONTAINER» выберите «Window container».
- В полях «AXIS X» и «AXIS Y» выберите «center».
- Сохраните изменения и закройте zero block.
- Опубликуйте страницу.
Как использовать слайдер до после в Tilda
С помощью слайдера до и после в Tilda вы можете создавать наглядные примеры вашей работы или просто добавлять визуальный интерес на странице. Будь то улучшение интерфейса, добавление новых функций или улучшение качества продукта, слайдер до и после может помочь вам эффективно передать эти изменения вашим клиентам или потенциальным покупателям.
Кроме того, слайдер до и после может быть полезен при создании веб-страниц для сравнения продуктов или услуг, например, сравнения старой и новой версии продукта или различных вариантов цветовой схемы. Это помогает пользователям лучше понимать, какие изменения были внесены и как они могут повлиять на их опыт использования продукта или услуги.
Слайдер до и после также может быть использован в медицинских, косметических или других профессиональных сферах. Например, слайдер может показать результаты хирургической операции или эффект от использования косметических средств.
Заключение
В заключение, слайдер до и после является эффективным инструментом веб-дизайна. Добавление слайдера до и после на вашу веб-страницу поможет вам создать наглядные и впечатляющие примеры работы. Еще вы сможете продемонстрировать изменения вашего продукта или услуги и улучшить пользовательский опыт на вашем сайте.
Читайте также: горизонтальный скролл слайдер в тильда
Смотрите обучающие видео уроки по Тильде тут
