[{"data":1,"prerenderedAt":628},["ShallowReactive",2],{"docs-article-\u002Fdocs\u002Fsite-builder\u002Flayout-variant-padding":3,"docs-all":375},{"id":4,"title":5,"body":6,"category":363,"categoryLabel":364,"description":365,"extension":366,"meta":367,"navigation":368,"order":369,"path":370,"pro":368,"seo":371,"stem":372,"updated":373,"__hash__":374},"docs\u002Fdocs\u002Fsite-builder\u002Flayout-variant-padding.md","Подложки блоков и отступы",{"type":7,"value":8,"toc":346},"minimark",[9,13,22,27,32,40,43,56,59,63,70,72,83,86,90,93,95,106,110,121,144,147,173,176,180,186,214,218,225,251,254,258,261,299,303,310,314,317,325,328,332],[10,11,5],"h1",{"id":12},"подложки-блоков-и-отступы",[14,15,16,17,21],"p",{},"Каждый блок в конструкторе имеет параметр ",[18,19,20],"code",{},"layout_variant"," — как он встроен в страницу. От него зависит, будет ли блок «выравниваться в контейнер» или «растягиваться по полной ширине».",[23,24,26],"h2",{"id":25},"три-варианта","Три варианта",[28,29,31],"h3",{"id":30},"_1-section-секция-на-всю-ширину","1. Section (секция — на всю ширину)",[14,33,34,35,39],{},"Блок занимает ",[36,37,38],"strong",{},"всю ширину экрана",". Содержимое внутри ограничено контейнером (обычно 1200 px).",[14,41,42],{},"Подходит:",[44,45,46,50,53],"ul",{},[47,48,49],"li",{},"Hero с анимированным фоном.",[47,51,52],{},"Блок «О нас» с большой фоновой картинкой.",[47,54,55],{},"Футер.",[14,57,58],{},"Визуально: два соседних section-блока с разными фонами создают эффект «полосатых» секций, как на landing-страницах.",[28,60,62],{"id":61},"_2-block-карточка","2. Block (карточка)",[14,64,65,66,69],{},"Блок оформлен как ",[36,67,68],{},"скруглённая карточка",": отступы по бокам, фон-подложка, закруглённые углы.",[14,71,42],{},[44,73,74,77,80],{},[47,75,76],{},"Промежуточные блоки текста \u002F картинок.",[47,78,79],{},"Карусель отзывов.",[47,81,82],{},"Инфо-плашки («Работаем с 10 до 23»).",[14,84,85],{},"Визуально: блок «отделён» от страницы, выглядит как модуль.",[28,87,89],{"id":88},"_3-empty-без-подложки","3. Empty (без подложки)",[14,91,92],{},"Блок без фона, без отступов. Только контент.",[14,94,42],{},[44,96,97,100,103],{},[47,98,99],{},"Плотные лендинги, где блоки перетекают друг в друга.",[47,101,102],{},"Минималистичные сайты.",[47,104,105],{},"Блок «Галерея» с фото, которые должны подогнаться под ширину страницы.",[23,107,109],{"id":108},"настройки-padding","Настройки padding",[14,111,112,113,116,117,120],{},"В режиме ",[36,114,115],{},"block"," и ",[36,118,119],{},"empty"," можно задать отступы вручную:",[44,122,123,129,135],{},[47,124,125,128],{},[36,126,127],{},"Padding top"," — сверху.",[47,130,131,134],{},[36,132,133],{},"Padding bottom"," — снизу.",[47,136,137,140,141,143],{},[36,138,139],{},"Padding left\u002Fright"," — по бокам (актуально для ",[18,142,119],{},").",[14,145,146],{},"Стандартные значения:",[44,148,149,155,161,167],{},[47,150,151,154],{},[36,152,153],{},"S"," — 16 px.",[47,156,157,160],{},[36,158,159],{},"M"," — 32 px (default).",[47,162,163,166],{},[36,164,165],{},"L"," — 64 px.",[47,168,169,172],{},[36,170,171],{},"XL"," — 96 px.",[14,174,175],{},"Или произвольное в пикселях.",[23,177,179],{"id":178},"border-radius-скругление","Border radius (скругление)",[14,181,182,183,185],{},"Только для ",[18,184,115],{},". Варианты:",[44,187,188,194,199,204,209],{},[47,189,190,193],{},[36,191,192],{},"None"," — прямые углы.",[47,195,196,198],{},[36,197,153],{}," — 4 px.",[47,200,201,203],{},[36,202,159],{}," — 12 px (default).",[47,205,206,208],{},[36,207,165],{}," — 24 px.",[47,210,211,213],{},[36,212,171],{}," — 48 px (для «карточек-пилюль»).",[23,215,217],{"id":216},"max-width-контента","Max-width контента",[14,219,220,221,224],{},"Внутри ",[18,222,223],{},"section","-блоков контент обычно ограничен шириной:",[44,226,227,233,239,245],{},[47,228,229,232],{},[36,230,231],{},"Narrow"," — 720 px (для текстовых страниц, блогов).",[47,234,235,238],{},[36,236,237],{},"Default"," — 1200 px.",[47,240,241,244],{},[36,242,243],{},"Wide"," — 1440 px.",[47,246,247,250],{},[36,248,249],{},"Full"," — без ограничения (contenta растягивается на всю ширину экрана).",[14,252,253],{},"Для большинства сайтов — Default.",[23,255,257],{"id":256},"фон-подложки","Фон подложки",[14,259,260],{},"Варианты:",[44,262,263,269,275,281,287],{},[47,264,265,268],{},[36,266,267],{},"Белый \u002F Surface"," (из палитры).",[47,270,271,274],{},[36,272,273],{},"Цвет палитры"," — выбор из 7 слотов.",[47,276,277,280],{},[36,278,279],{},"Градиент"," — два цвета.",[47,282,283,286],{},[36,284,285],{},"Картинка"," — из медиа-библиотеки.",[47,288,289,292,293,298],{},[36,290,291],{},"Анимированный фон"," — см. ",[294,295,297],"a",{"href":296},"\u002Fdocs\u002Fsite-builder\u002Fanimated-backgrounds","Анимированные фоны",".",[23,300,302],{"id":301},"отступы-между-блоками","Отступы между блоками",[14,304,305,306,309],{},"Если нужны промежутки, добавляйте не через padding блока, а через ",[36,307,308],{},"Spacer"," (служебный блок). Тогда промежуток легко отрегулировать одним местом, а не по каждому блоку.",[23,311,313],{"id":312},"мобильная-адаптация","Мобильная адаптация",[14,315,316],{},"На мобильном паддинги автоматически уменьшаются:",[44,318,319,322],{},[47,320,321],{},"Desktop padding L (64 px) → Mobile 32 px.",[47,323,324],{},"Desktop padding XL (96 px) → Mobile 48 px.",[14,326,327],{},"Max-width игнорируется (контент всегда на всю ширину с 16 px по бокам).",[23,329,331],{"id":330},"следующие-шаги","Следующие шаги",[44,333,334,340],{},[47,335,336,298],{},[294,337,339],{"href":338},"\u002Fdocs\u002Fsite-builder\u002Fseo-meta","SEO — мета-теги",[47,341,342,298],{},[294,343,345],{"href":344},"\u002Fdocs\u002Fsite-builder\u002Fresponsive-preview","Responsive preview",{"title":347,"searchDepth":348,"depth":348,"links":349},"",2,[350,356,357,358,359,360,361,362],{"id":25,"depth":348,"text":26,"children":351},[352,354,355],{"id":30,"depth":353,"text":31},3,{"id":61,"depth":353,"text":62},{"id":88,"depth":353,"text":89},{"id":108,"depth":348,"text":109},{"id":178,"depth":348,"text":179},{"id":216,"depth":348,"text":217},{"id":256,"depth":348,"text":257},{"id":301,"depth":348,"text":302},{"id":312,"depth":348,"text":313},{"id":330,"depth":348,"text":331},"site-builder",null,"layout_variant — section \u002F block \u002F empty. Как сделать блок на всю ширину или в виде карточки. Padding, border-radius, max-width.","md",{},true,14,"\u002Fdocs\u002Fsite-builder\u002Flayout-variant-padding",{"title":5,"description":365},"docs\u002Fsite-builder\u002Flayout-variant-padding","2026-04-23","SglSdGfzADnNENtv1ai5rKISFlC9_jEPOZX7CsNzgPw",[376,381,387,393,398,403,408,413,418,423,428,432,436,441,445,449,453,458,462,466,470,474,478,482,486,490,495,499,503,507,511,515,519,524,528,532,536,541,546,551,556,561,566,570,571,575,580,585,590,594,599,604,607,610,613,616,619,622,625],{"path":377,"title":378,"description":379,"category":363,"order":380,"pro":368},"\u002Fdocs\u002Fsite-builder\u002Ffrom-scratch","С нуля: витрина от и до","Полный сквозной маршрут по конструктору — от пустого шаблона до опубликованной витрины с каталогом, фирменным стилем, мобильной версией, QR-кодом и собственным доменом.",0,{"path":382,"title":383,"description":384,"category":385,"order":386,"pro":368},"\u002Fdocs\u002Fanalytics\u002Frevenue-average-check","Выручка и средний чек","\u002Freports — метрики выручки и ср. чека, графики по времени, сравнение периодов, Free vs Pro.","analytics",1,{"path":388,"title":389,"description":390,"category":391,"order":386,"pro":392},"\u002Fdocs\u002Fcatalog\u002Fadd-dish","Как добавить блюдо в меню","Пошагово — фото, цена, категория, модификаторы и опции. Что важно, а что можно пропустить.","catalog",false,{"path":394,"title":395,"description":396,"category":397,"order":386,"pro":368},"\u002Fdocs\u002Fdelivery\u002Fenable-delivery","Включить доставку и зоны","Настройка доставки, выбор между списком зон и полигонами на карте, минимальная сумма.","delivery",{"path":399,"title":400,"description":401,"category":402,"order":386,"pro":392},"\u002Fdocs\u002Ffaq\u002Ftroubleshooting","Чеклист — частые проблемы и как их решить","Не приходят заказы, не открывается QR-меню, гость не видит блюдо — 10 типичных ситуаций с решениями.","faq",{"path":404,"title":405,"description":406,"category":407,"order":386,"pro":392},"\u002Fdocs\u002Fgetting-started\u002Ffirst-login","Первый вход и создание заведения","Как зарегистрироваться в admin.misea.ru, добавить юрлицо и создать первую локацию за 5 минут.","getting-started",{"path":409,"title":410,"description":411,"category":412,"order":386,"pro":368},"\u002Fdocs\u002Floyalty\u002Fbonuses-cashback","Бонусы и кешбэк","\u002Floyalty — настройка начисления бонусов, правила списания, процент, лимиты.","loyalty",{"path":414,"title":415,"description":416,"category":417,"order":386,"pro":392},"\u002Fdocs\u002Forders\u002Forders-feed","Как читать ленту заказов","Статусы, фильтры, звуковые уведомления, чтобы ничего не пропустить.","orders",{"path":419,"title":420,"description":421,"category":422,"order":386,"pro":392},"\u002Fdocs\u002Fqr-tables\u002Ftables-and-locations","Столы и локации","Разница между локацией и столом, как добавить новую точку или новый QR-стол, что меняется при нескольких филиалах.","qr-tables",{"path":424,"title":425,"description":426,"category":427,"order":348,"pro":392},"\u002Fdocs\u002Fbilling\u002Fhow-to-pay-pro","Как оплатить Pro","Шаги оплаты через YooKassa, промокоды (−10%\u002F−20%), ежемесячная vs годовая подписка, чек.","billing",{"path":429,"title":430,"description":431,"category":391,"order":348,"pro":392},"\u002Fdocs\u002Fcatalog\u002Fcategories","Категории и подкатегории меню","Как сгруппировать блюда, задать порядок, скрыть категорию или сделать её пустой-заглушкой.",{"path":433,"title":434,"description":435,"category":397,"order":348,"pro":368},"\u002Fdocs\u002Fdelivery\u002Fpolygon-zones","Полигональные зоны на Яндекс.Картах","Рисование зон доставки в виде многоугольников, JS API ключ, автоопределение зоны по адресу гостя.",{"path":437,"title":438,"description":439,"category":440,"order":348,"pro":392},"\u002Fdocs\u002Fintegrations\u002Fiiko-setup","iiko — подключение шаг-за-шагом","Получение credentials iikoCloud, ввод в Misea, первая синхронизация, выбор терминала.","integrations",{"path":442,"title":443,"description":444,"category":412,"order":348,"pro":368},"\u002Fdocs\u002Floyalty\u002Fcustomer-card","Карточка клиента","\u002Fcustomers — история заказов, средний чек, избранные блюда, персональные заметки.",{"path":446,"title":447,"description":448,"category":417,"order":348,"pro":392},"\u002Fdocs\u002Forders\u002Fcancel-refund","Отмена и возврат заказа","Когда отменять, а когда делать возврат в YooKassa. Полный vs частичный возврат, шаги, типовые кейсы.",{"path":450,"title":451,"description":452,"category":422,"order":348,"pro":392},"\u002Fdocs\u002Fqr-tables\u002Fqr-codes","Как сгенерировать и распечатать QR-коды","Где взять QR-код для стола, какой размер распечатать, куда клеить и что увидит гость после сканирования.",{"path":454,"title":455,"description":456,"category":457,"order":348,"pro":392},"\u002Fdocs\u002Fstaff-schedule\u002Fshift-schedule","График смен","\u002Fschedule — добавление, перенос, замена смен, календарный вид, шаблоны.","staff-schedule",{"path":459,"title":460,"description":461,"category":427,"order":353,"pro":392},"\u002Fdocs\u002Fbilling\u002Fpro-expiration","Что происходит после окончания оплаты Pro","Grace-period 3 дня, что отключается сразу, что сохраняется навсегда, как восстановить Pro.",{"path":463,"title":464,"description":465,"category":391,"order":353,"pro":392},"\u002Fdocs\u002Fcatalog\u002Fmodifiers","Модификаторы — размеры, молоко, добавки","Как настроить варианты блюда с доплатой (S\u002FM\u002FL, растительное молоко, двойная порция) через шаблоны модификаторов.",{"path":467,"title":468,"description":469,"category":397,"order":353,"pro":368},"\u002Fdocs\u002Fdelivery\u002Fcourier-module","Курьерский модуль","Назначение заказов курьеру, статусы, Telegram-бот курьера, маршрутизация.",{"path":471,"title":472,"description":473,"category":407,"order":353,"pro":392},"\u002Fdocs\u002Fgetting-started\u002Fadmin-overview","Обзор админ-панели за 3 минуты","Карта всех разделов админки Misea — что где лежит, с чего начинать, куда смотреть ежедневно.",{"path":475,"title":476,"description":477,"category":440,"order":353,"pro":392},"\u002Fdocs\u002Fintegrations\u002Fiiko-troubleshooting","iiko — типичные ошибки","401\u002F403, конфликты SKU, несинхронизованные позиции, дубли модификаторов, задержка остатков.",{"path":479,"title":480,"description":481,"category":417,"order":353,"pro":392},"\u002Fdocs\u002Forders\u002Ftelegram-notifications","Уведомления о заказах в Telegram","Как подключить бота к чату персонала, кому приходят уведомления, что настраивается.",{"path":483,"title":484,"description":485,"category":363,"order":353,"pro":368},"\u002Fdocs\u002Fsite-builder\u002Fdraft-vs-published","Черновик vs публикация","Что сохраняется локально, что на сервере, что видят гости. Как работает автосохранение и кнопка «Опубликовать».",{"path":487,"title":488,"description":489,"category":457,"order":353,"pro":392},"\u002Fdocs\u002Fstaff-schedule\u002Ftimesheet-fot","Табель и ФОТ","\u002Ftimesheet — автоматический учёт часов, надбавки, закрытие периода, расчёт зарплаты.",{"path":491,"title":492,"description":493,"category":427,"order":494,"pro":392},"\u002Fdocs\u002Fbilling\u002Frefunds-plan-change","Возврат средств и смена тарифа","Политика возвратов, как перейти с месяца на год (или наоборот), когда возврат невозможен.",4,{"path":496,"title":497,"description":498,"category":391,"order":494,"pro":392},"\u002Fdocs\u002Fcatalog\u002Foptions","Опции блюда — острота, прожарка, без чего","Когда нужна опция, а когда модификатор. Как настроить варианты без доплаты.",{"path":500,"title":501,"description":502,"category":397,"order":494,"pro":368},"\u002Fdocs\u002Fdelivery\u002Fhours-minimums","Часы приёма заказов и минимальная сумма","Настройка времени приёма доставки, минимального чека зоны и локации, слот-расписание.",{"path":504,"title":505,"description":506,"category":407,"order":494,"pro":392},"\u002Fdocs\u002Fgetting-started\u002Finvite-colleague","Как пригласить коллегу в админку","Роли admin, manager, waiter, kitchen, courier — что каждый видит и может, как добавить нового сотрудника.",{"path":508,"title":509,"description":510,"category":440,"order":494,"pro":392},"\u002Fdocs\u002Fintegrations\u002Fyandex-maps-api-key","Яндекс.Карты — где взять JS API ключ","Регистрация на developer.tech.yandex.ru, получение ключа, привязка к домену, вставка в Misea.",{"path":512,"title":513,"description":514,"category":363,"order":494,"pro":368},"\u002Fdocs\u002Fsite-builder\u002Fhistory-undo","История изменений (Undo\u002FRedo)","12 снапшотов на страницу, Ctrl+Z и Ctrl+Shift+Z. Как откатить удалённый блок или неудачное редактирование.",{"path":516,"title":517,"description":518,"category":457,"order":494,"pro":368},"\u002Fdocs\u002Fstaff-schedule\u002Fhours-report","Отчёт по часам и ФОТ","\u002Freports\u002Fhours — план vs факт, переработки, стоимость часа, сравнение периодов.",{"path":520,"title":521,"description":522,"category":391,"order":523,"pro":392},"\u002Fdocs\u002Fcatalog\u002Fbulk-import","Массовый импорт меню из Excel","Формат файла, обязательные и опциональные поля, типичные ошибки при импорте 50+ позиций.",5,{"path":525,"title":526,"description":527,"category":407,"order":523,"pro":392},"\u002Fdocs\u002Fgetting-started\u002Fbrand-setup","Бренд — логотип, цвета, контакты","Где настроить название заведения, логотип, контактные данные и первичные цвета, которые подтянутся в QR-меню и на сайт.",{"path":529,"title":530,"description":531,"category":440,"order":523,"pro":392},"\u002Fdocs\u002Fintegrations\u002Ftelegram-bot-setup","Telegram — токен бота и привязка чата","BotFather, создание бота, токен, привязка персонала, уведомления о заказах.",{"path":533,"title":534,"description":535,"category":363,"order":523,"pro":368},"\u002Fdocs\u002Fsite-builder\u002Fhero-block","Блок Hero — баннер первого экрана","Заголовок, подзаголовок, фон-картинка, CTA-кнопка. Как сделать сильный первый экран, куда вести кнопку.",{"path":537,"title":538,"description":539,"category":363,"order":540,"pro":368},"\u002Fdocs\u002Fsite-builder\u002Fmenu-block","Блок Меню (каталог товаров)","Макеты сетка\u002Fсписок\u002Fкарточки, карточек в ряд, slider категорий, что прятать-показывать. Главный блок любой витрины.",6,{"path":542,"title":543,"description":544,"category":363,"order":545,"pro":368},"\u002Fdocs\u002Fsite-builder\u002Ftext-image-gallery","Блоки Текст, Изображение, Галерея","Markdown-редактор с жирным\u002Fкурсивом\u002Fпереносами, спецварианты (часы работы, скидки), галерея-список.",7,{"path":547,"title":548,"description":549,"category":363,"order":550,"pro":368},"\u002Fdocs\u002Fsite-builder\u002Fcontacts-block","Блок Контакты","Телефон, адрес, карта, соцсети. Как переопределить данные глобальных настроек для конкретной страницы или локации.",8,{"path":552,"title":553,"description":554,"category":363,"order":555,"pro":368},"\u002Fdocs\u002Fsite-builder\u002Fmap-block","Блок Карта","Автодополнение адреса через Яндекс-Nominatim, встройка карты, метки, масштаб.",9,{"path":557,"title":558,"description":559,"category":363,"order":560,"pro":368},"\u002Fdocs\u002Fsite-builder\u002Fservice-blocks","Карточка товара, Кнопка заказа и служебные блоки","Product Card, Order Button, Categories, Cart, Checkout, Search — когда и зачем ставить.",10,{"path":562,"title":563,"description":564,"category":363,"order":565,"pro":368},"\u002Fdocs\u002Fsite-builder\u002Ffonts-buttons","Шрифты и стиль кнопок","10 шрифтовых семейств, размер 12–24 px, скруглённые vs прямые кнопки, тени и rpadding.",12,{"path":296,"title":567,"description":568,"category":363,"order":569,"pro":368},"Анимированные фоны (Pro)","60+ эффектов — кастомные, Vanta-ported, ReactBits-ported. Переопределение цветов, reduce motion, производительность.",13,{"path":370,"title":5,"description":365,"category":363,"order":369,"pro":368},{"path":338,"title":572,"description":573,"category":363,"order":574,"pro":368},"SEO — глобальные и страничные мета-теги","Site-SEO vs Page-SEO. Title, description, keywords. OG-превью для соцсетей. Рекомендуемая длина.",15,{"path":576,"title":577,"description":578,"category":363,"order":579,"pro":368},"\u002Fdocs\u002Fsite-builder\u002Flogo-favicon-nav","Логотип, фавикон, название сайта и навигация","Загрузка логотипа (до 10 МБ), фавикон, site_name, nav_links (catalog \u002F page \u002F category \u002F url).",16,{"path":581,"title":582,"description":583,"category":363,"order":584,"pro":368},"\u002Fdocs\u002Fsite-builder\u002Fmedia-library","Медиа-библиотека","Папки и файлы (JPG \u002F PNG \u002F WebP \u002F GIF \u002F SVG до 10 МБ), загрузка, вставка в любой блок, public URL.",17,{"path":586,"title":587,"description":588,"category":363,"order":589,"pro":368},"\u002Fdocs\u002Fsite-builder\u002Fmulti-location","Конструктор для сети ресторанов (per-location)","Глобальные vs per-location настройки, переключатель в toolbar, подтверждение при несохранённых изменениях.",18,{"path":344,"title":591,"description":592,"category":363,"order":593,"pro":368},"Responsive preview (Desktop \u002F Mobile)","Live-iframe с postMessage, переключение 1200px ↔ 390px, почему важно проверять оба режима.",19,{"path":595,"title":596,"description":597,"category":363,"order":598,"pro":368},"\u002Fdocs\u002Fsite-builder\u002Fcustom-domain","Собственный домен и поддомен","Настройка custom domain, subdomain fallback, TLS-сертификат. DNS-записи, проверка.",20,{"path":600,"title":601,"description":602,"category":364,"order":603,"pro":392},"\u002Fdocs\u002Fbilling\u002Ffree-vs-pro","Free vs Pro — что входит в каждый тариф","[object Object]",100,{"path":605,"title":606,"description":602,"category":364,"order":603,"pro":392},"\u002Fdocs\u002Fgetting-started\u002Ftrial-period","Что такое trial и что будет через 7 дней",{"path":608,"title":609,"description":602,"category":364,"order":603,"pro":392},"\u002Fdocs\u002Fintegrations\u002Fiiko-overview","iiko — зачем нужна синхронизация",{"path":611,"title":612,"description":602,"category":364,"order":603,"pro":392},"\u002Fdocs\u002Fqr-tables\u002Fguest-experience","Что видит гость после сканирования QR",{"path":614,"title":615,"description":602,"category":364,"order":603,"pro":392},"\u002Fdocs\u002Fsite-builder\u002Fcolor-palette","Цветовая палитра — 7 слотов, primary и secondary",{"path":617,"title":618,"description":602,"category":364,"order":603,"pro":392},"\u002Fdocs\u002Fsite-builder\u002Finterface","Интерфейс конструктора — 3 панели и toolbar",{"path":620,"title":621,"description":602,"category":364,"order":603,"pro":392},"\u002Fdocs\u002Fsite-builder\u002Fintroduction","Что такое конструктор витрины и зачем он нужен",{"path":623,"title":624,"description":602,"category":364,"order":603,"pro":392},"\u002Fdocs\u002Fstaff-schedule\u002Fpositions-departments","Должности и отделы",{"path":626,"title":627,"description":602,"category":364,"order":603,"pro":392},"\u002Fdocs\u002Ftelegram-bot\u002Fwaiter-bot","Официант через Telegram-бот",1777025874991]