Кейс / промышленный B2B

B2B-сайт для инженерной компании «Аластер»

Упаковали сложную промышленную тематику в понятный лендинг на Tilda: от инженерного позиционирования и отраслевой экспертизы до каталога трубопроводной арматуры и сценариев заявки на подбор оборудования.

TildaB2BПромышленностьКаталогSEO-базаCustom HTML/CSS/JS

01 / Задача

Не просто показать оборудование — объяснить инженерный подход

В промышленном B2B клиенту важно быстро понять компетенции поставщика, логику работы и насколько глубоко команда погружается в техническую задачу.

01

Сформировать позиционирование

«Аластер» должен восприниматься не как каталог арматуры, а как инженерный партнёр, который анализирует систему, выполняет расчёты, предлагает решение и комплектует объект.

02

Упорядочить сложный контент

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

03

Сделать каталог частью заявки

Пользователь выбирает оборудование в каталоге и открывает форму подбора. Название выбранной позиции автоматически передаётся в заявку.

30+товарных позиций в интерактивном каталоге

6отраслей с отдельной технической спецификой

8этапов — от первого обращения до сопровождения

4ключевых преимущества вокруг инженерной ценности

02 / Решение

Собрали страницу вокруг логики принятия решения в B2B

Вместо длинной «простыни» о компании выстроили маршрут: компетенции → отрасли → оборудование → услуги → процесс → доверие → заявка.

Структура и тексты

Перевели техническую экспертизу в понятные смыслы

Подготовили тексты первого экрана, миссии, преимуществ, отраслей, услуг и этапов работы. Подчеркнули инженерный опыт специалистов, комплексную комплектацию и сопровождение.

Каталог

Сделали динамический каталог без тяжёлых библиотек

Категории переключаются внутри страницы, карточки создаются из единой структуры данных, а дополнительные позиции раскрываются только по запросу.

UX и заявки

Связали карточку с формой подбора

При клике на «Получить подбор» выбранная позиция передаётся в форму автоматически. Менеджер получает контекст обращения ещё до первого звонка.

Адаптив

Продумали поведение для мобильных экранов

Сетки, карточки, каталог и длинные технические блоки перестраиваются под планшеты и смартфоны, сохраняя читаемость и навигацию.

03 / Интерфейс

Индустриальный визуальный язык без перегруза

Тёмная палитра, бирюзовые акценты, крупная типографика и технические карточки поддерживают B2B-характер проекта, не превращая сайт в таблицу характеристик.

Структура главной страницы сайта Аластер — Главная страница и логика блоковпозиционирование → отрасли → каталог → услуги

Каталог трубопроводной арматуры на сайте Аластер — Каталог оборудованиякатегории, характеристики, заявка на подбор

Блок услуг и этапов работы компании Аластер — Услуги и этапы проектасложный процесс — в понятной последовательности

Мобильная версия сайта Аластер — Мобильная версияадаптивная сетка и компактные карточки

04 / Техническая часть

Функциональность без тяжёлого фронтенда

Там, где стандартных блоков Tilda было недостаточно, использовали изолированный HTML/CSS/JS — без фреймворков и внешних библиотек.

01

Динамические карточки каталога

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

02

Передача выбранного товара в форму

Сценарий заявки сохраняет название выбранной позиции и передаёт его вместе с контактными данными.

03

Lazy loading изображений

Некритичные изображения загружаются отложенно, а размеры заданы заранее, чтобы снизить скачки макета.

04

Изолированные стили

Кастомные блоки используют собственные классы и не конфликтуют со стандартными стилями Tilda.

05

Без внешних библиотек

Для каталога и интерфейсной логики не подключались дополнительные JS-фреймворки.

05 / SEO и контент

Заложили поисковую базу уже на уровне структуры

Для промышленной ниши важно не просто добавить ключевые слова, а подробно объяснить услуги, отрасли, оборудование и сценарии применения.

Что подготовили

Один основной H1 и последовательная структура H2–H3.

Коммерческие формулировки вокруг инжиниринга, арматуры, паровых и водяных систем.

Содержательные описания отраслей и товарных категорий.

Alt-тексты для ключевых изображений и оборудования.

Title и Description для главной страницы.

Понятные контакты, адрес офиса и кликабельные способы связи.

Партнёры и контактный блок сайта Аластер — Доверие и контактпартнёры, офис, склад и форма обращения

06 / Итог

Сайт, который объясняет сложный продукт человеческим языком

Получился B2B-лендинг, где инженерная экспертиза, ассортимент и процесс работы собраны в одном понятном сценарии — от знакомства с компанией до заявки на конкретное оборудование.

Смотреть сайт Хочу похожий сайт

Сформировали инженерное позиционирование вместо подачи «просто поставщика».

Разложили сложную промышленную информацию по понятным смысловым блокам.

Добавили интерактивный каталог с передачей выбранного товара в заявку.

Подготовили адаптивную и SEO-ориентированную основу для дальнейшего развития проекта.