如何使用推動業務的 Divi 創建垂直導航

已發表: 2017-08-29

在今天的 Divi 教程中，我們將向您展示如何創建垂直導航來推動您網站的業務發展。 我們將向您展示如何製作的垂直導航通常用於認為讓訪問者立即採取行動很重要的企業。 例如，如果您擁有一家允許客戶在線訂購的餐廳，您可能希望您的網站能夠幫助訪問者快速採取行動。

我們將向您展示如何製作的垂直導航將包含重要信息和號召性用語，而不是頁面。 將這些包含在垂直導航中將刺激訪問者下訂單，從而提高網站的轉化率。

結果

在深入研究不同的步驟和靈感之前，讓我們先看看這篇文章結尾處您將能夠實現的垂直導航結果：

垂直的

除了向您展示如何將所有不同的菜單項添加到垂直導航之外，我們還將使用固定導航。 這樣，您就可以確保信息在整個一頁式頁面中跟隨訪問者。

靈感

我們在推動業務的垂直導航方面的靈感來自我們在上一篇文章中展示的網站。 在那篇文章中，我們列出了 12 個使用垂直導航來實現自己網站目的的網站。 引起人們注意的例子之一是 Eat Thai Restaurant 網站。 他們的垂直導航是那些開箱即用的概念之一。 他們的網站是一頁式的，但他們找到了一種仍然可以利用導航可能性的好方法。 他們的網站是這樣的：

垂直的

如何使用推動業務的 Divi 創建垂直導航

訂閱我們的 YouTube 頻道

啟用垂直導航

首先，我們必須激活 Divi 提供的垂直導航選項。 為此，請轉到您的WordPress 儀表板 > 外觀 > 標題和導航 > 標題格式 > 啟用垂直導航。

垂直的

啟用固定導航

我們正在重新創建的垂直導航將像 Eat Thai Restaurant 網站一樣得到修復。 要固定垂直導航，請轉到WordPress 儀表板 > Divi > 主題選項 > 常規選項卡 > 啟用固定導航。

垂直的

主菜單設置（主題定制器）

您需要做的下一件事是對主菜單進行一些更改。 如果您在 WordPress 儀表板上，請轉到外觀 > 自定義 > 標題和導航 > 主菜單欄。 到達那里後，您可以對其進行以下更改（或您希望進行的任何其他更改）：

  • 隱藏徽標圖像：禁用
  • 徽標最大高度：100
  • 菜單頂部邊距：0
  • 文字大小：14
  • 字母間距：-1
  • 字體: Lato Light
  • 文字顏色：#FFFFFF
  • 活動鏈接顏色：#FFFFFF
  • 背景顏色：#004159
  • 下拉菜單背景顏色：#004159

垂直的垂直的

固定導航菜單設置（主題定制器）

我們需要在主題定制器中做的最後一件事是確保滾動時也顯示徽標。 如果您仍在使用主題定制器，請轉到標題和導航 > 固定導航設置 > 並確保禁用“隱藏徽標”選項。

垂直的

添加菜單項

繼續，我們將把菜單項添加到我們的垂直導航中。 帖子的這一部分可能會佔用您的大部分時間。 您必須通過自定義鏈接單獨添加每一項。

激活 CSS 類

但是在我們開始添加菜單項之前，您必須確保啟用了 CSS Classes 選項。 此選項允許您單獨為每個菜單項分配一個類。 在這種情況下，這是必要的，因為大多數項目都有自己的樣式設置。 要啟用 CSS 類選項，請單擊菜單頁面右上角的“屏幕選項”並啟用 CSS 類選項，如下面的屏幕截圖所示。

垂直的

添加新菜單

為菜單項激活 CSS 類後，您可以繼續創建一個新菜單。 為其命名並確保將此新菜單設為主菜單。

垂直的

添加所有菜單項（我們將逐步向您展示）後，您的菜單在後端將如下所示：

垂直的

電話號碼

由於這是一個單頁機，菜單中不會包含任何頁面。 我們要添加到菜單中的所有項目都將是自定義鏈接。 這使我們可以嘗試添加我們想要添加的東西。

要添加您的第一個菜單項，請單擊自定義鏈接並在導航標籤字段中添加電話號碼。 您可以選擇是否要向其添加 URL。 但是，將菜單項添加到菜單時，您必須填寫 URL。 將菜單項添加到您的菜單後，您可以刪除 URL，您將確保當有人單擊菜單項時不會發生任何事情。

垂直的

將菜單項添加到菜單後，您還將看到 CSS 類出現。 這就是您必須決定將修改菜單項樣式的 CSS 類的地方。 在本例中，我們使用“電話號碼”類。 如果您只想複製並粘貼本文末尾的 CSS 代碼行，請確保使用這些步驟中提到的 CSS 類。

垂直的

地址

同樣，我們將添加地址。 在導航標籤中填寫地址並根據需要添加 URL。 我們用於地址菜單項的類只是“地址”。

垂直的

社交圖標

將社交圖標添加到垂直導航需要更多的努力。 在上一篇文章中，我們明確處理了向主菜單添加社交圖標的問題。 但是，在這種情況下，該方法將略有不同，因為我們必須在垂直導航中將圖標排列在一起。

添加字體真棒

如果您還沒有，您需要做的第一件事是將 Font Awesome 添加到您的主題選項中。 為此，請轉到您的WordPress 儀表板 > Divi > 主題選項 > 集成 > 並將以下短代碼粘貼到您網站的頭部： 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />

垂直的

獲取簡碼

獲取社交圖標的簡碼； 在 Font Awesome 的網站上打開此頁面。 在您將在該頁面上看到的搜索字段中，搜索您想要添加到垂直導航中的不同圖標。

單擊該圖標後，您將看到鏈接到該圖標的短代碼。 將這些短代碼中的每一個都保存在某處。

垂直的

將社交圖標添加到菜單

繼續，我們將添加社交圖標。 通常，您可以將每個社交圖標單獨添加為菜單項。 但由於我們希望它們緊挨著出現，我們必須將它們放在同一個菜單項中。 您需要添加到導航標籤的 HTML 代碼如下： 

<a href="#" target="_blank"><i class="fa fa-facebook-official facebook" aria-hidden="true"></i></a>
<a href="#" target="_blank"><i class="fa fa-instagram instagram" aria-hidden="true"></i></a>
<a href="#" target="_blank"><i class="fa fa-envelope envelope" aria-hidden="true"></i></a>

垂直的

不要忘記為每個圖標添加一個 URL。 我們為所有三個社交圖標組合使用的類是“icon-wrapper”，但我們還為每個社交圖標分配了一個額外的類以進行單獨調整。 您可以在 Font Awesome 類之後立即註意到這些類。 它們被稱為“facebook”、“instagram”和“信封”。

垂直的

路線

對於下一個菜單項，我們使用“方向”一詞作為 CSS 類名。

垂直的

線

要在方向正下方添加一行，我們必須在標籤導航中添加一個空白字符。 那是因為 WordPress 不允許您在沒有鏈接標籤的情況下創建菜單項。 要將空白字符添加到您的行菜單項，只需添加“&nbsp;” 到導航標籤。 此外，還將“line”作為 CSS 類名稱添加到此菜單項。

垂直的

營業時間

繼續，我們將添加開放時間並為其分配“小時”CSS 類名稱。

垂直的

號召性用語 1

接下來，我們將添加第一個 CTA。 我們將為其分配“cta-1”CSS 類名。

垂直的

號召性用語 2

對於第二個 CTA，我們將使用“cta-2”CSS 類名稱。

垂直的

按鈕號召性用語

將按鈕 CTA 添加到垂直導航需要比普通的文本菜單項多一些步驟。 首先打開您用作單頁瀏覽器的頁面，然後按照下面提到的後續步驟進行操作。

在著陸頁上創建按鈕

如果您想在垂直導航中使用按鈕 CTA，那麼您必須在單頁機上的某處使用相同的按鈕。 創建一個後，您可以檢查該元素並複製網站代碼中顯示的以下代碼行（鏈接到您創建的按鈕）： 

<div class="et_pb_button_module_wrapper et_pb_module et_pb_button_alignment_center"> 
<a class="et_pb_button et_pb_button_0 et_pb_module et_pb_bg_layout_light"> 
ORDER NOW 
</a> 
</div>

垂直的

當然，此代碼可能會根據您設置樣式的方式而有所不同。 它還取決於同一頁面上是否還有其他按鈕。 知道該按鈕只會以您為其指定的樣式出現在該按鈕所在的頁面上。 這就是為什麼在垂直導航中添加按鈕通常只在涉及單頁導航時更可取。

注意：確保在按鈕模塊中調整按鈕的字體大小和內邊距，使其完全適合您的垂直導航。

添加為菜單項

現在您已經復制了鏈接到按鈕的所需 HTML 代碼，添加一個新的自定義鏈接並將代碼添加到導航標籤。 我們用於此菜單項的 CSS 類是“cta-3”。

垂直的

添加 CSS 代碼行

這篇文章的下一部分致力於分享 CSS 代碼行，幫助您實現最終結果和佈局。 您會注意到我們使用了分配給不同菜單項的 CSS 類。 但是，如果您決定使用不同的類名，請確保在 CSS 代碼中更改它們以使其工作。

要添加 CSS 代碼，請轉到您的WordPress 儀表板 > Divi > 主題選項 > 向下滾動常規選項卡並將以下 CSS 代碼行添加到自定義 CSS 框中： 

@media only screen and (min-width:992px) {
.et_vertical_nav #page-container #main-header {
margin: 10px !important;
height: 93% !important;
z-index: 9999;
}}
.phone-number {
font-size: 1.9em !important;
font-weight: 400 !important;
}
.address {
font-weight: 300 !important;
}
@media only screen and (min-width:769px){
#main-header div#et-top-navigation {
padding-top: 110px;
height: 100%;
position: static !important;
}}
@media only screen and (min-width:769px){
.et_vertical_nav span.logo_helper {
display: none;
}}
@media only screen and (min-width:769px){
.et_vertical_nav #main-header #logo {
margin-bottom: 28px;
}}
@media only screen and (min-width:769px){
.et_vertical_nav #main-header .container {
margin-left: 25px !important;
margin-right: 25px !important;
height: 100% !important;
}}
.facebook, .instagram, .envelope {
padding: 7px 13px 7px 13px;
font-size: 1.6em;
}
.icon-wrapper a {
display: inline-block !important;
}
.directions {
font-size: 1.2em;
font-weight: 400;
padding-top: 0;
text-align: center;
}
.line {
border-top: 1px solid;
color: #fff;
margin: 8px auto auto;
width: 20%;
}
.hours {
color: #ffffff;
font-size: 10px;
font-weight: 300;
text-align: center;
}
.cta-1 {
margin-top: 5px !important;
font-size: 1.3em;
font-weight: 600;
text-align: center;
}
.cta-2{
font-size: 1.1em;
font-weight: 300;
letter-spacing: 0.02em;
text-align: center;
}
#page-container {
background: #d6d4d1;
}

@media only screen and (max-width:768px) {
.directions, .line, .cta-1, .cta-2, .cta-3 {
display: none !important;
}}

#main-header #top-menu-nav .nav li {
line-height: 10.5px;
}

垂直的

更改部分背景顏色

您需要做的最後一步是更改一頁紙上各部分的背景顏色。 確保此顏色與您用於頁面容器的顏色相同。 在這種情況下，即“#d6d4d1”。

垂直的

結果

添加所有菜單項和鏈接到這些菜單項中的每一項的 CSS 代碼後，您應該能夠獲得以下結果：

垂直的

最後的想法

在這篇文章中，我們向您展示瞭如何為您的單頁導航創建垂直導航。 這篇文章的靈感來自於同樣由 Divi 製作的 Eat Thai Restaurant 網站。 如果您一步一步地閱讀了整個帖子，您應該能夠實現上面展示的結果。 如果您有任何問題或建議，請務必在下方評論區留言！

請務必訂閱我們的電子郵件通訊和 YouTube 頻道，這樣您就不會錯過重大公告、有用提示或 Divi 免費贈品！

特色圖片由 Vectomart/shutterstock.com 提供