如何使用Elementor Pro製作產品詳情頁範本?自訂產品頁樣式

Generic filters
Exact matches only
Search in title
Search in content
Search in excerpt
Elementor Pro製作產品詳情頁範本配圖
如果你不想使用WooCommerce預設的產品詳情頁模板,則可以使用Elementor Pro製作產品詳情頁模板,完全自訂詳情頁樣式,設計出更符合自己產品的詳情頁模板。
文章目錄

本篇文章共1958 字,預計閱讀時間8 分鐘

點擊播放視頻
點擊播放視頻

本次教程需要用到Elementor 專業版插件,Well這裡有通用公共許可證版本的Elementor Pro插件,有需要的夥伴可以關注Well建站公眾號免費取得。

關於產品詳情頁

產品詳情頁是外貿或電商網站上展示產品資訊、增強使用者信任、促進購買決策並提高轉換率的關鍵頁面。

如此重要的頁面,我們絕對要透過自訂製作對應模板,更符合產品和網站定位,進一步提升網站轉換率。

本篇文章透過Elementor 專業版製作產品頁模板。

使用Elementor Pro製作產品詳情頁模板

在WP後台導覽列點選模板,選擇Theme Builder進入到模板建立頁面。

在範本建立頁面,點選右上角新增按鈕,選擇新增「Single Product」模版。

進入到模板編輯頁面後,你可以選擇現成的模板並加以編輯來使用。

Well為了能更好地展示詳情頁模板建立流程,就不選擇現成的模板了。

先在頁面上新增一個大容器,再在大容器內加入兩個並排且寬度為50%的小容器。

新增元素搜尋“product image”,將Product Images元素加入左側小容器內。

「Sale Flash」控制產品圖片左上角的促銷圖示是否顯示。

「Spacing」控制大圖和縮圖之間的間隙。

根據自己的需求調整樣式。

元素搜尋框輸入“title”,搜尋到Product Title元素加入到右側的小容器。

元素搜尋框輸入“price”,將Product Price元素加入到右側的小容器中。

元素搜尋框輸入“description”,將Product Description加入右側的小容器。

再搜尋“cart”,將購物車按鈕加入右側的小容器。

  • 如果你不需要在線銷售產品,只是展示型網站,則可以不添加購物車按鈕
  • 加入一個普通的按鈕元素,然後修改按鈕的名字為“Inquiry”
  • 按鈕的連結修改為自己網站的表單填寫頁面
  • 或者是製作WordPress彈出式表單
  • 在下方加入一個大容器,並把Product Content元素放入大容器中。
  • Product Content元素會自動取得目前產品的詳情描述並展示出來。
  • 如果你有產品視頻,那麼可以使用簡碼或元素添加視頻在Product Content元素上方。

最後是這樣一個效果。

你也可以在最下方再創建一個大容器,增加一個「類似產品」板塊以及FAQ板塊,FAQ可以打消客戶顧慮,提高轉換率。

WP製作詳情頁模板的方法大家都學會了,可以在Well教學的基礎上增加一些自己的想法。

點擊右上角發布按鈕,選擇顯示在產品頁面,儲存。

至此,Ele Pro製作產品詳情頁範本完成。

你可能還會對使用Ele Pro製作產品清單頁有興趣。

: ) 文章內容均為原創,轉載須註明出處並添加原文鏈接,否則視為侵權
Well企業微信
专业网站搭建,扫码直接咨询
外貿伺服器推薦(Well在用的伺服器)
vultr-徽標
一線品牌VPS伺服器,穩定、不貴、效能強
Clouvider 標誌
二線品牌VPS伺服器,穩定、便宜、效能強
文章標籤
文章推薦
文章目錄
相關文章