網(wǎng)站制作

Website development

二級菜單欄的定制與開發(fā)的想法

發(fā)布時(shí)間：2017-02-09 09:22:29

Customizing Divi’s Secondary Menu Bar with A Call to Action

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

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

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

那我們就開始吧

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

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

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

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

造型的次級菜單欄

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

充分寬度：是的

文字大?。?4px

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

背景顏色：# eb593c

下拉菜單背景顏色：# eb593c

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

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

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

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

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

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

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

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

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

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

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

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

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

后的潤色

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

#頂級頭.container {

墊上：1.3em；

字體加粗：六百；

底部間隙：0.75em；

}

#等信息{

寬度：33.3%；

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

水平對齊：正確的；

}

.cta {

寬度：33.3%；

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

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

頂緣：- 3px；

}

.cta {

背景：# FFF；

顏色：#eb593c！重要的；

襯墊：5px10px；

顯示直列：塊；

WebKit的邊界半徑：3px；

-moz邊界半徑：3px；

邊界半徑：3px；

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

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

}

.cta {：懸停

背景：# 555；

顏色：# FFF！重要的；

}

# ET（secondary -菜單

寬度：33.3%；

浮動(dòng)：左邊；

水平對齊：左邊；

}

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

#等信息{

寬度：50%；

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

水平對齊：正確的；

}

.cta {

寬度：50%；

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

浮動(dòng)：左邊；

頂緣：- 3px；

}

#等信息{

墊上：0px；

底部間隙：0.75em；

}

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

.cta {顯示：無；}

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

}

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

是這么回事！

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

后的想法

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

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

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

原創(chuàng)不易，未經(jīng)授權(quán)，嚴(yán)禁轉(zhuǎn)載

原文地址：http://www.mpian.cn/i,72,7086,0.html

上一篇：考慮建立你的投資組合網(wǎng)站的時(shí)候

下一篇：紋理網(wǎng)頁設(shè)計(jì)的狀態(tài)

您還有可能感興趣的內(nèi)容

建站流程

Website development

網(wǎng)站需
求分析
網(wǎng)站策
劃方案
頁面風(fēng)
格設(shè)計(jì)
程序設(shè)
計(jì)研發(fā)
資料錄
入優(yōu)化
確認(rèn)交
付使用
后續(xù)跟
蹤服務(wù)
+86 10 64758810
18510861135

熱門標(biāo)簽

Website development

客戶評價(jià)

更多+

感謝云智互聯(lián)，系統(tǒng)提前完成，在整個(gè)項(xiàng)目周期內(nèi)，云智互聯(lián)對待我們并不像是對待客戶，更像是朋友一樣，每一次，都能以專業(yè)的角度向我們提出更合理、更有效的解決方案，并快速、細(xì)致地完成我們的每一個(gè)需求，再次感謝以至誠之心做事的云智互聯(lián)團(tuán)隊(duì)。

潘濤
我是東方龍馬集團(tuán)，在云智家做了2個(gè)企業(yè)官網(wǎng)，服務(wù)態(tài)度超級好。如果想做網(wǎng)站，選擇他家一定不后悔。性價(jià)比高，服務(wù)態(tài)度好。值得你的信賴！

譚嬌
技術(shù)好，設(shè)計(jì)精良，操作便利，很專業(yè)！配套的服務(wù)和后續(xù)的服務(wù)都很好,網(wǎng)站封面堪稱精品，運(yùn)行方便，后臺(tái)操作的簡單。技術(shù)還會(huì)耐心教我,很好的云智互聯(lián)（北京）科技有限公司，建站很不錯(cuò)的。

陳曦
不錯(cuò)，價(jià)格比較合適，重點(diǎn)是響應(yīng)速度蠻快，有什么問題都會(huì)馬上給你解決，公司很滿意，因?yàn)樗麄兌际轻槍γ總€(gè)項(xiàng)目建了相應(yīng)的討論組，有問題可以再里面提出，人員分工到位，解決問題很及時(shí)。

張經(jīng)理