Гость решает, куда пойти, за пару минут — по фотографиям, атмосфере и тому, насколько легко забронировать стол. На примере Beef&Cake из Хмельницкого рассказываю, как я сделал сайт ресторана на WordPress — с банкетами, VIP-комнатой, сертификатами, двумя языковыми версиями и полной мобильной версией.
О ресторане и задаче
Beef&Cake — авторский мясной ресторан в центре Хмельницкого, на улице Проскуровской. Ставка здесь на мясные блюда по авторским рецептам, а кроме основного зала есть VIP-комната и банкетный зал. Ресторан продаёт подарочные сертификаты, держит сувенирную лавку, показывает залы в 3D-туре, получает награды и пишет собственные новости — например, о рекордном для Украины тартаре из говядины, который зафиксировала Книга рекордов Украины.
Всё это нужно было собрать в сайт, который передаёт характер заведения и ведёт к действию: забронировать столик, заказать банкет или купить сертификат. Я сделал этот сайт на WordPress с собственной темой — с двумя языковыми версиями, формами заявок, галереями, новостями и полной мобильной версией.
Структура: три сценария гостя
Я начал не со списка страниц, а с того, зачем человек открывает сайт ресторана. Получилось три сценария, и под каждый — свой короткий путь:
- «хочу поужинать» — кнопка «Забронировать столик» на первом экране, меню, часы работы, адрес и карта;
- «у меня событие» — страницы VIP-комнаты и банкетного зала с фото, вместимостью и заявкой на банкет;
- «ищу подарок» — блок подарочных сертификатов, всплывающее окно и форма заявки.
Остальные страницы поддерживают выбор: о ресторане, 3D-тур, галерея и новости. В шапке — логотип, ссылка на 3D-тур, переключатель языка ENG | UKR и кнопка меню. Меню раскрывает все разделы сайта, а также другие проекты владельца, кейтеринг и сувенирную лавку.
Главная страница
Первый экран — тёмное фото зала с кирпичными стенами и тёплым светом, логотип со схемой разделки туши и золотая кнопка «Забронировать столик». Дальше главная коротко проводит по всему, что есть у ресторана:
- о ресторане — коллаж из четырёх фото в золотой рамке, текст и ссылки на 3D-тур и сувенирную лавку;
- меню — крупный стейк на тёмном фоне и кнопка «В меню»;
- VIP-комната и банкетный зал — фото, вместимость и переход на отдельные страницы;
- подарочные сертификаты — слайдер с кнопкой «Купить»;
- новости и награды — слайдеры со стрелками и точками;
- график работы, адрес, телефон, почта, соцсети, ссылки на меню, резерв стола, доставку и отзывы в сервисе Choice, карта.
В подвале — разделы сайта, другие проекты владельца и услуги: кейтеринг и сувенирная лавка. Фоном подвала служит контурная схема разделки туши — тот же мотив, что и в логотипе.
VIP-комната и банкетный зал
Площадки для событий — отдельный источник заявок, поэтому у каждой своя страница. Текст чередуется с вертикальными фото в шахматном порядке, а ключевые фразы выделены рукописным шрифтом: длинное описание читается легче, и главное не теряется.
- VIP-комната — приватное помещение на 8–10 гостей с отдельным входом и балконом, телевизором и кондиционером — для встреч, праздников и переговоров;
- банкетный зал — до 50 гостей, отдельный вход, большой LED-экран для видео и фото, открытая барная стойка и возможность превратить зал в конференц-зал.
Обе страницы заканчиваются слайдером фотографий, а на странице банкетного зала кнопка «Запрос на банкет» открывает форму заявки.
Галерея, новости и 3D-тур
Галереи собраны на плагине Photo Gallery и разбиты на три темы — «Наше меню», «Наша атмосфера» и «Наш интерьер». На общей странице галереи видно по подборке из каждой темы, а у каждой темы есть своя страница с полным набором фото. Новые снимки ресторан добавляет сам из админки, без правки кода.
Новости — это записи WordPress: они выводятся слайдером на главной и открываются отдельной страницей статьи. 3D-тур вынесен в шапку и в блок «О ресторане» и открывается своей страницей — гость может заглянуть в зал ещё до визита.
Формы и всплывающее окно сертификатов
Заявки на банкет и на подарочный сертификат я собрал на Contact Form 7 и сделал короткими и одинаковыми по логике: имя, email и телефон с маской +380, пояснение, что менеджер перезвонит, и пометка о согласии на обработку персональных данных. Маска не даёт ввести номер в неверном формате, поэтому менеджер получает телефон, по которому можно сразу звонить. После отправки гость видит сообщение «Отправлено» — понятно, что заявка ушла.
Для сертификатов сделано всплывающее окно: изображение сертификата, описание и кнопка «Купить», которая ведёт к форме заявки. Гость не уходит со страницы, на которой заинтересовался подарком.
WordPress, две языковые версии и мобильная версия
Сайт работает на WordPress с собственной темой, написанной под этот проект. Тексты страниц, новости и фото ресторан меняет из админки, а внешний вид остаётся цельным, потому что все блоки — слайдеры, коллажи, карточки, формы — заложены в шаблоны темы.
- две языковые версии — украинская и английская, переключатель ENG | UKR в шапке на каждой странице;
- полная мобильная версия: главная, о ресторане, VIP-комната, банкетный зал, 3D-тур, новости, галерея, формы, сообщение «Отправлено», всплывающее окно сертификатов и меню перестроены под смартфон;
- на телефоне блоки выстраиваются в одну колонку, коллажи и слайдеры сохраняются, а кнопки и контакты остаются крупными и удобными для нажатия;
- Google Site Kit — данные о посещаемости и поиске видны прямо в консоли WordPress.
Каким должен быть сайт ресторана
Сайт ресторана продаёт не блюда, а впечатление: атмосферу, вкус и повод прийти. Поэтому, создавая сайт для ресторана, я опираюсь на несколько принципов:
- фотографии блюд и залов — главный контент, текст их только дополняет;
- бронь столика видна с первого экрана и доступна в пару касаний;
- банкеты, VIP-залы и сертификаты — отдельные страницы с заявкой, а не строка в меню;
- часы работы, адрес, телефон и карта всегда под рукой;
- мобильная версия продумана отдельно — ресторан чаще всего ищут со смартфона, по дороге или перед выходом из дома;
- новости и галерею ресторан обновляет сам, без разработчика.
Если вам нужен сайт для ресторана, кафе или бара, я помогу превратить характер заведения в сайт, где гость быстро находит меню, бронирует столик и оставляет заявку на банкет.
Детали проекта
Тип проектановый сайт
КатегорияКорпоративный сайт
ТехнологииWordPress, собственная тема, PHP, HTML5, CSS3, JavaScript, Contact Form 7, маска телефона, Photo Gallery, Google Site Kit, адаптивная вёрстка
Рольразработка сайта на WordPress: собственная тема, вёрстка и адаптив, формы, галереи, новости, две языковые версии
Клиентресторан Beef&Cake
СтранаУкраина
Что сделано
- Собрал сайт на WordPress с собственной темой
- Сверстал главную: бронь столика, о ресторане, меню, VIP-комната, банкетный зал, сертификаты, новости, награды, контакты и карта
- Сделал страницы «О ресторане», VIP-комнаты, банкетного зала и 3D-тура
- Настроил галереи на плагине Photo Gallery: меню, атмосфера, интерьер
- Вывел новости слайдером на главной и сделал шаблон страницы новости
- Сделал формы заявок на банкет и сертификат на Contact Form 7 с маской телефона
- Сделал всплывающее окно подарочных сертификатов
- Настроил украинскую и английскую версии с переключателем языка в шапке
- Адаптировал все страницы, формы и окна под смартфоны
- Подключил Google Site Kit
Результат
- Сайт ресторана на WordPress, который ресторан обновляет сам
- Короткие пути к брони столика, заявке на банкет и покупке сертификата
- Две языковые версии — украинская и английская
- Полная мобильная версия всех страниц, форм и всплывающих окон