authwebTILDA LAB / 07ARTICLE OUTLINE
МОДИФИКАЦИЯ ДЛЯ TILDA

Большой текст.
Ясный маршрут.

Содержание собирается само.
Из ваших заголовков в Tilda.
Читателю проще найти главное.

Родные H2 / H3Один T123Без библиотек
Как установить
01 / НАСТРОЙКАНапишите статью. Навигация появится сама.

Предпросмотр

Один движок в демо и в вашем коде
LIVE
ДЕСКТОП / АВТОШИРИНА
ЗАМЕТКИ О ДИЗАЙНЕ06 МИН

Как текст становится
понятным интерфейсом

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

Начните со структуры

Читатель редко изучает страницу от первого слова до последнего. Сначала он ищет опоры: о чём здесь речь и где находится ответ.

Понятные разделы помогают увидеть целое ещё до первого абзаца.

Одна мысль — один раздел

Хороший заголовок обещает конкретный ответ. Раздел раскрывает эту мысль, а подразделы дают нужные детали.

Дайте тексту ритм

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

Воздух помогает читать

Свободное пространство отделяет одну мысль от другой. Оно работает так же, как пауза в разговоре.

Подзаголовки работают как ориентиры

Они делят длинный путь на понятные шаги. Содержание связывает эти шаги в одну карту.

Оставьте читателю выбор

Можно прочитать всё по порядку. Можно сразу перейти к интересующему вопросу. Хорошая навигация поддерживает оба сценария.

Редактируйте текст в привычном интерфейсе Tilda. После публикации содержание соберётся заново.

КОНЕЦ СТАТЬИ ✳
6 заголовков · 2 уровняК живой статье ↓
ГОТОВО К УСТАНОВКЕ

Один блок. Вся навигация.

Текущие настройки применяются и к живой статье ниже.

Посмотреть готовый код ОДИН T123 · CSS + JS + НАСТРОЙКИ

Код включает сам блок содержания, стили, движок и ваши настройки. Режим «До» и ширина предпросмотра в экспорт не входят. Копируйте код целиком.

02 / УСТАНОВКАТри шага в редакторе Tilda

Пишете как обычно.
Содержание собирается само.

  1. 01

    Задайте настоящие H2 / H3

    Добавьте текстовые блоки. В настройках SEO у заголовков выберите HTML-тег H2 для разделов и H3 для подразделов. Просто увеличить шрифт недостаточно.

  2. 02

    Отметьте блоки статьи

    Настройки блока → CSS Class Name. Задайте aw-article, если префикс uc- уже показан. Итоговый класс: uc-aw-article. Отметьте только нужные блоки.

  3. 03

    Добавьте T123 над статьёй

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

Код ждёт загрузки документа и находит H2 / H3 во всех отмеченных блоках, даже если они стоят ниже T123. Существующие уникальные id и авторские якоря сохраняются. Для заголовков без id адреса создаются автоматически.

ПОНЯТНЫЕ ГРАНИЦЫ

Заголовки в Tilda.
Навигация между ними.

TL02BTL03TL04Семантические H2 / H3

Ниже проверены три типа нативных блоков заголовков. Другие блоки подойдут, только если в их HTML есть настоящие видимые H2 / H3. Поддержка всех блоков Tilda не заявляется: Zero Block, всплывающие окна, скрытые вкладки и CMS / Потоки требуют отдельной проверки.

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

В режиме предпросмотра «До» скрыто только содержание. Текст остаётся тем же. На мобильном содержание занимает обычное место в потоке и сворачивается одной кнопкой.

authwebСделано для контента. Настроено под вас.ARTICLE OUTLINE / v1.0
03 / ЖИВАЯ СТАТЬЯНативные блоки заголовков Tilda ниже

Ориентир уже на странице.

Это содержание собирается из родных блоков под конструктором. Настройки выше обновляют и его. Целевой класс демо всегда uc-aw-article.

От замысла к ясной статье

Живой пример TL02B: заголовок хранится в стандартном блоке Tilda. Оглавление берёт текст отсюда и обновляется после публикации.
Хорошая статья начинается с вопроса читателя. Сначала обозначьте маршрут: что человек узнает, какие шаги сможет повторить и где найдёт подробности. Оглавление делает этот маршрут видимым и помогает вернуться к нужному месту.

Этот абзац создан в родном текстовом блоке TX01. Его не нужно переносить в HTML-код или дублировать в меню. Добавляйте разделы в редакторе, задавайте им семантический тег H2 или H3 и публикуйте страницу.

Модификация читает только отмеченные блоки. Названия кнопок, попапов и разделов сайта не попадают в список случайно. Порядок пунктов совпадает с порядком статьи.
02 / СТРУКТУРА

Структура, которая помогает читать

Раздел H2 задаёт основную мысль, а H3 раскрывает её частный аспект. Не выбирайте уровень только ради размера шрифта: размер меняется отдельно в типографике. Так статья остаётся понятной и человеку, и инструментам доступности.

Здесь TL03 остаётся обычным блоком. Можно поменять заголовок или переставить весь блок выше: его ссылка строится по идентификатору записи и полю title, а не по тексту. Текущая позиция в оглавлении подсвечивается во время чтения.

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

Маленькие детали большого текста

Подраздел H3 из TL04. Он вложен в предыдущий H2, но сам текст остаётся в стандартном редакторе.
Читатели приходят с разными задачами. Кто-то начинает с первого абзаца, другой сразу ищет практическую часть. Короткие названия разделов работают лучше длинных: их легче просмотреть и выбрать.

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

После правок опубликуйте страницу заново. Нативные заголовки будут собраны автоматически. Для важных постоянных ссылок внутри одного длинного текстового поля задавайте собственные уникальные ID: порядковые идентификаторы зависят от структуры этого поля.
03 / ГОТОВО

Проверка перед публикацией

Этот раздел добавлен после первой публикации через штатный редактор. Мы переместили новый блок в конец статьи: оглавление подхватило его автоматически, а ссылки предыдущих разделов сохранились.

Перед выпуском проверьте три вещи: каждый раздел имеет правильный тег H2 или H3, классы назначены только блокам статьи, а отступ при переходе оставляет место для закреплённого меню. Откройте пару пунктов с клавиатуры и посмотрите страницу на телефоне.
Made on
Tilda