Вертикальный ритм в Kadence: как настроить отступы на WordPress-сайте
Практическая система вертикальных отступов для Kadence: готовые значения для компьютера, планшета и телефона, правила настройки блоков и проверка результата без CSS.
Страница может быть технически аккуратной, но всё равно выглядеть «собранной на глаз»: где-то заголовок прилипает к предыдущему блоку, где-то между секциями возникает провал, а на телефоне отступы внезапно складываются. Обычно проблема не в шрифтах и не в ширине контейнера, а в отсутствии единого вертикального ритма.
Ниже — рабочая схема для WordPress и Kadence. Она задаётся штатными настройками рядов, колонок и инфобоксов, остаётся редактируемой в Gutenberg и не требует CSS-переопределений.
Базовые правила сетки, типографики и адаптива собраны в отдельном руководстве по вёрстке страницы по правилам W3C.
Что такое вертикальный ритм и зачем он нужен
Вертикальный ритм — это повторяемая система расстояний между смысловыми частями страницы. Пользователь не измеряет эти интервалы, но быстро замечает результат: блоки отделены друг от друга, заголовки относятся к своему контенту, а длинная страница читается без ощущения хаоса.
Главный принцип прост: расстояние перед заголовком новой секции должно быть заметно больше, чем расстояние после него. Практичное соотношение — от 2:1 до 3:1. Например, 120 пикселей перед шапкой секции и 48 пикселей до следующего контентного ряда.
Откуда взялись значения
Для проверки были измерены 45 стыков между смысловыми блоками на страницах Tilda при трёх ширинах окна. Медианный зазор составил 136 пикселей на десктопе, 120 пикселей на планшете и 80 пикселей на телефоне. Типичный диапазон оказался шире: 90–180, 75–165 и 60–105 пикселей соответственно.
Копировать сетку Tilda буквально не нужно. В Kadence удобнее использовать шаг 8 пикселей: 24, 32, 40, 48, 64, 80, 96 и 120. Важен не исходный модуль, а последовательность и предсказуемое уменьшение отступов на малых экранах.
| Ширина | Медианный зазор | Рабочий диапазон |
|---|---|---|
| 1440 px | 136 px | 90–180 px |
| 768 px | 120 px | 75–165 px |
| 390 px | 80 px | 60–105 px |
Готовая схема отступов для Kadence
Удобнее классифицировать каждый ряд по его роли. Тогда при добавлении новой секции не приходится подбирать расстояние заново.
| Тип ряда | Десктоп | Планшет | Телефон |
|---|---|---|---|
| Первый экран | 120 / 64 | 96 / 48 | 64 / 0 |
| Шапка секции: кикер, H2 и лид | 120 / 0 | 96 / 0 | 80 / 0 |
| Контент под шапкой | 48 / 0 | 40 / 0 | 32 / 0 |
| Сближенное продолжение секции | 40 / 0 | 32 / 0 | 32 / 0 |
| Первый ряд под заголовком страницы | 32 / 0 | 24 / 0 | 24 / 0 |
| Финальный призыв к действию | 120 / 120 | 96 / 96 | 80 / 80 |
Эта схема не означает, что каждый блок обязан начинаться со 120 пикселей. Большой верхний отступ нужен новой смысловой секции. Связанные элементы внутри неё располагаются ближе: 48 или 40 пикселей на десктопе.
Правило, которое предотвращает двойные зазоры
У всех промежуточных рядов нижний отступ должен быть равен нулю. Воздух между блоками создаёт верхний отступ следующего ряда.
Если у первого ряда стоит 64 пикселя снизу, а у следующего — 80 пикселей сверху, браузер покажет 144 пикселя пустоты. На десктопе ошибку может маскировать дополнительный ряд, например меню якорей. На телефоне этот ряд скрывается, и два отступа складываются.
Исключения — первый и последний ряды страницы. У первого экрана допустим нижний воздух, а финальному блоку нужен симметричный отступ. При этом мобильный низ hero лучше обнулять, если следующий ряд на телефоне скрыт.
Где менять отступы в редакторе Kadence
- Выберите блок Row Layout.
- Откройте справа Настройки ряда → Стиль → Отступы.
- Переключайтесь между значками компьютера, планшета и телефона.
- Введите верхний, правый, нижний и левый отступы для каждого устройства.
- Повторите настройку для остальных рядов по их роли.
У колонок настройки находятся в разделе Настройки колонки → Стиль → Отступы. У инфобокса — в разделе стилей контейнера.
Боковые отступы и ширина контента
На десктопе боковые поля ряда лучше оставить пустыми: Kadence подставит штатные 24 пикселя. На планшете и телефоне можно явно установить по 24 пикселя. У прозрачных колонок внутри ряда боковых отступов быть не должно — иначе контент окажется уже соседних секций.
Исключение — колонка, которая сама является карточкой: имеет фон, рамку или тень. Для неё боковой отступ становится внутренним полем компонента.
| Устройство | Сверху и снизу | По бокам |
|---|---|---|
| Десктоп | 32 px | 24 px |
| Планшет | 28 px | 28 px |
| Телефон | 28 px | 24 px |
Как классифицировать существующие ряды
Если страница уже свёрстана, её текущие значения часто отражают правильную логику, но имеют слишком маленький масштаб. Верхний отступ можно использовать как первичную подсказку:
- 64 px и больше — вероятно, первый экран, финальный блок или шапка новой секции;
- 36–63 px — основной контентный ряд;
- 28–35 px — связанное продолжение секции;
- 16–27 px — первый ряд сразу под заголовком страницы;
- 0 или пустое поле — служебный ряд, который без проверки лучше не менять.
После автоматической классификации обязательно проверьте смысл: ряд с большим верхним отступом должен действительно начинать новую секцию и содержать H2, кикер или другой явный маркер.
Пять частых ошибок на адаптиве
1. Пустое поле принимают за ноль
В Kadence пустое мобильное значение часто наследует десктопное. Если отступа у колонки на телефоне быть не должно, нужен явный ноль.
2. У ряда ставят нулевые боковые поля
Явный ноль отменяет штатное поле Kadence, поэтому секция становится шире остальных. Для дефолтного десктопного поля оставьте значение пустым.
3. Отступы задают одновременно двум соседним рядам
Так появляются случайные провалы. Выберите один источник расстояния — верх следующего ряда — и придерживайтесь его по всей странице.
4. Не проверяют скрытые блоки
Скрытый на телефоне ряд не создаёт собственного зазора и не разделяет отступы соседей. Поэтому мобильную версию нужно проверять отдельно.
5. Исправляют ритм глобальным CSS
Сниппет быстро выравнивает один шаблон, но затем начинает спорить с настройками Gutenberg. Лучше хранить значения в атрибутах самих блоков: так редактор показывает реальное состояние страницы.
Как проверить результат
Проверять только «на глаз» недостаточно. Измерьте расстояние от нижней границы видимого контента одного ряда до верхней границы контента следующего. Граница самого Row Layout для этого не подходит: его внутренний отступ как раз входит в измеряемый зазор.
| Ширина окна | Целевая медиана | Допустимое исключение |
|---|---|---|
| 1440 px | 120–180 px | до 200 px |
| 768 px | 100–150 px | до 170 px |
| 390 px | 80–110 px | до 130 px |
Разброс расстояний внутри одной ширины не должен отличаться более чем вдвое. Если один зазор равен 80 пикселям, а другой — 190, почти наверняка в одном месте сложились верхний и нижний отступы.
Дополнительно проверьте горизонтальный вылет на ширинах 320, 390, 430, 768, 1024, 1440 и 1920 пикселей. Значение scrollWidth - innerWidth должно быть равно нулю.
Чек-лист перед публикацией страницы
- вертикальные отступы собраны на сетке с шагом 8 пикселей;
- у промежуточных рядов нижний отступ равен нулю;
- отступ перед заголовком секции в 2–3 раза больше, чем после него;
- на планшете и телефоне значения заданы отдельно;
- прозрачные колонки не сужают контент боковыми полями;
- карточки имеют достаточные внутренние отступы;
- скрытые на мобильных устройствах ряды проверены отдельно;
- на контрольных ширинах нет горизонтальной прокрутки;
- ритм хранится в настройках Kadence, а не в CSS-сниппете.
Итог
Хороший вертикальный ритм строится не из одного «идеального» отступа, а из нескольких предсказуемых ролей: первый экран, шапка секции, контент, продолжение и финальный блок. Когда каждый ряд получает значение по своей функции, страницы выглядят цельно на всех устройствах, а дальнейшая поддержка не превращается в поиск случайных CSS-переопределений.
Начните с одной страницы, проставьте значения по схеме, измерьте результат на трёх ширинах и только после проверки переносите систему на остальные шаблоны сайта.