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 提供