Табы в Tilda: вкладки и таблица характеристик товара

Под словом «табы» в Tilda обычно скрываются две задачи: переключать большие блоки на странице или раскладывать сведения о товаре по вкладкам. У них разные настройки. Разберём выбор, а затем соберём таблицу характеристик внутри товарной вкладки: с понятной шапкой, одинаковыми колонками и удобной мобильной версией.

Для переключения секций лендинга есть стандартные блоки ME602A и ME602B. В их контенте задают названия вкладок и ID связанных блоков. Это подходит, например, для разных программ обучения или групп услуг. Сами переключаемые секции могут иметь собственное оформление.

Для сведений об одном товаре используйте вкладки в его карточке каталога. Разделите содержание по задаче покупателя: «Описание», «Характеристики», «Доставка». Затем включите отображение табов в настройках блока товаров. Вкладка в каталоге не является отдельным блоком страницы, поэтому её не нужно подключать к ME602A.

Перед настройкой выпишите, что именно сравнивает покупатель. Для одежды это может быть размер, обхват груди и длина; для комплекта — название, количество и материал. Одна строка должна описывать один объект, а одна колонка — один тип значения.

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

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

Создайте вкладку «Характеристики» или «Размеры» в нужном товаре. В её тексте разделяйте колонки двоеточиями. Первую строку с названиями колонок выделите жирным: по ней мод определяет шапку и количество колонок.

Пример формата для двух колонок:
Параметр : Значение
Материал : [материал вашего товара]
Комплектация : [состав комплекта]

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

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

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

Скопируйте итоговый код в T123 после магазина и опубликуйте страницу. Проверьте товар именно на опубликованном сайте. Если на этой странице уже есть прежняя версия этого мода, замените её целиком, чтобы два обработчика не преобразовывали одну вкладку.

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

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

Если характеристик всего несколько и это пары «название — значение», отдельная многоколоночная таблица может быть лишней. Выбирайте структуру по содержимому, а не по количеству доступных настроек.

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

Для сохранения выбранных товаров пригодится гайд по избранному ST110 и заметкам. А если посетитель ищет ответы до покупки, отдельный аккордеон с поиском поможет вынести общие вопросы за пределы карточки.