Вкладки на странице: когда разделение содержания оправдано

Вкладки разделяют однотипное содержание внутри страницы. Они удобны, если посетитель выбирает одну группу: например, проекты сайтов компаний или магазинов. Для последовательной инструкции вкладки часто неудобны: скрытая часть мешает видеть все шаги. Сначала решите, должна ли информация читаться вместе.

В вымышленном портфолио есть два набора: «Сайты компаний» и «Магазины». Для каждого создайте отдельные блоки с карточками. Названия вкладок должны объяснять содержание без декоративных формулировок.

Не прячьте единственную контактную кнопку внутри одной группы. Общее действие и пояснение подборки лучше оставить вне переключаемых блоков. Тогда посетитель может обратиться независимо от выбранной вкладки.

1. Добавьте ME602A или ME602B из библиотеки.
2. Ниже последовательно расположите блоки, которые должны переключаться.
3. В «Контенте» меню вкладок задайте названия групп.
4. Найдите ID каждого целевого блока в его настройках или контекстном меню Block ID.
5. У соответствующей вкладки укажите ID её блоков через запятую без пробелов.
6. Сохраните и опубликуйте страницу.

Например, если учебной группе принадлежат два блока, в поле ставят два их фактических идентификатора. Не копируйте чужие номера из примера: после копирования страницы ID могут измениться. Точный порядок действий описан в справке Tilda по вкладкам.

Откройте первую вкладку и запишите видимые карточки. Переключитесь на вторую: должно исчезнуть содержание первой группы и появиться содержание второй. Общий вводный текст и контакт остаются на месте.

Если один блок нужен обеим группам, сначала решите, не должен ли он быть общим вне переключения. Такая структура проще, чем сложные списки одних и тех же ID. Не включайте само меню вкладок в список скрываемого содержимого.

На телефоне длинные названия могут не помещаться в строку. По документации у таких меню предусмотрен горизонтальный скролл и подсказка о нём. Проверьте, замечает ли человек вторую вкладку и может ли до неё добраться. Сокращайте названия без потери смысла.

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

• Появляется чужая группа: перепроверьте ID в поле вкладки.
• После копирования ничего не переключается: обновите идентификаторы целевых блоков.
• Осталась пустая большая область: проверьте состав и высоту переключаемых блоков.
• Посетитель не видит часть важной информации: вынесите её из вкладок.

Если вкладки скрывают связанные вопросы, сравните вариант с аккордеоном. Приёмку дополняет аудит клавиатурой. Для самостоятельного обучения изучите актуальные программы и условия в разделе курсов Perkova&Perkova.