Корпоративний сайт · WordPress · 2024

LaserBrno — салон лазерної епіляції та tělové естетики у Брно

CZ/EN-сайт салону лазерної епіляції у Брно на WordPress 6.9 + кастомній темі laserwp: моно-hero під головну послугу, асиметричний блок Služby, багаторівневий прайс із табами, SVG-мапа Чехії, бронювання через Altegio.

WordPress

Хочу такий самий проект Відкрити сайт

LaserBrno — салон лазерної епіляції та tělové естетики у місті Брно (Чехія), на вул. Milady Horákové 25. Сайт запущений 2024-го на WordPress 6.9 з кастомною темою laserwp. Двомовний (CZ / EN, через WP-Multilang), із бронюванням через зовнішню CRM Altegio, прямими WhatsApp/Instagram/Facebook каналами і власним лід-флоу через Contact Form 7.

Hero як вітрина головної послуги, а не каталог

Перший екран — не каруселя послуг і не «обери, що тобі треба». Це монопозиційний hero «LASEROVÁ EPILACE — Vaše řešení pro odstranění nežádoucích chloupků» із кільцевим стампом «DISCOUNT FOR THE FIRST VISIT», поясняючим параграфом про принцип процедури і одною помаранчевою CTA «Rezervujte si termín», яка веде у зовнішню Altegio (n1220038.alteg.io). Решта послуг — нижче, але hero працює як прицільна точка входу: 90% трафіку шукають саме лазерну епіляцію, і сайт не заважає їм у це натиснути одразу.

Hero LaserBrno — H1 Laserová epilace, кільцевий стамп «Discount for the first visit», фото клієнтки на кушетці і CTA «Rezervujte si termín» — Шапка з адресою, годинами роботи, прямим телефоном `+420 518 701 701` і соц-іконками (FB, IG, WhatsApp) — все на десктопі видно одразу, без скролу. Кнопка «KONTAKTUJTE NÁS» у праворуч теж веде у Altegio, тобто два паралельні шляхи на бронювання з першого ж екрану.

Asymmetric «Služby» — 4 нумеровані картки з зламаним грідом

Блок послуг — не симетрична сітка 2×2, а демонстративно «розламана»: три картки 01 Laserová epilace / 02 Ruční a přístrojová masáž / 03 Elevate Contours у верхньому ряді, четверта картка 04 Kosmetologie зміщена нижче і ліворуч (під «02»). Зліва — вертикальний майже-прозорий title «SLUŽBY», що працює як watermark. Це редакторський прийом — асиметрія сигналізує «ми не клінічний прайс-лист, ми салон з характером», що збігається з beauty-нішею і конкуруючою візуальною мовою преміум-салонів.

Блок «Služby» — 4 нумеровані картки 01/02/03/04 в асиметричній 3+1 сітці, з вертикальним watermark «SLUŽBY» — Кожна картка — номер · заголовок · короткий опис · кнопка-овал «Více», що веде на single-service сторінку (`/service/laser-epilation/`, `/service/hand-massages/`, `/service/cavitation/`, `/service/endosphere/`). Картки клікабельні цілком, не лише через кнопку — типовий UX-патерн картки-як-лінк.

Video-секція «Jak fungují naše procedury» — карусель з 7 тіл

Замість того, щоб ховати відео у YouTube-плейлисті чи робити автоплей-бекграунд, секція «Jak fungují naše procedury» побудована як slick-карусель з 7 квадратних тайлів з play-overlay: Laserová epilace pro ženy, Endosféra, Laserová epilace pro muže, Masáž, Pressoterapie, ELEVATE CONTOURS, Kosmetologie. Кожен тайл — посилання на одне і те ж YouTube-відео (youtu.be/va1oiojnGrA), яке відкривається у Fancybox-лайтбоксі поверх сторінки. Лічильник «1 / 4» і стрілки прокрутки — стандартний slick-навігація.

Карусель «Jak fungují naše procedury» — 7 квадратних відео-тайлів з play-button, вертикальний watermark «VIDEO» — На сайті немає embed YouTube iframe-ів — натомість statyczne JPG-превʼю + клік відкриває Fancybox з вбудованим плеєром. Це швидше для першого завантаження (не тягне YouTube-скрипт) і повністю контролюється тим, який стан куків GDPR-Cookiebot. Перший тайл порожній (placeholder-іконка) — або контент-меdaдата ще не залита, або локалізаційна проблема CZ-фіду.

Reviews як круглі портретні картки з посиланнями на соцмережі

Секція «Reference: skutečné výsledky od skutečných lidí» — slick-слайдер відгуків. Кожна картка — кругла фотографія клієнтки + ім’я + два маленькі іконки (Facebook, Instagram), які ведуть прямо на профіль салону (а не на профіль клієнта), бейдж «5/5» з 5 зірками і сам відгук у мовній бульбашці. На головній видно 5 переходящих карток (Natali Oberemchuk, Diana, Mariia, Viktoriya, Olena), внизу — кнопка «Zobrazit více recenzí» що веде на повну сторінку /what-our-clients-say/.

Слайдер відгуків — портрет у крузі, ім'я з соц-іконками, рейтинг 5/5 і текст відгуку — Іконки FB/IG під ім’ям ведуть не на профіль авторки, а на акаунт `@laser_brno_cz` — це не баг, а конверсійна підміна: відгук читач довіряє, тицяє «подивитися ще щось від цієї людини» і потрапляє на офіційний інстаграм салону, де далі вже відеоконтент і фото-кейси. Соцмережі тут — частина воронки, а не атрибуція автора.

Locations — інтерактивна мапа Чехії з підсвіченим регіоном і пін-таблеткою

Секція «Najděte náš salon ve vašem městě» — SVG-мапа Чехії з усіма 14 краями, де Jihomoravský kraj підсвічений помаранчевим (бренд-колір), а на місті Брно стоїть пін-таблетка з мікрологотипом LASER BRNO і написом «Milady Horakove 25». Праворуч — card-варіант тієї ж адреси з годинами роботи Po–Pá 8:00–22:00 і пін-іконкою «Brno». Це готова інфраструктура під мультилокаційний рост: коли відкриється другий салон, треба лише підсвітити інший регіон і додати ще одну card.

Інтерактивна SVG-мапа Чехії з підсвіченим Південноморавським краєм і пін-таблеткою LASER BRNO на місті Брно — Замість Google Maps iframe (який тягне зовнішній скрипт, потребує API-ключа і часто заблокований GDPR-Cookiebot) — власний SVG. Підсвічений регіон і пін-таблетка — статика, без зовнішніх викликів. Це швидко вантажиться і не торкається consent-флоу.

Service-detail сторінка — окремий повноцінний лендинг на кожну послугу

Single-service (наприклад /service/laser-epilation/) — це не «текст + ціна», а повноцінний multi-section лендинг: breadcrumb «Home › Služby › LASER EPILATION», hero з тагом-описом, гігантським H1 і оранжевою CTA «Book an appointment», далі — параграф про принцип процедури, грід з 6 перевагами (Noticeable result, No ingrown hairs, Minimal painful sensations, Safety, Ability to remove hair from the most sensitive areas, Availability), горизонтальний фото-стрип з 7 знімками салону у Fancybox-лайтбоксі.

Hero service-detail сторінки /service/laser-epilation/ — breadcrumb, тег, H1 «LASER EPILATION», оранжева кнопка «Book an appointment» — CTA «Book an appointment» з hero веде у ту саму Altegio-форму (`n1220038.alteg.io/company/759960/personal/menu`), що і кнопка з шапки. Усі шляхи бронювання сходяться в одну точку — користувач не натикається на різні форми залежно від того, звідки прийшов.

Specialists — портретні картки з кваліфікаційним списком

На single-service далі йде блок «They are working for you / specialists»: три картки з 4×5-фото портрета спеціалістки в білому халаті біля свого приладу + ім’я + bullet-список кваліфікацій (laser hair removal specialist · certified cosmetologist-aesthetician in Europe with 5 years of experience · experience with laser hair removal – 2 years). Це не «команда» у форматі «гарне обличчя + посада», а максимально предметна довіра — конкретний прилад, конкретний серификат, конкретні роки досвіду.

Блок «They are working for you» — 3 портретні картки спеціалісток (Elvira, Maria, Svetlana) з кваліфікаційним bullet-списком — Бренд називає спеціалісток повним ім’ям без прізвища і ставить акцент на досвід саме з лазерним обладнанням — це характерно для beauty-індустрії, де клієнт обирає процедуру і одночасно «свого» майстра. Watermark «SPECIALISTS» позаду — той самий редакторський прийом, що і у блоці «Služby» на головній.

Прайс — багаторівнева таб-структура Жінки/Чоловіки × 6 зон тіла

Секція «How much does it costs / price-list» — багаторівневі таби: верхній рівень WOMEN / MEN з іконками статі, нижній — FACE / HANDS / LEGS / ABDOMEB/BACK / INTIMATE ZONE / PACKAGES. Кожна позиція показує тривалість у хвилинах і ціну у Kč (наприклад, «full face — 30-40 min — 1350Kč», «area above the lip — 15 min — 350Kč»). Праворуч — фото-ілюстрація відповідної зони тіла. Прайс прозорий, без «ціна за запитом», без прихованих апсейлів — це прямий контракт між сайтом і клієнтом, що знижує post-click тертя у Altegio-формі.

Прайс-лист — WOMEN/MEN таби, нижні таби FACE/HANDS/LEGS/.../PACKAGES, рядки з назвою/тривалістю/ціною у Kč — Багаторівнева табова структура замість одного довгого скрол-прайсу — це сильна UX-перевага у нішевих B2C-послугах з 50+ позицій. Користувач не гортає, а обирає координати (стать × зона) і одразу бачить релевантний короткий список. Таб «PACKAGES» окремо містить комбіновані пропозиції зі знижкою (наприклад, Bikini/Armpits/Legs/Arms — 90 min — 4850Kč), що економніше за окрему оплату чотирьох зон.

Дві promo-механіки під прайсом — Ambassador Program і 4+1 Free

Одразу під прайсом — дві широкі promo-картки: «AMBASSADOR PROGRAM» на оливково-зеленому фоні («Bring a friend and receive a 10% discount on your next procedure») і «FREE PROCEDURE 4+1» з фото подарункової карти LASER BRNO («Get the 5th procedure as a gift when you pay for 4»). Це класична петля утримання beauty-салону: одна механіка стимулює дискомфортну для салону частину (приведення нового клієнта), друга — комфортну, але дорогу для салону (повторні візити). Обидві картки винесені у візуально окремий блок, а не сховані у текстовому FAQ.

Дві promo-картки — Ambassador Program (10% за приведеного друга) і Free Procedure 4+1 (5-та процедура у подарунок) — і блок Before/After з порівняльними знімками — Промо-механіки видані сайтом як окремий контент, не як subscript-плашка у footer-і. Це повноцінний інформаційний блок, який працює і для нових клієнтів (звертає увагу на знижку при бронюванні), і для тих, хто вже на 3-й процедурі (нагадування «ще одна — і безкоштовна»). Внизу — Before/After карусель з реальними знімками результатів.

Стек, інтеграції, маркетинг

WordPress 6.9.4 на nginx, з власною темою laserwp (не page-builder) — повний контроль над розміткою і анімаціями, без elementor/divi-надбудов.
WP-Multilang 2.4.27 — двомовність CZ/EN з URL-префіксами (/cz/...) і автоматичним перемикачем у шапці.
Contact Form 7 — три інстанції лід-форми (hero на головній, CTA «Pečujte o sebe» внизу, footer-newsletter); кожна має поля Name/Phone/Email + select процедури з 6 опцій.
Altegio (Yclients) — n1220038.alteg.io — зовнішня CRM для онлайн-бронювання; всі CTA «Book / Rezervujte» ведуть туди, ніяких власних розкладів у WP.
Slick 1.8.1 + Fancybox 3.5.7 — карусель відео-превʼю/відгуків/before-after і лайтбокс для фото та YouTube-плеєрів без iframe-embed-а у DOM.
WhatsApp Click-to-Chat (wa.me/420773279785) + Facebook + Instagram (@laser_brno_cz) — у шапці, у footer-і та біля кожної review-картки.
Cookiebot (consent.cookiebot.com) — GDPR-консент для EU-користувачів; вантажиться першим скриптом, керує які трекінги вмикаються.
GTM4WP + Google Tag Manager 1.22.3 — аналітика з CF7-conversion трекером (форма заявки → GA4 event).
Self-hosted SVG-мапа Чехії з інтерактивними регіонами — без Google Maps API і без OpenStreetMap-iframe.

Підсумок

LaserBrno — приклад нішевого beauty-сайту на WordPress + кастомній темі, який не вигадує власних велосипедів: бронювання винесене у спеціалізовану CRM (Altegio), консент — у Cookiebot, аналітика — через GTM, переклади — через WP-Multilang. Унікального коду на тему рівно стільки, скільки потрібно для редакторської подачі: асиметричні сітки послуг, багаторівневий прайс із табами, SVG-мапа з підсвіченим регіоном, кільцевий стамп «Discount for the first visit» у hero. Все інше — типовий WP-стек, який салон і його контент-менеджер можуть підтримувати без розробника. Сайт працює другий рік на двох мовах, обслуговує одну фізичну локацію в Брно і готовий до масштабування на додаткові міста через ту саму інтерактивну мапу-локатор.