Акустичну кабіну не купують навмання: її обирають за розмірами, звукоізоляцією, вентиляцією та тим, як вона впишеться в інтер’єр. Добрий сайт виробника відповідає на ці запитання раніше, ніж клієнт візьме телефон, — і його рідною мовою. Розповідаю, як я зібрав такий сайт для Silentbox®.
Завдання: один сайт для покупців із двох десятків країн
Silentbox® — польсько-український виробник акустичних кабін для офісів: від одномісної Solo для дзвінків до Quartet, де можна провести зустріч учотирьох. Штаб-квартира компанії розташована у Вроцлаві, а самі кабіни, за даними клієнта, стоять в офісах 25 країн. Отже, сайт читають офіс-менеджери, керівники й дизайнери інтер’єрів із найрізноманітніших країн, і кожному треба швидко розібратися в моделях, побачити кабіну в кольорах свого офісу й отримати ціну.
Звідси три головні вимоги: багато мов без окремого сайту для кожної країни, наочний вибір моделі й кольору та короткий шлях від зацікавлення до заявки.
Структура: головна-презентація та сторінки моделей
Головну сторінку побудовано як докладну презентацію з якірним меню: «Про кабіни», «Кабіни», «Ціни», «Галерея», «Каталог», «Сертифікати», «Контакти». Її можна читати згори донизу або одразу перейти до потрібного розділу.
- перший екран — кабіни на 1–4 особи й кнопка «Переглянути всі моделі»;
- вісім технічних блоків: звукоізоляція до 35 дБ, відсутність луни, вентиляція до 30 м³ на годину, глушники, тришаровий триплекс, світлодіодне освітлення, розетка з USB і датчик присутності;
- блок «Скільки коштує шум у вашому офісі» з цифрами досліджень і посиланнями на джерела;
- картки шести моделей, анонс нового WorkPod, таблиця порівняння та 3D-перегляд;
- блок про Meetpoint — власний сервіс Silentbox® для бронювання кабін через планшети й Google Calendar, з переходом на його сайт;
- галерея, каталог у PDF, відгуки, відповіді на часті запитання, новини й контакти штаб-квартири.
Кожна кабіна — Solo, Duet, Quartet і три моделі серії Lite — має власну сторінку: фото, опис, технічні характеристики, розміри, кнопки «Завантажити прайс» і «Переглянути в 3D», а внизу — схожі моделі.
Підбір кольору просто в картці кабіни
Кабіну купують надовго, і вона має вписатися в інтер’єр. Тому в картці є два випадні списки: колір передньої панелі (білий, сірий, чорний) і колір бічної панелі (сім варіантів — від білого до жовтого, червоного й синього). Для цього я написав власний шаблон сторінки кабіни в дочірній темі Astra та невеликий скрипт: щойно покупець вибирає кольори, фото змінюється на потрібну комбінацію, а в однієї моделі їх 21.
У серії Lite логіка інша: замість кольорів клієнт обирає один із десяти принтів із картинками-прев’ю. Під час завантаження сторінки перший варіант вибирається автоматично, щоб картка ніколи не залишалася без фото. Кнопка замовлення запам’ятовує модель: у форму заявки потрапляє адреса сторінки кабіни, і менеджерові не треба уточнювати, про яку кабіну йдеться.
Порівняння моделей і 3D-перегляд
Щоб не переходити зі сторінки на сторінку, на головній зібрано таблицю порівняння: місткість, регулювання вентиляції та світла, мережева панель, меблі й зовнішні розміри — від 105×110×220 см у Solo до 210×138×220 см у Quartet. Тут також є кнопки «Переглянути в 3D» і «Завантажити прайс» для кожної моделі.
Для Solo, Duet і Quartet зроблено окремі сторінки з інтерактивною 3D-моделлю: кабіну можна повернути й роздивитися з усіх боків. Самі моделі вбудовано із сервісу Vectary, а сторінки зібрано на окремому шаблоні, де поруч із моделлю розміщено опис і характеристики.
21 мова на одному сайті
Переклади підключено через TranslatePress. Кожна мова має власну папку в адресі та правильні теги hreflang, тому пошуковики показують людям потрібну версію. У перемикачі 21 мова: українська, англійська, польська, німецька, французька, іспанська, італійська, нідерландська, чеська, японська та інші. Арабська версія та іврит відкриваються справа наліво, як і належить.
Форми теж враховують мову: разом із заявкою передається мова сторінки, а поле телефону пропонує вибрати код країни — клієнтові не треба гадати, у якому форматі записати міжнародний номер.
Форми та шлях до заявки
Покупець кабіни рідко готовий замовити одразу — спершу він хоче побачити ціну й презентацію. Тому заявки на сайті збираються в кількох місцях:
- кнопка «Отримати пропозицію» в шапці на кожній сторінці;
- «Завантажити прайс» у картках і таблиці — відкриває вікно з формою запиту PDF-презентації та прайс-листа;
- «Залишити заявку» в картці моделі;
- заявка на тестування кабіни;
- форма в розділі контактів.
Усі форми зібрано на Elementor Pro, і вони запитують лише ім’я, електронну пошту й телефон. Під кожною формою — обіцянка відповісти протягом години, щоб клієнт розумів, чого чекати.
Довіра: сертифікати, відгуки, галерея та блог
Коли купує компанія, довіра важить більше за гарні слова. На сайті зібрано документи: ISO 9001, ISO 23351-1, ISO 11957, CE, RoHS, реєстрацію промислового дизайну, торговельні марки ЄС та України й два патенти. Поруч — 14 логотипів компаній-клієнтів, відгуки й застереження не плутати кабіни Silentbox® з підробками.
Окрема сторінка галереї на 74 фотографії показує кабіни наживо, а блог з 11 статей розповідає, як вибрати кабіну, про встановлення у Вільнюсі, про потрапляння компанії до рейтингу Forbes і про контракт із НАТО. Це й аргументи для покупця, і тексти, за якими сайт знаходять у пошуку.
Що важливо в сайті виробника офісного обладнання
Кабіни, меблі, перегородки й освітлення для офісу купують компанії. Рішення ухвалюють кілька людей, вони порівнюють пропозиції й майже завжди просять прайс ще до розмови з продавцем. З досвіду цього проєкту сайт такого виробника має:
- говорити мовою покупця — одного перемикача замало, потрібні окремі адреси для кожної версії та правильна розмітка для пошуковиків;
- показувати товар наочно: фото в усіх кольорах, 3D, розміри й характеристики в одній таблиці;
- надавати документи — сертифікати й патенти для відділу закупівель важать більше за слогани;
- перетворювати зацікавлення на контакт: прайс і презентація в обмін на ім’я та пошту — зрозумілий обмін для покупця-компанії;
- передавати менеджерові заявку одразу з моделлю й мовою клієнта.
Якщо ви виробник чи дистриб’ютор і продаєте в кілька країн, починати варто не з картинок, а зі структури: які моделі, які мови, які запитання ставлять покупці. Під це збирається сайт, і на WordPress з Elementor його можна зробити так, щоб команда клієнта сама редагувала тексти й додавала моделі.
Деталі проєкту
Тип проєктубагатомовний сайт-каталог
КатегоріяКорпоративний сайт
ТехнологіїWordPress, Elementor Pro, Astra (дочірня тема), TranslatePress, Yoast SEO, PHP, JavaScript (jQuery), Vectary (3D-моделі)
Рольрозробка сайту: структура, шаблони сторінок моделей, підбір кольору, багатомовність, форми
КлієнтSilentbox®
КраїнаПольща, ринок — Європа
Що зроблено
- Спроєктував головну-презентацію з якірним меню та розділами про кабіни, ціни, галерею й сертифікати
- Зробив власні шаблони сторінок кабін і 3D-перегляду в дочірній темі Astra
- Написав підбір кольору передньої та бічної панелей із заміною фото під кожну комбінацію
- Окремо реалізував вибір принтів із прев’ю для серії Lite
- Зібрав таблицю порівняння моделей із розмірами, комплектацією, 3D і прайсом
- Підключив 21 мову через TranslatePress, зокрема арабську та іврит справа наліво
- Налаштував форми Elementor Pro: прайс і презентація, пропозиція, тестування кабіни, телефон із кодом країни
- Зробив сторінку галереї на 74 фотографії, розділ сертифікатів і блог
Результат
- Один сайт 21 мовою замість окремих версій для кожної країни
- Покупець сам підбирає колір кабіни й одразу бачить результат на фото
- Усі шість моделей — з характеристиками, розмірами й порівнянням, три основні — з 3D-переглядом
- Кожна кнопка «Завантажити прайс» веде до заявки з контактами клієнта