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

LaserBrno — салон лазерной эпиляции и телесной эстетики в Брно

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

WordPress

Хочу такой же проект Открыть сайт

LaserBrno — салон лазерной эпиляции и телесной эстетики в городе Брно (Чехия), на ул. 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, то есть два параллельных пути к бронированию с первого же экрана.

Асимметричный «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 — вместо этого статичные JPG-превью + клик открывает Fancybox со встроенным плеером. Это быстрее для первой загрузки (не тянет YouTube-скрипт) и полностью контролируется состоянием куки GDPR-Cookiebot. Первая плитка пустая (placeholder-иконка) — либо контент-метаданные ещё не залиты, либо локализационная проблема 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». Это готовая инфраструктура под мультилокационный рост: когда откроется второй салон, нужно лишь подсветить другой регион и добавить ещё одну карточку.

Интерактивная 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 / ABDOMEN/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 со сравнительными снимками — Промо-механики поданы сайтом как отдельный контент, не как мелкая плашка в футере. Это полноценный информационный блок, который работает и для новых клиентов (обращает внимание на скидку при бронировании), и для тех, кто уже на 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) — в шапке, в футере и возле каждой 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-стек, который салон и его контент-менеджер могут поддерживать без разработчика. Сайт работает второй год на двух языках, обслуживает одну физическую локацию в Брно и готов к масштабированию на дополнительные города через ту же интерактивную карту-локатор.