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