Top.Mail.Ru
Loading...
No-code платформа для интеграции с российскими сервисами
Адаптер
Мы в соцсетях
Ответим на вопросы
Техподдержка
Образовательные курсы и гайды для IT-специалистов
Академия
Клиентам
О нас
Плагин для Тильды
Партнерам
Академия
Расширение
Техподдержка
Модификации
Профиль
Подписка
Партнерка
Новости +13
Шаблоны
Идеи
Услуги
....
NLM076 • Время настройки: 2 минуты

Слайдер «до-после» в Зеро блоке

Модификация поможет настроить свой слайдер «До-После» в Зеро блоке со своим размером.

Смотрите, как быстро установить модификацию

Инструкция
1. Чтобы в слайдере отображались необходимые фотографии, необходимо добавить на страницу галерею GL12 и загрузить в неё свои картинки. Далее копируешь их ссылки и вставляешь в генератор в указанные поля. Формат файла советуем использовать svg или png;
  • «Ссылка на картинку слева» — Добавляешь ссылку на фотографию, которая будет располагаться слева;
  • «Ссылка на картинку справа» — Добавляешь ссылку на фотографию, которая будет располагаться справа;
  • «border-radius (px)» — Настраиваешь скругление слайдера. Учитывай, что сильно большой радиус может обрезать подсказки на слайдере;
  • «Подпись картинки слева» и «Подпись картинки справа» — Указываем подписи на картинках, если это нужно;
  • Настраиваешь цвет и ширину полосы между фотографиями в полях «Цвет полосы» и «Ширина полосы (px)»
  • Указываешь в поле хочешь ли ты «Показывать шейп между стрелками?»
  • Если да, то настраиваешь «Цвет шейпа и стрелок»
  • «Настройки стрелок» — Настраиваешь Размер стрелки, Расстояние от центральной линии, Расстояние от центральной линии при наведении, Скорость анимации при наведении.

2. Копируем сгенерированный код и вставляем у себя в Зеро-блоке в элемент html.
Размеры слайдера будут соответствовать размеру html элемента

Имей в виду:

  • Рекомендуем загружать изначально изображения с такими же размерами сторон, как и html элемент внутри зеро блока.
  • Рекомендуем загружать векторные изображения не на прозрачном фоне, чтобы избежать наслаивания изображений. Загружайте изображения с таким же цветом фона, как фон блока.

Сгенерируйте код для своего сайта

Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 4
Копировать код
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 4 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 3
И получите доступ к библиотеке из более чем 200 модификаций.
Оплатите подписку
Шаг 2
Создать аккаунт — это быстро и просто.
Войдите или зарегистрируйтесь на платформе
Шаг 1
Ведутся технические работы((
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 3
Копировать код
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 3 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 2
И получите доступ к библиотеке из более чем 200 модификаций.
Возобновите подписку
Шаг 1
Копировать код
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 3
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 3 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 2
И получите доступ к библиотеке из более чем 200 модификаций.
Оплатите подписку
Шаг 1

Популярные решения для вашего сайта

Не нашли нужное решение?

Часто задаваемые вопросы

Наши видеоинструкции позволяют внедрять модификации за 2−5 минут даже без технических знаний. Всё делается прямо в редакторе Тильды, без ручного редактирования кода
Не нашли свой вопрос?
Напишите нам — мы поможем и подскажем оптимальное решение для вашего сайта.
Не нашли свой вопрос?
Напишите нам — мы поможем и подскажем оптимальное решение для вашего сайта.
Есть идеи по улучшению этой модификации или созданию новой?
Поделись своим предложением или проголосуй за понравившуюся идею. Наиболее популярные будем реализовывать.
Не забудь подписаться, чтобы быть в курсе последних обновлений.