С нуля: витрина от и до

Конструктор витрины — это WYSIWYG-редактор, который собирает публичный сайт заведения из готовых блоков, ваших данных (меню, локации, настройки) и фирменного стиля. Результат: адаптивная витрина на поддомене <ваштенант>.misea.site, принимающая заказы с QR-кода у стола и с доставки.

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

Что нужно до того, как открыть конструктор

Конструктор рисует витрину поверх данных, которые уже есть в админке. Если данных нет — страница будет пустая. Проверьте перед стартом:

• Минимум одна локация — /locations. Иначе некуда принимать заказы.
• 10–15 блюд в меню — /products. Чтобы блок «Меню» не выглядел сиротой. Каждое блюдо — с фото, ценой, категорией.
• 3–5 категорий каталога — /categories. Без них блок меню рендерит плоский список.
• Контакты и часы работы — /settings. Подхватываются автоматически в блок «Контакты».
• (для доставки) — зоны /delivery и подключённая YooKassa /billing.

Если чего-то не хватает — заведите, займёт 20–30 минут. Дальше всё собирается блоками.

1. Интерфейс: три панели и тулбар

Зайдите в /site-builder. По умолчанию уже есть шаблон-заготовка с несколькими блоками — удобно, чтобы не начинать с пустого листа.

Три зоны экрана:

• Слева — библиотека блоков. Переключатель вкладок Блоки / Страницы / Слои. На вкладке «Блоки» видно все 14 типов блоков, которые можно добавить на страницу перетаскиванием или кликом.
• Центр — live-preview в iframe. Всё, что вы меняете справа, рендерится здесь мгновенно. Preview — это та же витрина, что видят гости, поэтому то, что вы видите на экране — то же увидят на телефоне и мониторе.
• Справа — редактор свойств выбранного блока / страницы / сайта. Содержимое меняется в зависимости от того, что выбрано в тулбаре.

Над preview — тулбар, поясню каждый элемент слева направо:

• Название сайта («Кафе Слон») — ваш site_name, управляется в Настройках сайта.
• Страница — выпадающий список. По умолчанию одна: «Главная». Здесь же создаётся новая и переключается между страницами.
• Локация — «Глобально» (настройки применяются ко всем филиалам) или конкретная локация («Кафе Слон на Гагарина», «Кафе Слон на Ленина» и т. п.). Этот переключатель появляется, если у вас > 1 локации — см. раздел «Для сети заведений» ниже.
• ПК / Моб — переключатель preview-вьюпорта. На «ПК» iframe рендерится как 1200px+. На «Моб» — 390px (как iPhone).
• Undo / Redo — отмена/повтор (до 12 шагов на страницу, Ctrl+Z / Ctrl+Shift+Z).
• Оранжевая точка — индикатор несохранённых изменений.
• Сохранить (иконка дискеты) — сохраняет черновик на сервер. Гости пока ничего не видят.
• Блок / Стр. / Сайт — чьи настройки редактируем справа. Самый важный переключатель: от него зависит, что откроется в правой панели.
• Стрелка ↗ — открыть опубликованную витрину в новой вкладке (то, что видят гости прямо сейчас).
• Опубл. — перекладывает текущий черновик в публичную версию. После нажатия изменения видны всем.

Дальше идём по маршруту: сайт → страницы → блоки → стиль → мобилка → SEO → публикация.

2. Настройки сайта: палитра

Сначала задайте фирменный стиль. Так все блоки, которые вы будете добавлять потом, сразу унаследуют правильные цвета.

В тулбаре переключитесь на Сайт → справа откроется Настройки сайта. Начинается панель с 7-слотной палитры.

Палитра — ровно 7 цветов. Каждый идёт в строго отведённое место:

Есть два способа заполнить все 7 слотов:

1. «Подобрать цвета» — вводите один базовый цвет, алгоритм строит гармоничную палитру (комплементарные + нейтральные тона). Быстро и безопасно, если нет брендбука.
2. «Фирменные цвета» — вручную вбиваете HEX из брендбука. Полный контроль, но нужен вкус.

Каждый слот поддерживает:

• HEX-ввод — #2E7D5B, #FFFFFF и т. д.
• Прозрачность (alpha) — 0–100%.
• Светлота / насыщенность — два ползунка рядом с HEX, можно чуть поднять или убавить, не меняя основной оттенок.

Валидатор не даст опубликовать витрину, где Primary = Text — это автоматический провал контраста: гости не смогут прочитать кнопки. Система подсветит конфликт красным. Подробнее — в статье Цветовая палитра.

3. Настройки сайта: шрифты, кнопки, фон

Прокрутите панель «Настройки сайта» ниже палитры — там лежат шрифты и стиль оформления.

• Шрифт заголовков — 10 семейств на выбор: Manrope, Montserrat, Unbounded, Playfair Display, Merriweather, Inter, Roboto, Open Sans, Rubik, Lora. Советуем характерные — Manrope / Montserrat / Unbounded — они задают тон сайта.
• Шрифт текста — те же 10 шрифтов. Для тела лучше нейтральные: Inter / Roboto / Open Sans.
• Размер базового текста — слайдер 12–24px. По умолчанию 16px. На мобильных 14–16px читается лучше.
• Эффект фона (Pro) — живой анимированный фон всей витрины. По умолчанию «Без фона» (статичный цвет). Клик — открывается модалка выбора (см. ниже).
• Стиль кнопок — радиус скругления: прямоугольные, слегка скруглённые (4–8px), сильно скруглённые (9999px — «таблетка»).

Анимированные фоны (Pro, 68 эффектов)

Кнопка «Эффект фона» открывает модалку с превью-сеткой:

Всего доступно 68 анимированных эффектов, сгруппированных по происхождению и стилю:

Кастомные CSS / SVG (~11) — лёгкие, работают на слабых устройствах: Северное сияние (aurora-mesh), Светящаяся сфера (orb-follow), Волны (wave-layers), Сетка (geo-grid), Дымка (noise-haze), Ретро ТВ (retro-scan), Круги на воде (ripple-pond), Звёздное небо (starfield), Созвездие (constellation), Пылинки (floating-particles), Шёлк (silk).

Vanta-ported (canvas/WebGL) — портированы из библиотеки Vanta.js: Птицы (vanta-birds), Светящиеся пятна (vanta-cells), Облака (vanta-clouds), Закат (vanta-clouds2), 3D точки (vanta-dots), Туман (vanta-fog), Глобус (vanta-globe), Ореол (vanta-halo), Сеть (vanta-net), Кольца (vanta-rings), Риплы (vanta-ripple), Рога (vanta-topology), Водоросли (vanta-trunk), Волны 3D (vanta-waves).

ReactBits-ported — современные шейдерные эффекты: Шёлк (silk), Нити (threads), Жидкий хром (liquid-chrome), Молния (lightning), Плазма (plasma), Радар (radar), и ~40 других.

Все эффекты:

• Реагируют на курсор / касание (где это имеет смысл).
• Отключаются при системном «prefers-reduced-motion» (доступность + экономия батареи на слабых устройствах).
• Переопределяют цвета темой сайта, где эффект это поддерживает.

Подробнее — Анимированные фоны.

4. Страницы

Одностраничного сайта достаточно в 90% случаев. Но если у вас акция, отдельное меню на завтрак или лендинг под открытие нового филиала — заводите отдельные страницы.

Переключитесь на вкладку Страницы в левой панели:

По умолчанию есть Главная. Чтобы добавить новую страницу:

1. Нажмите Добавить страницу.
2. Задайте название (для админки, например «Акция май») и slug (для URL — /akcia-maj).
3. Выберите «Создать с нуля» (чистый лист) или из шаблона (готовая структура).
4. Сохранить — страница появится в списке.

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

5. Блоки — из чего собирается страница

Вкладка Блоки в левой панели. Клик по блоку — он добавляется в конец текущей страницы. Всего 14 типов блоков, каждый со своим редактором свойств в правой панели:

Баннер (Hero) — крупный первый экран: заголовок, подзаголовок, фото/анимированный фон, кнопка CTA.

Меню — каталог блюд: сетка / список / карточки, фильтр по категории, fixed-слайдер категорий.

Категории — только категории крупным планом, без товаров внутри (удобно для сетей с разным меню).

Товар (Product Card) — одна карточка конкретного блюда + свой текст/кнопка (акции, сеты недели).

Кнопка заказа — отдельная кнопка «Заказать», открывающая корзину или переводящая на оформление.

Корзина — встроенная корзина на странице (обычно не нужно: корзина и так всегда доступна плавающей кнопкой).

Оформление — форма оформления заказа (если делаете свою страницу «/checkout»).

Поиск — строка живого поиска по меню. Результаты подставляются в блок «Меню» той же страницы.

Текст — markdown-редактор: заголовки, жирный/курсив, списки, ссылки. Плюс спецрежимы: кастомный HTML, часы работы из настроек, блок скидок.

Изображение — одно изображение с выбором из медиа-библиотеки, выравнивание, подпись.

Галерея — несколько изображений в ряд или сетке.

Контакты — телефон, адрес, часы работы, соцсети. По умолчанию тянется из /settings, можно переопределить на блоке.

Карта — Яндекс-карта с меткой локации (нужен JS API Key).

Лояльность — блок «Бонусы / кешбэк» с авторизацией клиента (только Pro + включена лояльность в настройках).

Подробный разбор каждого блока с параметрами — в статьях серии «Блоки конструктора».

6. Hero и Меню — главные блоки

Блок Hero

Первое, что видит гость. Сюда идут заголовок, короткий слоган и CTA («Посмотреть меню»).

Параметры:

• Заголовок — до 8 слов. «Свежая кухня каждый день», «Доставка за 40 минут».
• Подзаголовок — 1–2 строки пояснения. Адрес, часы, УТП.
• Фон — фото (из медиа-библиотеки, минимум 1920×1080, JPG/WebP/PNG, до 10 МБ) либо анимированный фон (Pro).
• Кнопка CTA — текст и действие: якорь на блок «Меню» той же страницы, ссылка на другую страницу, внешний URL или открыть корзину.
• Выравнивание — влево / по центру / вправо. На мобильных обычно центр лучше.
• Layout variant — section (на всю ширину экрана), block (скруглённая карточка в центре) или empty (без подложки, максимум свободы).

Подробно — Блок Hero.

Блок Меню

Главный блок витрины. Без него витрины нет.

Параметры:

• Категория — «Все категории» (показать всё меню) или конкретная (например, «Завтраки»).
• Макет — Сетка / Список / Карточки. Сетка — универсально. Карточки — когда упор на фото. Список — когда позиций много и важна скорость сканирования.
• Колонок в ряд — 1–6. Три — классика. Четыре — при большом меню. Два — на мобильной доставке с крупным фото.
• Фильтр / слайдер категорий — липкая панелька с названиями категорий, прокручивается по мере скролла. Удобно при длинном меню.
• Показывать фото — можно отключить для текстового формата.
• Показывать описание — короткое описание под названием.
• Показывать категории в карточке — категория-лейбл над блюдом.
• Показывать вес / порцию — граммы или мл.

Всё, что вы видите в блоке, тянется из /products. Если блюдо там отключено (hidden) — в витрине его нет. Если нет фото — рендерится плейсхолдер. Следите за полнотой данных в каталоге — это напрямую влияет на витрину.

Подробно — Блок Меню.

7. Для сети: настройки per-location {#7-per-location}

Если у вас больше одной локации, в тулбаре появляется переключатель Глобально ↔ <Локация>.

• Глобально — настройки применяются по умолчанию ко всем филиалам.
• Локация «Кафе Слон на Гагарина» — переопределения только для этого филиала.

Переопределять можно что угодно: палитру, блоки, даже структуру страницы. Гость, попадающий на витрину филиала через QR-код стола или ссылку <тенант>.misea.site/<location>, видит локальную версию. Если переопределений нет — подтягиваются глобальные настройки.

Подтверждение при несохранённых изменениях: переключатель локации спросит, сохранить ли текущее, чтобы не потерять правки.

Подробно — Конструктор для сети.

8. Медиа-библиотека

Все фото, которые вы вставляете в блоки, хранятся в медиа-библиотеке тенанта. Доступна из любого блока, где есть поле «Фото / Картинка» — кнопка «Выбрать из библиотеки».

• Форматы: JPG, PNG, WebP, GIF, SVG.
• Лимит одного файла: 10 МБ.
• Папки: можно организовать в папки («hero», «menu», «акции»).
• Public URL — /media/<tenant>/site-media/<file>, используется в любом блоке.

Все файлы сохраняются навсегда — если удалить из блока, файл остаётся в библиотеке, его можно вернуть.

Подробно — Медиа-библиотека.

9. Проверьте мобильную версию

Самое частое место, где сайт «ломается»: на десктопе красиво, а на телефоне кнопка не нажимается или текст съезжает. 60–80% гостей ресторанов заходят с телефона — не проверить мобилку нельзя.

В тулбаре переключатель ПК / Моб. Preview сразу становится 390px шириной — как iPhone.

На что смотреть:

• Hero — текст помещается? Кнопка не убегает за край? Фото не обрезано по лицу?
• Меню — карточки читаются в одну колонку? Цена не ломается в две строки?
• Контакты — кнопка «Позвонить» большая, в один тап попадает?
• Навигация — гамбургер открывается и закрывается?

Если что-то не влезает — правьте отступы, число колонок, размер шрифта. Подробнее — Responsive preview.

10. История изменений (Undo / Redo)

На каждой странице конструктор хранит 12 снапшотов (последние 12 правок). Переключатель в тулбаре — стрелки ↶ ↷ или горячие клавиши Ctrl+Z / Ctrl+Shift+Z (на Mac: Cmd+Z / Cmd+Shift+Z).

Это удобная страховка при экспериментах: удалили блок не туда, поменяли цвет и он плохо смотрится — один Undo, и всё как было.

История живёт только внутри сессии до сохранения. После Сохранить — начинается новая ветка истории. Серверных бэкапов между сохранениями нет (если нужна история на 100 правок назад — сохранять публикации через описание изменения; см. История и откат).

11. Черновик vs публикация

Пока вы работаете в конструкторе — это черновик. Его видите только вы. Гостям показывается последняя опубликованная версия.

• Сохранить (иконка дискеты) — сохраняет черновик на сервер. Гости ничего не видят. Черновик переживает закрытие браузера.
• Опубл. — перекладывает черновик в публичную версию. Через ~10 секунд изменения видны всем.
• Undo/Redo — работают только до следующего Сохранить.

Публиковать можно сколько угодно раз в день — ограничений нет.

12. SEO: мета-теги двух уровней

Блок SEO в Настройках сайта. Переключитесь на Сайт → прокрутите до «SEO / Метаданные»:

На уровне сайта:

• Заголовок сайта (meta title) — 50–60 символов. «Кафе Слон — завтраки, ланчи и десерты в центре Дербента».
• Описание сайта (meta description) — 140–160 символов. Живое описание, а не список ключевых слов. Google / Яндекс покажут это в поиске.
• OG-картинка — 1200×630 px. Что показывается, когда ссылку скинут в Telegram или ВКонтакте.
• Favicon — иконка вкладки браузера.

Per-page SEO: можно переопределить title/description для конкретной страницы — переключитесь в тулбаре на Стр. и заполните SEO-поля там. Пример: на странице акции — свой title «-20% на пиццу с 1 по 15 мая».

Подробно — SEO — мета-теги.

13. Публикация

1. Ещё раз пройдитесь по каждому блоку.
2. Проверьте ПК и Моб.
3. Проверьте в реальном гостевом режиме: стрелка ↗ в тулбаре → открывается публичная витрина в новой вкладке.
4. В правом верхнем углу — кнопка Опубл. Нажмите.

Через ~10 секунд витрина живёт на поддомене <yourtenant>.misea.site (например, tbilisi.misea.site). С этого момента:

• Гости, сканирующие QR у стола, попадают на эту витрину.
• Ссылку можно вешать в Instagram / TG / Яндекс.Бизнес.
• Поисковые роботы начинают индексировать.

Собственный домен (pizzeria.ru) на Pro подключается за 1 час — см. Собственный домен.

14. Что видит гость

• Открывает QR с телефона (или ссылку в Instagram).
• Видит ваш Hero, меню с фото, корзину, кнопку «Оформить заказ».
• Кладёт блюда в корзину, указывает адрес доставки или номер стола, платит через YooKassa.
• Заказ падает вам в /orders и в Telegram официанту.

Если пусто — значит витрина не опубликована, или блок «Меню» не привязан к каталогу, или каталог скрыт. Пройдитесь по чеклисту ещё раз.

После запуска

• Редактируйте без страха — каждая правка сохраняется в черновик. Публикуется только при нажатии «Опубликовать». Откатиться — Undo / Redo или История.
• Следите за конверсией — Аналитика (Pro): заходы, добавления в корзину, оплаченные заказы.
• Обновляйте Hero под акции — перед Новым годом, к летнему меню. Это не «переделать сайт», а 5 минут в редакторе.
• Сеть заведений — если у вас несколько филиалов с разным меню, см. Конструктор для сети.

Следующие шаги

• Интерфейс конструктора — детально по панелям и горячим клавишам.
• Цветовая палитра — как выбрать 7 цветов, которые не бьются друг об друга.
• Блок Меню — макеты, фильтры, слайдер категорий.
• Анимированные фоны — все 68 эффектов с примерами.
• Медиа-библиотека — куда загружать фото и как их не потерять.
• Собственный домен — подключение yourdomain.ru вместо misea.site.