Вкладки и табы из zero block в Tilda
Я не знаю, что еще лучше привлечет ваше внимание, чем это красное поле.
Убедительная просьба, прочитайте статью, а не бездумно вставляйте код. Если у вас что-то не работает — это 99,99% потому что вы не внимательно прочитали или вовсе не прочитали текст. Я отвеаю многим людям и почти в 100% виновата невнимательность.
Так же, напоминаю! Если есть вопрос, что-то не работает, не получается, нужно переделать или адаптировать код к вашему проекту, пожалуйста, напишите в ЛС в вк, там я увижу сообщение.
Если поставили код, а он не работает, не полуилось у вас, то с вопросом, скидывайте ссылку на страницу своего проекта.
Текст комментария «А я поставил, а не работает» — не может дать мне понять, что же конкретно произошло и что у вас не работает, а страницу я могу проинспектить и понять, где вы накосячили.
Переключение нескольких zero-block через свои кнопки
Данный код помогает добавить свои кастомные табы и переключать несколько zero-блоков при нажатии. Также есть возможность добавить кастомные стрелки
Переключение zero-block
Заказать код
Вступить в чат
Предложить код
Инструкция
Добавьте zero-блок, наполните контентом и создайте несколько кнопок с классом: tab_btn
Добавьте 2 иконки стрелок с классами left_tab и right_tab ( если хотите переключать стрелками )
Сделайте копии Zero-block и отредактируйте контент
Вставьте код на страницу
в блок Другое — Т123
И впишите ID всех ваших блоков в код на страницу в «Т123 [‘#rec346064270′,’#rec346073573’]
Код скопирован
.disabled-tab < pointer-events: none; >.tab-transition < transition: all 500ms ease-in-out; >.tab-button, .next-tab, .prev-tab < cursor: pointer; outline: none; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; >.hidden < opacity: 0; >.inactive < z-index: -1; >.tab-container, .inactive < position: relative; overflow: hidden; >.custom-tab-section
Как сделать горизонтальный блок с табами в ZeroBlock в Tilda
Делаем блок с табами (вкладками) , который управляет несколькими ZeroBlock.
Длительность видео 20 мин.
Фрагмент видео
Библиотека для примера
/*Серый цвет для иконок*/ .tabmenu div[data-elem-type="image"] .tn-atom < filter: grayscale(1); opacity:0.5; >/*Плавность анимации для Shape*/ .tabmenu div[data-elem-type="shape"] < transition: all 0.3s ease-in-out; >/*Класс активной иконки*/ .activeicon, .hovericon < opacity:1!important; filter: grayscale(0) !important; >/*Класс активного Shape*/ .activeshape, .hovershape < margin-top: -20px; >.t400__off[data-record-type="396"]
Как сделать вкладки для переключения любых блоков?
Этот скрипт позволит тебе сделать любое количество независимых друг от друга табов, для переключения стандартных и зеро блоков и листать табы ещё и стрелками. Работает с Autoscale. Примеры работы модификации внизу cтраницы
Обновление от 02.05.23 — Изменен класс который назначается для кнопок табов и убрана необходимость делать кнопки в отдельном зеро, поэтому класс для кнопок отличается от видео, см. текстовую инструкцию ниже ↓
1. Создай в зероблоке нужно количество кнопок\шейпов\того, что будет табами
2. Задай каждому из этих элементов класс tabbtn и припиши порядковый номер табов (т.е. одни табы это один сгенерированный код) и через черту порядковый номер твоего таба (т.е. tabbtn1-1 это первая кнопка первых табов, tabbtn1-2 вторая и тд)
3. Если нужно открывать вкладку по ссылке, то задай кнопкам переключения обычную якорную ссылку (т.е. #tab1 #pervaya и какую душе угодно. Главное чтобы с такой ссылкой была только одна кнопка)
4. Укажи порядковый номер табов на странице в генераторе
5. При необходимости настрой цвета активного таба и \ или подчеркивания активного таба. Если тебе не нужно изменять их, оставь поля пустыми
6. Если будешь делать кнопки переключения между табами, задай им классы tabprev и tabnext и тоже пропиши в них порядковый номер в середину класса (например tab1prev это кнопка назад для первых табов, tab2next — это кнопка вперед для вторых)
7. Если тебе нужно ограничить работу табов по разрешению экрана, то укажи соответствующие границы в генераторе (можно сделать как ограничение только «до» или только «после», так и оба сразу)
8. Скопируй код и вставь в блок т123 ПОСЛЕ всех вкладок
Инструкция
— Модификация не совместима с basic animation в переключаемых табами Zero
— После обновления кнопки переключения табов можно добавлять в сами табы, чтобы они «переключали блоки сами с собой». В этом случае можно просто сначала создать кнопки в первом табе, а потом отдублировать его, меняя только контент
— Не задавай в стандартных настройках блока ограничение в зависимости от разрешения тем блокам , которые должны переключаться табами, иначе они не будут скрываться при переключении. Для того чтобы задать ограничение, воспользуйся настройками в генераторе