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

什麼是陳列元素？底下就是一個 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 中提問，我們會給您詳盡的回答。