版面 — 列
使用 列 內容型別在Page Builder 階段中新增列。
列工具箱
當您將滑鼠游標停留在列容器上時,列工具箱就會出現。 工具箱包括移動、隱藏、複製、編輯或移除列的選項。 選取的設定決定資料列的外觀、背景和版面。 其他內容元素可從左側的Page Builder面板拖曳至列。
新增列
-
在 Layout 下方的Page Builder面板中,將新的 Row 拖曳到舞台,正好在第一列的下方。
-
若要格式化列,請將滑鼠游標停留在列容器上以顯示工具箱,然後選擇 設定 ( {width="20"} )圖示。
請於下列各節中取得有關完成可用設定的詳細資訊。
{width="600" modal="regular"}
變更列設定
-
將滑鼠懸停在列容器上以顯示工具箱,然後選擇 設定 ( {width="20"} )圖示。
{width="600" modal="regular"}
-
請於下列章節中取得有關更新可用設定的詳細資訊。
-
完成後,按一下 Save 套用設定並返回Page Builder工作區。
外觀
使用 外觀 設定來決定內容在資料列中的顯示方式。
-
若要判斷背景顏色和/或背景影像如何與內容區域的容器和寬度產生關聯,請選擇對齊方式:
table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto 選項 說明 Contained 背景顏色或影像限製為主題所定義的最大頁面寬度。 Full Width 將內容限制在主題所定義的最大頁面寬度。 背景顏色和/或影像不受限制,並會延伸列的完整寬度。 Full Bleed 內容與背景影像及/或顏色不受限制,並會延伸列的完整寬度。 Full Bleed只能搭配支援版面的佈景主題使用。 -
輸入列的 Minimum Height。 此值可以是具有任何有效CSS單位(例如
100px
、50%
、50em
、100vh
)的數字,或是計算(例如100vh - 237px
)。例如,您可以設定列的最小高度來延伸頁面的完整高度,為全頁背景影像和視訊提供引人入勝的選項。
-
選擇 Vertical Alignment 設定,對齊新增到列的任何內容容器(「頂端」、「置中」或「底部」)。
背景
定義列的背景顯示時,有許多選項。 您可以套用簡單的顏色或背景影像,並管理更複雜的效果。
背景顏色
藉由選擇色票、按一下檢色器或輸入有效的顏色名稱或相等的十六進位值來指定背景顏色。 此設定決定列的背景顏色。 您也可以調整顏色的不透明度。
您可以透過下列三種方式之一設定值:
- 預先定義的色彩名稱,例如
White
- 顏色的十六進位顏色值,例如
#ffffff
- 顏色的rgba值,具有不透明度百分比,例如
rgba(255, 255, 255, 0.75)
如果要選擇顏色,請按一下 無顏色 方塊左側的色票。
如果您按一下顏色方塊來再次開啟檢色器,滑桿下方的方塊會顯示目前的紅色、綠色、藍色和Alpha值(rgba)。 最後一個數字以小數表示目前的不透明度百分比。 您可以使用滑桿來調整不透明度,或輸入所需的十進位值。
Background Type
背景型別可以是影像或視訊。 Page Builder預設為Image
並顯示各種影像設定。 如果您選取Video
,Page Builder會將影像設定與視訊設定交換。 這兩種背景型別的說明如下。
影像型別設定
如果您將 Background Type 設為Image
,請使用下列設定來定義背景影像顯示。
-
Background Image — 如有需要,請使用提供的工具選擇要套用至列的背景影像:
table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto 選項 說明 Upload 將影像檔案從本機電腦上傳到相簿,然後將其套用為列的背景影像。 Select from Gallery 提示您從相簿中選擇現有影像作為列的背景影像。 {width="25"} 可讓您將影像拖曳至相機圖磚,或瀏覽至本機檔案系統中的影像。 -
Background Mobile Image — 如有需要,請使用相同的工具來選擇不同的背景影像,以便在行動裝置上顯示。
-
Background Size — 設定此選項以決定背景影像相對於列寬縮放的方式:
table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto 選項 說明 Cover
背景影像涵蓋列的完整寬度。 Contain
背景影像僅限於內容區域的寬度。 Auto
套用目前樣式表的大小。 {width="250"}
-
Background Position — 設定此選項以判斷背景影像相對於列的錨定方式:
table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto 錨點 位置 Top
左/中/右 Center
左/中/右 Bottom
左/中/右 錨點就像推入圖釘,可將影像附加至指定背景位置的列。
-
Background Attachment — 設定附件型別以決定背景影像相對於捲動頁面的移動方式:
table 0-row-2 1-row-2 2-row-2 layout-auto 選項 說明 Scroll
當頁面捲動時,附加的背景影像會同步處理為向下移動。 使用「視差背景」來控制捲動速度。 Fixed
(不適用於行動裝置)當容器捲動影像時,背景影像不會移動,且會固定在指定的背景位置。 -
Background Repeat — 設定為
Yes
可重複背景影像以填滿列中的可用空間。
視訊型別設定
如果您將 背景型別 設定為Video
,請使用下列設定來定義背景影像顯示。
-
Video URL — 輸入有效的視訊URL。 有效的視訊URL可以連結至:
- YouTube影片:
https://youtu.be/CoDhMRUUjeI
- Vimeo影片:
https://vimeo.com/190156113
- 有效的視訊檔案(建議使用
.mp4
):https://myvideos.com/spiral.mp4
{width="300"}
- YouTube影片:
-
Overlay Color — 選取要套用透明色調至視訊的色彩。
-
Infinite Loop — 設為
No
,讓視訊播放一次並停止。 當此選項設定為Yes
(預設)時,視訊會在無限回圈中重複。 -
Lazy Load — 設為
No
,讓視訊載入頁面,即使未顯示。 當此選項設定為Yes
(預設)時,視訊只有在熒幕上顯示時才從來源載入。 -
Play Only When Visible — 設為
No
,無論視訊是否顯示,都可在視訊載入後立即開始播放。 當此選項設定為Yes
(預設)時,視訊僅在可見時開始播放。 -
Fallback Image — 如有需要,在視訊載入前,如果視訊因某項原因未載入,請指定要在熒幕上顯示的影像。
視差背景
使用這些選項可控制相對於頁面捲動的背景影像或視訊的捲動速度。 背景可以設定為更緩慢的捲動,以營造沈浸感。
- 將 啟用Parallax背景 設定為
Yes
。 - 輸入 視差速度 作為介於
-1.0
到2.0
之間的十進位值。
進階
-
若要控制新增至資料列的內容容器的水平位置,請選擇 Alignment:
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto 選項 說明 Default
套用目前佈景主題樣式表中指定的對齊預設設定。 Left
將內容容器沿列容器的左邊框對齊,並允許指定的任何邊框間距。 Center
將內容容器對齊列容器的中央,並允許指定的任何邊框間距。 Right
將內容容器沿列容器的右邊框對齊,並允許指定的任何邊框間距。 -
設定套用至列容器所有四個邊的 Border 樣式:
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto 選項 說明 Default
套用關聯樣式表所指定的預設邊框樣式。 None
未提供任何容器框線的可見指示。 Dotted
容器邊框會以虛線顯示。 Dashed
容器邊框會以虛線顯示。 Solid
容器邊框會以實線顯示。 Double
容器邊框會以雙線顯示。 Groove
容器框線會顯示為槽線。 Ridge
容器框線會顯示為脊線。 Inset
容器框線會顯示為內嵌線。 Outset
容器邊框會顯示為外線。 -
如果您設定了
None
以外的框線樣式,請完成框線顯示選項:{width="600" modal="regular"}
table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto 選項 說明 Border Color 選擇色票、按一下檢色器,或輸入有效的顏色名稱或相等的十六進位值,以指定顏色。 Border Width 輸入邊框線條寬度的畫素數。 Border Radius 輸入畫素數目,以定義用來將邊框每個角落倒圓角的半徑大小。 下列範例中的列的邊框半徑為15。
邊框半徑為15 {width="500"}的列
-
(選擇性)從目前的樣式表中指定要套用至列容器的 CSS classes 名稱。
以空格分隔多個類別名稱。
-
輸入 Margins and Padding 的值(以畫素為單位),以指定資料列的外部邊界和內邊距。
在列容器圖表中輸入每個對應的值。
table 0-row-2 1-row-2 2-row-2 layout-auto 容器區域 說明 Margins 套用至容器所有側邊外部邊緣的空白空間量。 選項: Top
/Right
/Bottom
/Left
Padding 套用至容器所有邊內側邊緣的空白空間量。 選項: Top
/Right
/Bottom
/Left
{width="600" modal="regular"}