如何用Elementor設(shè)計(jì)網(wǎng)站頁(yè)頭

時(shí)間：2023-07-03 03:54:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-07-03 03:54:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

如何用Elementor設(shè)計(jì)網(wǎng)站頁(yè)頭： Elementor是Jack老師從事網(wǎng)站設(shè)計(jì)多年一來(lái)遇到過(guò)的最出色的網(wǎng)頁(yè)內(nèi)容編輯器，沒(méi)有之一！那么從今天這篇文章開(kāi)始，Jack老師將會(huì)用一系列的教程文章來(lái)詳細(xì)講解如何用Elementor編輯器來(lái)打造出類(lèi)拔萃的外貿(mào)網(wǎng)站。我們按照網(wǎng)頁(yè)從上往下的布局方式來(lái)對(duì)整個(gè)Elementor建站系列內(nèi)容進(jìn)行撰寫(xiě)，作為網(wǎng)站的頭部?jī)?nèi)容，頁(yè)頭的設(shè)計(jì)也是至關(guān)重要。那么今天這篇文章的內(nèi)容重點(diǎn)就是— 如何用Elementor設(shè)計(jì)網(wǎng)站頁(yè)頭 。

第一步：先安裝Elementor和Elementor Pro這兩個(gè)插件

前者是免費(fèi)的，在Wordpress后臺(tái)的插件安裝中心就可以完成，后者是需要付費(fèi)的，需要先花錢(qián)購(gòu)買(mǎi)再安裝。（當(dāng)然了，如果你的錢(qián)包最近比較瘦但是又想使用Elementor Pro版本的功能，那就去找個(gè)破解版，如果實(shí)在找不到就找Jack老師解決吧。）

第二步：創(chuàng)建網(wǎng)站頁(yè)頭的模板

在Wordpress左側(cè)的菜單欄中點(diǎn)擊“模板”—“添加新模板”（如上圖所示），點(diǎn)擊之后，屏幕上會(huì)出現(xiàn)一個(gè)彈窗，如下圖所示：







在上圖中選擇“模板類(lèi)型”為—“Header”，然后將我們新選擇的這個(gè)Header頁(yè)頭模板命名為“頁(yè)頭”（當(dāng)然，這里的命名是你自己隨意的，阿貓，阿狗都可以，只要你自己不會(huì)混淆就行）。在完成了這兩個(gè)步驟的操作之后，Elementor編輯器會(huì)自動(dòng)將頁(yè)面跳轉(zhuǎn)到它的模板庫(kù)中，如下圖所示：







我們注意到，每個(gè)模板的右上角都有一個(gè)“PRO”的標(biāo)志，這就意味著我們雖然使用的是破解的付費(fèi)版本，但是并不能使用這些付費(fèi)的模板，如果你財(cái)大氣粗那么選擇付費(fèi)激活你的Elementor Pro版本插件即可。（再次說(shuō)明，Jack老師不推薦也不建議大家用破解插件，因?yàn)榭赡軙?huì)存在安全隱患，而且對(duì)插件開(kāi)發(fā)團(tuán)隊(duì)也是一種不尊重！只不過(guò)很多soho剛開(kāi)始起步階段，能夠省一點(diǎn)都是莫大的幫助，希望以后賺錢(qián)了還是能夠夠買(mǎi)付費(fèi)版本回饋一下插件的研發(fā)團(tuán)隊(duì)）

言歸正傳，因?yàn)槟０鍘?kù)中所有的模板都是需要付費(fèi)的，所以這里的模板對(duì)我們就沒(méi)有作用的（當(dāng)然你可以大體的參考一下他們的設(shè)計(jì)風(fēng)格）?？雌饋?lái)用Elementor創(chuàng)建自定義的頁(yè)頭的路子已經(jīng)走不通了，那咋辦？不急，看我們接下來(lái)的操作。

我們點(diǎn)擊右上角的關(guān)閉按鈕去關(guān)閉掉這個(gè)Elementor提供的頁(yè)頭模板庫(kù)，這時(shí)候頁(yè)面上出現(xiàn)了這個(gè)內(nèi)容，如下圖所示：







上圖中區(qū)域1就是我們需要編輯的頁(yè)頭內(nèi)容區(qū)域，區(qū)域2是可以讓我們使用的編輯頁(yè)頭內(nèi)容的元素，箭頭所指的橢圓部分“Content Area”可以視作為一個(gè)分隔線，上面部分是頁(yè)頭，下面部分是頁(yè)面的主體內(nèi)容。那么我們今天就是要重點(diǎn)對(duì)區(qū)域1進(jìn)行編輯操作。

第三步：對(duì)頁(yè)頭的logo和站點(diǎn)標(biāo)題內(nèi)容進(jìn)行編輯

首先，我們需要先考慮一個(gè)問(wèn)題，在頁(yè)頭的編輯版塊上我們要放置哪些內(nèi)容？

常見(jiàn)的內(nèi)容有：網(wǎng)站logo，網(wǎng)站標(biāo)題，網(wǎng)站的主菜單，網(wǎng)站的搜索框等等，索性這些東西都不用我們自己去寫(xiě)代碼，Elementor編輯器已經(jīng)為我們封裝好了相關(guān)功能，我們只需要拖動(dòng)上圖區(qū)塊2中相關(guān)元素到區(qū)塊1中進(jìn)行處理即可。假設(shè)我們要做這樣一個(gè)頁(yè)頭，那么根據(jù)事先的規(guī)劃，我們需要先將頁(yè)頭的整個(gè)版塊分成3個(gè)部分的布局，那么接下來(lái)我們繼續(xù)進(jìn)行操作







按照上圖的兩個(gè)操作步驟，我們就將頁(yè)頭版塊平均劃分成了三個(gè)部分，腦子轉(zhuǎn)的快的同學(xué)可能會(huì)說(shuō)平均分配，那如果其中某個(gè)板塊，特別是首頁(yè)主菜單的內(nèi)容需要占據(jù)的寬度比較多，那咋辦？別急！Elementor編輯器提供了兩個(gè)方案給大家去處理一個(gè)大內(nèi)容板塊下幾個(gè)小內(nèi)容板塊的寬度占比的問(wèn)題。

版塊寬度調(diào)整方法一：

先點(diǎn)擊上圖中的1然后在箭頭所指的2，也就是欄寬度數(shù)值框中填入你想要的寬度百分百（直接填數(shù)字，不用加%符號(hào)）。注意這個(gè)數(shù)值不是一經(jīng)寫(xiě)入就固定不變的，后期你可以對(duì)不滿意的寬度進(jìn)行數(shù)值調(diào)整。

版塊寬度調(diào)整方法二：

這個(gè)方法就很簡(jiǎn)單了，用鼠標(biāo)靠近兩個(gè)子版塊的分隔線，然后用鼠標(biāo)進(jìn)行拖動(dòng)即可，我們可以從上圖中看到，隨著我們鼠標(biāo)的拖動(dòng)，兩個(gè)版塊占頁(yè)頭版塊之間的寬度比例會(huì)實(shí)時(shí)的變動(dòng)，這樣的設(shè)置能夠讓我們更加直觀的將我們需要的子版塊寬度值設(shè)定到我們需要的寬度。從這種小細(xì)節(jié)上就能夠看出Elementor的開(kāi)發(fā)團(tuán)隊(duì)確實(shí)是在用心做事！

言歸正傳，我們繼續(xù)來(lái)操作頁(yè)頭的內(nèi)容設(shè)計(jì)操作。

首先，我們先將網(wǎng)站logo和網(wǎng)站的標(biāo)題放到第一個(gè)子內(nèi)容版塊中，注意，網(wǎng)站logo和網(wǎng)站的標(biāo)題需要事先上傳。

網(wǎng)站的logo需要在“外觀”—“自定義”中的進(jìn)行上傳，網(wǎng)站的標(biāo)題需要在“設(shè)置”—“常規(guī)”中進(jìn)行修改（因?yàn)檫@兩部分不是今天的核心內(nèi)容，所以這里Jack老師不展開(kāi)實(shí)操講解，在后續(xù)的Elementor系列教程中會(huì)詳細(xì)進(jìn)行講解?。?br>
我們將Elementor元素編輯臺(tái)中的Site Logo元素和Site Title分別按住鼠標(biāo)左鍵拖動(dòng)到第一個(gè)子內(nèi)容板塊中，這時(shí)候在頁(yè)頭的編輯版塊中就出現(xiàn)了我們的網(wǎng)站logo和站點(diǎn)標(biāo)題，這里我隨便找了一個(gè)圖片作為網(wǎng)站logo，并為這個(gè)logo配置了一句話作為網(wǎng)站標(biāo)題。注意當(dāng)我們需要將站點(diǎn)標(biāo)題添加到logo的下方的時(shí)候，我們需要拖動(dòng)site title這個(gè)元素然后移動(dòng)到logo的下方，等出現(xiàn)一個(gè)藍(lán)色的占位條的時(shí)候，鼠標(biāo)才能松開(kāi)（如下圖中的左圖所示），否則就會(huì)出現(xiàn)問(wèn)題，拖動(dòng)完成之后，會(huì)出現(xiàn)這樣的一個(gè)局面，如下圖中的右圖所示：







這樣的排版非常難看，我們就需要對(duì)logo和站點(diǎn)標(biāo)題進(jìn)行樣式方面的設(shè)置和修改。

修改項(xiàng)目一：調(diào)整logo的大小







在“圖像”選項(xiàng)中，我們調(diào)整第一個(gè)“寬度”值就夠了，當(dāng)我們拖動(dòng)滑動(dòng)條的時(shí)候，對(duì)應(yīng)的logo就會(huì)實(shí)時(shí)的變換大小，知道出現(xiàn)一個(gè)令我們滿意的尺寸即可。注意，當(dāng)我們更改“寬度”值大小或者拖動(dòng)寬度的滑動(dòng)條的時(shí)候，logo圖片的高度也是同比例放大縮小的，如果你需要有特殊需求，不想高度隨著寬度同比例變大變小，那么在下面的高度選項(xiàng)中進(jìn)行單獨(dú)設(shè)置即可！

如果你想logo的圖片再增加點(diǎn)特殊的“活力”，你可以在上圖右側(cè)的“懸停”項(xiàng)目中進(jìn)行相關(guān)設(shè)定，這里的“懸?！敝傅氖钱?dāng)鼠標(biāo)在前端頁(yè)面上移動(dòng)到該logo位置的時(shí)候，會(huì)出現(xiàn)的一些效果。JACK老師為了進(jìn)行效果說(shuō)明，簡(jiǎn)單的將不透明度設(shè)置為0.1，懸停動(dòng)畫(huà)效果設(shè)置為“Shrink”。這樣當(dāng)我鼠標(biāo)移動(dòng)上去的時(shí)候，會(huì)出現(xiàn)一個(gè)簡(jiǎn)單的“特效”，在文末為會(huì)將這個(gè)效果展示給同學(xué)們。

如果你想要為這個(gè)logo設(shè)置一個(gè)外邊框，那么在“邊框類(lèi)型中”選擇，實(shí)現(xiàn)或者虛線，如果選擇實(shí)線邊框，你還可以在“寬度”和“顏色”中分別設(shè)置外框線的粗細(xì)與顏色。（備注：上圖右側(cè)因?yàn)闆](méi)有選擇邊框線，所以這里沒(méi)有這兩個(gè)屬性選項(xiàng)。）

“邊框半徑”指的是如果剛才我們選擇了實(shí)線或者虛線做為外邊框線，那么默認(rèn)狀態(tài)下，外邊框現(xiàn)的4個(gè)角都是直角，有時(shí)候太過(guò)于鋒銳，看起來(lái)不舒服，你可以設(shè)置邊框半徑為5或者10（這個(gè)數(shù)值隨意調(diào)整），這樣就會(huì)將外邊框線的4個(gè)角設(shè)置為圓角，看起來(lái)更加舒適一些！

接下來(lái)我們對(duì)站點(diǎn)標(biāo)題也就是“site title”進(jìn)行相關(guān)的設(shè)置。







上圖就是我們點(diǎn)擊頁(yè)頭中的site title元素之后出現(xiàn)在Elementor編輯器中的操作界面。我們從左到右分為3個(gè)區(qū)塊進(jìn)行實(shí)操講解。

首先是“標(biāo)題”，點(diǎn)擊“Site Title”之后，會(huì)彈出三個(gè)選項(xiàng)文本框，分別是“之前”、“之后”和“回滾”。因?yàn)檎军c(diǎn)標(biāo)題是默認(rèn)調(diào)用事先我們?cè)凇霸O(shè)置”—“常規(guī)”中添加的站點(diǎn)標(biāo)題，如果我們希望在頁(yè)頭中為站點(diǎn)標(biāo)題額外再添加一些文字內(nèi)容，就可以選擇這里的之前或者之后文本框，輸入你需要添加的文字內(nèi)容。至于這個(gè)“回滾”我也沒(méi)搞懂具體是干嘛的。

“鏈接”指的是單鼠標(biāo)點(diǎn)擊這個(gè)站點(diǎn)標(biāo)題之后跳轉(zhuǎn)的頁(yè)面，默認(rèn)情況下就是“site URL”，也就是我們的默認(rèn)網(wǎng)站首頁(yè)。點(diǎn)擊右邊的“設(shè)置”圖標(biāo)，這時(shí)候會(huì)彈出一個(gè)“鏈接選項(xiàng)”的窗口。里面有兩個(gè)選項(xiàng)可以進(jìn)行操作，分別是“在新窗口中打開(kāi)”和“添加鏈接屬性”。前者很好理解，不過(guò)一般我們都不會(huì)勾選，這個(gè)沒(méi)必要在新窗口中打開(kāi)首頁(yè)了。第二個(gè)難理解一點(diǎn)，所謂的屬性，一般都要成對(duì)出現(xiàn)，類(lèi)似于代碼中的鍵值對(duì)，也就是key=value的樣式。比方說(shuō)rel=dofollow這樣子。這里不建議同學(xué)們?nèi)ミM(jìn)行額外的操作了，以免弄巧成拙！

“尺寸”是指網(wǎng)站標(biāo)題的文字大小，一般我們不再這里進(jìn)行相關(guān)配置，因?yàn)樗恼{(diào)整后結(jié)果不能達(dá)到我們的期望值

“HTML標(biāo)簽”，如果說(shuō)這是你的首頁(yè)頁(yè)頭的話，你可以將它設(shè)置為H1，但是考慮到我們不會(huì)為每一個(gè)頁(yè)面都做專(zhuān)門(mén)的頁(yè)頭，所以這里一般建議用的是H2.

“對(duì)齊”：一般情況下，我們選擇居中對(duì)齊即可。

“文本顏色”：默認(rèn)情況下，字體都黑色（除非你在主題的基礎(chǔ)設(shè)置中將文字顏色的全局設(shè)置為其他顏色），如果你設(shè)置了一個(gè)頁(yè)頭粉紅色的背景，那么搭配黑色站點(diǎn)標(biāo)題文字可能會(huì)不是很協(xié)同，這時(shí)候你可以點(diǎn)擊文本顏色，在色彩選擇區(qū)域選擇你需要的文本顏色，或者填寫(xiě)你需要的十六進(jìn)制顏色數(shù)值代碼。

“排版”這個(gè)功能非常重要，幾乎所有的Elementor中的元素，涉及到字體修改的，都需要在“樣式”中的“排版”功能中進(jìn)行修改。這個(gè)功能我將在下面詳細(xì)講解

“文本陰影”指的是為站點(diǎn)標(biāo)題或者其他文字添加陰影的效果，一般用處不是很大

“混合模式”指的文本主體和文本陰影之間的融合效果，一般情況下，我們選擇系統(tǒng)默認(rèn)樣式即可，沒(méi)必要弄的那么花里胡哨。

現(xiàn)在開(kāi)始講文本的“排版”功能的細(xì)節(jié)：

首先是“字體類(lèi)型”：點(diǎn)擊默認(rèn)之后會(huì)跳出來(lái)很多字體供你選擇，一般我們選擇常規(guī)的就好，比如Arial這種，當(dāng)然你也可以需要選擇自己喜歡的字體。

“尺寸”是設(shè)置字體的大小，有四種調(diào)整大小的單位值可以供我們選擇，分別是PX、EM、REM、VW，我們一般選用前兩個(gè)，Jack老師常用的是px也就是像素。因?yàn)榭梢跃_到1像素，所以這就是為什么我前面說(shuō)不喜歡在區(qū)塊1中的“尺寸”功能去調(diào)整文字大小的根本原因

“重量”指的就是文字的粗細(xì)，數(shù)值從100-900，如果你想設(shè)置最粗，那么用Bold來(lái)設(shè)置文字粗細(xì)即可。

“轉(zhuǎn)換”指的是文字的大小寫(xiě)，有4種選擇，分別是全部字母為大寫(xiě)，全部字母為小寫(xiě)，單詞首字母大寫(xiě)，常規(guī)（也就是你輸入的字母大小寫(xiě)形態(tài)）

“樣式”：指的是字體算法處于斜體狀態(tài)，這個(gè)也沒(méi)什么好說(shuō)的。

“裝飾”：指的是文字的下劃線這些附屬，有上劃線，中劃線（也叫做刪除線），下劃線等幾個(gè)選項(xiàng)。特別是當(dāng)我們?cè)O(shè)置特價(jià)活動(dòng)的時(shí)候，刪除線是我們很好的選擇。

“行高”：指的是站點(diǎn)標(biāo)題文字中的上一行與下一行之間的間距，你可以用px也可以用em來(lái)做單位進(jìn)行設(shè)置。即使你不懂這兩個(gè)單位代表什么意思也沒(méi)關(guān)系，Elementor編輯器都能夠?qū)崟r(shí)的展現(xiàn)你調(diào)整的行間距大小，直到你調(diào)整到自己滿意為止！

“字母間距”：指的就是站點(diǎn)標(biāo)題中每一個(gè)字母之間的距離，和上面的行高是相同的設(shè)置，這里就不再贅述了。

第四步：對(duì)頁(yè)頭的導(dǎo)航菜單內(nèi)容進(jìn)行編輯

4.1拖動(dòng)“Nav Menu”元素到我們一開(kāi)始設(shè)置的三個(gè)子版塊中的中間版塊







事先聲明一下，這個(gè)“Nav Menu”元素是需要我們?cè)诰W(wǎng)站上線創(chuàng)建相關(guān)的頁(yè)面，然后將這些頁(yè)面通過(guò)菜單先自定義一個(gè)菜單才能進(jìn)行展示的，否則你拖動(dòng)該元素到頁(yè)頭上進(jìn)行操作的話是沒(méi)有內(nèi)容顯示的。

4.2“布局”：有三種布局樣式，分別是橫向布局、縱向布局和折疊菜單。一般我們選擇最常見(jiàn)的橫向布局，也就是它這里說(shuō)的“臥式布局”。

4.3“對(duì)齊”：指的是頁(yè)頭導(dǎo)航的對(duì)齊方式，有四種對(duì)齊方式，分別是左對(duì)齊、居中對(duì)齊、右對(duì)齊和兩端對(duì)齊，我們一般選擇”居中對(duì)齊”。

4.4“指針”：指的是當(dāng)鼠標(biāo)移動(dòng)到菜單選項(xiàng)上的時(shí)候出現(xiàn)的效果，一共有4種顯示效果，如下圖所示







根據(jù)自己需要的進(jìn)行選擇即可，我個(gè)人比較喜歡用“背景樣式”，當(dāng)然很多人也不會(huì)刻意在這里進(jìn)行樣式調(diào)整，所以選擇默認(rèn)即沒(méi)有特殊樣式即可！

4.5“動(dòng)畫(huà)”：這個(gè)功能和上面的“指針”功能差不多，功能是當(dāng)鼠標(biāo)移動(dòng)到菜單文字上的時(shí)候，文字本身發(fā)生的動(dòng)態(tài)效果，也是有6種樣式可供選擇，為了節(jié)省文字篇幅，這里就不展開(kāi)講解了。

4.6“子菜單指示器”：指的是主菜單下的二級(jí)菜單表現(xiàn)形式，因?yàn)槲覜](méi)有設(shè)置子菜單，所以這里沒(méi)法進(jìn)行展示，同學(xué)們自己去操作一下即可。

4.7“移動(dòng)下拉菜單”：指的是頁(yè)面顯示器的寬度斷點(diǎn)，有手機(jī)和平板兩個(gè)選項(xiàng)。不過(guò)這里我們不用刻意去進(jìn)行設(shè)置，因?yàn)樵贏stra主題中，我們默認(rèn)使用的是折疊菜單。如果你這里選擇了平板電腦斷點(diǎn)為小于1025像素，那么你就要對(duì)“對(duì)齊位置”、“切換按鈕”和“切換對(duì)齊”這三個(gè)選項(xiàng)進(jìn)行相關(guān)的配置了。

內(nèi)容部分設(shè)置完成之后，我們?cè)俚讲藛蔚臉邮街腥ミM(jìn)行相關(guān)的配置，相關(guān)操作如下

4.8“排版”：排版的文字部分在上面已經(jīng)講過(guò)了，這里不再贅述。我們講一下“Normal”、“Hover”和“Active”這三個(gè)選項(xiàng)。

“Normal”指的是菜單的文字正常顯示的顏色、“Hover”指的是當(dāng)我們鼠標(biāo)移動(dòng)到菜單文字上尚未點(diǎn)擊的時(shí)候，菜單文字顯示的顏色、“Active”指的是當(dāng)我們點(diǎn)擊這個(gè)菜單之后，該菜單文字所顯示的顏色。

4.9“主菜單的距離調(diào)整”，如下圖所示：







上圖中的1/2/3分別對(duì)應(yīng)的是“Horizontal Padding”、“Vertical Padding”和“Space Between”之間的間隙距離調(diào)整。

4.10“dropdown”：指的是下拉菜單的樣式調(diào)整，因?yàn)橄嚓P(guān)操作和主菜單的樣式調(diào)整是大同小異的，所以這里不再贅述！

第五步：對(duì)頁(yè)頭的搜索框功能進(jìn)行編輯

5.1拖動(dòng)搜索框按鈕到版塊中的第三個(gè)子版塊上面

5.2“skin”：指的是搜索框的外在表現(xiàn)形式，有三種選擇，分別是“classic”、“minimal”和“Full Screen”三種，一般常見(jiàn)的是第一和第二種，第三種比較少見(jiàn)，但是效果比較炫酷，如下圖所示：







我個(gè)人比較偏好第三種，但是前兩者還是最常見(jiàn)，同學(xué)們可以自己設(shè)計(jì)的需要進(jìn)行取舍。

5.3“Placeholder”：指的是搜索框的占位符，就是上圖中樣式3效果中的“Search”文字，你可以將預(yù)設(shè)文字設(shè)置成“what are you looking for ？”或者其他的你自己喜歡的預(yù)設(shè)文字。

5.4“Toggle”：指的是這個(gè)搜索圖標(biāo)在搜索框中的相關(guān)設(shè)置，有兩個(gè)屬性

“Alignment”指的是這個(gè)搜索圖標(biāo)在搜索框中靠左、居中、靠右的位置選擇

“size”指的就是這個(gè)搜索圖標(biāo)的尺寸大小

做完了搜索框的內(nèi)容相關(guān)設(shè)置，我們接下來(lái)對(duì)搜索框的樣式進(jìn)行配置

5.5“Overlay Color”：指的是搜索時(shí)候的背景覆蓋顏色，如果同學(xué)們選擇了和Jack老師一樣的樣式3效果，那么上圖中“search”背后的顏色就可以自定義進(jìn)行選擇。我用了黑色作為搜索框的覆蓋背景，然后調(diào)整了背景的不透明度。這樣既能看到一定的頁(yè)面內(nèi)容，也能夠減少頁(yè)面內(nèi)容對(duì)搜索行為的影響。

5.6“normal”和“hover”之兩個(gè)選項(xiàng)修改的是搜索時(shí)候占位符（預(yù)設(shè)文字），以及搜索框的邊框顏色。可以根據(jù)自己需要進(jìn)行配置，一般情況下建議對(duì)這兩者都進(jìn)行顏色配置，以區(qū)分鼠標(biāo)有沒(méi)有點(diǎn)擊到該搜索框上。

5.7“Border Size”：指的是搜索框的邊框線粗細(xì)

5.8“Border Radius”：指的是外邊框線的四個(gè)角圓弧度，數(shù)值越大，邊角越圓潤(rùn)。

5.9“Toggle”：指的是對(duì)這個(gè)搜索圖標(biāo)的相關(guān)調(diào)整，大小、顏色、背景色、邊框、邊框半徑等。同樣也有normal和hover兩個(gè)效果的配置，這里就不展開(kāi)講解了。

做完了以上三個(gè)版塊的內(nèi)容配置之后，我們來(lái)看一下具體的效果，看看哪些地方需要我們進(jìn)行細(xì)節(jié)上的調(diào)整，如下圖所示：







我們看到，logo和主菜單還有搜索功能并沒(méi)有處在同一個(gè)水平線上，而且背景色彩就是一個(gè)純白色顯得很單調(diào)，接下來(lái)，我們對(duì)這兩個(gè)問(wèn)題進(jìn)行細(xì)節(jié)的調(diào)整。

首先來(lái)調(diào)整三個(gè)版塊的位置







如上圖所示操作，我們就能將頁(yè)頭三個(gè)子版塊的內(nèi)容垂直居中對(duì)齊了。接下來(lái)我們對(duì)頁(yè)頭的背景顏色進(jìn)行修改。

還是按照上圖中點(diǎn)擊箭頭所指的1位置，然后在右邊的樣式中進(jìn)行設(shè)置，如下圖所示：







我們可以看到，頁(yè)頭背景可以有4種不同的效果進(jìn)行呈現(xiàn)，分別是單一色彩背景或者圖片背景、漸變色背景、視頻背景和幻燈片背景。接下來(lái)Jacl老師會(huì)操作前三種效果給同學(xué)們進(jìn)行了解。

第一種：純色頁(yè)頭背景(這種是最簡(jiǎn)單也是最常見(jiàn)的頁(yè)頭背景效果)







第二種：圖片做頁(yè)頭背景







這里涉及到的修改項(xiàng)目會(huì)比較多，Jack老師特意沒(méi)有寫(xiě)出來(lái)詳細(xì)的操作過(guò)程，同學(xué)們自己去嘗試操作，如果你會(huì)了這個(gè)操作，說(shuō)明這篇文章你真的很用心再看，也學(xué)會(huì)了相關(guān)的實(shí)操內(nèi)容。

第三種：漸變色做頁(yè)頭背景







到此為止，我們就算是完成了對(duì)網(wǎng)站頁(yè)頭的設(shè)計(jì)，那么是不是整個(gè)操作都完成了呢？別急，我們還有最后的幾個(gè)步驟要完成。







完成上圖的這三個(gè)保存步驟之后，我們才算真正的完成 如何用Elementor設(shè)計(jì)網(wǎng)站頁(yè)頭 的全部操作。全文6700多字，配圖24張，全部是實(shí)操干貨內(nèi)容，基本上的每一個(gè)步驟環(huán)節(jié)都已經(jīng)寫(xiě)的非常詳細(xì)了,同學(xué)們可以直接照著我這個(gè)教程去處理.

如果對(duì)本章內(nèi)容還有不理解的地方，歡迎用百度或者谷歌搜索關(guān)鍵詞---Jack外貿(mào)建站

排名首頁(yè)首位的就是我的網(wǎng)站，網(wǎng)站上有更多免費(fèi)的外貿(mào)建站、谷歌SEO優(yōu)化、外貿(mào)客戶開(kāi)發(fā)等方面的實(shí)操干貨內(nèi)容等著你哦！