Всем привет. В этой статье мы расскажем как мы сделали многостраничный сайт с лендингами для строительной компании.
Пошаговый разбор как сделать стильный дизайн сайта
К нам в студию обратился владелец строительной компании “ТеплоГидроСтрой” с просьбой обновить структуру и дизайн его сайта. Основные задачи, которые перед нами стояли:
- Изменение структуры сайта исходя из потребностей клиента;
- Отрисовка дизайна всех страниц;
- Переезд сайта на CMS WordPress.
Дизайн главной страницы
Главная страница на этом сайте является разводящая по страницам услуг. А также на ней краткая информация о компании.
1й экран главной страницы
И так, по порядку. В шапке сайта без логотипа нельзя, это классика и не соблюдать это – преступление). Далее мы вывели основные контакты, мессенджеры, номер телефона и кнопка вызывающая попап окно с заявкой на обратный звонок. Справа кнопка меню, но о ней чуть позже и более подробно.
В центре экрана мы не стали добавлять продающие заголовки или УТП, а вывели название компании и кем она является. Ниже ссылки на основные услуги и продублировали кнопку обратного звонка.
Раздел с услугами
С этой секции добавили блоки с услугами и ссылками на страницы услуг.
Блок о компании
Вкратце рассказали о компании, о ее сильных сторонах и почему стоит обратиться именно сюда.
Подвал или футер сайта
В верхней части футера мы вывели блок с консультацией. В ней добавили способы связи с ссылками и кнопку “Заказать обратный звонок” вызывающую попап окно с формой обратной связи. Этот блок показывается с конце каждой страницы сайта. Помимо того что форма отправляет контактные данные посетителя, она еще добавляет в письмо заголовок страницы, с которой она вызвана. То есть есть ли посетитель находится на странице вашего опубликованного проекта в портфолио, то вы поймете откуда отправлена заявка, следовательно и его запрос.
В нижней части футера разместили логотип, навигацию сайта и все возможные контакты организации.
Всплывающее меню
В шапке сайта в правой части при нажатии на кнопку “Меню”, всплывает окно шириной и высотой в 100% экрана. При появлении добавили в анимацию плавный эффект. На фоне разместили обработанное за ранее видео, которе загружено на хостинг сайта. Видео также грузится на смартфонах и не вызывает проблем со скоростью загрузки. Внутри секции разместили логотип, навигацию по страница, а также контакты. Это меню открывается на каждой странице сайта, что очень удобно.
Далее посмотрим остальные страницы нашего сайта.
Дизайн страницы – Строительство домов
Данная страница выполнена лендингом. Ее можно отдельно продвигать с помощью контекстной рекламы в Яндексе. С самого первого блока мы даем понять какую услугу мы предлагаем, как мы это делаем и варианты связи с нами. 2м блоком мы даем возможность посетителю рассчитать приблизительную стоимость строительства объекта с помощью квиз опроса. Пользователь отвечает пошагово на вопросы и отправляет свои контактные данные и заполненные ответы из квиза на почту.
Далее на странице вывели блоки о компании, ее ценностях и преимуществах работы с компанией. Ответили на частые вопросы и показали превью портфолио с возможностью перейти в раздел.
Всплывающее уведомление
Также заказчик поставил задачу уведомить посетителей на сайте что не выполняет частичные работы и делают только комплекс работ. Мы реализовали следующее: при начале прокрутки страницы появляется окно-уведомление с кнопкой “Закрыть”.
Дизайн страницы – Внутренняя отделка
Данная страница также выполнена лендингом. Она отлично подходит для продвижения с помощью контекстной рекламы в Яндексе. 2м блоком также реализовали квиз-опрос. В содержании страницы ответили на такие вопросы как: кто мы, что предлагаем, почему именно у нас лучше, чем докажем, и как связаться с нами.
Дизайн страницы – Архитектурное проектирование
Лендинг с услугой проектирования частных домов. Перечислили преимущества и рассказали не много о компании. Показали опубликованные проекты, выполненные компанией и ответили на частые вопросы.
Дизайн страницы – Благоустройство участков
Лендинг с услугой благоустройства участков и придомовых территорий. На странице перечислили виды услуг и преимущества при выборе компании. Также вывели галерею с портфолио.
Дизайн раздела – Портфолио
Компания выполняет различные виды деятельности, связанные со строительством и отделкой помещения. Была поставлена задача реализовать функционал для публикации в портфолио три направления: ремонт, строительство и благоустройство.
Ремонт или внутренняя отделка
Первая вкладка открывается при переходе из меню в пункт “Портфолио”. У нас сразу выводятся наши посты в порядке – самый последний в начале.
Строительство домов
При нажатии на “Строительство” открывается вкладка с постами про строительство. При чем это происходит без перезагрузки страницы.
Благоустройство
В этой вкладке в отличие от двух предыдущих выводится общая фотогалерея с работами.
Страница проекта
Эта страница отображает содержимое поста “Строительства” или “Внутренней отделки”. Пост проектов состоит из заголовка, обложки, фотогалереи и дополнительных метаполей.
Дизайн страницы “О компании”
Оформили страницу с текстовым блоком и блоком “Преимущества”
Дизайн страницы “Контакты”
На этой страницы вывели все контакты компании, а также реквизиты
Результат
Заказчик получил то, что и планировал получить от сайта. Стильный, многофункциональный и продающий сайт компании, который легко и удобно продвигать. А главное – остался очень доволен нашей работой. Мы же получили огромное удовольствие от процесса и после запуска сайта в интернет-плавание.
Хотите заказать продающий сайт с качественным авторским дизайном? Обращайтесь в студию “По маслу” https://pomaslu.site/.
