Оформление — цвета, шрифты, фон, кнопки

Всё оформление сайта живёт в одном месте: Конструктор сайта → кнопка «Сайт» в верхней строке (она стоит третьей в группе Блок / Стр. / Сайт). В правой панели откроется раздел «Настройки сайта», а в нём — «Внешний вид» с подписью «Цвета и шрифты применяются глобально ко всему сайту».

Эти настройки действуют на весь сайт сразу: на все страницы и все блоки.

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

Цвета

Наверху раздела «Внешний вид» стоят рядом две кнопки с похожими названиями. Они делают разное, и это главное место, где новички теряют время.

«Фирменные цвета» — когда у вас есть свой цвет

Это нужная вам кнопка, если фирменный цвет уже есть (например, с вывески или логотипа).

1. Нажмите кнопку «Фирменные цвета» — она вторая из двух, правая.
2. Откроется окно «Палитра по фирменным цветам» с подписью «Укажите сколько угодно фирменных цветов — от одного до семи. Остальные сайт подберёт сам по правилам цветовой теории». В окне те же семь строк, и у каждой пока стоит пометка «авто».
3. В строке «Основной» задайте свой цвет: кликните по квадратику и выберите мышью либо впишите код вида #4F46E5 в поле справа. Пометка «авто» у этой строки пропадёт.
4. Остальные шесть строк оставьте как есть, с пометкой «авто», — их сайт дозаполнит сам.
5. Нажмите «Применить палитру» внизу окна. Рядом есть «Отмена» — она закрывает окно, ничего не меняя.

Что вы увидите: окно закроется, остальные цвета подставятся сами так, чтобы текст оставался читаемым, а кнопки — заметными. Рабочая область перекрасится сразу.

«Подобрать цвета» — когда своего цвета нет

Соседняя кнопка «Подобрать цвета» (она стоит первой, слева от «Фирменных цветов») не спрашивает ничего и не открывает никакого окна: по нажатию она сразу заменяет все семь цветов на случайное сочетание, которое само по себе выглядит гармонично. Жмите ещё раз, пока не понравится.

Пользуйтесь ей, только если своего цвета у вас нет. Если вы хотели вписать цвет с вывески — вам нужна кнопка «Фирменные цвета», см. выше.

Если результат не понравился — нажмите ↶ вверху: цвета вернутся к прежним.

Семь цветов по отдельности

Ниже кнопок идут семь строк — по одной на каждый цвет. Под названием каждой строки серым написано, за что цвет отвечает; вот те же подписи целиком:

У каждой строки есть стрелочка ▾ — под ней прячутся тонкие настройки: Прозрачность, Яркость, Насыщенность и Цвет текста поверх. Трогать их не обязательно; если перекрутили — там же внизу есть «Сбросить параметры».

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

Главная ошибка новичка — сделать светлый текст на светлом фоне. Смотрите на рабочую область после каждой правки: если текст читается с трудом у вас на большом экране, на телефоне при солнце его не прочитают вовсе.

Шрифт

В выпадающем списке «Шрифт» десять вариантов: Inter, Roboto, Open Sans, Montserrat, Nunito, PT Sans, Lato, Raleway, Poppins и «Системный» (шрифт устройства гостя).

Ниже — «Размер текста (px)». По умолчанию 16. Меньше 15 на телефоне читать тяжело.

Свой шрифт

Если у бренда свой шрифт, его можно загрузить.

1. В блоке «Свои шрифты» сначала впишите название в поле «Название (напр. «Gilroy»)». Именно в таком порядке: кнопка сразу открывает выбор файла, и вписать название будет уже негде. Поле необязательное — если оставить пустым, названием станет имя файла.
2. Нажмите «Загрузить» — откроется выбор файла на компьютере.
3. Подходят файлы TTF и OTF, размером до 5 МБ — Misea пишет это прямо в блоке: «Загрузите шрифт в формате TTF или OTF (до 5 МБ). Он появится в списке „Шрифт" выше и будет работать в браузере и в приложении». Загрузить можно до 10 шрифтов — счётчик вида «2/10» стоит справа от заголовка «Свои шрифты». Пока вы ничего не загрузили, там написано «0/10» и ниже «Пока нет своих шрифтов».

Что вы увидите: шрифт появится в списке «Свои шрифты» с кнопкой «Выбрать» — нажмите её, чтобы он применился к сайту. Он же появится в выпадающем списке «Шрифт» в группе «Свои шрифты».

Что делать, если не загружается: проверьте расширение файла (нужен .ttf или .otf, а не .woff и не архив) и размер. У шрифтов бывает лицензия, запрещающая размещать их на сайте, — это стоит проверить до загрузки.

Фон

Эффект фона — это живая подложка страницы: мягкие переливы, частицы, сетка. Она реагирует на движение курсора или касание.

1. Найдите в панели надпись «Эффект фона». Нажимать нужно не на неё, а на широкую кнопку под ней: в кнопке показан живой кусочек текущего фона и два названия — русское и английское (например, «Розы» и «Rose Pattern»), а справа стрелочка ›. Сама надпись «Эффект фона» — это подпись поля, по клику она ничего не делает; это самое частое место, где решают, что «не работает».
2. Откроется окно «Выберите эффект фона» с пояснением «Фон применится на витрине и будет реагировать на движение курсора или касание. Анимация отключается, когда включён системный режим „уменьшить движение"».
3. В нём 68 эффектов плюс вариант «Без фона». У каждой карточки — живой пример и два названия: по-русски и по-английски («Северное сияние / Aurora Mesh», «Звёздное небо / Starfield»). Описание словами показывается внизу окна и только для выбранного эффекта, а не на каждой карточке.
4. Нажмите на понравившийся — окно закроется, фон применится.

Первые две карточки в окне — «Своё изображение» (JPG, PNG, WebP · до 8 МБ · мин. 1920×1080) и «Своё видео» (MP4, WebM · до 30 МБ · без звука, по кругу), если хочется свою картинку вместо эффекта.

Тут нужен второй шаг, и его пропускают чаще всего. Выбрать карточку мало — файл вы ещё не загрузили. После того как окно закроется, в правой панели под кнопкой эффекта появится новый прямоугольник «Изображение фона» (или «Видео фона») с подписью про формат и размер. Нажмите в нём «Выбрать изображение» («Выбрать видео») и укажите файл; на время загрузки там будет написано «Загружается…». Пока файл не загружен, фона не будет — и это не поломка.

Крестик убирает не только файл. Чтобы убрать загруженное, нажимают крестик на уголке картинки. Имейте в виду: вместе с файлом Misea сбрасывает и сам эффект фона в «Без фона». Если вы хотели просто заменить картинку на другую — снова откройте окно и выберите карточку «Своё изображение», иначе поле для загрузки исчезнет.

Живые фоны входят в тариф Pro. На бесплатном тарифе окно откроется, но сверху будет плашка «Анимированные фоны — в тарифе Pro» с пояснением «На Free доступен только статичный фон. Обновитесь до Pro, чтобы выбрать любой эффект» и кнопкой «Перейти на Pro». Выбрать можно будет только «Без фона»; карточек «Своё изображение» и «Своё видео» на бесплатном тарифе в окне вообще нет.

Если у гостя в телефоне включён режим «уменьшить движение» — анимация у него не запустится, останется спокойный фон. Это правильное поведение, а не поломка.

Совет: фон — это фон. Если поверх него плохо читается меню, эффект выбран неудачно, каким бы красивым он ни был сам по себе.

Кнопки

Стиль кнопок — выпадающий список с двумя вариантами: Скруглённые и Прямые. Действует на все кнопки сайта.

Что ещё есть в этой панели

Ниже стиля кнопок идут поля, которые к оформлению отношения не имеют, но попадаются по дороге:

• Название, Логотип (кнопка «Выбрать»), Favicon (кнопка «Выбрать») — см. Страницы сайта и как вас находит поиск.
• Заголовок сайта (meta title) и Описание сайта (meta description) — там же.
• «Стол для превью (QR)» — маленькое поле с подписью «Номер стола в URL превью витрины (опционально)». Оно нужно только вам: вписанный сюда номер подставится в ссылку «Витрина» ниже, чтобы посмотреть сайт глазами гостя за конкретным столиком. На то, что видят настоящие гости, оно не влияет. Можно оставить пустым.
• «Витрина» — адрес вашего сайта. Это ссылка: нажмите на сам адрес, сайт откроется в новой вкладке.

Подложка отдельного блока

Общая тема задаёт вид всему сайту, но один блок можно оформить иначе.

1. Нажмите на блок в рабочей области.
2. В правой панели прокрутите до заголовка «Внешний вид» → «Подложка».
3. Выберите: Секция (вся полоса залита цветом), Блок (закруглённая плашка — так по умолчанию) или Пусто (без подложки; под кнопками появится подпись «Без подложки — только содержимое»).

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

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

Что дальше

• Картинки для сайта.
• Сохранить, показать, опубликовать.