首先我們先來說一下什么叫圖標(biāo)列表，顧名思義，它就是一系列由圖標(biāo)搭配一定的介紹性文字所組成的一個集合體。在網(wǎng)站的前端頁面效果展示中，它能夠突出強調(diào)某個大標(biāo)題下的附屬小標(biāo)題要點。比方說我們要作一個網(wǎng)站的首頁，首頁上可能要放一個版塊，內(nèi)容是自己的產(chǎn)品優(yōu)勢。那么在product advantage下面就可以使用圖標(biāo)列表元素，然后突出顯示產(chǎn)品優(yōu)勢的幾個方面。為了更好的讓同學(xué)們理解圖標(biāo)列表的具體效果，Jack老師特意在下面放一章圖標(biāo)列表的效果圖。
我們可以清楚的看到，上圖的左下角，每一個“對號”后面都跟著一定的配套說明文字，這樣就比較好的將我們需要突出的5個合作對象以類似列表的形式展現(xiàn)了出來。現(xiàn)在是不是感覺Elementor編輯器的圖標(biāo)列表功能比較有意思？那么接下來，Jack老師就和同學(xué)們一起來學(xué)習(xí)一下 如何使用Elementor的圖標(biāo)列表功能 。
第一步：將Elementor編輯器的圖標(biāo)列表功能元素添加到內(nèi)容編輯區(qū)域
如上圖所示，我們在左側(cè)的Elementor編輯器中找到箭頭1所指的“圖標(biāo)列表”功能元素，然后按住鼠標(biāo)左鍵不松開，慢慢的拖到上圖箭頭2所指的地方，也就是內(nèi)容編輯版塊中。注意在沒有將“圖標(biāo)列表”功能元素添加到內(nèi)容編輯版塊區(qū)域之前，內(nèi)容編輯版塊外面是一個灰色的虛線框，只有當(dāng)出現(xiàn)了一個藍色的虛線外邊框之后才代表著我們已經(jīng)成功的將“圖標(biāo)列表”功能元素添加到了內(nèi)容編輯版塊中！
第二步：對圖標(biāo)列表元素的主體功能進行設(shè)置
2.1、“布局”：上圖右上角有兩種布局方式，第一種是垂直排列，第二種是水平排列，原則上我們更愿意使用垂直排列的布局
2.2、“項目—列表項目”：指的是第一個圖標(biāo)的對應(yīng)匹配文字，在文本選項中進行修改即可
2.3、“圖標(biāo)”：系統(tǒng)默認給出的是對號圖標(biāo)，如果你因為實際的頁面設(shè)計需求不想要這個對號圖標(biāo)，那么先刪除然后在Elementor編輯器的默認圖標(biāo)庫中選擇新的圖標(biāo)，如果系統(tǒng)的圖標(biāo)庫中還沒有你想要的圖標(biāo)，那么自己去圖標(biāo)網(wǎng)站下載然后在上傳svg格式的圖標(biāo)文件即可
2.4、“鏈接”：指的是點擊該圖標(biāo)和對應(yīng)的描述性標(biāo)題文字之后跳轉(zhuǎn)到的目標(biāo)頁面URL。當(dāng)然你也可以點擊右邊的設(shè)置圖標(biāo)，然后在里面選擇動態(tài)標(biāo)簽，比方說popup（彈窗），設(shè)計出一個彈窗內(nèi)容。
2.5、“應(yīng)用鏈接在”：系統(tǒng)提供了兩種方案，一種是”全寬度”對應(yīng)上面的跳轉(zhuǎn)鏈接，另外一種是”行內(nèi)”
第三步：對圖標(biāo)列表元素的樣式功能進行設(shè)置
3.1、“之間的間距”：指的是不同圖標(biāo)列表和內(nèi)容之間的間距，不管是垂直布局還是水平布局都有一樣的效果
3.2、“對齊”：指的是不同圖標(biāo)列表之間的對齊方式
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、“顏色”：指的是圖標(biāo)也就是icon的顏色，對應(yīng)上面的例子就是對號的顏色
3.9、“懸停”：指的是當(dāng)鼠標(biāo)懸停到圖標(biāo)上的時候，圖標(biāo)會由正常的顏色轉(zhuǎn)變成其他的顏色。注意這時候文字部分是不會發(fā)生顏色的變化的
3.10、“尺寸”：指的是圖標(biāo)的尺寸大小
3.11、“對齊”：這個對齊功能用文字描述有點難表達。你可以這樣理解，圖標(biāo)所占的地方就是一個框，雖然它的整體上和文字部分是共同組成一個完整整體的。那么當(dāng)我們選擇對齊方式之后，圖標(biāo)在自己的內(nèi)容框范圍內(nèi)就可以進行左對齊、居中對齊和右對齊等三種方式排布
3.12、“文本顏色”：這個指的就是與圖標(biāo)對應(yīng)的描述文字的顏色
3.13、“懸停”：在3.9中我們說了圖標(biāo)的懸停顏色可以更改，那么這里就是對配套文字的顏色更改
3.14、“文本縮進”：通俗一點將，同學(xué)們可以將這里理解成圖標(biāo)和文字之間的水平間距大小
3.15、“排版”：太簡單了，不解釋！
好了，以上就是本章關(guān)于 如何使用Elementor的圖標(biāo)列表功能 的全部內(nèi)容。Elementor編輯器圖標(biāo)列表功能，能夠為我們創(chuàng)建更加富有新意的圖標(biāo)列表內(nèi)容，通過對圖標(biāo)和配套文字的樣式設(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
相關(guān)文章
