如何使用Elementor的圖標列表功能

首先我們先來說一下什么叫圖標列表，顧名思義，它就是一系列由圖標搭配一定的介紹性文字所組成的一個集合體。在網(wǎng)站的前端頁面效果展示中，它能夠突出強調(diào)某個大標題下的附屬小標題要點。比方說我們要作一個網(wǎng)站的首頁，首頁上可能要放一個版塊，內(nèi)容是自己的產(chǎn)品優(yōu)勢。那么在product advantage下面就可以使用圖標列表元素，然后突出顯示產(chǎn)品優(yōu)勢的幾個方面。為了更好的讓同學(xué)們理解圖標列表的具體效果，Jack老師特意在下面放一章圖標列表的效果圖。

我們可以清楚的看到，上圖的左下角，每一個“對號”后面都跟著一定的配套說明文字，這樣就比較好的將我們需要突出的5個合作對象以類似列表的形式展現(xiàn)了出來?，F(xiàn)在是不是感覺Elementor編輯器的圖標列表功能比較有意思？那么接下來，Jack老師就和同學(xué)們一起來學(xué)習一下 如何使用Elementor的圖標列表功能 。

第一步：將Elementor編輯器的圖標列表功能元素添加到內(nèi)容編輯區(qū)域

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

第二步：對圖標列表元素的主體功能進行設(shè)置

2.1、“布局”：上圖右上角有兩種布局方式，第一種是垂直排列，第二種是水平排列，原則上我們更愿意使用垂直排列的布局

2.2、“項目—列表項目”：指的是第一個圖標的對應(yīng)匹配文字，在文本選項中進行修改即可

2.3、“圖標”：系統(tǒng)默認給出的是對號圖標，如果你因為實際的頁面設(shè)計需求不想要這個對號圖標，那么先刪除然后在Elementor編輯器的默認圖標庫中選擇新的圖標，如果系統(tǒng)的圖標庫中還沒有你想要的圖標，那么自己去圖標網(wǎng)站下載然后在上傳svg格式的圖標文件即可

2.4、“鏈接”：指的是點擊該圖標和對應(yīng)的描述性標題文字之后跳轉(zhuǎn)到的目標頁面URL。當然你也可以點擊右邊的設(shè)置圖標，然后在里面選擇動態(tài)標簽，比方說popup（彈窗），設(shè)計出一個彈窗內(nèi)容。

2.5、“應(yīng)用鏈接在”：系統(tǒng)提供了兩種方案，一種是”全寬度”對應(yīng)上面的跳轉(zhuǎn)鏈接，另外一種是”行內(nèi)”

第三步：對圖標列表元素的樣式功能進行設(shè)置

3.1、“之間的間距”：指的是不同圖標列表和內(nèi)容之間的間距，不管是垂直布局還是水平布局都有一樣的效果

3.2、“對齊”：指的是不同圖標列表之間的對齊方式

3.3、“分隔線”：系統(tǒng)默認是關(guān)閉不顯示分隔線的，如果你有需要那么點擊打開即可。Jack老師在下面給同學(xué)們發(fā)了一張不同布局的分隔線效果示意圖：

3.4、“樣式”：指的是分隔線的樣式設(shè)置，有實線、虛線、圓點等多種選擇

3.5、“重量”：指的是分隔線的粗細

3.6、“寬度/高度”：注意如果布局里面選擇了垂直排列這里就是寬度設(shè)置，如果布局選擇了水平排列，那么這里就是高度設(shè)置，也就是寬度占整個內(nèi)容框的百分百的意思

3.7、“顏色”：這個就簡單了，就是分隔線的顏色設(shè)置

3.8、“顏色”：指的是圖標也就是icon的顏色，對應(yīng)上面的例子就是對號的顏色

3.9、“懸?！保褐傅氖钱斒髽藨彝５綀D標上的時候，圖標會由正常的顏色轉(zhuǎn)變成其他的顏色。注意這時候文字部分是不會發(fā)生顏色的變化的

3.10、“尺寸”：指的是圖標的尺寸大小

3.11、“對齊”：這個對齊功能用文字描述有點難表達。你可以這樣理解，圖標所占的地方就是一個框，雖然它的整體上和文字部分是共同組成一個完整整體的。那么當我們選擇對齊方式之后，圖標在自己的內(nèi)容框范圍內(nèi)就可以進行左對齊、居中對齊和右對齊等三種方式排布

3.12、“文本顏色”：這個指的就是與圖標對應(yīng)的描述文字的顏色

3.13、“懸?！保涸?.9中我們說了圖標的懸停顏色可以更改，那么這里就是對配套文字的顏色更改

3.14、“文本縮進”：通俗一點將，同學(xué)們可以將這里理解成圖標和文字之間的水平間距大小

3.15、“排版”：太簡單了，不解釋！

好了，以上就是本章關(guān)于 如何使用Elementor的圖標列表功能 的全部內(nèi)容。Elementor編輯器圖標列表功能，能夠為我們創(chuàng)建更加富有新意的圖標列表內(nèi)容，通過對圖標和配套文字的樣式設(shè)置，可以實現(xiàn)網(wǎng)站前端頁面效果的多元化，讓訪客無形中增加頁面停留時間，提升客戶的觀感體驗！

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

來源：Jack SEO