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

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

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

第一步：將Elementor編輯器的圖標列表功能元素添加到內容編輯區域

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

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

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

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

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

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

2.5、“應用鏈接在”：系統提供了兩種方案，一種是”全寬度”對應上面的跳轉鏈接，另外一種是”行內”

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

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

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

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

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

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

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

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

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

3.9、“懸停”：指的是當鼠標懸停到圖標上的時候，圖標會由正常的顏色轉變成其他的顏色。注意這時候文字部分是不會發生顏色的變化的

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

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

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

3.13、“懸停”：在3.9中我們說了圖標的懸停顏色可以更改，那么這里就是對配套文字的顏色更改

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

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

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

如果還有不理解的地方，請使用百度或者谷歌瀏覽器搜索關鍵詞--Jack外貿建站，排名首頁首位的就是我的網站，網站上有更多外貿建站、谷歌SEO優化、外貿客戶開發等實操干貨內容在等著你哦!

來源：Jack SEO