維看幫助中心

如何使用產品表格列表組件?

瀏覽數量:66     作者:本站編輯     發佈時間: 2018-02-08      來源:本站

產品表格列表

【組件簡介】以表格列表的形式展示多字段的產品信息,可以在組件中靈活配置不同字段是否顯示以及調整顯示順序。

【應用場景】產品表格列表主要應用在產品列表頁面上,以表格形式展示大部分應用於化工、機械、紡織等行業的產品,這些行業的共性在於不是以產品圖片為主打,而是更側重於展示產品名稱、型號、規格等屬性字段,所以以表格的形式展示更直觀清晰。

【使用方法】


1、如何添加產品表格列表組件?

第一步:進入”編輯網站“後台;

1) 打開瀏覽器輸入www.webcan.cn ,點擊右上角登錄按鈕。

2) 在白色框內輸入賬號和密碼,點擊登錄。

3) 找到要編輯的網站,點擊“編輯網站“按鈕,進入網站後台。

第二步:把要操作的頁面切換為當前頁面。把鼠標放到“當前頁面”四個字眼的右側區域,彈出下拉菜單,在自定義頁面或系統頁面中找到相關頁面,單擊此頁面名稱(不要單擊頁面名稱後面的按鈕),即可切換為當前頁面。把產品頁面切換為當前頁面.png


第三步:把鼠標放到需要添加組件的位置,出現小水滴及一條藍色的橫線並且橫線所在區域就是要添加區域,單擊這個小水珠,彈出添加組件的頁面,找到產品組件中的“產品表格列表”組件,單擊它,即可添加。

添加產品表格列表組件


2、如何設置產品表格列表組件?

情況1:接著上面的操作,在彈出的”設置產品表格列表“窗口,可以設置產品表格列表組件的內容和風格。

情況2:產品表格列表組件已經添加好了,可以通過以下步驟進入此組件的設置項中:把鼠標放到產品表格列表組件區域,左上角出現組件名稱,把鼠標移到“產品表格列表”四個字右側的第一個按鈕處即“設置”,單擊它即可進入設置項中:
在彈出的設置產品表格列表窗口,可以設置此組件的內容和風格。
進入設置此組件

內容:

組件標題:在此可以輸入這個組件的標題;
選擇列表的產品數據:在此可以選擇展示在這個位置的產品,可以是所有產品,也可以是使用篩選條件篩選出來的產品,也可以選擇指定的產品;
產品表格列表的字段配置(拖動可調整字段順序):在這裡可以勾選顯示在這個組件中的字段,選擇好之後,可以按鈕鼠標左鍵調整某個字段的排列順序;

設置--內容

高級:

分頁展示:當產品總數量超過每頁展示的產品數量時,可以設置是否顯示分頁;
每頁產品數量:選擇展示分頁時,可以設置每頁產品數量;
分頁刷新方式:如果展示分頁了,那麼單擊分頁時,頁面刷新的方式有兩種,一種是頁面全局刷新URL變化(這種有利於頁面優化),另外一種是頁面局部刷新URL不變(這種不利於SEO優化,但是利於頁面打開速度)。

設置--高級

風格:


列表樣式:目前只有一個列表樣式;
表頭文字顏色:在此可以設置表頭文字顏色;
表頭背景色:在此可以設置表頭背景色;
表格邊線顏色:在此可以設置表格邊線的顏色;
分頁按鈕選中顏色:在此可以設置分頁按鈕選中的顏色;
分頁位置:在此可以設置分頁的位置。

設置--風格
設置好以上功能之後,需要點保存,不然修改的是無效的。

效果圖:

效果圖


功能優化

1、“產品表格列表“組件,新增隔行變色風格。 (2019-9-17優化)

【應用場景】隔行變色及鼠標懸停變色可以讓“產品表格列表”在展示產品信息時更易引起顧客的注意。

【操作指導】進入“編輯網站”界面,選擇“添加組件”-“產品組件”-“產品表格列表”,在“風格”頁簽中選擇第2種展示風格,並在下方設置隔行背景色、鼠標懸停背景色、遺跡邊線粗細即可,操作如下圖所示:

3

【應用效果】如下圖所示:

1


建站流程

找不到你的問題?
135-6001-3420
seoprixcom@gmail.com
214227632
Facebook
Twitter
Google
LinkedIn
Instagram
維看雲建站系統
專業外貿建站系統,為您打造一個適合谷歌的優化網站!
  • 客服QQ
    214227632
  • 微信手機
    (852) 6741 8807
  • 郵箱
    seoprixcom@gmail.com