如何使用 Divi 複製優雅主題的主菜單

已發表: 2017-04-25

新的 Elegant Themes 菜單一直是開發人員在他們自己的網站上複製的流行要求。菜單的主要功能是號召性用語 (CTA) 按鈕，它通過在向下滾動頁面時更改顏色和動畫來吸引訪問者的注意力。在您的網站上使用這種 CTA 按鈕可能會提高點擊率和轉化率。

今天我將向您展示如何使用 Divi 複製優雅主題的主菜單。為了實現按鈕的自定義樣式和功能，我將結合使用 CSS 和 jQuery。

讓我們開始吧！

實施設計

訂閱我們的 YouTube 頻道

創建菜單

從 WordPress 儀表板，轉到外觀 → 菜單。在菜單頁面的頂部單擊屏幕選項並檢查 CSS 類。這將允許您向菜單項添加自定義 CSS 類。

現在單擊“創建新菜單”並為您的菜單命名。

單擊“創建菜單”按鈕。

接下來，將菜單鏈接添加到新菜單。由於我們正在復制 Elegant Themes 菜單，因此我添加了以下自定義鏈接：

主題
插件
博客
接觸
登錄
加入下載

將鏈接添加到菜單後，選擇新菜單作為站點的主菜單。

要將“加入下載”菜單鏈接更改為 CTA 按鈕，您需要向其中添加自定義 CSS 類，以便稍後使用 CSS 對其進行樣式設置。要添加類，請單擊“加入下載”菜單項右側的箭頭以顯示配置選項。在 CSS Classes 文本框中添加一個名為“jointoday_button”的類。

保存菜單

創建菜單並將其設置為主菜單後，是時候為導航菜單和 CTA 按鈕添加樣式了。

導航菜單樣式

首先，我們需要更改您的主菜單欄文本大小。轉到主題定制器 → 標題和導航 → 主菜單欄。保留所有默認設置並將文本大小更改為 15。

導航菜單的其餘部分將使用自定義 CSS 設置樣式。在 Theme Customizer 下，轉到 Additional CSS 並添加以下自定義 CSS（您也可以將這些添加到您的子主題的 style.css 文件中）：

/*** remove shadow on main header***/
#main-header {
box-shadow: none;
}

/*** add shadow to fixed header ***/
@media (min-width: 981px) {
#main-header.et-fixed-header {
    box-shadow: 0 0 30px rgba(7, 51, 84, 0.17) !important;
    -webkit-box-shadow: 0 0 30px rgba(7, 51, 84, 0.17) !important;
    -moz-box-shadow: 0 0 30px rgba(7, 51, 84, 0.17) !important;
}
}
/*** adjust padding on menu ***/
.et_header_style_left .et-fixed-header #et-top-navigation nav > ul > li > a {
padding-bottom: 23px;
}
#top-menu li {
padding: 0 10px !important;
}

.et_header_style_left #et-top-navigation {
padding-top: 20px;
}

.et_header_style_left .et-fixed-header #et-top-navigation {
padding-top: 10px;
}

/*** style the menu button ***/
.jointoday_button a {
color: #f92c8b !important;
    line-height: 9px;
    font-weight: 600;
    padding: 13px 16px !important;
    text-transform: uppercase;
    font-size: 12px !important;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    display: block;
    transition: all .5s ease;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    border: 2px solid #f92c8b;
}

.jointoday_button a:hover {
    opacity: 1 !important;
    color: #fff !important;
    background-color: #f92c8b;
}

.et-fixed-header #top-menu .jointoday_button a:hover {
    background-color: #de20b3;
    border: 2px solid #de20b3;
    box-shadow: 0px 5px 20px #aab9c3;
    -moz-box-shadow: 0px 5px 20px #aab9c3;
    -webkit-box-shadow: 0px 5px 20px #aab9c3;
}

.et-fixed-header #top-menu .jointoday_button a {
    color: #fff !important;
    background-color: #f92c8b;
    box-shadow: 0px 5px 20px #d6dee4;
    -moz-box-shadow: 0px 5px 20px #d6dee4;
    -webkit-box-shadow: 0px 5px 20px #d6dee4;
    border: 2px solid #f92c8b;
}
.et-fixed-header.et_highlight_nav #top-menu .jointoday_button a {
    background-color: #2cc2e6;
    border: 2px solid #2cc2e6;
    animation: highlight-nav .8s ease;
    -webkit-animation: highlight-nav .8s ease;
}

#main-header.et-fixed-header.et_highlight_nav #top-menu .jointoday_button a:hover {
    background-color: #f92c8b;
    border: 2px solid #f92c8b;
    box-shadow: 0px 5px 20px #aab9c3;
    -moz-box-shadow: 0px 5px 20px #aab9c3;
    -webkit-box-shadow: 0px 5px 20px #aab9c3;
}

@-webkit-keyframes highlight-nav {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    50% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}
@keyframes highlight-nav {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    50% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

/*** style the mobile menu links and button ***/
@media (max-width: 980px) {
.et_mobile_menu li {
text-align: center;
}

.et_mobile_menu li a {
border-bottom: none;
}
.et_mobile_menu li a:hover {
background-color: transparent;} 

.jointoday_button a {
border-bottom: 2px solid #f92c8b !important;
}
}

你快完成了。讓我們看看到目前為止的菜單是什麼樣的。

請注意，菜單下的陰影已被移除，並且僅在向下滾動頁面時激活固定導航時顯示。此外，CTA 按鈕的樣式已更改為在固定導航上更改顏色。

添加jQuery

剩下要做的就是在向下滾動到頁面上的某個點時向按鈕添加額外的顏色變化和脈衝動畫。當用戶與內容互動時，此附加功能會進一步引起對 CTA 按鈕的關注。為了添加這種效果，我們需要僅在用戶滾動到頁面上的特定點時為按鈕添加一個額外的 CSS 類。在這種情況下，當用戶滾動到大於頁面主體 50% 的點時，我們將向菜單添加類“et_highlight_nav”。一旦用戶滾動回頁面頂部，該類將被刪除。

您可以通過添加一些 jQuery 來完成此操作。轉到Divi → Theme Options ，然後在 Integration 選項卡下，將以下 jQuery 添加到“Add code to the head of your blog”文本區域：

<script>
jQuery(document).ready(function($){
	jQuery(window).scroll(function() {    
	var   $main_header = jQuery('#main-header'),
		$body = jQuery('body'),
                scrollPercentage = 100 * (jQuery(this).scrollTop() / $body.height()),
                scroll = $(window).scrollTop(),
	    	objectPosition = $body.offset().top;

	    if (scroll < objectPosition) {
	        $main_header.removeClass("et_highlight_nav");
	    }
	    if (scrollPercentage >= 50){
	        $main_header.addClass("et_highlight_nav");
	    }
	});
});
</script>

“et_highlight_nav”類現在可用於使用脈衝動畫和藍色設置 CTA 按鈕的樣式。由於您之前已經為此效果添加了自定義 CSS，因此您已準備就緒。

立即查看菜單。

當您進一步向下滾動頁面時，CTA 按鈕現在將變為藍色並脈動，並在您返回頁面頂部時重置。

更改 CTA 按鈕的顏色

由於 CTA 按鈕使用自定義 CSS 類，因此您可以通過調整您之前添加的 CSS 來更改按鈕的樣式以匹配您的站點。只需用您自己的顏色代碼替換即可。以下是針對不同按鈕樣式的 CSS 部分：

如果您更改按鈕的顏色，請確保通過在此處更改 CSS 來更改移動按鈕的底部邊框：

它在手機上看起來如何？

之前添加的自定義 CSS 將使您的菜單項居中，並在移動設備上正確放置 CTA 按鈕，就像在優雅的主題移動菜單上一樣。

菜單字體

在本教程中，我使用默認字體 Open Sans 作為菜單字體。 Elegant Themes 站點的默認字體（包括菜單文本）是一種名為 Poppins 的字體。您可以按照上一篇文章中的說明使用 Google Fonts 導入此字體。

最後的想法

就是這樣！您已成功複製優雅主題主菜單。而且，您可以通過調整自定義 CSS 來調整 CTA 按鈕的樣式以匹配您網站的設計。由於固定導航上的按鈕顏色會在向下滾動頁面時發生變化並具有動畫效果，因此用戶更有可能注意到有助於轉化的 CTA。

我希望這個新菜單對即將到來的項目是一個有用的功能。我期待在下面的評論中收到您的來信。

享受！