Шаблон «Бенто» — полное руководство

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

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

Обзор библиотеки шаблонов и окна выбора — в статье Как настроить RSVP-приглашение.

Чем «Бенто» отличается от других шаблонов

Стандартные шаблоны меняют цвета и шрифты одного общего макета. «Бенто» заменяет сам макет: обложка, обратный отсчёт, галерея, история, расписание, подарки, детали, кнопки календаря и форма RSVP перестроены в плитки на сетке.

Фирменные элементы дизайна

Обложка из плиток — вместо баннера обложка собрана из группы плиток: большая плитка с названием мероприятия, плитка с фото, плитка даты с огромным числом дня, плитка времени, плитка места с булавкой и яркая плитка RSVP, которая сразу ведёт гостей к форме
Плавающая навигация-капсула — стеклянная капсула, закреплённая вверху экрана, с вашими инициалами, ссылкой на каждый видимый раздел и кнопкой RSVP. Пока гости прокручивают страницу, ссылка на раздел, который они читают, подсвечивается. На телефонах капсула появляется, как только гость начинает прокрутку
Крупная акцидентная типографика — Inter Tight в очень жирных начертаниях с плотной разрядкой для имён, заголовков и чисел; Inter для основного текста; JetBrains Mono для мелких подписей заглавными буквами на каждой плитке
Один акцентный цвет — «Мандарин», «Кобальт», «Лайм» или «Фиалка» — только там, где это важно: плитки RSVP, кнопка в навигации, метки времени и рамки фокуса
Четыре холста, один из них тёмный — «Фарфор», «Графит» (тёмный режим), «Шалфей» и «Пудра»
Три стиля углов — мягкие, совсем круглые или чёткие, почти квадратные плитки и кнопки
Отзывчивые плитки — на компьютере плитки слегка приподнимаются под курсором. Гости, которые включили на устройстве уменьшение движения, видят статичную страницу

Когда выбирать «Бенто»

«Бенто» подойдёт хозяевам, которые хотят, чтобы приглашение выглядело современно, было хорошо организовано и легко просматривалось:

Современные свадьбы — особенно городские и для пар, которым чистый графический дизайн ближе цветов и каллиграфии
Корпоративные мероприятия, запуски и конференции — стиль сайта продукта подходит для мероприятий компании, выездных встреч, презентаций продуктов и митапов; см. корпоративные мероприятия
Дни рождения и юбилейные вечеринки — выберите «Лайм» или «Мандарин» на «Графите» для вечерней вечеринки или «Пудру» для чего-то помягче; см. дни рождения
Многодневные мероприятия — плитки расписания, сетка деталей и навигация по разделам помогают легко ориентироваться в длинных выходных
Мероприятия с большим количеством практической информации — дресс-код, отели, транспорт, FAQ и подарки получают каждый свою плитку вместо длинной ленты текста

Если нужен спокойный редакционный стиль с чёрно-белой фотографией, выберите вместо него «Лён», для формальной канцелярии в стиле letterpress — «Ателье», а для мягкой романтичной пастели — «Веспер».

Применение «Бенто» к вашему событию

Откройте событие, нажмите Приглашение в боковом меню, затем вкладку Приглашение
В разделе «Шаблон дизайна» нажмите «Сменить шаблон», если галерея свёрнута, и найдите «Бенто» в группе «Дизайны»
Необязательно: нажмите «Примерить», чтобы увидеть «Бенто» с данными вашего приглашения в живом предпросмотре, — ничего не сохранится, пока вы не нажмёте «Применить этот дизайн»
Или нажмите карточку «Бенто», чтобы сразу его применить
Откройте Параметры «Бенто» под галереей, чтобы задать холст, акцентный цвет, углы и другие параметры, описанные ниже. Изменения сохраняются автоматически

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

Параметры настройки

У «Бенто» шесть собственных параметров в дополнение к стандартным настройкам Fotify.

1. Холст

Нейтральные цвета под всеми плитками:

Фарфор (по умолчанию) — тёплый почти белый холст с чисто-белыми плитками и почти чёрным текстом
Графит — тёмный режим: почти чёрный холст, угольные плитки и светлый текст. Заключительная плитка и плитки дней становятся светлыми, а элементы формы переключаются на тёмные версии
Шалфей — мягкий серо-зелёный холст
Пудра — мягкий розовый холст

2. Акцентный цвет

Единственный яркий цвет на странице — плитки RSVP, кнопка RSVP в навигации, кнопка отправки, метки времени и рамки фокуса:

Мандарин (по умолчанию) — тёплый оранжево-красный
Кобальт — электрический синий
Лайм — яркий жёлто-зелёный; особенно эффектно смотрится на «Графите»
Фиалка — насыщенный фиолетовый

У каждого акцента свой цвет подписей, подобранный так, чтобы текст на кнопках оставался читаемым на любом холсте.

3. Углы

Насколько скруглены плитки, фото и кнопки:

Мягкие (по умолчанию) — скруглённые плитки и кнопки-капсулы
Круглые — особенно мягкие, «пузырчатые» плитки
Чёткие — почти квадратные плитки, а кнопки-капсулы становятся прямоугольными

4. Надпись на обложке

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

5. Заключительный заголовок

Крупная строка на тёмной заключительной плитке внизу страницы. По умолчанию — «До встречи!». Попробуйте «До июня», «Будем праздновать» или «Ждём не дождёмся».

6. Плавающая навигация

Включите (по умолчанию) или отключите навигацию-капсулу вверху экрана. Без неё обложка немного поднимается, а гости прокручивают страницу как обычно.

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

Как оформлен каждый раздел

Обложка

Вместо стандартной шапки — группа плиток:

Плитка с названием — надпись на обложке над названием мероприятия, набранным очень крупно. Длинные названия автоматически уменьшаются на размер, чтобы слова никогда не разрывались посередине
Плитка с фото — фото обложки, обрезанное по размеру плитки. Если фото нет, на компьютере показываются ваши инициалы на панели в точку, а на телефонах плитка просто пропускается
Плитка даты — огромное число дня, а рядом месяц, день недели и год
Плитка времени — время начала в вашем 12- или 24-часовом формате. Скрыть её можно настройкой обложки «Показать время на обложке»
Плитка места — место проведения с булавкой
Плитка RSVP — плитка акцентного цвета, которая сразу прокручивает страницу к форме

На компьютере название и фото стоят рядом над одним рядом информационных плиток; на телефонах всё складывается в аккуратную сетку из двух колонок.

Сообщение

Одна широкая плитка: небольшая подпись и ваши инициалы с одной стороны, крупно набранное сообщение — с другой, как главный слоган на странице продукта. Выделенные слова окрашиваются в акцентный цвет. Длинные сообщения уменьшаются до размера, удобного для чтения.

Обратный отсчёт

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

Галерея (карусель)

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

История

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

Место проведения

Плитка с картой рядом с плиткой адреса: полный адрес, ваши указания, как добраться, и кнопка «Открыть в Картах». Если карту показать нельзя, в плитке карты рисуется булавка с координатами площадки; без координат плитка адреса растягивается на всю ширину.

Расписание

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

Подарки

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

Детали мероприятия

По плитке на каждую тему: дресс-код с рекомендуемыми и нежелательными цветами в виде образцов, где остановиться — каждый отель отдельной карточкой (расстояние, ценовой диапазон, промокод, ссылка на бронирование), как добраться — по карточке на каждый вариант, и плитка FAQ на всю ширину, где каждый вопрос раскрывается и сворачивается по нажатию.

Сохраните дату (календарь)

Одна плитка: заголовок и дата с одной стороны и три кнопки — Google, Apple и Outlook — с другой.

RSVP

Большая белая плитка: заголовок и дата, до которой нужно ответить, с одной стороны и форма RSVP — с другой. Выбор «да/нет» превращается в две плитки, поля — в скруглённые вложенные поля ввода, а кнопка отправки окрашивается в акцентный цвет. На компьютере заголовок остаётся на виду, пока гости прокручивают длинную форму.

Финал

Тёмная заключительная плитка с вашими инициалами, заключительным заголовком, датой и местом, а рядом — вторая акцентная плитка RSVP.

Разделы с общим макетом

Несколько разделов сохраняют общий макет Fotify и оформлены в стиле «Бенто» — каждый становится плиткой в той же колонке, с заголовками и кнопками «Бенто»:

Загрузка фото — акцентная кнопка загрузки, скруглённые фото
QR-код — скруглённая подложка и кнопка сохранения в форме капсулы
Ваш стол — названия столов в виде акцентных меток
Подсобытия и привилегии — кнопки принятия, отказа и разблокировки в форме капсул
Заявки в плейлист
Пользовательские разделы — заголовки «Бенто»; фото разделов скруглены и ограничены по высоте, чтобы высокий портрет никогда не занимал всю страницу

Часто задаваемые вопросы

В: «Бенто» подходит только для технологических или корпоративных мероприятий? О: Нет. Стиль вдохновлён сайтами продуктов, но подходит для любого мероприятия, где ценят чистый современный дизайн, — в том числе для свадеб. Для более нежного настроения выберите «Пудру» или «Шалфей» с мягкими углами, а для смелой вечеринки — «Графит» с «Лаймом».

В: Подстраивается ли тёмный холст «Графит» под тёмную тему на устройстве гостя? О: Нет. Холст выбираете вы, и все гости видят одинаковый дизайн. «Графит» — просто тёмный вариант, который можно выбрать.

В: Почему некоторых разделов нет в навигации? О: В навигации перечислены только включённые разделы с контентом — в заданном вами порядке. У RSVP вместо ссылки есть собственная кнопка в конце капсулы.

В: У моего мероприятия длинное название. Оно поместится на обложке? О: Да. «Бенто» подбирает размер заголовка по длине названия и самому длинному слову в нём, поэтому длинные названия уменьшаются на размер и переносятся между словами.

В: Можно ли заменить акцентный цвет фирменным цветом моего бренда? О: В «Бенто» четыре проверенных акцента («Мандарин», «Кобальт», «Лайм» и «Фиалка»), и к каждому подобран цвет подписей, благодаря которому кнопки остаются читаемыми на любом холсте.

В: Поддерживает ли «Бенто» все стандартные функции? О: Да — у обложки, сообщения, обратного отсчёта, галереи, истории, места проведения, расписания, подарков (включая бронирование подарков из списка желаний и взносы), деталей мероприятия, кнопок календаря и RSVP есть макеты «Бенто», а остальные разделы используют общий макет в стиле «Бенто». Анимация открытия конверта и фоновая музыка работают как обычно.

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

См. Как настроить RSVP-приглашение — про галерею шаблонов и о том, как примерить дизайн перед применением
Сравните с шаблоном «Лён» — для редакционного минимализма — или с «Ателье» — для формальности в стиле letterpress
Узнайте больше о цифровых приглашениях с RSVP в Fotify

Нужна помощь? Свяжитесь с нами через виджет помощи в панели управления.