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

Все блоки конструктора по группам: что каждый делает, откуда берёт данные и чем отличаются похожие. Как добавить, настроить и убрать блок.

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

Блок — это готовый кусок страницы: баннер, список блюд, карта, контакты. Страница собирается из блоков сверху вниз, как башня из кубиков. Писать код не нужно.

Как добавить блок

Откройте Конструктор сайта, слева выберите вкладку «Блоки».
Найдите нужную карточку (сверху есть поле «Поиск блоков...»).
Нажмите на карточку — блок встанет в конец страницы. Или перетащите её мышью туда, где блок должен оказаться.
Нажмите на новый блок в рабочей области — справа откроются его настройки.
Нажмите 💾 вверху справа, чтобы сохранить.

Чтобы вставить блок между двумя существующими, наведите мышь на границу между ними и нажмите кружок «+».

Как убрать или переставить блок

Убрать: наведите мышь на блок и нажмите 🗑. Misea переспросит. Ошиблись — нажмите ↶ вверху.
Переставить: вкладка «Уровни» слева, стрелки ↑ и ↓ у нужной строки.
Скопировать: наведите мышь на блок и нажмите ⧉ — появится такой же следом.

Важно: набор блоков зависит от того, что вы редактируете

Если у вас одна точка, читайте дальше — вам доступны все блоки заведения.

Если точек несколько, вверху появляется переключатель «Все точки ↔ конкретная точка», и список блоков меняется: на «Все точки» есть блоки про сеть, но нет меню и корзины; на конкретной точке — наоборот. Почему так — в статье Если точек несколько.

Группа «Шапка»

Баннер

Первое, что видит гость: крупный заголовок, подзаголовок и кнопка.

Настройки: Заголовок, Подзаголовок, Фоновое изображение (кнопка «Выбрать» открывает вашу библиотеку картинок; когда картинка уже стоит, рядом появляется «Удалить»), Текст кнопки, «Куда ведёт кнопка» и Выравнивание (Центр / Слева / Справа).

Над полями «Заголовок», «Подзаголовок» и «Текст кнопки» есть маленькая полоска значков B I U A — жирный, курсив, подчёркнутый и цвет для выделенного куска текста. Пользоваться ей не обязательно: обычный текст вводится как есть.

«Куда ведёт кнопка» — три варианта: Страница (перейти на другую страницу сайта), Область на странице (пролистать вниз, например к меню) и Произвольная ссылка (любой адрес).

Промо-баннер

Тот же баннер, только оформленный как объявление об акции — «Скидка 20% до конца недели». Настраивается так же.

Поиск

Поле, в котором гость ищет блюдо по названию. Настройка одна — «Подсказка в поле»: это серый текст, который гость видит внутри пустой строки поиска. По умолчанию там «Поиск по каталогу...»; можно заменить на что-то своё, например «Найти капучино».

Ставить его есть смысл, если в меню несколько десятков позиций. При меню из десяти строк он только занимает место.

Группа «О заведении»

Текст

Абзац текста: история заведения, условия брони, что угодно.

Пишется в поле Markdown. Пугаться слова не нужно: обычный текст туда вставляется как есть. Если хочется выделить слово жирным, оберните его двумя звёздочками: **вкусно**. Заголовок — строка, начинающаяся с решётки: ## Про нас.

Галерея

Несколько фотографий сеткой.

Первую картинку добавляют кнопкой «+ Добавить изображение» — она открывает вашу библиотеку картинок. После этого у каждой строки появляется поле с адресом, кнопка «Выбрать» (заменить) и ✕ (убрать).

Контакты

Телефон, адрес, ссылки на соцсети.

Откуда берутся данные: из карточки точки (Управление → Точки), а если там поле пустое — из Управление → Общие настройки. Специально дублировать их в сайте не нужно — это главная причина, по которой контакты на сайте вдруг «устаревают»: их правят в блоке, а не в карточке точки.

Подсказка в самой панели написана короче — «По умолчанию телефон, адрес, время работы и соцсети берутся из „Общие настройки"», — и это не ошибка: карточка точки просто перебивает общие настройки, когда в ней что-то заполнено. Правило одно: сначала ищите поле в карточке точки.

В блоке есть поля «Телефон (переопределить)», «Адрес (переопределить)», «Ссылка на карту (переопределить)» и соцсети — они нужны в редком случае, когда на конкретной странице надо показать не то, что в карточке точки. Внутри них серым написано «Авто из настроек магазина» — это и значит «поле пустое, значение подставится само». Оставьте их пустыми, если задачи что-то переопределять нет.

Часы работы

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

### Часы работы
Пн-Пт: 09:00 - 22:00
Сб-Вс: 10:00 - 23:00

Это придуманные часы, не ваши. В правой панели у блока одно поле, подписанное «Markdown», — впишите в него своё расписание руками и сохраните. Если этого не сделать, гость увидит на сайте чужое время работы.

Настоящие часы работы из карточки точки показывает блок «Контакты» — он берёт телефон, адрес, время работы и соцсети автоматически.

Карта

Карта с меткой вашего адреса.

Настройка одна — Адрес. Начните печатать, и Misea предложит варианты; выберите подходящий из списка. Что вы увидите: после выбора карта сама встанет на нужную точку.

Если подсказки не появляются, впишите адрес целиком и точно — «г. Махачкала, ул. Ленина, 12».

Группа «Меню»

Три похожих на вид блока, которые делают разное. Это самое частое место, где путаются.

Настройки: Категория (в списке первым пунктом «Все категории», ниже — ваши разделы), Тип отображения (Сетка, Список или Карточки), Карточек в ряд (число от 1 до 6), галочка «Показывать фото» и «Выравнивание заголовков категорий».

Категории

Только названия разделов — «Кофе», «Десерты», «Завтраки» — без самих блюд. Гость нажимает на раздел и попадает в него. Полезно, когда меню большое: гость сразу видит структуру.

Сетка товаров

Витрина плиткой, обычно 3 в ряд. По сути та же выкладка блюд, но более «магазинная».

Как выбрать. Меню из 15 позиций — хватит одного блока «Меню». Меню из 80 позиций — поставьте «Категории», а под ними «Меню».

Все три блока берут блюда и цены из раздела Каталог → Меню. Ничего вбивать в сайт не надо: добавили блюдо в каталог — оно появилось на сайте.

Группа «Доверие»

Оставить отзыв

Блок с кнопками на Яндекс.Карты, 2ГИС и Google Maps. Гость нажимает — попадает сразу в форму отзыва.

Заполнять все три ссылки не обязательно, Misea прямо об этом пишет в панели: «Кнопки появятся только для тех площадок, где указана ссылка. Можно оставить только одну».

Подробно, вместе с отдельной страницей отзывов и QR-кодом для столов, — в статье Собираем отзывы.

Лояльность

Рассказ о вашей программе лояльности со ссылкой на регистрацию.

Блок есть в списке только на тарифе Pro — программа лояльности в бесплатный тариф не входит. Не видите его среди карточек — дело в тарифе, а не в поломке.

Группа «Заказ»

Корзина

Список того, что гость набрал, с суммой.

Оформление

Форма оформления заказа: имя, телефон, способ получения.

Кнопка заказа

Отдельная кнопка. Настройки: Текст кнопки и Действие — «Открыть корзину» или «Перейти к оформлению».

Эти три блока в большинстве случаев ставить руками не нужно: корзина и оформление появляются у гостя сами, когда он что-то выбрал.

Группа «Подвал»

Изображение

Одна большая картинка. Настройки: «URL изображения» (рядом кнопка «Выбрать» — она открывает вашу библиотеку картинок и заполняет поле сама), «Подпись» под картинкой и «Выравнивание» — выпадающий список Слева / Центр / Справа.

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

Блок скидок

В библиотеке он подписан «Промокод со скидкой», но никакого отдельного поля для промокода в нём нет. Это тот же текстовый блок, что и «Текст», просто заранее заполненный образцом:

### Скидка 15%
Используйте промокод **COFFEE15** при оформлении заказа.

Правится он в поле «Markdown» в правой панели. Замените COFFEE15 и текст на свои — иначе гости увидят несуществующий промокод. Скидку по этому промокоду блок не считает: он только показывает объявление.

Свой блок

Для тех, кто умеет верстать: сюда можно вставить свой код. Поле в правой панели подписано «Markdown», но у этого блока содержимое вставляется на страницу как HTML — так и задумано. При добавлении внутри уже лежит образец <div class="custom-block">Произвольный HTML-блок</div> — его надо заменить своим.

Если вы не понимаете предыдущее предложение — этот блок вам не нужен, и это нормально.

Группа «Сеть» (только когда точек несколько)

Главный экран сети — приветствие для гостя, который ещё не выбрал точку. У кнопки есть действие «Найти ближайшую (по геолокации)»: гость нажимает, браузер спрашивает разрешение на местоположение, и Misea показывает маршрут до ближайшей точки.
Точки сети — карточки всех ваших заведений с адресами и часами. Адреса берутся из раздела Точки.
Карта сети — все точки на одной карте. Точка без координат на карте не появится — координаты подставляются, когда вы выбираете адрес из подсказки в карточке точки, а не вписываете его руками.

Внешний вид блока

У любого блока внизу правой панели есть раздел «Внешний вид» и настройка «Подложка» — три варианта:

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

Ниже — «Цвета блока»: можно перекрасить один блок, не трогая остальной сайт. Misea поясняет: «Меняют цвета только этого блока. Оставьте пустым — цвет возьмётся из общей темы сайта».

Общей кнопки «сбросить всё» здесь нет: рядом с каждым цветом стоит ✕ с подсказкой «Вернуть цвет темы» — нажмите его у той строки, которую хотите вернуть.

Про общие цвета и шрифты сайта — в статье Оформление сайта.