Как добавить табы Тильда v.2 | Переключение зеро блок
Вставка
- Опубліковано 3 гру 2024
- ППереключение зеро блок в Тильда с помощью кнопок
Данный код помогает переключать несколько зеро блоков на странице при нажатии на свои кнопки. Обновленный, простой и 100% рабочий способ.
Страница с модификацией: youx.agency/pe...
Инструкция к видео:
1. Создайте кнопки и присвойте каждой класс .tab-btn
2. Вставьте ссылки в каждую кнопку #tab1, #tab2, #tab3 и так далее
3. Создайте свои zero-блок и присвойте им классы .uc-tab1, .uc-tab2, .uc-tab3 и тд.
4. Вставьте код на страницу в блок "Другое" - Т123
3. Измените цвет #ff005a активной вкладки на свой
Поблагодарить автора: www.tinkoff.ru...
Наше сообщество тут: t.me/youxsupport
#tildapublishing #madeontilda #веб #вебдизайнер #ui #ux #тильдаzeroblock #зероблок #дизайн #вебдизайн #design #zeroblock #сайт #лендинг #лендингпейдж #youxagency #вкладкитильда #табы #табытильда
До сих пор все актуально и работает без проблем! Решение элегантно простое и действенное! Спасибо и от души =)
Спасибо огромное, только что посмотрел ваше видео, сделал пример, и все работает. Чтобы найти вас я потратил кучу времени и сил, и вот, наконец то я реализую задумку дизайнера. ❤❤❤❤❤❤❤❤❤❤❤❤❤❤я вам крайне благодарен, дай вам бог здоровья!
Огромное спасибо за код! Все работает идеально! И спасибо за то, что делитесь такими полезными штуками. Всегда все очень понятно, эстетично и доступно 👍👍
Лучший! Спасибо! С самого начала услышала про белый блок при переключении и поняла, это моя боль))))) этот код не просто работает, и код и сама инструкция очень понятная даже для тех, кто коды не пишет и не понимает. Шлю вам ❤❤❤❤❤
А мы вам 🥹❤️
@@youxagency столкнулась с проблемой. на одной странице нужно 2 таких переключающихся блоков (товары и о нас) верхний товары видно, при этом нижнего о нас на опубликованной странице нет. Как можно решить этот вопрос? подскажите плиз..
Проблему решила. Вдруг кому-то поможет. Делаем дубль блока с кодом и вместо tab прописываем любое другое значение (х), тоже значение прописываем блокам и кнопкам, которые нужно переключать. Например tab=x=tm
Это самый крутой код, им можно переключать сразу несколько блоков , например зеро+стандартный по нажатию на один таб! Бомба, спасибо!
На здоровье )
Благодарю от всей души!! Тоже пересмотрела много разных вариантов, вы спасли! Все просто, понятно! Ура!
Все работает, круто! Спасибо! давно искала как это реализовать!
Спасибо вам за код! И спасибо, что добавили выделение активного таба. Все получилось с первого раза! ❤
РАБОТАЕТ!!! Спасибо. Кратко и четко.
🤝🤝🤝
Супер!!!! Красавчики
Спасибо вам огромное, все здорово работает!
☺️
Спасибо большое) Очень помогли)
Благодарю, все получилось
спасибо вам огромное!!! Действительно лучший код! Перепробовала многие, именно этот не слетел при ресайзах на мобиль. версию (т.к. табы в мобилке и десктопе у меня расположены не одинаково)
Отлично, сейчас попробуем, спасибо)
Всё работает, огромное спасибо за такую фичу!
Раньше подобные штуки через только через шаблон (ME603) удавалось делать
Объяснеия супер!:)) пасиба
Спасибо за рабочий код, очень помог! Хотел утонить, есть ли возможность назначить какую-либо анимацию переключения между табами (чтобы не мгновенно потухали)?
просто спасли меня! спасибо!
Ты лучший ,спасибо .
не могу понять в чем проблема... тоже все блоки показываются сразу вместе. и код внизу, и очередность соблюдена... причем код работал где-то 2 недели, а потом перестал
Тоже самое, не работает
Благодарю за код! Вопрос, что нужно в коде добавить, чтобы обводка у активной кнопки тоже менялась на цвет активной кнопки?
Спасибо большое! А как сделать так чтобы переключение между блоками также происходило через определенное время автоматически?
А код будет работать если блоки, которые нужно скрыть - не зеро? Не получается если блоки стандартные
Лучший!
Спасибо за видео! Есть вопрос: можно ли как-то при нажатии поменять не только цвет таба, но и шрифта?
Дописать в стили строку color: #262672;
Ма обновим на сайте код
@@youxagency подскажите, пжл, как именно это сделать? Добавил параметр color, но цвет шрифта не меняется при переключении( только перестает меняться цвет кнопки(
@@КириллКоновалов-ш9ц к строке color: #000000; добавьте !important;
Подскажите пожалуйста как сделать перемотку к якорнгй ссылке при нажатии таб 1 таб 2... и чтоб кнопки таб1-5 были всегда видны?
здравствуйте, а если нужно чтобы при нажатии на таб выпало сразу несколько зиро блоков? например если это каталог товаров, и первый таб- все товары
Одинаковые классы должны быть у блоков и покажет несколько
@@youxagency спасибо!
Здравствуйте! Подскажите, пожалуйста, на одной странице у меня все отлично работает. На другой сделала - почему-то видны только кнопки (сами табы), пока не обновишь страницу или не нажмешь на кнопку первый блок не появляется. Страница длинная, табы находятся в середине страницы. В коде ничего не меняла. Как это можно пофиксить?
спасибо за код!
возникла проблема: при скрытии блоков DV13 (бегущая строка) все строки перестают нормально работать кроме той что в первом табе, как это исправить?
Переключение между блоками работает, но почему-то если не была нажата ни одна кнопка, то показываются все блоки. Это очень странно, т.к. в вашем примере на сайте все окей.
Все зеро блоки должны быть в той же последовательности что и табы
@@youxagency у меня такая же проблема на другой странице сайта, хотя сделано все правильно
у вас получилось решить проблему?
а мне как раз нужно такое!!! но не получается сделать, чтобы было видно все блоки, хоть зиро и не в последовательности табов
HTML код обязательно нужно вставлять ниже всех блоков, которые в нем участвуют.
спасибо за код! но вот проблема: когда хочешь перезагрузить страницу, то появляются все табы сразу, а при выборе кнопки сразу становится нормально
ПОДСКАЖИТЕ ПОЖАЛУЙСТА!! загрузила всё как надо, все супер! НО! я поставила вместе кнопки фото, и у него появляется черная обводка в начале и если нажать два раза на кнопку тоже появляется, как избавиться? 🙏🏻🙏🏻🙏🏻
можно ли как то сделать чтобы на моб. версии табы скроллились?
Спасибо большое за метод, есть вопрос. При включенном автоскейле, на мобильных версиях как то странно пляшет текст. С чем это может быть связано ?
Склоняюсь больше к специфике оптимизации Тильда скрытых блоков. Не думаю что проблема в скрипте
супер! а можно сделать так, чтобы на странице повторялась ситуация? Например я хочу два таких блока сделать с табами, но разное наполнение?
Да, можно.
Скопировать код повторно и поменять например #tar1, #tar2 и классы для блоков uc-tar1 и так далее
Автоматическое проигрывание блоков возможно?
Добрый день. В этой модификации никак, но подумаем что можно сделать на будущее
Очень крутое видео! только вот я сделал по данному видео 2 как-бы таких экранов с табами, каждый экран-блок со своими зеро-блоками и скриптом. но и при переключение табов на 1 экране пропадает полностью 2й экран с табами. что нужно добавить или убрать в скрипте (и в каком) чтобы работали все два экрана?
Проверьте классы у блоков, все нужно сделать строго по инструкции и разместить код в самом низу.
Здраствуйте, спасибо большое за видео. А если кнопки стоят вертикально в ряд и напротив столбец с текстовой информацией(соответствующей каждой кнопке). И все это должно переключаться при нажатии на этих кнопок. Как это сделать? Я сделала по Вашему алгоритму. Но у меня не стоят кнопки в отдельном зероблоке. И поэтому у меня не получается сделать. Что нужно учесть?
Добрый день, Евгения. Посмотрите урок табы Тильда на канале версия 1 )
@@youxagency поняла, значит все таки тот урок. Спасибо большое. Отпишусь потом, как получилось или нет)
@@evgeniaskripova3200получилось?
Автор не сказал (или я не услышал), что нужно в настройках включить jQuery, без нее не работает!
Да, все верно. Из-за этого может не работать половина скриптов. Автор не сказал, потому что Тильда выкатила обновление это месяц назад насколько я знаю
как тебе руки расцеловать
Приветсвую! А как быть если в тильде не один блок с табми?
Использовать 2 кода, табы и табы версия 2. Запишу позже видео как это делать
@@youxagency сначала тоже подумал что нужно продублировать код и изменить и заменить в нем цсс классы. но в итоге с одним все получилось, все хорошо работает.
у меня тоже проблема, все zeroblocki видны при публикации видны из за чего это может быть?
а к одному табу можно подключить несколько блоков?Не только зеро, но и стандатных
@@juuulikor да 👏 просто uc-tab1 стиль поставьте нескольким блокам
А как сделать смену фона у текста самого таба при клике? Спасибо!
Добавить в стили:
color: #ffffff
Сделал все как на видео, в итоге показывает все блоки и не работают кнопки
Сделайте все по инструкции еще раз. Код работает на все 100%
Проверьте ссылки, классы блоков и классы кнопок.
размести код ниже всех блоков, а не сверху.
@@maestrotim8122 ты гений!) сейчас делаю эту модификацию и вместо zero-блоков беру стандартные блоки тильды. Думала, что код не работает из-за того что это стандартные блоки)) В итоге разместила код ПОД всеми блоками {табы в zero + стандартные}, и всё заработало))
Не работает галерея (не видно первую картику), если она лежит в табе. Если не в табе, то все работает
вставила код, сначала было все супер, на след день стали видны сами зеро блоки, повторила все сначала, не помогло, можете пожалуйста подсказать как решить проблему?
Огромная благодарность! Это работает!
Но есть одна проблема - при попытке открыть якорную ссылку напрямую, ничего не происходит (мне нужно, чтобы с другой страницы открывался сразу отдельный раздел под табом).
С чем это может быть связано?
Всегда открывает только первый таб в этом решении. Добрый день.
А как поменят цвет таба после нажатия? Сейчас он красный при нажатии, а я хочу свой цвет сделать.
На сайте есть инструкция. В стилях цвет меняете и все. Чтобы поменять цвет текста, дописать нужно color: #26262;
@youxagency какой класс тексту я должен задать что бы цвет сменился ?
Привет, способ бомба, но у меня возникла проблема с переключением блоков ST310N (с карточками товара для магазина), при переключении, все вкладки, кроме главной уменьшаются в 2 раза. Почему-то текстовая область и область с кнопками начинает игнорироваться и блок каталога уменьшается в высоту до размера изображения.
Я понимаю, что скрипт составлен для зеро блоков, но мало ли ты сможешь подсказать, как это починить) Буду чрезвычайно благодарен)
А видос пушка, спасибо за контент)
здравствуйте вы нашли решение ?подскажите
Спасибо за видео! Немного поправил код. Возможно, не очень оптимально, но работает.
С ним можно добавлять несколько категорий табов на одной странице.
drive.google.com/file/d/1_ly9ynzqK2UxeHiv7W1T31ryKImk52a-/view?usp=share_link
Благодарю, Илья! Только активная кнопка теперь не горит почему-то
Удалил
.tab-btn .tn-atom{
background-color: #F7F7F7 !important;
}
И вроде заработало
@@Дизайн-студияТухачевского Я свои стили добавил. Для моего примера в активном состоянии в кнопке выделяется шрифт " .my-active-class {font-weight: 500 !important;}", а копка становится прозрачной ".tab-btn .tn-atom{
background-color: transparent !important;" Если цветом нужно выделить активную кнопку, то стиль нужно присвоить к классу ".my-active-class {background-color: #F7F7F7 !important;}", иначе заливка будет применяться ко всем кнопкам.
Скажите пожалуйста, а страницу модификации где код нужно вставлять в зеро блок?
в описании к ролику все есть. Прочтите внимательнее
Здравствуйте, скажите пожалуйста, я не поняла, где взять код, у меня он не появляется?
В комментарии к видео указана ссылка на страницу с модификацией
делаю все как в видео, но у меня всё равно на странице идут подряд блоки, ничего не переключается :с
в чём может быть проблема?
@@dianka3641 настройки сайта - еще - включить поддержку iQuery
возник такой вопрос: как сделать так, что бы код работал, при условии, если всем блокам я задаю ограничение в отображении (ставлю от 1200 и выше)? Т.е. на пк версии я хочу сделать табы, и не хочу, что бы эти табы отображались в мобильной версии? Если задаю параметры всем табам от 1200, то у меня начинают отображаться все блоки сразу.
Не работает с ограничением видимости блока
@@youxagency решил вопрос, в мобильной версии в зеро просто сделал высоту блока в 1px, а под телефон сделал другие блоки
@@vilppuphil1255мегахорош, сам думал полдня как пофиксить эту тему, по итогу сделал то же
@@ivan_karamzin от души!)
Если переходить по ссылке с не первым активным табом прим /page#tab3, то всё равно отображается первый таб. Можно это как-то исправить?
К сожалению нет, по дефолту открывается первый таб всегда (
Кто нибудь сталкивался с проблемой, что если в табах использовать блок SV203, то блоки отображаются некорректно?
В данный момент, это решение подходит идеально только для зеро-блоков. Выкатим версию другую еще скоро
@@youxagency я в итоге собрал по другому вашему гайду, в котором используется тильдовский блок с табами, а потом скрывается кодом
Спасибо большое, очень качественный контент🙌🏻🔥
не понимаю почему не работает на 4ый таб, остальные 3 работают как надо
Проверьте еще раз все внимательно.
Ошибки быть не может, лично используем на проектах по 6-10 табов
@@youxagency проблема нашлась, картинка с прозрачным фоном наложением с верхнего блока перекрывала
При переключении между зеро блоками не показываются картинки и не работает анимация на блоках( Можете помочь?
Ислам, привет 👋🏻
Скоро на сайте опубликуем новую версию кода, исправили ошибку
@@youxagency спасибо большое)
У меня не получается, хоть все по видео делаю:(
@@doxer8459 нельзя ограничение блоков ставить видимость и скрипт в самый низ.
это прикол какой то)
пееребровал все ваши коды 1 в 1 по переключению табов, никакой не работает
Попробуйте в настройках включить iQuery поддержку. Настройки - еще
Из-за этого обновления многие модификации перестали работать
@@youxagency Получилось, благодарю!
@@youxagency И у меня с Юери получилось)
Подписка оплачена!не работает.Все по инструкциям.Все блоки видны сразу.
По-моему, я одна не понимаю как скопировать код одного блока, если он еще не опубликован. Пожалуйста, откройте глаза тупню)
Уточните, вы имеете ввиду id зеро блока ?
Не ID а html код блока, в котором нужно менять ID
Простите за панику, я не догадалась найти код в описании к видео. Все добавила, получилось! Спасибо за суперполезные видео!!!
огромное спасибо!! все заработало