Характеристики товара в Tilda: как оформить название и значение

«Материал: дуб», «Ширина: 120 см», «Цвет: натуральный» удобно написать обычным текстом. Но в длинном описании такие параметры теряются. Посетителю приходится читать весь абзац, чтобы найти одну нужную цифру.

Форматтер характеристик превращает подготовленные строки в пары названия и значения. Он подходит для простого списка параметров. Если нужна полноценная таблица с несколькими колонками, для неё есть другой мод.

Запишите каждый параметр с новой строки в одном текстовом элементе: «Материал: дуб», затем «Ширина: 120 см». Название и значение разделяются первым двоеточием. Если дальше есть ещё одно, оно останется частью значения.

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

По умолчанию в конструкторе указана область вкладок товара .t-store__tabs__content. Если нужен другой текст, выберите элементы из каталога блоков или задайте свои точные селекторы.

Мод можно использовать и вне страницы товара. Главное — подготовить строки нужного вида и выбрать именно их. Не назначайте форматтер всему большому описанию, если пары параметров занимают только небольшой отдельный фрагмент.

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

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

Добавьте самый длинный реальный параметр: состав ткани, полный адрес или описание комплектации. Короткие «дуб» и «120 см» не показывают, что случится с несколькими строками текста.

На телефоне проверьте переносы, расстояние между названием и значением и общий край списка. Если информация требует трёх колонок или сравнения нескольких моделей, не пытайтесь втиснуть её в пары. Для этой задачи лучше подходит отдельная таблица.

1. Подготовьте обычные строки с двоеточием и отдельные подзаголовки.
2. Выберите нужные текстовые элементы или селекторы.
3. Настройте шрифты, цвета, промежутки и линии.
4. Добавьте код в T123 после выбранного текста и опубликуйте страницу.
5. Проверьте короткую строку, длинное значение и подзаголовок.

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

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

Если преобразовался не тот фрагмент, уточните область действия. Если потерялось визуальное разделение заголовков, проверьте их отдельные строки и жирное выделение. Менять весь дизайн списка до проверки исходной структуры обычно бесполезно.

Читайте также: Табы в Tilda: вкладки и таблица характеристик товара · Сравнение товаров в Tilda: как сделать удобную таблицу.