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

如果你正在尋找你的網(wǎng)站帶來(lái)更多的注冊(cè)，提供折扣，或有一個(gè)頁(yè)面，你想指揮交通，這是給你的。我們將努力創(chuàng)建一個(gè)行動(dòng)電話（CTA）是嵌入在分的次級(jí)菜單欄。有一些流行的插件一樣hellobar和Sumome的聰明吧這是專門(mén)捕捉線索。我建議你成為一個(gè)強(qiáng)大的插件，這樣如果你對(duì)以鉛代水平嚴(yán)重。但今天我保持簡(jiǎn)單。

我將向你展示如何添加一個(gè)簡(jiǎn)單的CTA div的頂部欄，沒(méi)有一個(gè)插件的使用。我甚至?xí)嬖V你如何改變分頂級(jí)酒吧元素的位置。誰(shuí)知道呢？你甚至可以使用一些完全獨(dú)特的空間。

那我們就開(kāi)始吧

實(shí)施設(shè)計(jì)與分欄

添加一個(gè)標(biāo)題元素次級(jí)菜單欄

在WordPress的管理員去這→主題Customizer。選擇標(biāo)題和導(dǎo)航→標(biāo)題元素

在標(biāo)題元素，確保選擇顯示的圖標(biāo)是社會(huì)限制和輸入電話號(hào)碼和電子郵件地址的文本框。

造型的次級(jí)菜單欄

現(xiàn)在回到標(biāo)題及導(dǎo)航并選擇自定義次級(jí)菜單欄。更改以下設(shè)置：

充分寬度：是的

文字大小：14px

的TT字體風(fēng)格：（uppercase）

背景顏色：# eb593c

下拉菜單背景顏色：# eb593c

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

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

如果你還沒(méi)有創(chuàng)建一個(gè)子主題，然而，這是一個(gè)好主意，這樣做在開(kāi)始之前你需要更改主題模板文件。點(diǎn)擊這里了解如何添加子主題

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

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

定位DIV的ID”等次級(jí)菜單”。這是包含二級(jí)菜單項(xiàng)的div。

將下面的代碼添加在二級(jí)菜單div：

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

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

你將需要更換標(biāo)簽（#）與您希望用戶訪問(wèn)的頁(yè)面的URL的href屬性當(dāng)他們點(diǎn)擊鏈接的CTA。例如，如果你想推動(dòng)更多的用戶使用您的聯(lián)系頁(yè)面，你會(huì)把URL的網(wǎng)頁(yè)。

而且，一旦你知道你的CTA將，你可以改變文本的“想了解更多…”和鏈接文本“單擊此處”到任何你想要的。記得要短，因?yàn)闆](méi)有太多的工作空間。

現(xiàn)在讓我們來(lái)看你的網(wǎng)站看看頂欄看起來(lái)這么遠(yuǎn)

現(xiàn)在你的頂欄內(nèi)容的地方和需要的造型。你可以添加一些自定義的CSS來(lái)解決這個(gè)。

最后的潤(rùn)色

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

#頂級(jí)頭.container {

墊上：1.3em；

字體加粗：六百；

底部間隙：0.75em；

}

#等信息{

寬度：33.3%；

浮動(dòng)：正確的；

水平對(duì)齊：正確的；

}

.cta {

寬度：33.3%；

水平對(duì)齊：機(jī)構(gòu)；

浮動(dòng)：正確的；

頂緣：- 3px；

}

.cta {

背景：# FFF；

顏色：#eb593c！重要的；

襯墊：5px10px；

顯示直列：塊；

WebKit的邊界半徑：3px；

-moz邊界半徑：3px；

邊界半徑：3px；

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

過(guò)渡：全部零點(diǎn)五S；

}

.cta {：懸停

背景：# 555；

顏色：# FFF！重要的；

}

# ET（secondary -菜單

寬度：33.3%；

浮動(dòng)：左邊；

水平對(duì)齊：左邊；

}

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

#等信息{

寬度：50%；

浮動(dòng)：正確的；

水平對(duì)齊：正確的；

}

.cta {

寬度：50%；

水平對(duì)齊：機(jī)構(gòu)；

浮動(dòng)：左邊；

頂緣：- 3px；

}

#等信息{

墊上：0px；

底部間隙：0.75em；

}

}

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

.cta {顯示：無(wú)；}

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

}

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

是這么回事！

現(xiàn)在你的頂桿完成動(dòng)作優(yōu)雅的電話。

最后的想法

在決定這頂桿的結(jié)構(gòu)時(shí)，我以為它嵌合在沒(méi)有它的離開(kāi)是為了站出來(lái)為用戶看到的內(nèi)容自然閱讀時(shí)從左至右第一件事中心CTA。

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

當(dāng)然，有不同的方式來(lái)使用這個(gè)空間以外的CTA。你可以用它來(lái)顯示一個(gè)標(biāo)語(yǔ)、標(biāo)識(shí)/圖形，或一個(gè)簡(jiǎn)短的言詞。

標(biāo)題名稱：成都網(wǎng)站建設(shè)：二級(jí)菜單欄的定制與開(kāi)發(fā)的想法
文章地址：http://www.js-pz168.com/news47/323347.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、網(wǎng)站設(shè)計(jì)公司、定制網(wǎng)站、域名注冊(cè)、網(wǎng)站內(nèi)鏈、虛擬主機(jī)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)