成都網(wǎng)站建設(shè)：二級菜單欄的定制與開發(fā)的想法

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

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

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

那我們就開始吧

實施設(shè)計與分欄

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

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

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

造型的次級菜單欄

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

充分寬度：是的

文字大小：14px

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

背景顏色：# eb593c

下拉菜單背景顏色：# eb593c

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

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

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

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

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

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

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

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

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

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

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

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

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

最后的潤色

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

#頂級頭.container {

墊上：1.3em；

字體加粗：六百；

底部間隙：0.75em；

}

#等信息{

寬度：33.3%；

浮動：正確的；

水平對齊：正確的；

}

.cta {

寬度：33.3%；

水平對齊：機構(gòu)；

浮動：正確的；

頂緣：- 3px；

}

.cta {

背景：# FFF；

顏色：#eb593c！重要的；

襯墊：5px10px；

顯示直列：塊；

WebKit的邊界半徑：3px；

-moz邊界半徑：3px；

邊界半徑：3px；

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

過渡：全部零點五S；

}

.cta {：懸停

背景：# 555；

顏色：# FFF！重要的；

}

# ET（secondary -菜單

寬度：33.3%；

浮動：左邊；

水平對齊：左邊；

}

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

#等信息{

寬度：50%；

浮動：正確的；

水平對齊：正確的；

}

.cta {

寬度：50%；

水平對齊：機構(gòu)；

浮動：左邊；

頂緣：- 3px；

}

#等信息{

墊上：0px；

底部間隙：0.75em；

}

}

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

.cta {顯示：無；}

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

}

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

是這么回事！

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

最后的想法

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

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

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

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

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

廣告

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