3 種創造性的方式來設計你的 Divi 垂直導航的活動鏈接

已發表: 2017-09-11

在這個 Divi 教程中，我們將向您展示幾種有趣的方式來設置垂直導航中活動鏈接的樣式。本教程是上一個教程的後續教程，我們向您展示瞭如何為一頁 Divi 網站在滾動時創建活動鏈接。因此，在您嘗試不同的樣式設置方式之前，您應該首先在滾動瀏覽上一篇文章時設置活動鏈接，因為我們將使用的代碼將進一步構建於此。

在本教程中您應該記住的一點是，您只能在保存頁面後才能看到結果。僅通過預覽您的頁面，更改將不會顯示。

3 種創造性的方式來設計你的 Divi 垂直導航的活動鏈接

訂閱我們的 YouTube 頻道

這個怎麼運作

為了創建在您向下滾動頁面時自動調整活動鏈接的導航，我們使用了 Page Scroll to ID 插件，可輕鬆幫助您獲得所需的結果。此外，該插件還為您提供了不同的選項，您可以在設置中手動選擇。

該插件有助於識別訪問者在您網站上的位置，並將根據他們當前正在查看的網站部分更改菜單項。這是一個很小的互動，肯定會幫助您的訪問者在整個單頁瀏覽器中導航。他們會自動知道他們正在瀏覽您頁面的哪個部分，以及他們離他們可能感興趣的其他部分有多遠。

注意：請注意，此方法僅適用於僅由一頁組成的網站。

激活垂直導航

如果您使用垂直導航，我們將向您展示如何製作的示例將特別有價值。因此，請繼續在 Theme Customizer 中啟用垂直導航（如果您在上一篇文章中還沒有這樣做的話）。

如果您在 WordPress 儀表板上，請轉到外觀 > 自定義 > 標題和導航 > 標題格式 > 啟用垂直導航。

活動鏈接

活動鏈接樣式 #1

我們要向您展示的第一個示例是一個發光的示例。每次訪客經過其中一個部分時，另一個菜單項就會開始發光。這是一種微妙但美麗而優雅的方式，可以幫助您的訪問者瀏覽單頁瀏覽器。

活動鏈接

主菜單欄設置

首先對主菜單欄進行一些更改。如果您在 WordPress 儀表板上，請轉到外觀 > 自定義 > 標題和導航 > 主菜單欄並進行以下修改：

隱藏徽標圖像：啟用
文字大小：24
字母間距：-1
字體: Happy Monkey
文字顏色：#FFFFFF
活動鏈接顏色：#FFFFFF
背景顏色：rgba(255,255,255,0)
下拉背景色：rgba(255,255,255,0)

活動鏈接

將 CSS 代碼添加到主題選項

接下來您需要做的是添加一些 CSS 代碼。您可以通過多種方式將 CSS 代碼添加到您的網站。我們將在這些示例中處理三種方法，從主題選項開始。如果您在 WordPress 儀表板上，請轉到 Divi > 主題選項 > 向下滾動“常規”選項卡，並將以下 CSS 代碼行放在“自定義 CSS”框中：

@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header {
margin-left: 0px !important;
}
.container {
margin-left: 3% !important;
}
.et_vertical_nav #page-container #main-header {
box-shadow: none !important;
}
#top-menu .current-menu-item a.mPS2id-highlight{ 
text-shadow:  0 0 10px #fff,  0 0 30px #fff,  0 0 50px #e3e98e,  0 0 70px #e3e98e, 0 0 90px #e3e98e;
border-top: 1px dotted #FFFFFF;
border-bottom: 1px dotted #FFFFFF;
padding-top: 15px;
}
nav#top-menu-nav {
width:80% !important;
}
.et_vertical_nav #main-header #top-menu > li > a {
text-align: center;
margin-bottom: 15px;
padding-left: 25%;
}
#et-top-navigation {
padding-top: 100% !important;
}
#top-menu {
text-align: center;
padding-left: 10%;
}}

活動鏈接樣式 #2

第二種活動鏈接樣式具有非常乾淨和優雅的外觀。像往常一樣，活動鏈接會根據您向下滾動一頁網站的方式而變化。單擊其中一個菜單項時，將應用相同的樣式。

活動鏈接

主菜單欄設置

我們將首先執行與本文第一個示例中相同的操作；對主菜單欄進行修改。為此，請轉到 WordPress 儀表板中的外觀 > 自定義 > 標題和導航 > 主菜單欄，並確保您具有以下設置：

隱藏徽標圖像：啟用
文字大小：24
字母間距：2
字體: 龍蝦
文字顏色：#FFFFFF
活動鏈接顏色：#FFFFFF
背景顏色：rgba(255,255,255,0)
下拉菜單背景顏色：rgba(255,255,255,0)

活動鏈接

將 CSS 代碼添加到主題定制器

如上例所述，您可以通過多種方式將 CSS 代碼添加到您的網站。除了將自定義代碼添加到主題選項之外，您還可以將其添加到主題定制器。如果您在 WordPress 儀表板上，請轉到外觀 > 自定義 > 附加 CSS 並將以下代碼行放在自定義 CSS 字段中：

@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header {
margin-left: 0px !important;
}
.container {
margin-left: 3% !important;
}
.et_vertical_nav #page-container #main-header {
box-shadow: none !important;
}
#top-menu .current-menu-item a.mPS2id-highlight {
padding: 0.5em 1.9em;
}
#top-menu .current-menu-item a.mPS2id-highlight:before,
#top-menu .current-menu-item a.mPS2id-highlight:after {
height: 20px;
width: 20px;
position: absolute;
content: '';
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
opacity: 0;
}
#top-menu .current-menu-item a.mPS2id-highlight:before {
left: 0;
top: 0;
border-left: 4px solid #000000;
border-top: 4px solid #FFFFFF;
-webkit-transform: translate(100%, 50%);
transform: translate(100%, 50%);
}
#top-menu .current-menu-item a.mPS2id-highlight:after {
border-right: 4px solid #000000;
border-bottom: 4px solid #FFFFFF;
-webkit-transform: translate(-100%, -50%);
transform: translate(-100%, -50%);
} 
#top-menu .current-menu-item a.mPS2id-highlight:before,
#top-menu .current-menu-item a.mPS2id-highlight:after {
-webkit-transform: translate(0%, 0%);
transform: translate(0%, 0%);
opacity: 1;
}
nav#top-menu-nav {
width:87% !important;
}
.et_vertical_nav #main-header #top-menu > li > a {
margin-bottom: 30px;
}
#et-top-navigation {
padding-top: 100% !important;
}}

活動鏈接樣式 #3

我們選擇與您分享的第三種活動鏈接樣式主要關注用作菜單項的關鍵字。通過對文本陰影使用正確的設置，相同的文本將圍繞菜單項，強調訪問者在您網站上的位置。

活動鏈接

主菜單欄設置

對於最後一個示例，首先對主菜單欄進行一些更改。如果您在 WordPress 儀表板上，請轉到外觀 > 自定義 > 標題和導航 > 主菜單欄，並對垂直導航進行以下更改：

隱藏徽標圖像：啟用
文字大小：16
字母間距：2
字體： Josefin Slab
字體樣式：大寫
文字顏色：#FFFFFF
活動鏈接顏色：#FFFFFF
背景顏色：rgba(255,255,255,0)
下拉菜單背景顏色：rgba(255,255,255,0)

活動鏈接

特別是在一頁中添加 CSS 代碼

您必須添加 CSS 代碼的另一種選擇是將其添加到特定的頁面。使用 Divi Builder 打開首頁（以及放置所有內容的頁面），然後單擊以下圖標：

活動鏈接

單擊該圖標後，將以下 CSS 代碼行放入自定義 CSS 字段中：

@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header {
margin-left: 0px !important;
}
.container {
margin-left: 3% !important;
}
.et_vertical_nav #page-container #main-header {
box-shadow: none !important;
}
#top-menu .current-menu-item a.mPS2id-highlight {
margin-left: 80px;
text-shadow:0 0 0 #000, -70px 0 0 rgba(255, 255, 255, .4), 70px 0 0 rgba(255, 255, 255, .4), 0 25px 0 rgba(255, 255, 255, .4) , 0 -25px 0 rgba(255, 255, 255, .4) ; }
}
nav#top-menu-nav {
width:95% !important;
}
.et_vertical_nav #main-header #top-menu > li > a {
margin-bottom: 30px;
}
#et-top-navigation {
padding-top: 100% !important;
}}

最後的想法

在這篇文章中，我們向您展示了一些不錯且簡單的方法來設置菜單中活動鏈接的樣式。這篇文章是上一篇文章的後續文章，我們向您展示瞭如何為一頁 Divi 網站在滾動時創建活動鏈接。請記住，您必須先保存更改，然後才能看到結果，僅預覽頁面並不能完成這項工作。如果您有任何問題或建議；確保您在下面的評論部分發表評論！

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

精選圖片來自 Botond1977/shutterstock.com