Divi 垂直导航的 12 个例子

创建网站时，需要考虑很多不同的事情。 它通常从您希望网站整体布局的外观和感觉开始。 您希望它与您网站上的内容相匹配，以便它能够增强您尝试发送的信息。

在您的网站如何影响访问者的行为方面起主要作用的因素之一是主菜单。 使用 Divi，有很多可能性可以让您以与网站其余部分相匹配的漂亮方式设计菜单样式，并帮助您引导访问者浏览您的网站。

其中一种可能性是使用垂直导航而不是顶部菜单。 尽管垂直导航并不常用，但如果经过深思熟虑并且与网站的其余部分相匹配，它可以提供惊人的结果。 与顶部菜单一样，垂直菜单会在访问者的整个网站逗留期间跟踪访问者。

为了激发您的灵感，我们选择了 12 个使用垂直导航的网站，通过改进他们在整个网站上的导航方式来优化访问者的体验。

1. Master en Diseno de Interiores

Master en Diseno de Interiores 是一个令人惊叹的网站，内容全是关于室内设计的。 在上图中，您可以看到他们如何使用垂直菜单为他们的网站提供额外的触感。

网站上使用的颜色非常中性，为网站以及相关公司或品牌带来现代感。

垂直导航也不例外。 正在使用的颜色非常微妙，阅读时不会打扰眼睛。

2. 顶部模型

Model On Top 是一个模特管理网站。 这个由 Divi 创建的网站让某种和谐融合在一起，并展示了他们希望与公司相关联的专业性和专业知识。

除了有一个非常漂亮的垂直导航，其中包含所有需要的元素，如徽标、页面和搜索栏，他们还通过在网站开头使用视频背景来创建这种参与。

垂直导航不需要很多特殊的设计，他们宁愿保持干净，让整个页面其余部分的视觉效果完成工作。

3. 柏林艺术电影学院

Art-On-The-Run Filmschool Berlin 在他们的网站上完美地展示了电影学院需要的艺术方面。 垂直导航在整个画面中有着特殊的用途。

他们故意使用垂直导航来享受使菜单看起来像一种“列表”的好处。 他们使用了与网站内容一致的编号。 除了页面之外，编号也很容易被解释为场景或情节。

页面和显示的标志的组合给人一种简单和结构的感觉。 他们也没有未能代表与他们网站的全部内容完全一致的视觉效果。

4. 亚历克斯·布兰兹

Alex Brands是Divi电商网站，销售各种儿童用品； 从工艺品到家具和游戏。 该网站立即显示出他们想要代表的那种感觉； 俏皮而诱人。

在这种情况下，垂直导航也是非常有意选择的。 有很多不同的页面，如果他们选择顶部菜单，结构就会丢失并且没有足够的空间。

5. 德夫林照片

Delvin Photos 可能是这篇文章中提到的所有网站中最优雅的网站。 Delvin Photos 使用他们的网站以原创和引人入胜的方式展示他们的所有作品，以吸引新客户使用他们提供的服务。

他们使用垂直导航来强调他们在整个网站其余部分使用的优雅，并在他们的主菜单中包含社交媒体图标； 他们还确保人们在访问网站期间可以随时访问社交媒体渠道。

6.晚会化妆

Soiree Makeup 是一个以化妆为主题的网站。 该网站专门用于提供化妆师的化妆服务。 该网站立即展示了每位化妆师所期望的简洁和优雅。 没有太多的奢侈，但很好看。

网站一般不会占据整个屏幕，这使得内容更加集中。 在垂直导航中，大部分注意力都集中在徽标和联系框上。

在垂直导航中包含一个联系框可以让化妆师强调网站最重要的目的； 获得新潜在客户、新客户和新预订。

7. 内森·韦尔顿摄影

Nathan Welton Photography 是我们为这篇文章选择的第二个摄影网站。 在摄影网站上使用垂直导航比在其他网站上使用更为常见。 这通常是因为网站上的图片不言自明。

摄影网站的网站所有者使用简单的垂直导航通过具有易于使用且不会分散注意力的菜单来保持对图像的关注。

Nathan Welton 在他的网站上使用的图像正是这样； 他们充满冒险精神，讲述着自己的故事。 垂直导航仅用于实际目的，不会像顶部菜单那样中断页面。

8.莉莉摄影

Lilly Photography 是我们为这篇文章选择的最后一个摄影网站。 这个网站的伟大之处在于它在主页上使用了一个画廊。

画廊展示了过去所做的工作，以创造某种体验感。 因为到头来； 人们正在寻找能够拍摄出符合他们期望的照片的摄影师。

垂直导航类似于 Nathan Welton 使用的垂直导航； 简单但完成工作。

9. 电影匹兹堡

Film Pittsburgh 是一个电影放映组织。 他们所做的一件好事是在他们的页面顶部创建了第二个菜单，允许访问者获得实用信息。

相反，垂直导航提供了相当多的信息，但可以通过将访问者引导到正确的页面来帮助他们理解他们的故事和使命。 将实用和叙述页面彼此分开可以增强主菜单中的讲故事能力。

除了使用垂直导航，Film Pittsburgh 也没有使用屏幕的整个尺寸，这给他们留下了空间，以通过相关的背景图像来增强他们的设计。

10.混合爱

BlendLove 是一家位于澳大利亚的食品店。 他们建立了一个网站来通知他们的客户他们需要知道的所有实用信息。

他们在他们的网站上提供的额外好处之一是有机会购买一本包含他们制作的健康食品的电子书。 这是与客户互动、了解他们是谁甚至赚取利润的好方法。

该网站本身有一个深色调的调色板，与他们拥有的标志形成了鲜明的对比。 他们确保整个网站的颜色保持一致，垂直导航也是如此。 确保一致性很重要，因为垂直导航占据了屏幕的较大部分，而顶部菜单通常不那么引人注目。

11. 好胃口

Bon Appetit 是一个比利时网站，专注于举办涉及多种口味和香味的研讨​​会。 前面的例子和这个例子肯定有一点不同； Bon Appetit 网站更关注他们提供的书面内容，而不是视觉效果。

垂直菜单被分成3种； 徽标、页面和额外服务，例如客户服务和运输。 页面和额外服务之间的风格差异给网站带来了额外的组织感和触感。

12. 吃泰国餐厅

Eat Thai 餐厅是这篇文章的最后一个例子。 这是一家本地拥有的移动餐厅，切中要害。 他们的网站没有多个页面。 他们宁愿用一页纸专注于最重要的事情； 食物。 该网站用于将想要订购的人重定向到订购网站。

本示例中使用的垂直导航的好处在于，它实际上不是用于导航，而是用于提供更多信息。 垂直导航在访问者在网站上的整个停留期间跟随他们，这意味着信息也是如此。 他们在菜单中提供了所有相关信息，以及社交图标和“立即订购”CTA。

最后的想法

我们希望这篇文章能给您大量的灵感，帮助您为您拥有的当前网站或您正在制作的未来网站思考伟大的概念。 如果您有任何建议或意见； 随时在下面的评论部分发表评论！ 当你在那里时，让我们知道； 您将垂直导航用于什么样的网站？

请务必订阅我们的电子邮件通讯和 YouTube 频道，这样您就不会错过重大公告、有用提示或 Divi 免费赠品！

精选图片由 LuckyDesigner/shutterstock.com 提供