Как добавить вкладки и переключать блоки?
Чтобы сделать вкладки, нужно добавить на страницу блок ME602 или ME603 из раздела Меню. Блок позволяет создавать на странице вкладки и показывать разный контент по клику на соответствующую вкладку в рамках одной страницы. Затем ниже последовательно расположить все блоки, которые будут меняться при клике на вкладку.
- Напишите название вкладок в меню «Контент» блока ME602 или ME603.
- Укажите ID блоков, которые должны быть видны при клике на эту вкладку, через запятую и без пробела.
- ID блока можно посмотреть в меню «Настройки» каждого блока, в самом низу.
Подробнее о создании вкладок читайте в инструкции Дизайн меню сайта и применение на практике.
Максимальное количество вкладок 8 (восемь).
Похожие вопросы
- Как добавить меню второго уровня (многоуровневое меню)?
- Как сделать, чтобы одно меню накладывалось на первый блок, а второе появлялось при скролле?
- Как добавить одно меню на все страницы?
- Как создать меню вида «хлебные крошки»?
- Какие блоки меню фиксируются на мобильных?
Как сделать вкладки в тильде зеро блок
Каждый элемент дизайна должен отражать и передавать идентичность бренда. Фотографии, иллюстрации и другая графика уравновешивают текст и разбивают веб-страницу, давая глазам отдохнуть от чтения.
Захватывающий образ героя производит хорошее первое впечатление. Анимированные переходы и эффекты, запускаемые при прокрутке, заставляют людей двигаться и превращают навигацию из бессмысленной необходимости в интерактивный опыт. Независимо от стиля бренда, визуальные эффекты должны добавлять энергию дизайну, а не просто занимать место.
Принцип второй. Смысл
Система должна говорить на языке пользователей, используя слова, фразы и концепции, знакомые пользователю, а не системные термины. Следуйте обычным правилам, чтобы информация отображалась в естественном и логическом порядке.
Качественный контент полезен, понятен и направляет вашу аудиторию к действиям, которые вы хотите, чтобы они предприняли. SEO следует планировать и вплетать в контент. SEO можно продумать и со вкусом, используя разговорный тон, который объединяет ключевые слова и фразы, которые не отвлекают от вашего сообщения.
Принцип первый. Цель
Сообщения веб-сайта и призывы к действию (CTA) являются ключом к достижению его целей. Цель сайта может быть такой же простой, как продвижение покупок, рассказ о компании или предоставление учебных пособий. Вы должны уметь выразить намерение своего сайта в одном-двух предложениях — подумайте о миссии.
Дизайн сайта — это не то, что вы должны придумывать по ходу дела. Цель даст вам четкий план и направит дизайн и создание контента. Крыло — это не практическая философия дизайна.
Часть закрепления цели вашего сайта — это знать, для кого он — кто ваша аудитория, какая информация им нужна и как ваш сайт будет ее предоставлять?
Переключение нескольких 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
Табы в Zero-блоке
Вы никогда не хотели сделать меню с табами самостоятельно? Именно в том стиле, в котором нужно именно вам, а не в том, который предлагают стандартные блоки Тильды «ME602: Вкладки с цветом фона» и «ME603: Вкладки с обводкой снизу». А ещё не ограничивать себя 8 вкладками. Или сколько там сейчас у Тильды? Раньше вообще было 5. Создавайте хоть 100 вкладок!
Посмотрите пример, чтобы убедиться, что это возможно, проверить, как это работает.
Доступ только для подписчиков, начиная с уровня «Разработчик».
Пример работы модификации
Нажимайте на разные табы, чтобы показать / скрыть контент.
«Некодим» – это не просто сайт с модификациями по Тильде. Да, всё начиналось именно как сайт с модификациями, но сразу появились наполеоновские планы. Само название говорит о том, что «Некодим» как-то должен быть связан с ноукодом, а тут одни скрипты, да стили. Ну, в этом плане «Некодим» – это про людей, которые не пишут код самостоятельно, а могут спокойно его взять с данного сайта.
Поэтому, во-первых, «Некодим» – это сообщество людей, объединённых одной темой. Это сообщество единомышленников. Раньше это была только Tilda, но уже сейчас «Некодим» развивается и собирает вокруг себя всех, кто хочет знать про nocode и lowcode больше.
Во-вторых – это ещё и польза. Благодаря появившимся в июле 2022 года подпискам, пользователи могут получить доступ к ранее не опубликованным модификациям и скриптам, а также получить дополнительную пользу в виде закрытых прямых трансляций и персональных консультаций.
В третьих «Некодим» изначально задумывался ещё и как школа. В одиночку делать такое достаточно трудозатратно, но от подобной идеи никто не отказывается, так что школе быть!
И, наконец, в четвёртых, «Некодим» – это агентство. Агентство, в котором все работают на аутсорсе. Выпускники школы могут претендовать на работу в различных проектах. Запросы периодически приходят, поэтому имейте ввиду, возможно именно вы станете следующим исполнителем.