12 примеров вертикальной навигации Divi

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

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

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

Чтобы вдохновить вас, мы выбрали 12 веб-сайтов, которые используют вертикальную навигацию, чтобы оптимизировать взаимодействие с посетителями за счет улучшения их навигации по веб-сайту.

1. Master en Diseno de Interiores

Master en Diseno de Interiores - это потрясающий веб-сайт, посвященный дизайну интерьеров. На изображении выше вы можете увидеть, как они использовали вертикальное меню, чтобы придать дополнительный штрих своему веб-сайту.

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

Вертикальная навигация не исключение. Используемые цвета очень тонкие и не беспокоят глаза при чтении.

2. Модель сверху

Model On Top - это веб-сайт управления моделями. Этот веб-сайт, созданный с помощью Divi, позволил достичь определенной гармонии и продемонстрировать профессионализм и опыт, которые они хотят связать со своей компанией.

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

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

3. Киношкола Art-On-The-Run в Берлине

Art-On-The-Run Filmschool Berlin прекрасно представила на своем веб-сайте художественную сторону, в которой нуждается киношкола. Вертикальная навигация имеет особое назначение во всей картинке.

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

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

4. Алекс Брэндс

Alex brand - это веб-сайт электронной коммерции Divi, на котором продаются всевозможные товары для детей; от декоративно-прикладного искусства до мебели и игр. Веб-сайт сразу показывает то чувство, которое они хотят представлять; игривый и манящий.

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

5. Фотографии Девлина

Delvin Photos, вероятно, самый элегантный веб-сайт из всех, упомянутых в этом посте. Delvin Photos использует свой веб-сайт, чтобы показать все свои работы оригинальным и привлекательным способом, чтобы привлечь новых клиентов к услугам, которые они предлагают.

Они использовали вертикальную навигацию, чтобы подчеркнуть элегантность, которую они используют на остальной части своего веб-сайта, и включив значки социальных сетей в свое основное меню; они также следят за тем, чтобы люди могли получить доступ к каналам социальных сетей в любое время во время их пребывания на веб-сайте.

6. Вечерний макияж

Soiree Makeup - это веб-сайт, посвященный макияжу. Сайт специально создан для того, чтобы предлагать услуги визажиста. Сайт сразу демонстрирует простоту и элегантность, которых ждут от каждого визажиста. Не слишком экстравагантно, но приятно смотреть.

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

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

7. Фотография Натана Велтона

Nathan Welton Photography - второй веб-сайт, посвященный фотографии, который мы выбрали для этого поста. Использование вертикальной навигации для веб-сайтов с фотографиями гораздо более распространено, чем для других веб-сайтов. Обычно это происходит потому, что изображения на сайте говорят сами за себя.

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

Изображения, которые Натан Велтон использовал на своем веб-сайте, именно такие; они полны приключений и рассказывают свою собственную историю. Вертикальная навигация предназначена только для практических целей и не прерывает просмотр страницы, как это делает верхнее меню.

8. Лилли Фотография

Lilly Photography - последний фото-сайт, который мы выбрали для этого поста. Самое замечательное в этом веб-сайте то, что он использует галерею на главной странице.

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

Вертикальная навигация аналогична вертикальной навигации, используемой Натаном Велтоном; упрощенный, но выполняющий свою работу.

9. Фильм Питтсбург

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

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

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

10. BlendLove

BlendLove - продуктовый магазин, расположенный в Австралии. Они создали веб-сайт, чтобы информировать своих клиентов обо всей практической информации, которую им нужно знать.

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

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

11. Приятного аппетита

Bon Appetit - это бельгийский веб-сайт, на котором проводятся семинары, посвященные разнообразным вкусам и ароматам. Предыдущие примеры и этот, несомненно, различаются в одном; веб-сайт Bon Appetit больше ориентирован на предоставляемый ими письменный контент, чем на визуальное оформление.

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

12. Ешьте тайский ресторан

Eat Thai Restaurant - последний пример в этом посте. Это местный мобильный ресторан, который подходит к делу. На их веб-сайте нет нескольких страниц. Они скорее взяли одну страницу и сосредоточились на самом важном; еда. Сайт используется для перенаправления людей, которые хотят сделать заказ, на сайт заказа.

Вертикальная навигация, используемая в этом примере, хороша тем, что на самом деле она не для навигации, а скорее для информирования. Вертикальная навигация следует за посетителем на протяжении всего его пребывания на веб-сайте, что означает, что информация тоже. Они предоставили всю необходимую информацию в меню, а также значки социальных сетей и призыв к действию «Заказать сейчас».

Последние мысли

Мы надеемся, что этот пост вдохновит вас и поможет придумать отличные концепции для существующих веб-сайтов или будущих веб-сайтов, которые вы создаете. Если у вас есть предложения или комментарии; не стесняйтесь оставлять комментарии в разделе комментариев ниже! И пока вы там, дайте нам знать; для какого веб-сайта вы бы использовали вертикальную навигацию?

Обязательно подпишитесь на нашу рассылку по электронной почте и канал на YouTube, чтобы не пропустить важное объявление, полезный совет или бесплатную поддержку Divi!

Лучшее изображение от LuckyDesigner / shutterstock.com