對你的網站最重要的信息應該存在倍以上（大致相當于屏幕頂部600px）。分利用這一概念與次級菜單欄。菜單欄位于網站的最重要的元素展示分享按鈕，一次菜單，電話號碼和電子郵件地址。用戶應該能夠找到這些重要的信息，無論哪一頁他們的土地，而無需滾動到它。

如果你正在尋找你的網站帶來更多的注冊，提供折扣，或有一個頁面，你想指揮交通，這是給你的。我們將努力創建一個行動電話（CTA）是嵌入在分的次級菜單欄。有一些流行的插件一樣hellobar和Sumome的聰明吧這是專門捕捉線索。我建議你成為一個強大的插件，這樣如果你對以鉛代水平嚴重。但今天我保持簡單。

我將向你展示如何添加一個簡單的CTA div的頂部欄，沒有一個插件的使用。我甚至會告訴你如何改變分頂級酒吧元素的位置。誰知道呢？你甚至可以使用一些完全獨特的空間。

那我們就開始吧

實施設計與分欄

添加一個標題元素次級菜單欄

在WordPress的管理員去這→主題Customizer。選擇標題和導航→標題元素

在標題元素，確保選擇顯示的圖標是社會限制和輸入電話號碼和電子郵件地址的文本框。

造型的次級菜單欄

現在回到標題及導航并選擇自定義次級菜單欄。更改以下設置：

充分寬度：是的

文字大?。?4px

的TT字體風格：（uppercase）

背景顏色：# eb593c

下拉菜單背景顏色：# eb593c

加入CTA在您的孩子的主題的header.php文件

為了給頂欄添加CTA的部分，你將需要添加一行HTML代碼的分主題文件夾的header.php文件。

如果你還沒有創建一個子主題，然而，這是一個好主意，這樣做在開始之前你需要更改主題模板文件。點擊這里了解如何添加子主題

一旦你有了一個孩子的主題創建活動在您的網站，訪問你的孩子的主題文件使用FTP客戶端如FileZilla。從你的分主題的header.php文件和文件夾復制粘貼到你的孩子的主題文件夾。確保你保持文件名完全相同（頭。PHP）和復制所有的代碼都是在原始文件。

一旦header.php文件放在你的子主題文件夾，使用文本編輯器打開和編輯文件（確保你正在編輯的子主題版）。

定位DIV的ID”等次級菜單”。這是包含二級菜單項的div。

將下面的代碼添加在二級菜單div：

<DIV類=“CTA”> Want to Learn More ... <一href=“#”>Click Here</一></DIV&#62;

通知類“CTA”連接到分這是我們將使用風格的CTA后。

你將需要更換標簽（#）與您希望用戶訪問的頁面的URL的href屬性當他們點擊鏈接的CTA。例如，如果你想推動更多的用戶使用您的聯系頁面，你會把URL的網頁。

而且，一旦你知道你的CTA將，你可以改變文本的“想了解更多…”和鏈接文本“單擊此處”到任何你想要的。記得要短，因為沒有太多的工作空間。

現在讓我們來看你的網站看看頂欄看起來這么遠

現在你的頂欄內容的地方和需要的造型。你可以添加一些自定義的CSS來解決這個。

最后的潤色

在WordPress的管理員，去桌面主題選項→。向下滾動到“自定義CSS框并輸入下面的CSS：

#頂級頭.container {

墊上：1.3em；

字體加粗：六百；

底部間隙：0.75em；

}

#等信息{

寬度：33.3%；

浮動：正確的；

水平對齊：正確的；

}

.cta {

寬度：33.3%；

水平對齊：機構；

浮動：正確的；

頂緣：- 3px；

}

.cta {

背景：# FFF；

顏色：#eb593c！重要的；

襯墊：5px10px；

顯示直列：塊；

WebKit的邊界半徑：3px；

-moz邊界半徑：3px；

邊界半徑：3px；

字體加粗：七百！重要的；

過渡：全部零點五S；

}

.cta {：懸停

背景：# 555；

顏色：# FFF！重要的；

}

# ET（secondary -菜單

寬度：33.3%；

浮動：左邊；

水平對齊：左邊；

}

“媒體（大寬度：980px）{

#等信息{

寬度：50%；

浮動：正確的；

水平對齊：正確的；

}

.cta {

寬度：50%；

水平對齊：機構；

浮動：左邊；

頂緣：- 3px；

}

#等信息{

墊上：0px；

底部間隙：0.75em；

}

}

“媒體（大寬度：740px）{

.cta {顯示：無；}

#等信息{寬度：100%；}

}

這是你最棒的CSS代碼，四個關鍵的事情。1）將你的頭信息，CTA，和次級菜單為三欄布局（每一個33.3%的寬度）。2）將頭信息的頂部欄的右邊欄，CTA的中間，和次級菜單左邊（這個菜單是目前活躍但如果你決定要用它的存在）。3）它的風格你的CTA。4）為移動設備優化的頂桿。

是這么回事！

現在你的頂桿完成動作優雅的電話。

最后的想法

在決定這頂桿的結構時，我以為它嵌合在沒有它的離開是為了站出來為用戶看到的內容自然閱讀時從左至右第一件事中心CTA。

另外，你可能需要調整每個頂端部分的寬度在自定義CSS使您的CTA更多空間。我試圖保持它的情況下，你想保持的頭信息的全部功能和二級菜單的小例子。

當然，有不同的方式來使用這個空間以外的CTA。你可以用它來顯示一個標語、標識/圖形，或一個簡短的言詞。

標題名稱：成都網站建設：二級菜單欄的定制與開發的想法
文章地址：http://m.newbst.com/news47/323347.html

成都網站建設公司_創新互聯，為您提供建站公司、網站設計公司、定制網站、域名注冊、網站內鏈、虛擬主機

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯