如何使用Elementor的圖標(biāo)框功能

在上一節(jié)課程中我們?cè)敿?xì)的講解了《如何使用Elementor的圖像框功能》，今天我們一起來學(xué)習(xí)Elementor的另外一個(gè)相似功能—圖標(biāo)框。圖標(biāo)框常見于B2B網(wǎng)站頁面中一些需要強(qiáng)調(diào)要點(diǎn)的表達(dá)，比如說企業(yè)產(chǎn)品或者服務(wù)的優(yōu)勢(shì)，比方說一篇文章的相關(guān)論點(diǎn)等等。圖標(biāo)框功能的出現(xiàn)能夠讓我們更好的將頁面核心內(nèi)容進(jìn)行提煉并加以強(qiáng)調(diào)。那么接下來，Jack老師就和同學(xué)們一起去學(xué)習(xí) 如何使用Elementor的圖標(biāo)框功能 。

第一步：將Elementor編輯器的圖標(biāo)框功能添加到內(nèi)容編輯區(qū)域

如上圖所示，我們?cè)谧髠?cè)的Elementor編輯器中找到箭頭1所指的“圖標(biāo)框”功能元素，然后按住鼠標(biāo)左鍵不松開，慢慢的拖到上圖箭頭2所指的地方，也就是內(nèi)容編輯版塊中。注意在沒有將“圖標(biāo)框”功能元素添加到內(nèi)容編輯版塊區(qū)域之前，內(nèi)容編輯版塊外面是一個(gè)灰色的虛線框，只有當(dāng)出現(xiàn)了一個(gè)藍(lán)色的虛線外邊框之后才代表著我們已經(jīng)成功的將“圖標(biāo)框”功能元素添加到了內(nèi)容編輯版塊中！

第二步：對(duì)圖標(biāo)框的主體功能進(jìn)行設(shè)置

2.1、“圖標(biāo)”：指的就是上圖中的五角星，我們點(diǎn)擊之后可以在Elementor編輯器預(yù)設(shè)的圖標(biāo)庫中選擇自己需要的圖標(biāo)，如果系統(tǒng)的圖標(biāo)庫中沒有你想要的圖標(biāo)，那么還可以刪除現(xiàn)有的系統(tǒng)圖標(biāo)，然后點(diǎn)擊右下角的“上傳SVG圖像”，上傳自己已經(jīng)準(zhǔn)備好的icon。這里推薦一個(gè)比較好用的免費(fèi)圖標(biāo)庫網(wǎng)站—https://www.iconfont.cn/

2.2、“查看”：指的是圖標(biāo)的展示效果，系統(tǒng)提供了三種表現(xiàn)樣式，分別是默認(rèn)、堆疊和框架，下面是三種樣式的對(duì)比圖：

2.3、“標(biāo)題”：指的是與該圖標(biāo)對(duì)應(yīng)的標(biāo)題文字，也就是我們需要進(jìn)行強(qiáng)調(diào)的文字內(nèi)容

2.4、“描述”：與上面的標(biāo)題進(jìn)行對(duì)應(yīng)，對(duì)標(biāo)題文字進(jìn)行補(bǔ)充和說明

2.5、“鏈接”：指的是點(diǎn)擊該圖標(biāo)之后，頁面將要跳轉(zhuǎn)到的目標(biāo)頁面URL

2.6、“圖標(biāo)的位置”：指的是圖標(biāo)與文字描述部分的相對(duì)位置，分別是居左，頂部，居右三種選擇

2.7、“標(biāo)題HTML標(biāo)簽”：指的是與圖標(biāo)對(duì)應(yīng)的標(biāo)題以h2或者h(yuǎn)3或者h(yuǎn)4等系列標(biāo)簽等級(jí)中的哪一種進(jìn)行表現(xiàn)。這對(duì)谷歌SEO優(yōu)化來說是有比較大的區(qū)別的，簡(jiǎn)單點(diǎn)說就是給谷歌搜索引擎表達(dá)這個(gè)是h系列標(biāo)簽中的等級(jí)。

第三步：對(duì)圖標(biāo)框的樣式功能進(jìn)行設(shè)置

3.1、“圖標(biāo)主要顏色和次要顏色”：這里用文字描述比較拗口，Jack老師用一張顏色對(duì)比圖進(jìn)行了展示

主要顏色指的就是鈴鐺和外圍的圓圈，次要顏色指的就是其他的填充區(qū)域，這樣對(duì)比一下就很容易理解了

3.2、“間距”：指的是圖標(biāo)與標(biāo)題之間的距離

3.3、“尺寸”：指的是整個(gè)圖標(biāo)甚至包括外部的圓圈的大小尺寸

3.4、“內(nèi)距”：指的是內(nèi)部鈴鐺尺寸大小不變的情況下與外部的圓圈之間的距離

3.5、“旋轉(zhuǎn)”：指的是內(nèi)部鈴鐺也就是圖標(biāo)主體的旋轉(zhuǎn)角度，注意外部的圓圈或者說四方形是不會(huì)發(fā)生旋轉(zhuǎn)的

3.6、“邊框?qū)挾取保褐傅氖氢忚K外貿(mào)圓圈的粗細(xì)

3.7、“邊框半徑”：因?yàn)橥膺吙蛴袌A圈和四方形兩種表現(xiàn)樣式，所以如果當(dāng)我們選擇邊框半徑的時(shí)候，四邊形的4個(gè)直角邊就會(huì)變成有一定圓弧程度的圓角，甚至還可以直接講四邊形變成圓形。

3.8、“內(nèi)容對(duì)齊”：指的是整個(gè)圖標(biāo)框，包括圖標(biāo)和文字部分在內(nèi)容欄里面的水平對(duì)齊方式

3.9、“垂直對(duì)齊”：指的是整個(gè)圖標(biāo)框的垂直對(duì)齊效果

3.10、“標(biāo)題間距”：指的是標(biāo)題和下面的文字描述部分的間距

3.11、“顏色”：指的是圖標(biāo)框中標(biāo)題部分的文字顏色

3.12、“排版”：指的是標(biāo)題文字的字體、字號(hào)大小、字體粗細(xì)等效果設(shè)置。下面的文字描述和標(biāo)題部分是一模一樣的，所以這里就不再贅述了

好了，以上就是本章關(guān)于 如何使用Elementor的圖標(biāo)框功能 的全部?jī)?nèi)容，合理的利用Elementor編輯器的圖標(biāo)框功能，能夠更好的為我們?cè)O(shè)計(jì)網(wǎng)站頁面，強(qiáng)調(diào)我們需要表達(dá)的內(nèi)容起到非常好的效果。

如果還有不理解的地方，請(qǐng)使用百度或者谷歌瀏覽器搜索關(guān)鍵詞--Jack外貿(mào)建站，排名首頁首位的就是我的網(wǎng)站，網(wǎng)站上有更多外貿(mào)建站、谷歌SEO優(yōu)化、外貿(mào)客戶開發(fā)等實(shí)操干貨內(nèi)容在等著你哦!

來源：Jack SEO