如何使用Elementor的Price List功能

Elementor編輯器中有個比較簡單的功能元素叫做Price List，它的作用就是將產(chǎn)品或者服務(wù)價(jià)格以列表的形式展示出來，讓訪客能夠更加直觀的了解到這些產(chǎn)品價(jià)格信息。這種價(jià)格信息的呈現(xiàn)方式在B2B類型的網(wǎng)站上不是很常見，倒是在B2C類型的網(wǎng)站上出現(xiàn)的比較多。Jack老師為了我們整個Elementor編輯器教程內(nèi)容的完整性，所以特意寫了這篇文章。那么接下來，Jack老師會和同學(xué)們一起來了解一下Price List功能元素的功能和作用。

第一步：將Price List功能元素添加到內(nèi)容編輯版塊

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

第二步：Elementor編輯器的Price List功能元素主體功能設(shè)置

2.1、“List Items”：指的就是價(jià)格項(xiàng)目列表，Elementor編輯器系已經(jīng)給我們預(yù)設(shè)了3個價(jià)格列表，如果你不需要這么多，那么點(diǎn)擊列表項(xiàng)目后面的X符號就可以刪除了，如果預(yù)設(shè)的3個項(xiàng)目還不夠，那么再增加幾個都沒問題。

2.2、“Price”：就是產(chǎn)品的價(jià)格，注意寫價(jià)格的數(shù)字的時(shí)候要寫一下貨幣單位符號

2.3、“Title”：某一項(xiàng)產(chǎn)品或者服務(wù)的標(biāo)題，系統(tǒng)預(yù)設(shè)的是“First item on the list”；你也可以改成YXZK-001,或者松鼠桂魚，麻婆豆腐，東坡肘子…（一不小心就暴露了我是吃貨的本質(zhì)，哈哈）

2.4、“Description”：就是對上述標(biāo)題的相關(guān)描述，比方說“東坡肘子味道偏鮮甜口味，采用黑山豬后腿作為原材料，營養(yǎng)豐富，好吃不膩”……

2.5、“Image”：就是為這個價(jià)格列表項(xiàng)目添加一張圖片進(jìn)行說明，比方說我們上面提到過東坡肘子，那么我們就給它配一張對應(yīng)的肘子圖片

2.6、“Link”：指的是點(diǎn)擊該項(xiàng)目的標(biāo)題、描述或者圖片的時(shí)候，當(dāng)前頁面跳轉(zhuǎn)的目標(biāo)頁面，比方說你已經(jīng)創(chuàng)建了東坡肘子的詳情頁面，那么這里你就可以添加詳情頁面的URL

第三步：Elementor編輯器的Price List功能元素樣式功能設(shè)置

3.1、“List”和“Description”中的項(xiàng)目都是一樣的，分別是color和排版兩個項(xiàng)目。這種常見性的項(xiàng)目Jack老師已經(jīng)在其他文章中講解了太多次，這里就不再贅述了。color就是修改價(jià)格標(biāo)題和價(jià)格項(xiàng)目描述的顏色；排版就是對標(biāo)題和描述文字本身的樣式修改。

3.2、“Separator”：意思是分隔器，在price list中指的就是價(jià)格標(biāo)題和價(jià)格數(shù)字之間的分隔線，Elementor編輯器已經(jīng)為我們預(yù)設(shè)了包括實(shí)現(xiàn)、虛線、雙實(shí)線等在內(nèi)的5種基本樣式以供我們選擇

3.3、“Weight”：指的是分隔線的寬度，數(shù)值越大，分隔線越粗

3.4、“color”：指的是分隔線的顏色

3.5、“Spacing”：指的就是分隔線與兩頭的價(jià)格標(biāo)題和價(jià)格數(shù)字之間的間距，如下圖所示，圖中的綠色邊框距離指的就是Separator Spacing距離。

講完了price list樣式設(shè)置中的list樣式設(shè)置，我們接下來再看看image樣式設(shè)置

3.6、“圖像尺寸”：除了系統(tǒng)預(yù)設(shè)的幾個圖像尺寸之外，我們還可以選擇完整尺寸或者自定義尺寸來顯示圖像的大小

3.7、“Border Radius”：指的是產(chǎn)品圖片的4個邊角的圓弧程度，數(shù)值越大越圓潤，甚至可以是一張方形圖片轉(zhuǎn)化成圓形圖片

3.8、“Spacing”：指的是圖片與價(jià)格標(biāo)題與價(jià)格描述之間的距離

3.9、“Rows Gap”：指的是每一個產(chǎn)品價(jià)格列表項(xiàng)目與緊鄰的產(chǎn)品價(jià)格列表項(xiàng)目之間的間距

3.10、“Vertical Align”：指的是包括圖片、價(jià)格標(biāo)題、價(jià)格描述、價(jià)格數(shù)字和分隔線之間的垂直對齊方式，有頂部對齊、垂直居中對齊和底部對齊三種方式。

好了，以上就是本章關(guān)于?如何使用Elementor的Price List功能?的全部內(nèi)容，Price List是一種比較恰當(dāng)?shù)恼故井a(chǎn)品或者服務(wù)價(jià)格的方式，可以搭配圖片、產(chǎn)品標(biāo)題、產(chǎn)品描述等信息來詳細(xì)的表達(dá)出一款待售產(chǎn)品或服務(wù)的價(jià)格，利用好Price List可以為我們的網(wǎng)站創(chuàng)作更多的轉(zhuǎn)化！

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