ForumID
myemail@bz.com.tw
進入會員專區 進入會員專區
clear
person
按鈕文字
local_grocery_store
0
按鈕文字
clear_all
按鈕文字
search
開始搜尋
申請網站
申請網站
image/svg+xml
image/svg+xml 會員專區,修改會員資料,修改密碼,購物紀錄,紅利查詢等
image/svg+xml
image/svg+xml 會員專區,修改會員資料,修改密碼,購物紀錄,紅利查詢等
回首頁>V2 網頁設計教學>初階課程>[V2 網頁設計]修改「陳列」元素示範

網頁版型設計教學 - 「陳列容器」元素修改示範

什麼是陳列元素?底下就是一個 3 X 2 的陳列容器元素( 直為「行」,橫為「列」,手機上看到會是 1 行 6 列 ):

也可以是這樣的表現方式( 單橫列捲動 ):

讓我們先看一段影片,建立一下概念:

學習重點:

  1. 正確選取「陳列容器」元素
  2. 設定陳列容器的「資料來源」
  3. 關於資料來源的基本介紹
  4. 陳列容器的樣式介紹
  5. 陳列容器可依解析度調整顯示行列
  6. 利用「按鈕」元素設定連結到資料來源分類頁面( 商品分類或自訂內容文章分類 )
  7. 補充說明:放置陳列容器的「內容區塊」元素的「自動調整高度」
  8. 補充說明:新增一個陳列容器

正確選取「陳列容器」元素:

由於陳列容器也是一種複合型的容器,他是由陳列容器以及陳列容器項目所組成,新增的陳列容器,在陳列容器項目內不會有任何東西。選取陳列容器時候,我們也是要利用下方元素階層選擇器來選擇比較快。當然如果您一下子就選擇到了( 例如,點選容器項目與陳列容器之間的空隙,也可以直接選到陳列容器。 ),就可以不需要再透過元素階層選擇器來選擇。





選取之後,我們就可以在該元素上按下滑鼠右鍵,從「元素編修」裡面找到設定陳列容器的工具。

設定陳列容器的「資料來源」:

PowerOn 在資料來源的部分目前可以設定如上圖下拉選單內的項目。要注意的是,其中所謂顯示於首頁的選擇項目,必須要在商品設定內的「將本商品顯示於首頁」勾選才行。

 

另外一個比較特別的資料來源,就是「自訂顯示條件」,它可以讓您自行設定( 商品或自訂內容 )資料篩選條件,例如:分類、關鍵字等,也可以讓您設定排序方式。


 

設定完成後,圖片、標題、敘述、價格等資料就會顯示於陳列容器元素之中。

關於資料來源的基本介紹:

PowerOn 資料來源其實是指三個部分:商品、自訂內容、活動訊息設定( 就是以前版本所說的跑馬燈新訊息設定 )。

  1. 商品:

  2. 自訂內容

  3. 活動訊息( 在展示設定裡面 )

關於後台的操作方式請參考一下網址:後台操作

陳列容器的樣式介紹:

V2 編輯器針對陳列容器提供了一些樣式可以直接套用,您必須先將資料來源設定好後,再來套用樣式。當然您也可以自行編輯自己的樣式,只需修改其中一個容器項目,再使用「內容套用到其他」即可。後面我們會提供一個影片,示範操作從無到有產生一個陳列容器的方式。

目前提供的樣式有:

陳列容器可依解析度調整顯示行列:

RWD 網頁最麻煩的就是要能夠依照設備解析度來調整網頁內容,尤其是要符合瀏覽寬度。陳列容器有一個功能就是可以依照設備解析度來調整顯示的行列,例如:PC 版本顯示 3 行 2 列,而平板顯示 2 行 3 列,手機版本顯示 1 行 6 列...等。


P.S. 修改了行列變化後,請記得調整陳列容器的高度,讓項目內的內容可以到一個適當的編排。

利用「按鈕」元素設定連結到資料來源分類頁面( 商品分類或自訂內容文章分類 ):

一般陳列容器如果有資料來源,很可能只有顯示部分的內容分類,這時候我們都會做一個連結( 或按鈕 )讓瀏覽者可以連結到完整的分類頁面,如同影片的示範,在 "MORE" 的按鈕上設定連結。






補充說明:新增一個陳列容器:

讓我們先看一段影片,有助於整體了解:

分段解說:

  1. 首先,先新增一個( 空白的 )「內容區塊」,然後稍微的把這個內容區塊高度拉開一點。
  2. 新增一個 3X2 的陳列容器,然後調整一下這個元素的高寬( 寬 100% 高暫時設定成 600px )和( 靠齊中上 )位置( 請於「元素空間設定」內調整 )。
  3. 切換元素編修工具到「設定陳列容器」,設定資料來源為「自訂顯示條件」( 預設為全部商品 )。
  4. 把預設的陳列容器的灰色底改成透明。
  5. 再次調整一下高度,讓陳列容器項目內的元素能自動調整合宜的樣子( 因為陳列容器高度不夠,全都擠在一起了 )。
  6. 這時候我們發現陳列容器下方已經突出內容區塊,為方便施作,我們將內容區塊的高度設定成「自動調整高度」,並且把「底部邊距」設定為 30 px。
  7. 新增一個「文字方塊」作為此區的標題( Last Update )
  8. 調整這個文字方塊,讓它寬度為 100%,高度為 auto 靠上置中,並且把文字大小調整為適合的大小,在文字方塊設定裡,把文字靠中對齊( 請注意,這裡的靠中對齊與空間設定內的靠中不一樣喔 )。
  9. 試著拖拉解析度切換預覽 Bar,看看每個解析度的呈現是否是我們要的:我們發現解析度在平板( 直 )的時候,容器如果以三行為一列會太擠,所以利用編修工具的設定陳列容器的設定功能,修改排列方式( 請注意,不是修改最上方的行列數,而是下方的「行列變化」。我們把目前這個解析度改成 2X3 的排列。
  10. 再次調整陳列容器高度,以符合我們要的排列。
  11. 在手機版本,我們將排列方式改成 1X6 的排法,一樣也需要調整陳列容器高度。
  12. 修改一下圖的導角,這個修改其實可能沒必要,只是我要示範「內容套用到其他」這個功能,所以稍微改了一下其中一個項目中的元素( 不一定要第一個項目,任何一個項目都可以使用「內容套用到其他」)。再次提醒一下,任何修改最好先在 PC 版本的解析度修改,改完會自動套用到全部的解析度...除非您要個別處理這個元素在某個解析度的樣式。
  13. 再次檢查一下各個解析度的呈現,差不多了,我們先存檔,後進入預覽模式。

 

總結

陳列容器不管在版型上或是網頁內容上都有大用,它最多可以陳列 5X5 的排列,在網頁的展示上十分常用。在陳列容器的設定裡面還有很多設定項目本篇並未提及,希望您抽空可以自行試試看,如有操作上的任何問題,請在我們的官方 Line 中提問,我們會給您詳盡的回答。