Elementor 外貿(mào)建站模板實(shí)例教程

時(shí)間：2023-08-10 21:51:01 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-08-10 21:51:01 來源：網(wǎng)站運(yùn)營(yíng)

Elementor 外貿(mào)建站模板實(shí)例教程： 隨著外貿(mào)建站逐漸成為外貿(mào)客戶開拓的主流渠道，網(wǎng)站前端的UI設(shè)計(jì)和內(nèi)容穿插也越來越受到外貿(mào)建站人員的重視。但受限于代碼編輯的高門檻，特別是javascript這種交互式腳本語(yǔ)言（html和css相對(duì)來說要容易一些），很多沒有或者很少代碼基礎(chǔ)的外貿(mào)人員如果想做一個(gè)自己理想中的完美網(wǎng)站前端頁(yè)面效果就會(huì)感到無從下手。那么今天Jack老師就推薦一款非常強(qiáng)大的wordpress編輯器—Elementor。

正如Elementor官網(wǎng)上所宣傳的那樣，Elementor是世界領(lǐng)先的wordpress頁(yè)面編輯器，目前有400多萬人次使用elementor編輯器來構(gòu)建網(wǎng)站（事實(shí)上，這個(gè)結(jié)果還是太少，很多網(wǎng)站可能用的是破解版沒有到官網(wǎng)進(jìn)行下載，所以沒有被計(jì)入到這個(gè)統(tǒng)計(jì)數(shù)據(jù)中）。

它的三大功能特性分別是：1.一站式管理Web設(shè)計(jì)工作流程的各個(gè)環(huán)節(jié)；2.簡(jiǎn)單，強(qiáng)大，靈活的視覺設(shè)計(jì)功能；3.能夠創(chuàng)建更快的網(wǎng)頁(yè)加載速度的網(wǎng)站。此外它的其他后備功能中也關(guān)聯(lián)了mailchimp等郵件營(yíng)銷功能對(duì)外貿(mào)客戶開發(fā)也是非常有效的。

你以為它的功能就到此為止了嗎？不不不，我們接著往下看，Elementor擁有強(qiáng)大的自定義功能區(qū)塊，可以讓我們自主設(shè)計(jì)頁(yè)眉，頁(yè)腳和站點(diǎn)其他區(qū)域的內(nèi)容；強(qiáng)大的彈窗功能也能夠促進(jìn)你的網(wǎng)頁(yè)有效的降低訪客跳出率從而提升訪客的轉(zhuǎn)化率。

Elementor作為一款優(yōu)秀的頁(yè)面編輯器，自帶有80多種常用的設(shè)計(jì)元素，包括標(biāo)題，文本，幻燈片，社交分享等等（免費(fèi)版本的elementor沒有這么多功能，付費(fèi)版本的設(shè)計(jì)元素非常豐富）。

為了更好的展示Elementor的強(qiáng)大設(shè)計(jì)功能，Jack老師用它自帶的免費(fèi)模板來講解它的相關(guān)功能設(shè)置，以下是具體的實(shí)操內(nèi)容

一.Elementor的模板安裝

創(chuàng)建一個(gè)新的頁(yè)面(這里我為了講解創(chuàng)建了名為“test”的頁(yè)面),點(diǎn)擊使用elementor編輯（Elementor插件的安裝和啟用過程此處省略200個(gè)字，相信優(yōu)秀的同學(xué)們對(duì)此毫無壓力）。然后頁(yè)面會(huì)跳轉(zhuǎn)到如下界面







左側(cè)的區(qū)塊1是Elementor編輯器的”元素”選擇區(qū)域，右邊的區(qū)塊2是網(wǎng)站頁(yè)頭部分，區(qū)塊3是Elementor的元素具體編輯區(qū)域。點(diǎn)擊區(qū)塊3中紅色的加號(hào)按鈕，Elementor會(huì)提供給你很多的塊內(nèi)容排布選項(xiàng)，如下圖所示







這個(gè)區(qū)塊的功能是讓你選擇在一行的空間內(nèi)，具體的內(nèi)容排布，比方說我們要做一個(gè)全寬的banner，那么選擇第一個(gè)就可以，如果我們要做一行內(nèi)放三張圖片，但是中間的那一張我想把它的圖片尺寸做的大一些，那么我們就可以選擇第二行的第三個(gè)塊內(nèi)容設(shè)置。

選擇好對(duì)應(yīng)的塊內(nèi)容排布之后，再拖動(dòng)Elementor元素到對(duì)應(yīng)的塊位置上即可?；氐缴弦粡垐D片的區(qū)塊3中，點(diǎn)擊黑白色的文件夾按鈕，頁(yè)面跳轉(zhuǎn)如下：







在這個(gè)模板庫(kù)中，Elementor給出了三種模板分別是模塊模板，網(wǎng)頁(yè)模板，我的模板。

A.模塊模板是Elementor編輯器對(duì)相關(guān)功能的模塊預(yù)選區(qū)，在這里我將它分隔成了3大塊內(nèi)容。區(qū)塊1是功能篩選區(qū)，里面有“404 Page”，“About”，“Archive”，“Call To Action”，“Clients”，“Contact”……等等一大堆的功能模塊選項(xiàng)，

在區(qū)塊1中選擇對(duì)應(yīng)的模塊，就會(huì)在右邊的模塊預(yù)覽區(qū)中進(jìn)行展現(xiàn)，也就是我上圖標(biāo)注的區(qū)塊2和區(qū)塊3部分。區(qū)塊2和區(qū)塊3本質(zhì)上是一樣的，唯一的不同點(diǎn)在于區(qū)塊3是PRO版本才能夠使用（換句話說使用區(qū)塊3功能模塊的使用前提是你需要購(gòu)買Elementor Pro版本）。在挑選好自己需要的功能模塊之后，點(diǎn)擊插入即可。

B.在自主模板中可以對(duì)需要的模板進(jìn)行編輯保存（因?yàn)樵谶@個(gè)演示網(wǎng)站中Jack老師沒有專門保存過自己做的模板所以這里沒有顯示可供直接插入頁(yè)面的自主模板選項(xiàng)）所以才會(huì)出現(xiàn)上圖中的區(qū)塊1頁(yè)面。

如果你已經(jīng)編輯好了一塊內(nèi)容區(qū)域并且想把該區(qū)塊作為自己的模板保存在模板庫(kù)中，那么在該區(qū)塊中點(diǎn)擊鼠標(biāo)右鍵，然后選擇“Save as a Glabal”點(diǎn)擊保存即可，然后再跳出的區(qū)塊2頁(yè)面中輸入對(duì)應(yīng)的自主模板名稱進(jìn)行保存。




C.頁(yè)面模塊最大的好處就在于同學(xué)們不用花費(fèi)大量精力去研究自己的網(wǎng)站布局，挑選頁(yè)面模板庫(kù)中適合自己網(wǎng)站的模板插入并對(duì)頁(yè)面具體內(nèi)容進(jìn)行改寫和編輯即可。上圖的右上角是模板庫(kù)搜索功能，輸入對(duì)應(yīng)的關(guān)鍵詞即可篩選出自己需要的模板，比方說我要找主頁(yè)模板，那么輸入“Homepage”就會(huì)出現(xiàn)該屬性的所有首頁(yè)模板。為了更好的說明Elementor編輯器的強(qiáng)大功能，那么Jack老師隨機(jī)挑選一個(gè)網(wǎng)頁(yè)模板庫(kù)中的首頁(yè)設(shè)計(jì)模板來進(jìn)行進(jìn)一步的實(shí)操講解。

---

簡(jiǎn)單的來看上圖設(shè)置的內(nèi)容板塊中，主要分為左右兩大部分，其中左邊是視頻內(nèi)容版塊，右邊是文字和按鈕版塊。再?gòu)膬?nèi)容層疊來看，視頻與文字內(nèi)容的后面還有一張背景圖。所以我們接下來的任務(wù)就是將這個(gè)版塊的內(nèi)容逐一解構(gòu)。

1.內(nèi)容的背景圖片設(shè)置

如上圖所示，點(diǎn)擊區(qū)塊1中的紅色添加按鈕，跳出來區(qū)塊2的內(nèi)容，因?yàn)槭切枰故救珜拑?nèi)容，所以我們選擇第一個(gè)全寬內(nèi)容塊。







點(diǎn)擊上圖中的箭頭標(biāo)注的“編輯段”按鈕，頁(yè)面跳轉(zhuǎn)如下







Elementor的每個(gè)塊編輯功能中都有對(duì)應(yīng)的三個(gè)子功能，分別是“布局”，“樣式”，“高級(jí)設(shè)置”。為了讓同學(xué)們更好的理解這些功能與頁(yè)面前端表現(xiàn)效果之間的聯(lián)系，下面我們逐一的來對(duì)這些子功能以及子功能下面的每個(gè)小項(xiàng)目進(jìn)行實(shí)操講解

A.布局

1.拉伸段：它的功能是讓該區(qū)塊的內(nèi)容以拉伸的形式展現(xiàn)在前端，特別是我們需要做全寬banner的時(shí)候一定要點(diǎn)擊這里的拉伸段后面對(duì)應(yīng)的“是”，否則前端展現(xiàn)的圖片是全局設(shè)置寬度或者自己設(shè)定的圖片原始寬度

2.內(nèi)容寬度：這里提供了2個(gè)選項(xiàng)，分別是“方框”和“全寬度”，如果選擇了方框那么可以拖動(dòng)方框下面的滑動(dòng)條來自定義設(shè)置自己需要的塊內(nèi)容寬度。比方說我想做一個(gè)1行兩列的內(nèi)容，左邊放視頻，右邊放文字，視頻和文字區(qū)塊的內(nèi)容都是500px，那么我就可以將滑動(dòng)條拖動(dòng)設(shè)置成1000px，然后再后面的具體內(nèi)容編輯中，再選擇一個(gè)50/50的內(nèi)容版塊模板進(jìn)行內(nèi)容投放即可。如果我們選擇全寬度那么就是整個(gè)屏幕的寬度。

3.欄間距：有時(shí)候我們做的一個(gè)全寬內(nèi)容塊可能放的不是一張完整的圖片，也有可能是4個(gè)獨(dú)立的圖片，那么4張彼此獨(dú)立的圖片之間最好用一定寬度的間隙隔開開體現(xiàn)彼此之間的獨(dú)立性，這時(shí)候在欄間距的功能中提供了6種不同的選擇，分別是“默認(rèn)”，“沒有間隙”，“窄”，“擴(kuò)展”，“寬”，“寬闊”。這樣就能夠讓4張圖片彼此之間的間隙從小到大進(jìn)行設(shè)置。

4.“高度”：高度指的是該區(qū)塊的顯示高度，Elementor也給出了3種不同的高度設(shè)置選項(xiàng)，分別是“默認(rèn)”，“適應(yīng)屏幕”和“最小高度”，至于如何選擇，就要看同學(xué)們?cè)诰唧w的編輯過程中對(duì)前端效果的展示要求了

5.“Vertical Align垂直對(duì)齊”：它的功能是該區(qū)塊中的相關(guān)內(nèi)容在垂直排布上的對(duì)其方式，有7中垂直對(duì)齊選項(xiàng)，分別是“默認(rèn)”，“頂部對(duì)齊”，“中間對(duì)齊”，“底部對(duì)齊”，“之間的間距對(duì)齊”，“空間圍繞”，“均勻分布”

6.“Overflow溢出處理”：某些情況下圖片或者其他相關(guān)內(nèi)容可能會(huì)超出預(yù)設(shè)的塊空間范圍，這時(shí)候就內(nèi)容溢出處理，Elementor給出的處理方式有兩種，一種是默認(rèn)，另外一種是隱藏溢出內(nèi)容，只顯示包含在塊內(nèi)容區(qū)域部分的內(nèi)容

7.Html標(biāo)簽：在之前的教程中，Jack老師和同學(xué)們有講到過Html是一種超文本編輯語(yǔ)言。它里面的相關(guān)內(nèi)容很多以標(biāo)簽的形式出現(xiàn)。比方說文字段落，我們最常用的是以<p>…</p>來進(jìn)行處理。在這里Elementor給出了9種html標(biāo)簽，分別是“默認(rèn)”，“div塊”，“header頭部”，“footer腳部”，“main全局屬性”，“article文章”，“section章節(jié)或者段落”，“aside旁白，

也就是說該標(biāo)簽告訴谷歌搜索引擎這部分內(nèi)容和主體沒有關(guān)系”，“nav導(dǎo)航屬性”。這些html標(biāo)簽設(shè)置在前端頁(yè)面效果中并不會(huì)展示出來，只是為了更好的讓谷歌搜索引擎了解你的這個(gè)頁(yè)面是由哪些部分構(gòu)成的，這對(duì)于谷歌SEO優(yōu)化也是非常重要的

A.結(jié)構(gòu)

結(jié)構(gòu)的代表含有就是該區(qū)塊所占屏幕寬度的比值，因?yàn)榍懊嫖覀冊(cè)O(shè)置的是全寬拉伸區(qū)塊，所以這里顯示的就是100%寬度。此外在頁(yè)面的全局設(shè)置中也有對(duì)這個(gè)功能的相關(guān)設(shè)置，有興趣的同學(xué)可以自行去研究一下，因?yàn)檫@個(gè)不是本篇文章的講述重點(diǎn)，所以此處省略500字（事實(shí)上是Jack太懶了，不想碼字，哈哈）

B.樣式

樣式功能一共分為5個(gè)子功能版塊，分別是“背景”，“背景覆蓋”，“邊框”，“形狀分隔線”，“排版”，接下來我們逐一對(duì)這些功能進(jìn)行詳細(xì)講解

1.“背景”：背景中有兩種處理方式，分別是標(biāo)準(zhǔn)和懸停，我們先來看標(biāo)準(zhǔn)背景。在標(biāo)準(zhǔn)背景中，Elementor給出了4種不同的背景展現(xiàn)形式，分別是“經(jīng)典圖片”，“漸變色”，“視頻”，“幻燈片放映”。同學(xué)們還記得最開始我說的背景圖片設(shè)置嗎?對(duì)的，就是在經(jīng)典圖片板塊中進(jìn)行設(shè)置。







在我們最開始插入的頁(yè)面模板中，我們可以看到除了底部背景圖片外，還有一層半透明的顏色隔離層，所以等會(huì)我們會(huì)用到“背景覆蓋”這項(xiàng)功能，那么在這里的經(jīng)典背景圖片設(shè)置中，就無需對(duì)上圖區(qū)塊1中的“顏色”功能進(jìn)行額外設(shè)置了，只需要在區(qū)塊2中的“圖像”功能中點(diǎn)擊添加對(duì)應(yīng)的背景圖片即可。

細(xì)心的同學(xué)可能還會(huì)發(fā)現(xiàn)在區(qū)塊2中圖像的右邊還有個(gè)動(dòng)態(tài)功能設(shè)置，這里的動(dòng)態(tài)圖片有三種選項(xiàng)可供選擇，分別是“特色圖片”，“l(fā)ogo”和“作者頭像”。當(dāng)我們選中一張背景圖片之后，Elementor編輯器還會(huì)給出對(duì)應(yīng)的圖片設(shè)置選項(xiàng)，分別是位置，附件，重復(fù)，尺寸。

需要注意的是，在附件功能中，如果我們選擇的是“固定”設(shè)置，那么該功能只能在PC端使用，移動(dòng)端是體現(xiàn)不出這個(gè)功能的效果的。順便說一下，附件有固定和卷動(dòng)兩種對(duì)應(yīng)的背景圖片展現(xiàn)方式，固定是指當(dāng)我們鼠標(biāo)滾輪滑動(dòng)的時(shí)候，底部的內(nèi)容不斷的向上出現(xiàn)，這時(shí)候背景圖片是不會(huì)發(fā)生移動(dòng)的，只不過是會(huì)被底部?jī)?nèi)容不斷的覆蓋掉。

如果選擇的是卷動(dòng)功能，那么該背景圖片是隨著鼠標(biāo)滾輪不斷的在頁(yè)面前端上下移動(dòng)。“重復(fù)”功能有4個(gè)選項(xiàng)，但是Jack老師用了一張全寬圖片來做背景圖片所以這里的4種重復(fù)效果并不會(huì)出現(xiàn)，有興趣的同學(xué)可以選擇一張較小尺寸的圖片作為背景進(jìn)行效果測(cè)試。

“尺寸”就是對(duì)這種背景圖片的前端頁(yè)面具體展示大小的設(shè)定，除了常用的自動(dòng)，覆蓋，包含（這三者是相對(duì)于塊區(qū)域大小來說的），還有自定義尺寸，拖動(dòng)滑條來顯示該背景圖片的實(shí)際顯示大小。

這時(shí)候會(huì)出現(xiàn)一個(gè)問題，當(dāng)整個(gè)區(qū)塊用一張圖片的時(shí)候，默認(rèn)寬度值是100%，拖動(dòng)滑條將該數(shù)值變小之后，那么會(huì)不會(huì)出現(xiàn)因?yàn)閳D片寬度小于內(nèi)容塊寬度導(dǎo)致的頁(yè)面部分空白問題呢？答案是否定的，Elementor會(huì)自動(dòng)的對(duì)空白區(qū)域進(jìn)行填充，從而出現(xiàn)該內(nèi)容區(qū)塊出現(xiàn)多張完全相同的背景圖片的情況，有點(diǎn)類似于照片墻的效果。

“Scrolling Effects滾動(dòng)效果”，這個(gè)功能包含7個(gè)子功能，分別是“Vertical Scroll垂直滾動(dòng)”，“Horizontal Scroll水平滾動(dòng)”，“Transparency透明度”，“Blur模糊度”，“scale層級(jí)”，“Apply Effects On在什么界面顯示效果，指的是PC，Ipad，手機(jī)”，“Effects relative to效果對(duì)比”.

a.“Vertical Scroll垂直滾動(dòng)”：有兩種滾動(dòng)方式，一種是從上往下，另外一種是從下往上滾動(dòng)，此外在speed選項(xiàng)中還能夠填入對(duì)應(yīng)的滾動(dòng)數(shù)值，數(shù)值越大滾動(dòng)速度越快，“viewport視覺窗口”指的是該背景圖片從上往下或者從下往上滾動(dòng)的時(shí)候的展示范圍占整個(gè)圖片區(qū)塊高度的大小，通過滑動(dòng)條能夠調(diào)節(jié)從底部到頂部的高度范圍。如果不需要該背景圖片滾動(dòng)加載，那就不要對(duì)這些設(shè)置進(jìn)行更改。

b.“Horizontal Scroll水平滾動(dòng)”：和上面的垂直方向滾動(dòng)一樣，這個(gè)是對(duì)水平方向的背景圖片滾動(dòng)設(shè)置，具體操作和垂直滾動(dòng)一致，只不過是方向不同而已

c.“Transparency透明度”：這個(gè)就更好理解了就是該背景圖片的透明度，有些背景圖片色系很深，為了避免喧賓奪主影響到背景圖片上方的內(nèi)容，所以在這里可以將背景圖片設(shè)置的透明一些?！癉irection”是指它的方向，分別有“fade in out淡入淡出”，“fade out淡出”，“fade out in”和“fade in out”四種透明度選擇方式（老實(shí)說我也被這四個(gè)不同方式搞蒙圈了）.“Level”是指背景圖片的透明度等級(jí)，級(jí)別越高越透明，前端頁(yè)面能看到的背景圖片就越不清楚。

d.“Blur模糊度”：是指背景圖片的模糊程度，和上一小點(diǎn)中的透明度功能不同，它不改變圖片的色系深度，只改變背景圖片的模糊程度。根據(jù)我個(gè)人的判斷它采用的是高斯模糊的模糊處理辦法。同樣的level對(duì)應(yīng)的數(shù)值越高，背景圖片越模糊。

e.“Apply Effects On”：在什么界面顯示效果，默認(rèn)情況下Desktop電腦桌面，tablet平板電腦，Mobile手機(jī)三者都顯示，如果你不希望在手機(jī)端出現(xiàn)，那么將“Mobile”前面的×點(diǎn)一下就可以了。

f.“Effects relative to”：有3種不同選項(xiàng)，分別是“default默認(rèn)”，“viewport視區(qū)”，”entire page整個(gè)頁(yè)面”，也就是說根據(jù)這三個(gè)不同選項(xiàng)可以將該背景頁(yè)面出現(xiàn)在該內(nèi)容區(qū)塊還是整個(gè)頁(yè)面。

2.背景覆蓋

背景覆蓋主要有兩大方面內(nèi)容，分別是“標(biāo)準(zhǔn)”和“懸?！?，我們先來看標(biāo)準(zhǔn)功能

a.在標(biāo)準(zhǔn)功能中給出了背景覆蓋的兩種方式，一種是“經(jīng)典”，另外一種是“漸變色”?！敖?jīng)典”中又有兩種方式，一種是純顏色內(nèi)容覆蓋，另外一種是圖片覆蓋。如果是純顏色內(nèi)容覆蓋，那么用拾色器點(diǎn)選自己需要的顏色或者輸入自己想要顏色的16進(jìn)制顏色數(shù)值即可。如果選擇圖片覆蓋，那么上傳活圖片或者選擇媒體庫(kù)中已經(jīng)存在的圖片進(jìn)行覆蓋即可。

注意：純顏色背景覆蓋和圖片背景覆蓋是可以同時(shí)存在的，這樣的情況下，在該區(qū)塊中就有了3層內(nèi)容的疊加，分別是背景圖片，純顏色背景覆蓋，圖片背景覆蓋。

此外，在設(shè)置好純顏色圖片和覆蓋圖片后，我們還可以通過對(duì)背景覆蓋功能下的“位置”，“附件”，“重復(fù)”，“不透明度”對(duì)這兩者進(jìn)行變換和設(shè)置，出現(xiàn)一種畫中畫的效果，需要指出的是“width”功能只能對(duì)圖片覆蓋起效果，對(duì)純顏色圖片覆蓋內(nèi)容沒有作用。

“CSS Filters”是指色彩效果，類似于photoshop中的色相/飽和度調(diào)整，我們可以對(duì)其下屬的“Blur模糊”，“Brightness亮度”，“contrast對(duì)比”，“satruation飽和度”，“hue色度”進(jìn)行相關(guān)的調(diào)節(jié)。讓前端頁(yè)面的效果更加豐富多彩！

“Blend Mode混合模式”指的是背景圖片和背景覆蓋內(nèi)容的多圖層之間的混合效果，這個(gè)功能也和photoshop功能類似，Elementor插件為此提供了多大10種圖層混合模式，這里我就不一一例舉了，沒太大意義，同學(xué)們有需要的時(shí)候再去逐一調(diào)試吧。一般情況下標(biāo)準(zhǔn)模式就足夠我們用了。

“漸變色”相比標(biāo)準(zhǔn)功能會(huì)稍微簡(jiǎn)單一些，我們先選取好兩個(gè)顏色，分別是為主要顏色和次要顏色。漸變色功能主要提供了兩種一種是線性漸變，另外一種是徑向漸變。如果是線性漸變，那么主色在上輔色在下；如果是徑向漸變，那么主色調(diào)在圓心，輔色調(diào)在周圍。其中主色的“位置”調(diào)整的是主色調(diào)在整個(gè)背景覆蓋區(qū)域中的幅面占比，其數(shù)值越高，所占幅面越大，于此相對(duì)的是輔色調(diào)的”位置”,它剛好和主色調(diào)是相反的，其數(shù)值越高所占的篇幅越小。兩者呈現(xiàn)一種彼進(jìn)此退的相互關(guān)系。

“角度”指的是線性漸變的兩種顏色融合角度，取值范圍是0-360度，有photoshop的同學(xué)對(duì)這方面應(yīng)該很好理解，如果選擇的是徑向漸變，那么就不會(huì)出現(xiàn)這個(gè)角度功能，有些同學(xué)可能會(huì)問為什么？Jack老師只能回答你—地球是圓的！

“不透明度”是指漸變色背景覆蓋圖層的取值范圍從0-1，0代表的是沒有覆蓋，1代表的是完全覆蓋，通過調(diào)節(jié)這個(gè)取值范圍，能夠讓半透明的背景覆蓋圖層完美的覆蓋在背景圖片上。

CSS Filters和Blend Mode就不說了，在上面的標(biāo)準(zhǔn)模式中已經(jīng)有說過是，色彩和圖片融合的調(diào)節(jié)功能，此處不再贅述。

說完了背景覆蓋的標(biāo)準(zhǔn)模式，那么我們?cè)賮碚f一下背景覆蓋的懸停模式。懸停模式也有標(biāo)準(zhǔn)和漸變色兩種功能可供選擇。這里的懸停特制的是當(dāng)鼠標(biāo)移動(dòng)到該背景覆蓋區(qū)域，會(huì)出現(xiàn)特定的圖片或者純屬圖片內(nèi)容。需要注意的是，懸停的背景覆蓋圖片和純色背景覆蓋圖片有且僅有一個(gè)能夠出現(xiàn)在背景圖片上方，不可以同時(shí)出現(xiàn)。

“不透明度”在之前的標(biāo)準(zhǔn)背景覆蓋圖片設(shè)置中已經(jīng)說的很清楚了這里不再詳細(xì)說明，但是“過渡時(shí)間”需要講解一下，過渡時(shí)間指的是當(dāng)鼠標(biāo)移動(dòng)到該背景覆蓋圖片區(qū)域的時(shí)候，該懸停效果從開始出現(xiàn)到最終定型的整個(gè)過程時(shí)間，設(shè)置的數(shù)值越大，代表該過程實(shí)現(xiàn)的時(shí)間越久，最長(zhǎng)時(shí)間是3秒鐘！

懸停功能中也有漸變色背景圖片覆蓋的效果，功能和上面的標(biāo)準(zhǔn)背景圖片覆蓋完全一樣，此處省去若干字，以免我打字多了手抽筋。

3.邊框

邊框功能也分為標(biāo)準(zhǔn)和懸停兩個(gè)子功能模塊，我們先來說邊框的標(biāo)準(zhǔn)模塊

在標(biāo)準(zhǔn)邊框模塊中，Elementor編輯器給出了6種常見的邊框類型，分別是“無邊框”，“實(shí)線邊框”，“雙實(shí)線邊框”，“圓點(diǎn)邊框”，“虛線邊框”和“溝槽邊框”

“寬度”和“顏色”是對(duì)邊框的具體設(shè)置，“邊框半徑”是指該背景區(qū)塊或者說該整體內(nèi)容塊的四個(gè)角從直角轉(zhuǎn)變?yōu)閳A形棱角的過程，數(shù)值越大，4個(gè)邊角越大，最終會(huì)呈現(xiàn)出一個(gè)學(xué)校操場(chǎng)跑道的界面效果。這時(shí)候背景和背景覆蓋內(nèi)容只能出現(xiàn)在邊框內(nèi)部，其余的部分均以空白內(nèi)容的形式進(jìn)行顯示。

“盒子影子”指的就是該內(nèi)容區(qū)塊的陰影，分別有“水平陰影”，“垂直陰影”，“陰影模糊”，“陰影擴(kuò)散”4個(gè)不同的子功能選項(xiàng)。前兩者是指陰影的出現(xiàn)方位，拖動(dòng)滑竿可以出現(xiàn)在塊內(nèi)容的上下左右?！瓣幱澳：笔侵笇㈥幱安糠忠欢ǔ潭鹊能浕瓣幱皵U(kuò)散”是指對(duì)該區(qū)塊陰影的四面八方擴(kuò)散范圍大小.

“懸停邊框”和之前的覆蓋背景功能差不多，只有當(dāng)鼠標(biāo)移動(dòng)到該區(qū)域的時(shí)候，懸停邊框效果才會(huì)顯現(xiàn)，否則只出現(xiàn)標(biāo)準(zhǔn)邊框功能的效果。這樣的情況下，當(dāng)我們?cè)跇?biāo)準(zhǔn)邊框模式中如果設(shè)置的邊框半徑為0，整個(gè)背景圖片是以完整的四方形來展示，如果我們將懸停邊框的邊框半徑設(shè)置了一個(gè)比較大的值，比方說2000px，那么就會(huì)出現(xiàn)一個(gè)有趣的現(xiàn)象。

當(dāng)鼠標(biāo)移動(dòng)到該區(qū)域，背景圖片是呈現(xiàn)一個(gè)類似學(xué)校操場(chǎng)跑道的效果，和鼠標(biāo)不移動(dòng)到該區(qū)域的前端展示效果是完全不一樣的,如果再搭配了過渡時(shí)間為最大值3秒鐘，那么前端頁(yè)面的展現(xiàn)效果就變動(dòng)非常有意思了！

4.形狀分隔線

形狀分隔線是Elementor編輯器自帶的一個(gè)非常有意思的分隔功能，一般的編輯器只能以橫線或者其他圓點(diǎn)來進(jìn)行分隔。當(dāng)Elementor之所以出色就是因?yàn)檫@些小細(xì)節(jié)的地方做的非常到位。想知道更多有趣的形狀分隔線內(nèi)容嗎？偏不告訴你，同學(xué)們自己去摸索，這部分內(nèi)容算做彩蛋，留待大家去獲取這份驚喜！

5.排版

排版主要是指該區(qū)塊內(nèi)容的核心部分，而不是指背景圖或者背景覆蓋圖。有5個(gè)子功能模塊，分別是“標(biāo)題顏色”，“文本顏色”，“鏈接顏色”，“鏈接懸停顏色”，”文本對(duì)齊”。前兩者很好理解，

這說一下鏈接顏色，當(dāng)我們想把標(biāo)題或者文本中的某些文字做錨文本鏈接的時(shí)候，如果設(shè)置了鏈接顏色，那么此前的標(biāo)題顏色和文本顏色就會(huì)相對(duì)應(yīng)的變成鏈接顏色所設(shè)定的顏色，而不再是之前設(shè)置的顏色。如果你還想進(jìn)一步引起訪客的注意，那么可以對(duì)已經(jīng)添加鏈接的文字設(shè)置鏈接懸停顏色，

這樣做的效果是，當(dāng)鼠標(biāo)沒有移動(dòng)到該錨文本上的時(shí)候，顯示的是鏈接顏色，當(dāng)鼠標(biāo)移動(dòng)到該錨文本上顯示的是預(yù)設(shè)的鏈接懸停顏色，通過顏色差的變化來提醒或者說引起訪客點(diǎn)擊的欲望。文本對(duì)齊就沒什么好說的了，這個(gè)對(duì)齊和標(biāo)題，文本中的對(duì)其不沖突，哪一個(gè)設(shè)置的最后，以哪一個(gè)為準(zhǔn)，相對(duì)的來說，它的功能是指該區(qū)塊下的所有文本內(nèi)容的統(tǒng)一對(duì)齊方式。
C.高級(jí)設(shè)置

高級(jí)設(shè)置版塊有5個(gè)子功能區(qū)塊，分別是“高級(jí)設(shè)置”，“motion effects移動(dòng)效果”，“響應(yīng)”，“attributes屬性”，“custom CSS定制css樣式表 ”。我們逐一來看一下這些相關(guān)子功能的具體操作。

1.“高級(jí)設(shè)置”：首先是對(duì)該內(nèi)容區(qū)塊的內(nèi)外距離進(jìn)行設(shè)置，也就是我們常說的CSS代碼中的”padding”和”border”屬性值設(shè)置，每個(gè)屬性值都有上下左右四個(gè)方向可以統(tǒng)一或者獨(dú)立設(shè)置邊界距離。

“Z-指數(shù)”這個(gè)功能我也沒有搞明白，應(yīng)該是對(duì)應(yīng)下面的兩個(gè)CSS選擇器來講的。CSS ID指的是css代碼中的id選擇器，CSS 類指的是css代碼中的類選擇器。這兩者的區(qū)別在于，類選擇器可以同時(shí)選擇多個(gè)同類標(biāo)簽內(nèi)容，而id選擇器每次只能選擇一個(gè)標(biāo)簽內(nèi)容。下面我用兩段代碼來大體的講述一下這兩者的區(qū)別：

ID選擇器：<p id=”abc”>這是一段演示文字</p>

類選擇器：<p class=”abc”>這是一段演示文字</p>

由此可知id選擇器的選擇標(biāo)識(shí)用”id”,而類選擇器用的是“class”，此外在表達(dá)具體的css語(yǔ)法方便，兩者也完全不一樣，如下所示

ID選擇器：

<style>
#abc{font-size:20px}
<style>
類選擇器：
<style>
.abc{font-size:20px}
<style>

我們?cè)倩氐紼lementor編輯器的高級(jí)設(shè)置版塊，點(diǎn)擊CSS ID或者CSS 類右邊的動(dòng)態(tài)按鈕，會(huì)跳出一個(gè)選擇列表，里面有post，archive，site，media，author，comments等相關(guān)選項(xiàng)，每個(gè)選項(xiàng)下面都有對(duì)應(yīng)的相關(guān)屬性值，我們選擇對(duì)應(yīng)的相關(guān)屬性值即可。

（坦白一下，這里的設(shè)置我也沒弄明白，好像設(shè)置之后并不會(huì)對(duì)當(dāng)前頁(yè)面的前端展示效果有什么影響。只能留給各位神奇的優(yōu)秀同學(xué)來解答這個(gè)謎題了）

2.“motion effects移動(dòng)效果”：它首先給出的是scrolling effects，也就是滾動(dòng)效果，如果想打開該效果，那么點(diǎn)擊一下對(duì)應(yīng)的off開關(guān)即可。點(diǎn)擊之后，出現(xiàn)了8個(gè)對(duì)應(yīng)功能調(diào)試模塊，分別是”Vertical Scroll垂直滾動(dòng)”，“Horizontal Scroll水平滾動(dòng)”，“Transparency透明度”，“blur模糊程度”，“rotate旋轉(zhuǎn)”，“scale削弱”，“Apply Effects On在什么地方展現(xiàn)效果”，“Effects relative to作用效果于”。是不是有一種很熟悉的感覺？沒錯(cuò)，在之前的樣式功能設(shè)置的背景設(shè)置環(huán)境，我們對(duì)這些功能中的前4項(xiàng)說的都比較透徹了，這里就不再贅述。稍微說一下后面4個(gè)項(xiàng)目。

“rotate旋轉(zhuǎn)”是指整個(gè)內(nèi)容塊（包括背景，覆蓋背景，塊內(nèi)容等所有元素）圍繞塊中心進(jìn)行360度旋轉(zhuǎn)；“scale削弱”是指當(dāng)我們往下拉網(wǎng)頁(yè)內(nèi)容的時(shí)候，該區(qū)塊的內(nèi)容不斷的縮?。ㄗ约嚎梢栽O(shè)定最終的縮小尺寸）；

“Apply Effects On在什么地方展現(xiàn)效果”自行選擇想在什么地方展現(xiàn)這種效果（PC，平板，手機(jī)）；“Effects relative to作用效果于”指的是以上效果作用在什么地方，有三個(gè)選項(xiàng)：默認(rèn)，該視區(qū)區(qū)塊，整個(gè)頁(yè)面。

“Sticky”:指的是告示貼，這個(gè)功能一般很少用到，主要作用和效果是當(dāng)我們上下拉動(dòng)頁(yè)面的時(shí)候，該區(qū)塊會(huì)有一部分離開或者進(jìn)入視區(qū)窗口，這時(shí)候該區(qū)塊的頭部或者底部出現(xiàn)會(huì)出現(xiàn)一段空白部分。我們可以通過“offect”和“effects offect”兩個(gè)功能設(shè)置選項(xiàng)來操作以實(shí)現(xiàn)具體的效果。

“進(jìn)入動(dòng)畫”：這個(gè)和背景設(shè)置中的進(jìn)入動(dòng)畫操作一致，具體有“進(jìn)入動(dòng)畫的方式”，“動(dòng)畫持續(xù)時(shí)間”，“動(dòng)畫延遲”三個(gè)子功能設(shè)置，Jack老師個(gè)人對(duì)這個(gè)版塊是非常喜歡的，這樣做出來的前端頁(yè)面效果不會(huì)太呆板，比較有活性！

3.“響應(yīng)”：這個(gè)功能指的是我們之前設(shè)置的該區(qū)塊所有效果和內(nèi)容是否出現(xiàn)在顯示媒介上。因?yàn)橛行┌鎵K內(nèi)容由于查看媒介的顯示屏幕大小不同，所有并不適合在所有的媒介上進(jìn)行查看。那么這時(shí)候我們就可以在“能見度”選項(xiàng)中點(diǎn)選對(duì)應(yīng)的可供查看的媒介。

有些同學(xué)說那一邊修改一邊再用手機(jī)或者平板去查看很不方便，有沒有更好的解決辦法？答案是肯定的，Elementor開發(fā)團(tuán)隊(duì)早就為我們解決了這個(gè)問題。如下圖所示







在elementor編輯器的最底部一欄中有很多功能，我們點(diǎn)擊第四個(gè)（箭頭所指的）響應(yīng)模式，就會(huì)在編輯頁(yè)面的右邊出現(xiàn)不同顯示媒介的具體展示效果，有時(shí)候我們做網(wǎng)站設(shè)計(jì)，不能只考慮到PC端，

隨著谷歌對(duì)移動(dòng)端的流量重視和政策扶持，移動(dòng)端的前端頁(yè)面效果設(shè)計(jì)也變得越來越重要。所以在做網(wǎng)頁(yè)效果設(shè)計(jì)的時(shí)候需要綜合考慮多個(gè)顯示媒介的顯示效果，達(dá)到一個(gè)平衡的效果。如果某些特殊區(qū)塊實(shí)在不能解決兼容問題，那么選擇隱藏該區(qū)塊內(nèi)容在某種顯示媒介上出現(xiàn)是個(gè)最好的選擇。

4.“Attributes屬性”：它給出的解釋是Set custom attributes for the wrapper element. Each attribute in a separate line. Separate attribute key from the value using | character.（大致意思是：為包裝器元素設(shè)置自定義屬性。每一個(gè)屬性在一個(gè)單獨(dú)的行中。使用|字符將屬性鍵與值分開。）這塊內(nèi)容我還沒有研究透徹，此處不進(jìn)行講解，因?yàn)闆]有實(shí)踐沒有發(fā)言權(quán)

5.“Custom CSS/定制CSS層疊樣式表”：它的作用是通過css代碼來更改該區(qū)塊主元素的相關(guān)表現(xiàn)形式。比方說我想設(shè)置該區(qū)塊主內(nèi)容的文字顏色為橙色，字體大小為20px，那么我就需要在這個(gè)功能的代碼區(qū)塊中，輸入如下代碼字符段：

selector {color:orange;font-size:50px;}

但Jack老師個(gè)人認(rèn)為這樣的操作是不太方便的，我們可以直接在主要內(nèi)容板塊的文本編輯器中，進(jìn)行css代碼設(shè)置，那樣更方便，操作起來也更直觀！

到此為止，Elementor版塊的三大要素設(shè)置已經(jīng)全部講解完成，如果你是用心的一點(diǎn)點(diǎn)看下來并且邊看教程邊操作，那么恭喜你已經(jīng)基本掌握了elementor編輯器的30%核心功能。是不是還有意猶未盡想再深入了解Elementor編輯器的其他強(qiáng)大功能？ok，讓我們繼續(xù)

---

這個(gè)版塊是之前我們插入的網(wǎng)頁(yè)模板的第二部分，紫色部分的背景圖和背景覆蓋純色半透明圖的相關(guān)設(shè)置就不再講了，這個(gè)部分開始我們講解Elementor提供給我們的具體網(wǎng)頁(yè)設(shè)計(jì)“元素”。

從上圖上，我們可以大體的了解到這個(gè)版塊用了左右對(duì)稱的50/50內(nèi)容排布模式，左邊是youtube視頻內(nèi)容展示窗口，右邊內(nèi)容分為三個(gè)部分，分別是“how to make a website的標(biāo)題”，“this 8 hour……是文本編輯”和“start your free trial的按鈕設(shè)置，也就是我經(jīng)常說的CTA（call to action）設(shè)置”。要做出這樣的效果我們需要先設(shè)置一個(gè)50/50的左右對(duì)稱版塊，如下圖所示







然后我們用鼠標(biāo)點(diǎn)一下上圖中左邊的加號(hào)按鈕，這時(shí)候在Elementor編輯器的左側(cè)菜單欄中就會(huì)出現(xiàn)對(duì)用的“元素”選擇窗口，如下圖所示：







區(qū)塊1到區(qū)塊6都是Elementor編輯器的各種”元素”類型，不過區(qū)塊2的PRO版本是需要購(gòu)買Elementor付費(fèi)版本才能實(shí)現(xiàn)的，如果想不花錢就用這個(gè)增加功能，那么就來找Jack老師吧。

為了做出和頁(yè)面模板中一樣的效果，那么選擇區(qū)塊1中的”視頻”元素，然后鼠標(biāo)拖動(dòng)它到50/50左右對(duì)稱版塊的左側(cè)“+”號(hào)的地方，當(dāng)出現(xiàn)一條淺藍(lán)色橫條的時(shí)候，松開鼠標(biāo)，這樣Elementor編輯器就知道你需要將視頻元素放在那個(gè)地方了。有了視頻播放的媒介之后，我們來看一下具體的媒體元素相關(guān)功能設(shè)置。







我們知道每個(gè)Elementor編輯器版塊功能都有三大部分組成，分別是內(nèi)容設(shè)置，樣式和高級(jí)設(shè)置。

1.視頻設(shè)置：

我們先看區(qū)塊1中的視頻內(nèi)容設(shè)置，首先是“Source來源”，Elementor給出了常見的國(guó)外4個(gè)視頻內(nèi)容來源，分別是youtube，vimeo，dailymotion和self hosted。實(shí)話說后3者我都沒怎么接觸過，有興趣的同學(xué)可以去了解下，youtube作為目前國(guó)外最大的視頻傳媒理所當(dāng)然的是我們的最佳首選。

如果我們要傳播自己的公司或者產(chǎn)品介紹視頻，那么需要在youtube上先注冊(cè)一個(gè)賬號(hào)，然后發(fā)布相關(guān)的視頻內(nèi)容，然后把視頻內(nèi)容的鏈接填入到區(qū)塊1中的鏈接欄即可。如果非要有固執(zhí)的同學(xué)追問我，為什么沒有優(yōu)酷，愛奇藝，我只想回你一句MMP！

但有時(shí)候我們會(huì)遇到這樣的一個(gè)問題，需要插入的視頻內(nèi)容只需要整個(gè)視頻內(nèi)容的一部分（有些視頻源文件可能時(shí)間很長(zhǎng)）而不是一個(gè)完整的視頻，那么是不是要事先用視頻剪輯工具先剪輯掉不需要的部分，然后再上傳新視頻，用url應(yīng)用到自己網(wǎng)站上？

答案是否定的。作為如此出色的編輯器，Elementor早就為給為用戶大人想好了解決辦法，在區(qū)塊1中的“Start Time”中輸入對(duì)應(yīng)的需要視頻開始播放的時(shí)間節(jié)點(diǎn)，然后再“End Time”中輸入對(duì)應(yīng)的需要視頻停止播放的時(shí)間節(jié)點(diǎn)就可以了，如果兩個(gè)指標(biāo)都設(shè)置為默認(rèn)狀態(tài)，那么播放的就是一整個(gè)完整的視頻源文件。

區(qū)塊2中是對(duì)視頻播放的具體設(shè)置，很簡(jiǎn)單都是中文的字面意思。其中“Player Controls”我建議是打開顯示狀態(tài)，這樣youtube視頻在播放的時(shí)候，訪客就可以根據(jù)自己的需要暫?；蛘呃^續(xù)播放該視頻內(nèi)容，以及相關(guān)的全屏，音量控制，播放速度，字幕，翻譯等等youtube的擴(kuò)展功能。

“Modest Branding”意思是適度的品牌？我點(diǎn)開了這個(gè)功能，但是好像并沒有發(fā)生什么變化，如果哪位同學(xué)知道的請(qǐng)告知我一聲，我會(huì)在這里進(jìn)行修改，謝謝！“隱私模式”指的是當(dāng)您打開隱私模式時(shí)，除非播放視頻，否則YouTube不會(huì)在您的站點(diǎn)上存儲(chǔ)有關(guān)訪問者的信息。

如果你想在視頻播放窗口用圖片來進(jìn)行覆蓋，那么有兩種方法，一種是選擇媒體庫(kù)中現(xiàn)有的圖片或者上傳一張新的圖片進(jìn)行窗口覆蓋；另外一種方法是點(diǎn)擊旁邊的“動(dòng)態(tài)”按鈕，在彈出的選項(xiàng)中，選擇文章中的特色圖片/站點(diǎn)logo/作者頭像進(jìn)行視頻窗口覆蓋。

為了更好的提升網(wǎng)頁(yè)加載速度，那么我們可以選擇“Lazy Load”，這樣設(shè)置后，視頻不會(huì)主動(dòng)加載，只是加載了這個(gè)播放窗口讓訪客知道點(diǎn)擊這里可以觀看視頻內(nèi)容，只有等客戶真的想看這部分視頻內(nèi)容并點(diǎn)擊了視頻播放按鈕才會(huì)開始加載視頻內(nèi)容并開始播放。

如果你做了圖片覆蓋，那么Jack老師建議你打開“播放圖標(biāo)”，否則當(dāng)你的覆蓋圖片完全覆蓋視頻窗口之后，有的訪客可能會(huì)認(rèn)為這僅僅是一張圖片而錯(cuò)失了這個(gè)視頻內(nèi)容的觀看。加了視頻播放按鈕之后，會(huì)潛在的引導(dǎo)訪客去觀看該視頻內(nèi)容，那么你的網(wǎng)站粘性和頁(yè)面停留時(shí)間都會(huì)變得更好，谷歌會(huì)認(rèn)為你的網(wǎng)頁(yè)給訪客帶來了價(jià)值，從而給你更好的排名。

當(dāng)然你也可以對(duì)覆蓋圖片進(jìn)行尺寸大小設(shè)置，除了Elementor編輯器給出的常用尺寸外，你還可以根據(jù)自己的需求來自定義設(shè)置覆蓋圖片的尺寸大小?！盁粝洹钡墓δ苁菍⒃撘曨l區(qū)域在前端版面上重點(diǎn)突出顯示，有一定的意義，根據(jù)自己的需求選擇設(shè)置與否。

2.樣式設(shè)置

樣式設(shè)置中最關(guān)鍵的是視頻播放窗口的縱橫比，一般常用的是4:3或者16：9（Jack老師更偏向于后者）?！癈SS Filters”對(duì)應(yīng)的是視頻色彩調(diào)整，類似于photoshop中的色相/飽和度調(diào)整，這部分內(nèi)容在上面文章中有提到過，這里就不再贅述了，一般如果視頻源文件沒問題的話，這里不需要進(jìn)行額外的設(shè)置。

“播放圖標(biāo)”在默認(rèn)情況下是白色的，如果你的背景覆蓋圖片是顏色比較明亮或者淺色調(diào)的，那么可能會(huì)因?yàn)闆]有明顯的色差對(duì)比導(dǎo)致播放圖標(biāo)不能第一時(shí)間被訪客察覺到，所以在播放圖標(biāo)中可以設(shè)置對(duì)應(yīng)的顏色。此外默認(rèn)情況下的播放圖標(biāo)尺寸是比較大的，會(huì)給人一種很low的感覺，我們也可以根據(jù)自己的需求進(jìn)行尺寸調(diào)整。

值得一提的是，因?yàn)镻C端，Ipad端和手機(jī)端三者的顯示屏大小不一樣，所以Elementor編輯器也給出了三個(gè)不同顯示屏的對(duì)應(yīng)播放圖標(biāo)設(shè)置，這樣我們?cè)诓煌牟シ琶浇樯峡吹降牟シ艌D標(biāo)就不會(huì)完全一樣大小了?！瓣幱啊笔菍?duì)播放圖標(biāo)而不是覆蓋圖片來說的，添加陰影后感覺播放圖標(biāo)更加立體，不過個(gè)人感覺沒有太大的作用，這些細(xì)節(jié)上的的大小做的太多在某種程度上會(huì)拖累網(wǎng)頁(yè)加載速度。

3.高級(jí)設(shè)置

這部分的內(nèi)容就不做講解了，和之前的內(nèi)容有重復(fù)，而且每個(gè)版塊的高級(jí)設(shè)置內(nèi)容都是一樣的。說完了50/50版塊的左半部分內(nèi)容，我們?cè)賮碚f是右半部分的文字內(nèi)容。

細(xì)心的同學(xué)可能會(huì)提出一個(gè)疑問，為什么50/50的內(nèi)容版塊設(shè)置，左邊只能放一個(gè)視頻內(nèi)容，而右邊能夠放標(biāo)題，文本和按鈕三個(gè)部分內(nèi)容？其實(shí)左邊不僅僅只能放一個(gè)視頻版塊內(nèi)容，如果有需要，你可以拖動(dòng)其他的Elementor元素放置到y(tǒng)outube視頻播放版塊的下方，但還是在這50/50版塊之內(nèi)。

4.標(biāo)題設(shè)置功能

標(biāo)題設(shè)置功能非常簡(jiǎn)單，在區(qū)塊1中輸入需要顯示的文字，在區(qū)塊2中輸入需要跳轉(zhuǎn)的鏈接url，如果僅僅是展示用那就不需要填寫，留空即可。在區(qū)塊3中，設(shè)置對(duì)應(yīng)的文字大小，一共有5個(gè)等級(jí)的字體大小。標(biāo)題元素和文本元素不一樣，不能夠通過代碼設(shè)置來更改具體的標(biāo)題文字大小。

Html標(biāo)簽是對(duì)該標(biāo)題的H系列標(biāo)簽進(jìn)行設(shè)置，從h1到h6一共有6個(gè)等級(jí)，因?yàn)樵诔叽缰幸呀?jīng)有標(biāo)題字體大小設(shè)置了，所以此處更改標(biāo)題的h標(biāo)簽等級(jí)不會(huì)對(duì)字體大小進(jìn)行變更。如果標(biāo)題文字你不想用h系列標(biāo)簽來定義，那么可以用<p>,<span>,<div>三個(gè)html標(biāo)簽來進(jìn)行相關(guān)設(shè)置。

對(duì)齊方式是指該標(biāo)題在右半部分的模塊中的對(duì)齊原則，需要說一下的是兩段對(duì)齊這個(gè)設(shè)置，如果你的標(biāo)題文字比較簡(jiǎn)短，還達(dá)不到一整行的長(zhǎng)度，那么你點(diǎn)擊兩端對(duì)齊是沒有任何效果的，如果你的標(biāo)題文字已經(jīng)超出一整行的長(zhǎng)度，那么它就會(huì)進(jìn)行兩端對(duì)齊的操作。

在對(duì)標(biāo)題內(nèi)容進(jìn)行相關(guān)設(shè)置之后，我們?cè)賮砜匆幌聵?biāo)題元素的樣式設(shè)置。如下圖所示







默認(rèn)情況下Elementor的字體顏色是黑色的，如果我們需要更改成網(wǎng)頁(yè)模板中的白色字體，那么點(diǎn)擊文本顏色進(jìn)行字體顏色選擇即可。排版是文字內(nèi)容塊最重要的設(shè)置，不管是標(biāo)題元素還是文本元素。首先我們需要選擇一個(gè)和網(wǎng)頁(yè)模板中相同的字體，那么點(diǎn)擊字體系列按鈕選擇Elementor字體庫(kù)中能夠匹配的字體，如果不知道網(wǎng)頁(yè)模板中的字體叫什么，我們可以瀏覽器中搜索一下字體查找網(wǎng)站，根據(jù)圖片中的字體會(huì)識(shí)別出應(yīng)用的字體是什么。

然后再拖動(dòng)字體尺寸的滑條來設(shè)置對(duì)應(yīng)的字體大小?！爸亓俊敝傅氖菢?biāo)題字體的粗細(xì)，500指的是常規(guī)顯示的字體粗細(xì)，數(shù)值上下調(diào)整就是字體粗細(xì)的調(diào)整，很可惜的是沒有自定義設(shè)置粗細(xì)功能。“轉(zhuǎn)換”指的是字體的大小寫切換功能，如果你寫的標(biāo)題全部是小寫字母，這時(shí)候想把每個(gè)單詞的首字母設(shè)置成大寫字母，除了重寫的辦法之外還可以點(diǎn)擊這里的轉(zhuǎn)換功能進(jìn)行切換，省心省事。

“樣式”指的是字體的正常和斜體之間的切換?！把b飾”是指對(duì)字體的上下劃線和刪除線之間的效果切換，以達(dá)到突出顯示引起訪客注意的功能?！靶懈摺痹O(shè)置就是我們理解的字面意思功能，需要指出的是哪怕沒有兩行文字只有一行文字的情況下，變更行高設(shè)置也會(huì)對(duì)單獨(dú)一行的文字行高發(fā)生變化。

“字母間距”就不說了，對(duì)的，就是同學(xué)們理解的字面意思?！拔谋娟幱啊庇腥齻€(gè)子功能設(shè)置，分別是“模糊”，“水平”，“垂直”，這樣做的好處是讓文字更加立體化顯示?！癇lend Mode”指的是標(biāo)題字體和背景區(qū)塊的內(nèi)容混合模式，一般情況下也很少使用到。如果想理解這部分的內(nèi)容，建議同學(xué)們對(duì)photoshop圖層混合模式進(jìn)行大致的了解，photoshop中的混合設(shè)置更直觀更具體。

5.文本內(nèi)容設(shè)置

當(dāng)我們?cè)O(shè)置完標(biāo)題文本之后，細(xì)心的同學(xué)可能會(huì)發(fā)現(xiàn)，原來預(yù)設(shè)的50/50版塊中的兩個(gè)“+”號(hào)都已經(jīng)填滿了，那么如何在右邊部分中插入文本編輯元素？這時(shí)候我們選擇頁(yè)面左側(cè)的Elementor編輯菜單中的右上角（9個(gè)空白小點(diǎn)組成的正方形按鈕），菜單會(huì)出現(xiàn)elementor元素調(diào)用欄，我們選擇“基本”元素版塊中的“文本編輯器”，鼠標(biāo)拖動(dòng)它到剛設(shè)置的標(biāo)題內(nèi)容版塊，當(dāng)出現(xiàn)淺藍(lán)色橫條的時(shí)候再松開鼠標(biāo)左鍵，這樣才完成文本編輯器元素的版塊插入。







文本編輯器元素比標(biāo)題編輯器元素的強(qiáng)大之處在于有更多的擴(kuò)展功能，左上角的“添加媒體”功能，能讓我們插入圖片或者視頻，在”段落”選項(xiàng)中開可以選擇對(duì)應(yīng)字符或者字符段的H系列標(biāo)簽，B是強(qiáng)調(diào)功能（雖然很多人對(duì)它的功能認(rèn)識(shí)僅限在字體加粗加黑上面，但是在代碼部分它會(huì)告訴谷歌搜索引擎這部分內(nèi)容是著重強(qiáng)調(diào)的）。

I是文字斜體設(shè)置，U是下劃線，第二行的前面兩個(gè)是段落標(biāo)號(hào)，前者是圓點(diǎn)標(biāo)識(shí)，后者是數(shù)字標(biāo)識(shí)，第三個(gè)鏈條符號(hào)就是超鏈接設(shè)置，第4個(gè)是全屏文本編輯功能，第5個(gè)是顯示/隱藏工具欄（點(diǎn)擊之后第三和第四行的工具欄就會(huì)顯示和隱藏）。第4行和第5行的工具欄相關(guān)功能這里就不再贅述了，智商在及格線以上的同學(xué)都能駕馭這些功能，實(shí)在不會(huì)的再聯(lián)系我吧。

如果你精通代碼，那么在上圖左側(cè)的“文本”選項(xiàng)中，會(huì)出現(xiàn)代碼編輯模塊，可以任意的設(shè)置字體大小，顏色，甚至是表格等其他多元化前端頁(yè)面表現(xiàn)形式。上圖右邊的文本編輯器樣式設(shè)置中，前面幾項(xiàng)功能都在文章前文部分詳細(xì)解決過，需要說一下的是欄和欄間距，通常情況下，

我們對(duì)文本編輯器的內(nèi)容設(shè)置是當(dāng)一行文字空間顯示完成后再顯示第二行文字直到文字全部顯示完全為止。但如果你點(diǎn)擊”欄”功能之后，它會(huì)給你1-10的選項(xiàng)，比方說你選擇了5欄，那么這時(shí)候前端頁(yè)面顯示的該部分文字內(nèi)容會(huì)出現(xiàn)5個(gè)豎立列。再搭配欄間距的設(shè)置，就可以調(diào)整不同列之間的間距。

6.按鈕元素設(shè)置

區(qū)塊1中類型的作用是設(shè)置按鈕背景色，分為信息，成功，警告，危險(xiǎn)4個(gè)等級(jí)，顏色逐級(jí)加深。文本功能就是設(shè)置出現(xiàn)在按鈕上的文字，比如說“click here”。鏈接至的是點(diǎn)擊該按鈕之后頁(yè)面跳轉(zhuǎn)的目標(biāo)頁(yè)面url。對(duì)齊指的是按鈕背景顏色塊的對(duì)齊方式而不是顏色背景上面的文字對(duì)齊方式。尺寸指的是整個(gè)按鈕區(qū)塊的長(zhǎng)寬同時(shí)增大和變小。

區(qū)塊2中的圖標(biāo)可以添加Elementor編輯器中預(yù)設(shè)的圖標(biāo)庫(kù)中的圖標(biāo)，比方說你在按鈕上增加一個(gè)手指點(diǎn)擊的圖標(biāo)，那么是否有增加訪客點(diǎn)擊率的可能性？！圖標(biāo)距離指的是圖標(biāo)和按鈕上文字的間距，拖動(dòng)滑條來進(jìn)行設(shè)置，圖標(biāo)位置指的是圖標(biāo)和按鈕上文字的排布位置，選擇圖標(biāo)在前或者文字在前都是可以的。

區(qū)塊3就是按鈕的樣式功能設(shè)置，排版功能和之前說的文字排版功能沒有太大的出入，需要指出的是如果按鈕上同時(shí)有圖標(biāo)和文字，那么當(dāng)你設(shè)置文字粗細(xì)的時(shí)候，只會(huì)影響到文字部分而不會(huì)影響到圖標(biāo)部分。文字陰影部分沒有什么特別要說的，該說的都在上面文章中有詳細(xì)講解過了。文本顏色也很容易理解就是字面意思，背景顏色就是整個(gè)按鈕的背景色彩，點(diǎn)選自己需要的顏色就可以了。

區(qū)塊4中邊框類型也就是實(shí)線，虛線這些，如果不想要邊框線，那么選擇沒有邊框線即可。邊框半徑默認(rèn)狀態(tài)下是0，這時(shí)候整個(gè)按鈕呈現(xiàn)的就是四四方方的樣子，感覺不是特別好看，我們可以根據(jù)自己的需要對(duì)邊框半徑設(shè)置相關(guān)數(shù)值，使得整個(gè)按鈕的棱角不再是九十度那么尖銳，呈現(xiàn)橢圓的邊角設(shè)置。盒子影子指的是整個(gè)按鈕的陰影除了更加立體化顯示的作用外好像也沒什么其他的效果。內(nèi)距離指的就是整個(gè)按鈕和塊邊界之間的距離，數(shù)值越大按鈕的整體區(qū)域越大。







這是頁(yè)面模板的第三個(gè)版塊內(nèi)容，版面結(jié)構(gòu)還是左右對(duì)稱的50/50排布，左側(cè)是圖標(biāo)框內(nèi)容，右邊是圖像內(nèi)容，我們先來看左邊的圖標(biāo)框設(shè)置







區(qū)塊1是圖標(biāo)框的圖標(biāo)選擇，點(diǎn)擊圖案區(qū)域就會(huì)跳轉(zhuǎn)到Elementor編輯器的內(nèi)置圖標(biāo)庫(kù)，選擇自己需要的圖標(biāo)即可，當(dāng)然你也可以上傳自己需要的圖標(biāo)來替代圖標(biāo)庫(kù)中的圖標(biāo)。

區(qū)塊2的‘’查”看功能指的是圖標(biāo)的展現(xiàn)形式，有堆疊，框架和默認(rèn)三種選項(xiàng)?！靶螤睢敝傅氖菆D標(biāo)的4個(gè)邊角變化，有圓形和正方形兩種展現(xiàn)形式?！皹?biāo)題與描述”指的是圖標(biāo)右邊對(duì)應(yīng)的標(biāo)題內(nèi)容

區(qū)塊3是圖標(biāo)右邊對(duì)應(yīng)的標(biāo)題下方關(guān)于該區(qū)塊的主要內(nèi)容描述，需要填入什么就用相關(guān)的文字進(jìn)行填充描述即可。

區(qū)塊4的鏈接指的是該圖標(biāo)框所對(duì)應(yīng)的自己希望點(diǎn)擊之后跳轉(zhuǎn)的目標(biāo)頁(yè)面url鏈接，鏈接有兩種打開方式，一種是在當(dāng)前頁(yè)面跳轉(zhuǎn)，另外一種是在新的頁(yè)面打開，當(dāng)前頁(yè)面內(nèi)容不會(huì)被關(guān)閉。圖標(biāo)位置是和右邊的標(biāo)題與描述版塊相對(duì)應(yīng)的，分別有左中右三種排列位置。標(biāo)題標(biāo)簽是H系列標(biāo)簽的等級(jí)設(shè)置。







上圖中這部分內(nèi)容是圖標(biāo)框樣式設(shè)置功能模塊，區(qū)塊1中的圖標(biāo)有兩種表現(xiàn)形式，我們先來看標(biāo)準(zhǔn)表現(xiàn)形式。主要顏色指的是圖標(biāo)背后的色塊，次要顏色是圖標(biāo)的顏色。如果兩者都選擇清空狀態(tài)，那么默認(rèn)的主要顏色是灰色，次要顏色是白色。間距是指圖標(biāo)和右邊的內(nèi)容描述，標(biāo)題等內(nèi)容的間隔距離。

區(qū)塊2中的尺寸和內(nèi)距是指整個(gè)圖標(biāo)和背后的色塊的大小與邊界的距離大小設(shè)置。旋轉(zhuǎn)指的是圖標(biāo)在背景色塊的旋轉(zhuǎn)角度。邊框半徑指的是圖標(biāo)背后色塊的四個(gè)角半徑，數(shù)值越大角度越小，直到變成一個(gè)圓形。

區(qū)塊3的內(nèi)容是指圖標(biāo)右邊的標(biāo)題和內(nèi)容描述。對(duì)齊方式有4種，左中右和兩端對(duì)齊。垂直對(duì)齊指的是左邊的圖標(biāo)和右邊的整體內(nèi)容塊的對(duì)齊標(biāo)的，有上中下三種對(duì)齊方式。標(biāo)題間距是指標(biāo)題和內(nèi)容描述版塊之間的距離。

區(qū)塊4的顏色指的是標(biāo)題的文字顏色設(shè)置。排版功能就不說了，上面的文章中已經(jīng)說的很多了。描述部分的顏色和排版也不說了，和標(biāo)題設(shè)置功能一樣的，根據(jù)自己的需求進(jìn)行調(diào)整設(shè)計(jì)就好。

說完了圖標(biāo)框，我們?cè)賮碚f說圖像元素的相關(guān)功能和設(shè)置

圖像功能的內(nèi)容設(shè)置部分比較簡(jiǎn)單，點(diǎn)擊“選擇圖像”下面的圖像加載框，從媒體庫(kù)或者本地電腦上選擇需要的圖片上傳即可。圖像尺寸除了Elementor編輯器自帶的7種常用圖像尺寸外，還可以根據(jù)自己的需要進(jìn)行自定義圖片大小尺寸。

對(duì)齊方式有左中右三種，需要注意的是當(dāng)你的圖片剛好完全填滿圖像版塊的時(shí)候這三種對(duì)齊方式是沒有區(qū)別的。在字幕和鏈接選項(xiàng)中你可以對(duì)圖像添加自定義的文字和超鏈接URL。我們接著看圖像的樣式設(shè)置







區(qū)塊1中是對(duì)圖像寬度的設(shè)置，有些同學(xué)可能會(huì)問為什么沒有長(zhǎng)度的設(shè)置，因?yàn)檫@里的長(zhǎng)和寬是同比例放大和縮小的。特別愛鉆牛角尖的同學(xué)會(huì)反問一句：那為什么不是設(shè)置長(zhǎng)度而只設(shè)置寬度選項(xiàng)，我只能這么說電腦顯示內(nèi)容是從上到下的，也就是說長(zhǎng)度沒有限制，寬度是有限制的。在區(qū)塊1中第一個(gè)寬度是對(duì)當(dāng)前寬度的限制，如果第二個(gè)“最大寬度”限定了只有原圖像的50%，那么在第一個(gè)寬度設(shè)置選項(xiàng)中，哪怕你調(diào)整寬度顯示100%也只能顯示原圖像寬度的50%。

區(qū)塊2我們先來講標(biāo)準(zhǔn)的圖像顯示方式，透明度指的就是圖片在前端頁(yè)面顯示的透明程度，取值從0-1，數(shù)值越高圖像越清晰。”CSS Filters”就是對(duì)該圖片的色相/飽和度等相關(guān)屬性的設(shè)置。懸停效果就是當(dāng)鼠標(biāo)移動(dòng)到該圖片上的時(shí)候出現(xiàn)的動(dòng)畫特效。相關(guān)的懸停特效設(shè)置在上文中已經(jīng)講述的很多了，這里不再贅述。

區(qū)塊3的邊框類型也在之前的文章中有講述，此處省略若干字。順便說一下，如果你上傳的一張圖片是方塊形的，但是想在前端頁(yè)面展示中出現(xiàn)的是圓形圖像效果，那么不用重新將該圖片用photoshop進(jìn)行處理，只需要在邊框半徑中將數(shù)值盡可能的調(diào)整大一些就好，比方說設(shè)置邊框半徑為200，這時(shí)候顯示的就是圓形圖片。盒子影子也不多描述了，之前的內(nèi)容都有詳細(xì)講解。

區(qū)塊4指的是我們最開始在圖像內(nèi)容版塊中設(shè)置的文字描述，如果沒有進(jìn)行過或者不需要文字描述，那么這個(gè)部分的功能就可以不去管了。它提供了文字對(duì)齊，文本顏色，背景顏色，排版，文本陰影，間距等功能。這些功能的設(shè)置也很簡(jiǎn)單，根據(jù)字面意思進(jìn)行設(shè)置即可。

好了，不想再寫了，再寫就真的成懶婆娘的裹腳布又長(zhǎng)又臭了！將近18000字的內(nèi)容（不包括多張圖片的編輯）花費(fèi)了Jack老師整整兩天的時(shí)間，為的就是能夠讓大家更好更直觀的了解Elementor編輯器的強(qiáng)大功能。

希望這份苦心不會(huì)被辜負(fù)，如果覺得這個(gè)編輯器還蠻好用，如果覺得Jack老師碼字不易內(nèi)容還有可取之處的，那么請(qǐng)告知更多的外貿(mào)建站朋友此處有料?。?！以上就是本章Elementor外貿(mào)建站模板實(shí)例教程的全部?jī)?nèi)容，Elementor編輯器還有更多的元素和功能還沒有寫齊全，等哪天我有空再加上心情好的晚上再給這篇文章翻牌吧！

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

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