Разработка функционального сайта для логистической компании Axor Movers

Здравствуйте! Меня зовут Айдажы , я веб-разработчик. Хочу рассказать немного о своем проекте — сайте Axor Movers, который я разработал для логистической компании по заказу клиента, с которым мы уже работали над сайтом Seavolk. На этот раз задача была другой, и я получил интересный опыт, которым хочу поделиться.

Задача

Сайт должен был быть легким, понятным и современным, с фокусом на двух основных услугах:

• Moving (переезды)
• Delivery (доставка)

Причем ключевая фишка — это два отдельных раздела с одинаковой структурой, но разными акцентами. Заказчик хотел, чтобы при переключении между ними менялся только акцентный цвет, а остальная стилистика оставалась узнаваемой. Такой подход позволяет пользователю понимать: он все еще на том же сайте, но просматривает другую категорию услуг.

Решение

Главный функционал

🔄 Переключение между Moving и Delivery

Реализовал удобный переключатель между разделами. По сути, это две разные страницы, но с общей логикой и дизайном. При переключении фиолетовый (брендовый цвет для Moving) сменяется на мягкий оранжевый — цвет, который я подобрал специально для Delivery, чтобы сохранить теплое, дружелюбное восприятие и визуально отделить доставку от переездов. Оранжевый — это цвет движения, скорости и внимания, но в мягком оттенке он не перегружает восприятие.

📅 Умная форма на главной

Одна из интересных задач — форма в первом экране, с одним полем выбора даты и кнопкой “Get a Quote”. При выборе даты пользователь попадает на подробную форму, и дата должна передаться туда автоматически. Это звучит просто, но на деле оказалось не так. Плагины, вроде Contact Form 7, с этим не справлялись, поэтому пришлось вручную доработать передачу данных через URL и JavaScript.

Также мне не нравилось, как по умолчанию выглядит поле выбора даты (input type="date") в разных браузерах — где-то серое, где-то совсем скучное, у каждого свое. Поэтому я подключил внешнюю библиотеку календаря, которая делает выбор даты одинаково красивым во всех браузерах.

Архитектура сайта

Для того чтобы разделить услуги по категориям (Moving и Delivery), я создал отдельные типы записей. Объясню проще: это как бы «две папки» внутри сайта, в каждой — свои страницы, свои категории и свои ссылки. Например:

• Страница услуги Moving:
  https://axormovers.com/moving/celebrity-moving/
• Страница услуги Delivery:
  https://axormovers.com/delivery/one-piece-delivery-2/

Хотя визуально они очень похожи, внутри это разные разделы, каждый со своей логикой. Это дало больше гибкости в управлении сайтом и контентом.

Дизайн и анимации

Сайт выполнен в легком и понятном стиле — по желанию заказчика, без перегруза визуалом. Однако, чтобы придать живости, я добавил:

• Анимации при наведении на изображения и блоки;
• Микроанимацию на кнопке формы (в том числе с иконкой машинки — символ логистики);
• Четкие иконки, аккуратные отступы и адаптивную верстку — чтобы сайт выглядел современно на всех устройствах.

Результат

Axor Movers — это готовый к работе, наполненный и полностью функционирующий сайт, посаженный на WordPress. Вот что удалось реализовать:

• Удобное переключение между разделами Moving и Delivery;
• Полноценная форма с выбором даты, которая передается в детальную форму;
• Два отдельных типа контента для разных услуг, с одинаковой структурой, но разными акцентами;
• Современный дизайн, легкая анимация и адаптивность;
• Все тексты, изображения и услуги добавлены — сайт полностью заполнен и готов к продвижению.

Если вы хотите сделать для своей компании такой же понятный, легкий и эффективный сайт — мы с радостью поможем. В каждом проекте мы стараюсь не просто «написать код», а сделать сайт живым и удобным для людей.