Переключение зеро-блок с помощью табов/вкладок в Тильда
Вставка
- Опубліковано 18 жов 2024
- Переключение нескольких zero-block через свои кнопки
Данный код помогает добавить свои кастомные табы и переключать несколько zero-блоков при нажатии. Также есть возможность добавить кастомные стрелки.
Страница с модификацией: clck.ru/34BMa5
Инструкция к видео:
1. Добавьте zero-блок, наполните контентом и создайте несколько кнопок с классом: tab_btn
2. Добавьте 2 иконки стрелок с классами left_tab и right_tab ( если хотите переключать стрелками )
3. Сделайте копии Zero-block и отредактируйте контент
4. Вставьте код на страницу
в блок Другое - Т123
3. И впишите ID всех ваших блоков в код на страницу в "Т123 ['rec346064270','rec346073573']
Поблагодарить автора: www.tinkoff.ru...
Наше сообщество тут: t.me/youxsupport
#tildapublishing #madeontilda #веб #вебдизайнер #ui #ux #тильдаzeroblock #зероблок #дизайн #вебдизайн #design #zeroblock #сайт #лендинг #лендингпейдж #youxagency #вкладкитильда #табы #табытильда
Спасибо! Весь день не могла решить эту проблему, в итоге помог ваш код и способ! Просто лучший - подписка!
Тоже несколько часов мучался и нашёл причину. Просто табы надо оформлять как кнопки, а не шейпы. После этого у меня всё заработало.
Благодарю за полезное и очень понятное видео, с вашей помощью, у меня получилось сделать, наконец, этот блок!!!!!
Спасибо! Код рабочий! Народ, будьте внимательнее. Это всего лишь алгоритм. Если действия делать последовательно - будет результат. Перед тем как что-то писать (вообще где либо) проверьте себя дважды. 🤓
🤝🤝🤝
Класс! Весь день искала эту информацию, спасибо
❤️
Спасибо за такой труд и вклад, автор ты крут!) лайк, подписка!
Лайк за свежий урок
Сделал все по видео нихрена не сработало, начал сравнивать скрипт с сайта он отличается от того что в видео. Почему?
Спасибо вам большое, очень помогли!
При публикации на странице остаются все видимые блоки, которые должны переключаться.
Попробуйте код версия 2.0
Он работает. Этот код обновили на сайте
Спасибо огромное!
На здоровье. Не забудьте подписаться 🥹
спасибо за помощь!
Видео контент будет меняться при нажатии на кнопку? Код для мобильной версии адаптирован?
спасибо, все получилось!
Всем привет. Подскажите пожалуйста. Взяла данный код, но подключила только кнопки. Всё работает. Всё супер. Единственное При переключении блоков, почему-то следующий съедает несколько пикселей внизу, хотя первый блок стоит идеально, при переключении съедает. Как решить?
Добрый день! Спасибо огромное за то, что делитесь такой информацией! Подскажите, как можно сделать плавное переключение - например что-бы содержимое появлялось при переключение с эффектом fade-in
Там показатель 500 кажется в коде есть или 0, вот его чем больше делаете - тем плавнее появляются блоки
Большое спасибо за код! Все работает, кроме того, что ВСЕ зеро-блоки остаются видимыми на странице. И при нажатии на Табы идет просто перемещение, как на якорную ссылку. Неактивные блоки не скрываются. Скажите, что я сделал не так?
Код в подвал киньте
Делаю всё по порядку:
1) Создайте 1 таб и присвойте класс
2) Скопируйте этот таб
3) Сделайте копии блока и наполните контентом
4) Вставьте код и замените ID блоков в нем
Но всё равно жму на вторую кнопку - появляется третий блок, нажимаю на третий блок, вообще всё пропадает...
такая же ситуация. все в разнобой
И как решили проблему?
Все отлично работало несколько дней, но сегодня скрипт перестал корректно работать, все кнопки перепутались. делал заново с нуля, не помогло. Работает только с двумя табами, с тремя уже проблемы.
Большое спасибо за код, всё работает отлично!
Столкнулся с одной особенностью, когда делаешь несколько копий оригинальной страницы, где применялись табы, на копиях код почему-то перестаёт работать, хотя на оригинальной всё стабильно. Сначала подумал, что проблема в обновленных id, но их замена тоже ни на что не повлияла. Возможно сможете подсказать в чём может быть проблема?
Добрый вечер, Вадим.
На новой странице ID блоков также меняются, их нужно скопировать и вставить в новый код, все должно работать как нужно.
Проверьте еще раз, возможно допустили ошибку
@@youxagency Спасибо за ответ, попробую ещё раз вставить новые id, надеюсь поможет)
Привет) У меня проблема, все табы переключаются корректно, но когда включаешь последний, то остальные становятся некликабельные, в чем может быть дело?
Здравствуйте, почему то переключаются не по порядку. нажимаешь одно-включается другое. в чем может быть дело?
Важен четкий порядок действий и последовательность:
1) Создайте 1 таб и присвойте класс
2) Скопируйте этот таб
3) Сделайте копии блока и наполните контентом
4) Вставьте код и замените ID блоков в нем
@@youxagency К сожалнению порядок тут не причем. можете сами попробовать, сделайте с нуля три таба, второй уже будет не корректно переключатся.
Спасибо за видео! Получается нужно КОПИРОВАТЬ таб, чтобы скрипт работал. А если у меня вместо табов вставлены изображения (нарисованные кнопки) и все разные, есть решение? Спасибо!
Попробуйте второй урок на канале или прозрачные кнопки поверх картинок вставьте
Перечитав все комменты всё делаю абсолютно по порядку, уже раз 5-ый с нуля, но табы работают в разнобой, когда переключаешь через них
Исходя из многочисленных вопросов и сложностей с реализацией, в ближайшее время будет записан новый ролик Табы v.2
Новый скрипт, простой и удобный
У меня, к сожалению, не работает код (сделала все как в инструкции). У меня 2 блока так и стоят друг за другом при опубликовании. почему так может быть?
Попробуйте в настройках включить iQuery поддержку. Настройки - еще
Из-за этого обновления многие модификации перестали работать
@@youxagency Добрый день, ваша подсказка помогла и код заработал! Большое спасибо!
Добрый вечер! К сожалению код не работает(
Ксения, код работает. Пожалуйста, посмотрите видео еще раз и сделайте все по порядку снова.
Сделала 5 вкладок, переключаются вразнобой :( Жмешь одну кнопку, а переключается на совсем другую вкладку, чем нужно(
У меня также, 3 вкладки вразнобой(
Проверила с двумя, все ок
Важен четкий порядок действий и последовательность:
1) Создайте 1 таб и присвойте класс
2) Скопируйте этот таб
3) Сделайте копии блока и наполните контентом
4) Вставьте код и замените ID блоков в нем
Спасибо большое за код! Единственное почему-то на планшетах и в мобильном не работает( В чем может быть проблема?
Проверьте еще раз все внимательно. Страница на которой лежит код адаптирована, ничего лишнего не добавляли.
@@youxagency перепроверила. Уже и код удалила, и заново всё сделала и не работает на мобилках и планшетах(. На десктопе всё супер
Напишите в наш общий чат с ссылкой на проект и детально опишите проблему
дружище ссылка на код не работает, исправь плиз
Проверил, все работает.
Попробуйте зайти напрямую через сайт в раздел «Модификации»
сделал 4 таба
также не работает ничего)
нажимаю третью кнопку - открывается вторая и так далее
алгоритм тут не при чем, несколько раз все проверил
Посмотрите второе видео про табы на канале. v.2.0
Код нерабочий
Попробуйте в настройках включить iQuery поддержку. Настройки - еще
Из-за этого обновления многие модификации перестали работать
@@youxagency спасибо, у меня он включен
Какое-то очень странное и ненадежное решение. Если ты читаешь это еще ищешь, как это реализовать такой слайдер - рекомендую поискать еще. С этим решением одни мучения и работает он через раз. На мобилке так и не смог заставить его работать, увы(
Ни хрена не срабатывает. А чё ему срабатывать, коды отличаются( в видео совсем другой). const tabGroups = [ .... и //ID Zero вставить как-то не совсем похожи. Зря прое...ся два часа.
Попробуйте код версия 2.0
Он работает. Этот код обновили на сайте
А вот этот работает чётко. Спасибо, что читаете коменты и реагируете моментально. Большой лайк!!!