Как добавить табы Тильда v.2 | Переключение зеро блок

ППереключение зеро блок в Тильда с помощью кнопок
Данный код помогает переключать несколько зеро блоков на странице при нажатии на свои кнопки. Обновленный, простой и 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 #вкладкитильда #табы #табытильда

[@igr3943]

До сих пор все актуально и работает без проблем! Решение элегантно простое и действенное! Спасибо и от души =)

[@1guitargenius]

Спасибо огромное, только что посмотрел ваше видео, сделал пример, и все работает. Чтобы найти вас я потратил кучу времени и сил, и вот, наконец то я реализую задумку дизайнера. ❤❤❤❤❤❤❤❤❤❤❤❤❤❤я вам крайне благодарен, дай вам бог здоровья!

[@dsol.leningradec]

Огромное спасибо за код! Все работает идеально! И спасибо за то, что делитесь такими полезными штуками. Всегда все очень понятно, эстетично и доступно 👍👍

[@user-zk4jk9cy9k]

Лучший! Спасибо! С самого начала услышала про белый блок при переключении и поняла, это моя боль))))) этот код не просто работает, и код и сама инструкция очень понятная даже для тех, кто коды не пишет и не понимает. Шлю вам ❤❤❤❤❤

[@youxagency]

А мы вам 🥹❤️

[@user-zk4jk9cy9k]

@@youxagency столкнулась с проблемой. на одной странице нужно 2 таких переключающихся блоков (товары и о нас) верхний товары видно, при этом нижнего о нас на опубликованной странице нет. Как можно решить этот вопрос? подскажите плиз..

[@user-zk4jk9cy9k]

Проблему решила. Вдруг кому-то поможет. Делаем дубль блока с кодом и вместо tab прописываем любое другое значение (х), тоже значение прописываем блокам и кнопкам, которые нужно переключать. Например tab=x=tm

[@user-sh7zs8sd9x]

Это самый крутой код, им можно переключать сразу несколько блоков , например зеро+стандартный по нажатию на один таб! Бомба, спасибо!

[@youxagency]

На здоровье )

[@adewki9066]

не могу понять в чем проблема... тоже все блоки показываются сразу вместе. и код внизу, и очередность соблюдена... причем код работал где-то 2 недели, а потом перестал

[@user-oz7eb3qx2d]

Благодарю от всей души!! Тоже пересмотрела много разных вариантов, вы спасли! Все просто, понятно! Ура!

[@Test_-zd5hj]

Спасибо вам за код! И спасибо, что добавили выделение активного таба. Все получилось с первого раза! ❤

[@user-uh9dl8nz4b]

Все работает, круто! Спасибо! давно искала как это реализовать!

[@user-qu7ul5qg7h]

РАБОТАЕТ!!! Спасибо. Кратко и четко.

[@youxagency]

🤝🤝🤝

[@user-jk2gw5qt3q]

Супер!!!! Красавчики

[@user-ju9im5yu9x]

Спасибо вам огромное, все здорово работает!

[@youxagency]

☺️

[@spes6817]

Спасибо за рабочий код, очень помог! Хотел утонить, есть ли возможность назначить какую-либо анимацию переключения между табами (чтобы не мгновенно потухали)?

[@nikitaosipov3181]

Всё работает, огромное спасибо за такую фичу! Раньше подобные штуки через только через шаблон (ME603) удавалось делать

[@VyachesLove94]

Спасибо большое) Очень помогли)

[@user-kd3nc6wp1y]

Объяснеия супер!:)) пасиба

[@veraurbanovich1816]

Благодарю, все получилось

[@postcardsandroses]

огромное спасибо!! все заработало

[@user-km1qn5vx6i]

Отлично, сейчас попробуем, спасибо)

[@user-im1js6kf6x]

спасибо за код! но вот проблема: когда хочешь перезагрузить страницу, то появляются все табы сразу, а при выборе кнопки сразу становится нормально

[@elisavetelisavet7354]

просто спасли меня! спасибо!

[@amams_05]

Ты лучший ,спасибо .

[@MaksimDruzenka]

Все работает. Но когда переношу копию страницы на новый сайт (второй сайт в профиле для ENG версии), то там ничего не работает. Блоки один за одним. Код, классы все на своих местах. В чем может быть проблема? Копия страницы на основном сайте отображается корректно. Но если ее перенести в другой сайт, то нет

[@crn05]

HTML код обязательно нужно вставлять ниже всех блоков, которые в нем участвуют.

[@blacksharksTV]

Подскажите пожалуйста как сделать перемотку к якорнгй ссылке при нажатии таб 1 таб 2... и чтоб кнопки таб1-5 были всегда видны?

[@urfinjuse3769]

Лучший!

[@polinapolovinkina7732]

Здравствуйте! Подскажите, пожалуйста, на одной странице у меня все отлично работает. На другой сделала - почему-то видны только кнопки (сами табы), пока не обновишь страницу или не нажмешь на кнопку первый блок не появляется. Страница длинная, табы находятся в середине страницы. В коде ничего не меняла. Как это можно пофиксить?

[@user-fx8zu5nq2o]

Спасибо за видео! Есть вопрос: можно ли как-то при нажатии поменять не только цвет таба, но и шрифта?

[@youxagency]

Дописать в стили строку color: #262672; Ма обновим на сайте код

[@user-wv8wk8fv3s]

@@youxagency подскажите, пжл, как именно это сделать? Добавил параметр color, но цвет шрифта не меняется при переключении( только перестает меняться цвет кнопки(

[@discou]

@@user-wv8wk8fv3s к строке color: #000000; добавьте !important;

[@user-ex1vq8rc4m]

здравствуйте, а если нужно чтобы при нажатии на таб выпало сразу несколько зиро блоков? например если это каталог товаров, и первый таб- все товары

[@youxagency]

Одинаковые классы должны быть у блоков и покажет несколько

[@user-ex1vq8rc4m]

@@youxagency спасибо!

[@ruscombine]

Переключение между блоками работает, но почему-то если не была нажата ни одна кнопка, то показываются все блоки. Это очень странно, т.к. в вашем примере на сайте все окей.

[@youxagency]

Все зеро блоки должны быть в той же последовательности что и табы

[@eflores7762]

@@youxagency у меня такая же проблема на другой странице сайта, хотя сделано все правильно

[@eflores7762]

у вас получилось решить проблему?

[@user-ex1vq8rc4m]

а мне как раз нужно такое!!! но не получается сделать, чтобы было видно все блоки, хоть зиро и не в последовательности табов

[@user-le4qg3hw5g]

Не работает галерея (не видно первую картику), если она лежит в табе. Если не в табе, то все работает

[@v___v-ky2bw]

супер! а можно сделать так, чтобы на странице повторялась ситуация? Например я хочу два таких блока сделать с табами, но разное наполнение?

[@youxagency]

Да, можно. Скопировать код повторно и поменять например #tar1, #tar2 и классы для блоков uc-tar1 и так далее

[@user-py5lq3ju3i]

вставила код, сначала было все супер, на след день стали видны сами зеро блоки, повторила все сначала, не помогло, можете пожалуйста подсказать как решить проблему?

[@saidozdemir9165]

Сделал все как на видео, в итоге показывает все блоки и не работают кнопки

[@youxagency]

Сделайте все по инструкции еще раз. Код работает на все 100% Проверьте ссылки, классы блоков и классы кнопок.

[@maestrotim8122]

размести код ниже всех блоков, а не сверху.

[@dina_davletshina]

@@maestrotim8122 ты гений!) сейчас делаю эту модификацию и вместо zero-блоков беру стандартные блоки тильды. Думала, что код не работает из-за того что это стандартные блоки)) В итоге разместила код ПОД всеми блоками {табы в zero + стандартные}, и всё заработало))

[@olegstorozhevskikh3892]

Очень крутое видео! только вот я сделал по данному видео 2 как-бы таких экранов с табами, каждый экран-блок со своими зеро-блоками и скриптом. но и при переключение табов на 1 экране пропадает полностью 2й экран с табами. что нужно добавить или убрать в скрипте (и в каком) чтобы работали все два экрана?

[@youxagency]

Проверьте классы у блоков, все нужно сделать строго по инструкции и разместить код в самом низу.

[@glebfyodorov4476]

Привет, способ бомба, но у меня возникла проблема с переключением блоков ST310N (с карточками товара для магазина), при переключении, все вкладки, кроме главной уменьшаются в 2 раза. Почему-то текстовая область и область с кнопками начинает игнорироваться и блок каталога уменьшается в высоту до размера изображения. Я понимаю, что скрипт составлен для зеро блоков, но мало ли ты сможешь подсказать, как это починить) Буду чрезвычайно благодарен) А видос пушка, спасибо за контент)

[@altynays14]

здравствуйте вы нашли решение ?подскажите

[@evgeny8925]

Огромная благодарность! Это работает! Но есть одна проблема - при попытке открыть якорную ссылку напрямую, ничего не происходит (мне нужно, чтобы с другой страницы открывался сразу отдельный раздел под табом). С чем это может быть связано?

[@youxagency]

Всегда открывает только первый таб в этом решении. Добрый день.

[@evgeniaskripova3200]

Здраствуйте, спасибо большое за видео. А если кнопки стоят вертикально в ряд и напротив столбец с текстовой информацией(соответствующей каждой кнопке). И все это должно переключаться при нажатии на этих кнопок. Как это сделать? Я сделала по Вашему алгоритму. Но у меня не стоят кнопки в отдельном зероблоке. И поэтому у меня не получается сделать. Что нужно учесть?

[@youxagency]

Добрый день, Евгения. Посмотрите урок табы Тильда на канале версия 1 )

[@evgeniaskripova3200]

@@youxagency поняла, значит все таки тот урок. Спасибо большое. Отпишусь потом, как получилось или нет)

[@ivan_karamzin]

​@@evgeniaskripova3200получилось?

[@user-pl1ck9fn1d]

А как сделать смену фона у текста самого таба при клике? Спасибо!

[@youxagency]

Добавить в стили: color: #ffffff

[@user-ol6uh2ty4k]

Приветсвую! А как быть если в тильде не один блок с табми?

[@youxagency]

Использовать 2 кода, табы и табы версия 2. Запишу позже видео как это делать

[@user-ol6uh2ty4k]

@@youxagency сначала тоже подумал что нужно продублировать код и изменить и заменить в нем цсс классы. но в итоге с одним все получилось, все хорошо работает.

[@artemkunitsyn6599]

А как поменят цвет таба после нажатия? Сейчас он красный при нажатии, а я хочу свой цвет сделать.

[@youxagency]

На сайте есть инструкция. В стилях цвет меняете и все. Чтобы поменять цвет текста, дописать нужно color: #26262;

[@Tolitikoff]

​ @youxagency какой класс тексту я должен задать что бы цвет сменился ?

[@user-oc1yn7uy8h]

Автоматическое проигрывание блоков возможно?

[@youxagency]

Добрый день. В этой модификации никак, но подумаем что можно сделать на будущее

[@prazdniklimpopo3]

Скажите пожалуйста, а страницу модификации где код нужно вставлять в зеро блок?

[@youxagency]

в описании к ролику все есть. Прочтите внимательнее

[@fariikemelianow1331]

Если переходить по ссылке с не первым активным табом прим /page#tab3, то всё равно отображается первый таб. Можно это как-то исправить?

[@youxagency]

К сожалению нет, по дефолту открывается первый таб всегда (

[@user-rc2jb7qh9l]

Кто нибудь сталкивался с проблемой, что если в табах использовать блок SV203, то блоки отображаются некорректно?

[@youxagency]

В данный момент, это решение подходит идеально только для зеро-блоков. Выкатим версию другую еще скоро

[@user-rc2jb7qh9l]

@@youxagency я в итоге собрал по другому вашему гайду, в котором используется тильдовский блок с табами, а потом скрывается кодом Спасибо большое, очень качественный контент🙌🏻🔥

[@prazdniklimpopo3]

Здравствуйте, скажите пожалуйста, я не поняла, где взять код, у меня он не появляется?

[@youxagency]

В комментарии к видео указана ссылка на страницу с модификацией

[@vilppuphil1255]

возник такой вопрос: как сделать так, что бы код работал, при условии, если всем блокам я задаю ограничение в отображении (ставлю от 1200 и выше)? Т.е. на пк версии я хочу сделать табы, и не хочу, что бы эти табы отображались в мобильной версии? Если задаю параметры всем табам от 1200, то у меня начинают отображаться все блоки сразу.

[@youxagency]

Не работает с ограничением видимости блока

[@vilppuphil1255]

@@youxagency решил вопрос, в мобильной версии в зеро просто сделал высоту блока в 1px, а под телефон сделал другие блоки

[@ivan_karamzin]

​@@vilppuphil1255мегахорош, сам думал полдня как пофиксить эту тему, по итогу сделал то же

[@vilppuphil1255]

@@ivan_karamzin от души!)

[@doxer8459]

У меня не получается, хоть все по видео делаю:(

[@youxagency]

@@doxer8459 нельзя ограничение блоков ставить видимость и скрипт в самый низ.

[@eichend7421]

это прикол какой то) пееребровал все ваши коды 1 в 1 по переключению табов, никакой не работает

[@youxagency]

Попробуйте в настройках включить iQuery поддержку. Настройки - еще Из-за этого обновления многие модификации перестали работать

[@eflores7762]

не понимаю почему не работает на 4ый таб, остальные 3 работают как надо

[@youxagency]

Проверьте еще раз все внимательно. Ошибки быть не может, лично используем на проектах по 6-10 табов

[@eflores7762]

@@youxagency проблема нашлась, картинка с прозрачным фоном наложением с верхнего блока перекрывала

[@Islam0905]

При переключении между зеро блоками не показываются картинки и не работает анимация на блоках( Можете помочь?

[@youxagency]

Ислам, привет 👋🏻 Скоро на сайте опубликуем новую версию кода, исправили ошибку

[@Islam0905]

​@@youxagency спасибо большое)

[@user-hu1cg5gz1u]

Подписка оплачена!не работает.Все по инструкциям.Все блоки видны сразу.

[@user-ee3du9ol7l]

Спасибо за видео! Немного поправил код. Возможно, не очень оптимально, но работает. С ним можно добавлять несколько категорий табов на одной странице. drive.google.com/file/d/1_ly9ynzqK2UxeHiv7W1T31ryKImk52a-/view?usp=share_link

[@user-mr4ip2hj2m]

Благодарю, Илья! Только активная кнопка теперь не горит почему-то

[@user-mr4ip2hj2m]

Удалил .tab-btn .tn-atom{ background-color: #F7F7F7 !important; } И вроде заработало

[@user-ee3du9ol7l]

@@user-mr4ip2hj2m Я свои стили добавил. Для моего примера в активном состоянии в кнопке выделяется шрифт " .my-active-class {font-weight: 500 !important;}", а копка становится прозрачной ".tab-btn .tn-atom{ background-color: transparent !important;" Если цветом нужно выделить активную кнопку, то стиль нужно присвоить к классу ".my-active-class {background-color: #F7F7F7 !important;}", иначе заливка будет применяться ко всем кнопкам.

[@galapalama2871]

По-моему, я одна не понимаю как скопировать код одного блока, если он еще не опубликован. Пожалуйста, откройте глаза тупню)

[@youxagency]

Уточните, вы имеете ввиду id зеро блока ?

[@galapalama2871]

Не ID а html код блока, в котором нужно менять ID

[@galapalama2871]

Простите за панику, я не догадалась найти код в описании к видео. Все добавила, получилось! Спасибо за суперполезные видео!!!