版面 — 列

使用​ ​內容型別在Page Builder 階段中新增列。

NOTE
如果您對Page Builder內容進行重大變更,建議您增加管理員工作階段存留期,以防止工作階段在您工作時逾時。

列工具箱

當您將滑鼠游標停留在列容器上時,列工具箱就會出現。 工具箱包括移動、隱藏、複製、編輯或移除列的選項。 選取的設定決定資料列的外觀、背景和版面。 其他內容元素可從左側的Page Builder面板拖曳至列。

列工具箱

工具
圖示
說明
移動
移動圖示 {width="25"}
將列移動到相對於舞台上其他列的另一個位置。
(標籤)
Row
以列識別目前的內容容器。 將滑鼠停留在容器上可檢視工具箱。
設定
設定圖示 {width="25"}
開啟「編輯列」頁面,您可以在此變更容器的屬性。
隱藏
隱藏圖示 {width="25"}
隱藏目前的列。
顯示
顯示圖示 {width="25"}
顯示隱藏列。
複製
圖示重複 {width="25"}
製作列的副本。
移除
移除圖示 {width="25"}
從階段中刪除列容器及其內容。
NOTE
隱藏的元素會儲存在資料庫中,且對客戶不可見。 不過,搜尋引擎和其他對您的網站進行編目的機器人可看見這些元素。 如果透過具有不可見屬性的API呼叫提出請求,這些區段也會當作內容的一部分傳回,除非您將其從階段中移除。

新增列

  1. 在​ Layout ​下方的Page Builder面板中,將新的​ Row ​拖曳到舞台,正好在第一列的下方。

  2. 若要格式化列,請將滑鼠游標停留在列容器上以顯示工具箱,然後選擇​ 設定 設定圖示 {width="20"} )圖示。

    請於下列各節中取得有關完成可用設定的詳細資訊。

    正在新增列 {width="600" modal="regular"}

變更列設定

  1. 將滑鼠懸停在列容器上以顯示工具箱,然後選擇​ 設定 設定圖示 {width="20"} )圖示。

    列工具箱 {width="600" modal="regular"}

  2. 請於下列章節中取得有關更新可用設定的詳細資訊。

  3. 完成後,按一下​ 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單位(例如100px50%50em100vh)的數字,或是計算(例如100vh - 237px)。

    例如,您可以設定列的最小高度來延伸頁面的完整高度,為全頁背景影像和視訊提供引人入勝的選項。

  • 選擇​ Vertical Alignment ​設定,對齊新增到列的任何內容容器(「頂端」、「置中」或「底部」)。

背景

定義列的背景顯示時,有許多選項。 您可以套用簡單的顏色或背景影像,並管理更複雜的效果。

背景顏色

藉由選擇色票、按一下檢色器或輸入有效的顏色名稱或相等的十六進位值來指定背景顏色。 此設定決定列的背景顏色。 您也可以調整顏色的不透明度。

無色彩(預設)

您可以透過下列三種方式之一設定值:

  • 預先定義的色彩名稱,例如White
  • 顏色的十六進位顏色值,例如#ffffff
  • 顏色的rgba值,具有不透明度百分比,例如rgba(255, 255, 255, 0.75)

如果要選擇顏色,請按一下​ 無顏色 ​方塊左側的色票。

選擇色票

如果您按一下顏色方塊來再次開啟檢色器,滑桿下方的方塊會顯示目前的紅色、綠色、藍色和Alpha值(rgba)。 最後一個數字以小數表示目前的不透明度百分比。 您可以使用滑桿來調整不透明度,或輸入所需的十進位值。

設定不透明度

NOTE
Page Builder也支援背景影像中的透明圖層,或​_Alpha色版_,這些影像可用來建立不同不透明度的背景。

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

    背景視訊URL {width="300"}

  • Overlay Color — 選取要套用透明色調至視訊的色彩。

  • Infinite Loop — 設為No,讓視訊播放一次並停止。 當此選項設定為Yes (預設)時,視訊會在無限回圈中重複。

  • Lazy Load — 設為No,讓視訊載入頁面,即使未顯示。 當此選項設定為Yes (預設)時,視訊只有在熒幕上顯示時才從來源載入。

  • Play Only When Visible — 設為No,無論視訊是否顯示,都可在視訊載入後立即開始播放。 當此選項設定為Yes (預設)時,視訊僅在可見時開始播放。

  • Fallback Image — 如有需要,在視訊載入前,如果視訊因某項原因未載入,請指定要在熒幕上顯示的影像。

視差背景

使用這些選項可控制相對於頁面捲動的背景影像或視訊的捲動速度。 背景可以設定為更緩慢的捲動,以營造沈浸感。

  • 將​ 啟用Parallax背景 ​設定為Yes
  • 輸入​ 視差速度 ​作為介於-1.02.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"}

recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d