Page Builder逐步解說第1部分：簡單頁面
請依照此三部分練習來建立簡單頁面，說明建立您自己的設計內容豐富的頁面是多麼容易，以熟悉Page Builder工作區。
開始之前
開始此練習前，建議您增加管理員工作階段存留期以防止工作階段在您工作時逾時。
驗證必要的內容管理組態設定：
下載逐步解說影像資產
-
下載
simple-page-assets檔案並將檔案儲存到您的本機系統。 -
導覽至下載的檔案，然後解壓縮檔案。
在Windows系統上，按一下滑鼠右鍵並選擇 Extract All 個檔案。 然後，選擇目的地資料夾並按一下 Extract。
在Mac系統上，只要按兩下zip檔案，並將解壓縮的檔案移至目標資料夾即可。
資料夾包含下列影像檔案：
依序依照此逐步解說的三部分進行。
第1部分：含橫幅的完整出血列
在「簡單頁面」練習的這一部分，您會建立具有完整出血列和橫幅的頁面。 該列針對桌上型電腦和行動裝置有不同的背景影像。
具有橫幅
步驟1：建立頁面
-
在 管理員 側邊欄上，移至 Content > Elements>Pages。
-
按一下右上角的 Add New Page 並執行下列動作：
-
若要防止此頁面在您的存放區中發佈，請將 Enable Page 設為
No。 -
針對 Page Title，輸入
Simple Page。
-
-
展開 Design 區段的
請注意，Layout 預設為
Page -- Full Width。 除了五個標準版面選項外，Page Builder還新增了頁面、類別和產品的完整版面配置。 -
如果範例資料可用，請將 New Theme 設為
Magento Luma。 否則，您可以選擇另一個可用的主題，或將其保留空白以使用預設主題。New Theme 設定可用來覆寫預設佈景主題，以及將不同的佈景主題套用至頁面。
note note NOTE 完整寬度配置只能與相容的佈景主題搭配使用。 
-
按一下右上角的 Save。
儲存頁面時，名稱 Simple Page 會出現在頁面的左上角。
步驟2：格式化列
-
展開 Content 區段的
此動作以空白列顯示Page Builder預覽。
note note NOTE 內容標題欄位是選擇性的。 預設會根據主題格式化為標題層級1 (H1)。 在本練習中，內容標題 會保留空白。 
-
按一下 Edit with Page Builder 或在內容預覽區域內。
在展開的Page Builder 工作區中，左側的面板提供您可用來在階段中建置內容的內容工具。
-
將滑鼠懸停在空白列上以顯示工具箱。
每個內容容器都有一個工具箱，其中包含一組類似的選項。
-
在「列」工具箱中，選擇 設定 (
-
在 Appearance 底下，選擇 完整出血。
「完整出血」外觀設定會將列與背景內容區域的左右邊界延伸至頁面的完整寬度。
-
向下捲動至 Advanced 區段，並將所有 Margins and Padding 設定設為
0。此設定可確保橫幅延伸整列的寬度。
-
若要儲存設定並返回Page Builder工作區，請向上捲動至頁面頂端並按一下右上角的 Save。
步驟3：新增橫幅
-
在Page Builder面板中，展開 Media 並將 橫幅 預留位置拖曳到舞台。
-
將滑鼠懸停在橫幅容器上以顯示工具箱。
note note NOTE 舞台現在有兩個內容容器，每個都有一個單獨的工具箱。 因為橫幅是巢狀內嵌在列中，請確定您使用的是正確的工具箱。 除了工具箱之外，還包含 上傳影像 和 從相簿選取 按鈕，以便您可以直接從舞台上快速變更橫幅。
-
在橫幅工具箱中，選擇 設定 （
-
在 Appearance 底下，選擇 Collage Right。
「拼貼右側」設定會將內容放置在橫幅的右側。
-
向下捲動至 Background 區段，並設定橫幅的背景影像：
-
針對 Background Image，按一下 上傳。
導覽至您儲存擷取之簡單頁面資產的目錄，然後選擇
wide-banner-background.jpg檔案。影像會上傳，並顯示上傳影像的縮圖。 檔案名稱、影像尺寸和檔案大小如下所述。
-
針對 Background Mobile Image，按一下 上傳。
在相同檔案目錄中，選擇
wide-banner-background-mobile.jpg檔案。行動背景影像會用於行動裝置，也會在案頭瀏覽器視窗調整為行動裝置寬度時使用。
-
捲動回頁面頂端，然後按一下 Save 以儲存設定並返回Page Builder工作區。
背景會出現在舞台上，並延伸列的完整寬度。
請注意顯示在列右側的預留位置文字。 此文字的位置反映 拼貼右側 外觀設定。
-
-
按一下預留位置文字，然後輸入下列訊息作為兩行：
Get fit and look fab in new seasonal styles.New LUMA yoga collection編輯器工具列會顯示在文字方塊上方。 您可以直接從舞台輸入文字並設定格式，或是選擇橫幅工具箱中的 設定。
-
套用格式至文字：
-
選取文字的第一行。 然後，在 格式 下的編輯器工具列上，選擇
Heading 2。
-
選取第二行文字。 然後，在 格式 下的編輯器工具列上，選擇
Paragraph。
格式設定會套用與目前主題關聯的樣式表中的樣式。
-
__
-
將游標暫留以顯示「橫幅工具箱」，再次選擇「設定」（「
請注意，您的文字會顯示在 訊息文字 方塊中。 您可以從舞台或橫幅設定的 Content 區段輸入及編輯文字。
-
繼續在 Content 區段中，設定橫幅連結和按鈕：
-
將 連結 設定為
Category，然後按一下 Select 以顯示類別樹狀結構。 -
選擇
What's New作為連結的類別。
-
將 Show Button 設為
Always。 -
針對 Button Text，輸入
Shop Now作為按鈕上顯示的文字。 -
對於 Button Type，接受
Primary預設值。目前主題的按鈕樣式決定按鈕格式。
-
-
設定橫幅覆蓋：
您可以使用覆蓋將背景顏色套用至由「外觀」設定所定義的作用中內容區域。 橫幅背景影像在橫幅的整個寬度內仍可見。
-
將 Show Overlay 設為
Always。 -
針對 Overlay Color，執行下列任一項作業：
- 按一下色塊並選擇白色色票。
- 按一下 無色彩 文字方塊，並輸入
White或十六進位值#ffffff。
然後，按一下 Apply。
-
捲動回頁面頂端，然後按一下 Save 以儲存設定並返回Page Builder工作區。
按鈕會出現在舞台上橫幅訊息的下方。
內容階段中的
-
-
在舞台的右上角，按一下 關閉全熒幕 （
按一下此圖示會返回頁面的 Content 區段，並顯示預覽。
您可以隨時在兩種工作區模式之間切換。
-
在右上角，按一下 Save 箭頭並選擇 Save & Close。
-
如果出現提示，請按一下頁面頂端訊息中的快取管理連結，並重新整理任何無效的快取。
第2部分：包含具有兩個相等欄的列
在本練習的這一部分，您會在頁面中新增一列，並將列分成兩個相等的欄。 接著，將連結的影像新增至各欄。 在指示中，每個新列都會在第一列之前新增，以使Page Builder面板與舞台對齊。 在練習結束時，您會重新排列列，使其與簡單頁面範例相符。
步驟1：新增列
-
在「頁面」格線中，尋找您在本練習第一部分建立的 簡單頁面，並在 Action 欄中選取 Edit。
-
展開 Content 區段的
-
按一下 Edit with Page Builder 或在內容預覽區域內。
-
在 Layout 下方的Page Builder面板中，將 Row 預留位置拖曳至舞台，並將其置於橫幅上方。
紅色指引會標籤兩列之間的邊界。
-
將游標停留在新列上以顯示工具箱，然後選擇 設定 （
-
在 Appearance 底下，接受 包含 預設設定。
此設定會將列的內容區域限製為主題所定義的頁面寬度。
-
在右上角，按一下 Save 以儲存設定並返回Page Builder工作區。
步驟2：新增欄
-
在 Layout 下方的Page Builder面板中，將 Column 預留位置拖曳到新列。
該列現在分成兩個寬度相等的欄。 每一欄都是一個單獨的內容容器，有其專用的選項工具箱。
-
在第一欄的左上角，按一下圓形的 格線 控制項（
格線可確保內容保持一致，並在桌上型電腦和行動裝置上正確轉譯。 如需設定網格大小的資訊，請參閱Page Builder設定主題中的設定 Page Builder區段。
每個欄容器頂端邊界括弧(6/12)中的數字表示每個欄的網格分割數，以及列的分割總數。
步驟3：新增含有連結的影像
在此步驟中，您將瞭解如何上傳影像至橫幅。
-
在Page Builder面板中，展開 Media 區段並將 Image 預留位置拖曳到第一欄。
-
將範例影像插入預留位置。
對於位於您系統上的影像，您可以選擇下列其中一種方法：
-
上傳影像檔：在第一欄，按一下 Upload Image。 然後，導覽至您儲存擷取之簡單頁面資產的目錄，並選擇
small-banner-1.jpg檔案。
重複此動作，將
small-banner-2.jpg檔案新增至第二欄。 -
拖曳影像檔案：在案頭上，開啟簡單頁面資產資料夾，並將其置於您正在處理Page Builder階段的管理瀏覽器視窗旁。 然後，從簡單頁面資產資料夾拖曳檔案
small-banner-1.jpg，並將它拖放到第一欄。
重複此動作，將
small-banner-2.jpg檔案新增至第二欄。
-
-
決定目錄中的哪個頁面要連結至每個影像。
-
將滑鼠停留在第一欄中的影像上，以顯示工具箱，並選擇 設定 （
-
將影像連結至類別：
-
向下捲動並將 連結 設定為
Category。 -
在類別樹狀結構中，向下展開並選擇
Men's Hoodies & Sweatshirt類別。 -
在右上角，Save 設定並返回Page Builder工作區。
-
-
重複上一步驟，將第二欄的影像連結至 齒輪 類別。
-
在舞台的右上角，按一下 關閉全熒幕 （
按一下此圖示會返回頁面的 Content 區段，並顯示預覽。
-
在右上角，按一下 Save 箭頭並選擇 Save & Close。
-
出現提示時，請按一下頁面頂端訊息中的快取管理連結，並重新整理任何無效的快取。
第3部分：具有不相等欄的全寬列
此頁面的最後一列包含產品評論的內容。 您新增一個全寬度列，並將其劃分為兩個寬度不同的欄。 背景影像會新增至第一欄，並套用相符的背景顏色至列，以獲得統一的效果。
步驟1：新增列
-
在「頁面」格線中，尋找您在本練習第一部分建立的 簡單頁面，並在 Action 欄中選取 Edit。
-
展開 Content 區段的
-
按一下 Edit with Page Builder 或在內容預覽區域內。
-
在 Layout 下方的Page Builder面板中，將 Row 預留位置拖曳至舞台，並將其置於本練習第二部分所建立的列上方。
紅色指引會標籤兩列之間的邊界。
-
將游標停留在新列上以顯示工具箱，然後選擇 設定 （
-
在 Appearance 下的[編輯列]頁面上，選擇 Full Width。
此設定會將內容區域限製為主題所定義的最大頁面寬度。 背景顏色和/或影像不受限制，並會延伸列的完整寬度。
-
在 Background 區段中，輸入
#f1f1f1作為 Background Color。
-
向下捲動至 Advanced 區段，並將所有 邊界與內距 值設定為
0。 -
捲動回頁面頂端，然後按一下 Save 以儲存設定並返回Page Builder工作區。
該列的背景顏色現在為淺褐色。
步驟2：新增不同寬度的欄
-
在 Layout 下方的Page Builder面板中，將 Column 預留位置拖曳到舞台上的頂端列。
-
將第一欄的右框線拖曳至格線上12個位置中的4個(
4/12)位置。第二欄的大小會調整為12的八個(
8/12)。
-
將游標停留在第一欄容器上以顯示工具箱，然後選擇 設定 （
-
向下捲動至 Advanced 區段，並將所有 邊界與內距 值設定為
0。 -
捲動回頁面頂端，然後按一下 Save 以儲存設定並返回Page Builder工作區。
步驟3：將影像新增至第一欄
-
在Page Builder面板中，展開 Media 並將 Image 內容型別拖曳到第一欄。
-
在影像預留位置中，按一下 Upload Image。
-
導覽至您儲存擷取之簡單頁面資產的目錄，然後選擇
review-image.jpg檔案。上傳的影像會顯示在第一欄，並順暢地與列的背景顏色混合。
步驟4：將稽核內容新增至第二欄
資料列的第二欄應包含客戶評論的內容，包括五星級評等影像和格式化的文字訊息。
-
在Page Builder面板中，展開 Elements 區段並將 Text 內容型別拖曳到第二欄。
-
按一下文字元素，以顯示編輯器工具列。
-
在工具列中按一下 插入影像 （
-
在 Insert/edit image 對話方塊中，按一下 Source 欄位旁的 尋找 （
-
在 Select Images 頁面上，按一下 Choose Files。
-
在您儲存簡易頁面資產的資料夾中，選擇
rating.png。 -
返回頁面，按兩下影像圖磚加以選取，並將其URL插入Source欄位。
-
針對 Image Description，輸入
5-Star Rating並按一下 OK 將影像插入資料行。 -
在編輯器工具列中，按一下 「置中對齊」 （
-
-
將插入點放在五星級影像之後，按下Enter/Return鍵以開始新的一行，然後輸入下列文字：
Awesome Tank!I'm a long distance runner and it keeps me pretty comfortable, although these companies always act like their shirts are magical and really it's just pretty basic stuff. Still it's a great shirt, and I would recommend it.Antonia Racer Tank – Reviewed by Allyson文字會在您鍵入時置中。
-
格式化文字：
-
按一下第一行文字中的任何位置，然後在編輯器工具列的 格式 下選擇
Heading 2。 -
選取剩餘的文字，然後在編輯器工具列的 格式 下，選擇
Paragraph。
文字會根據與主題關聯的樣式表來格式化。
-
-
取得影像的尺寸，讓您可以在欄中垂直置中內容：
-
將滑鼠停留在第一欄中的影像上，以顯示工具箱，並選擇 設定 （
-
在影像縮圖下方，記下影像的尺寸。
-
按一下右上角的 關閉。
-
-
將內容垂直置中於第二欄：
-
將滑鼠游標停留在第二欄以顯示工具箱，然後選擇 設定 （
）圖示。
note note NOTE 請務必選取欄容器而非「文字」容器，以顯示正確的工具箱。 -
對於 Minimum Height，請在第一欄輸入
450作為影像的高度（畫素）。 -
將 Vertical Alignment 設為
Center。
-
-
向下捲動至 Advanced 區段，並將所有 Margins and Padding 值設定為零(
0)。 -
捲動回頁面頂端，然後在右上角按一下 Save 以儲存設定並返回Page Builder工作區。
步驟5：插入目錄產品連結
-
選取
Antonia Racer Tank文字並按一下編輯器工具列中的 插入連結 （
-
在 插入連結 對話方塊中，指定目錄產品的連結：
-
輸入產品 URL。
您可以輸入相對或完全限定的URL。 此範例會輸入下列相對連結：
../antonia-racer-tank.html -
（選擇性）對於 Title，請輸入產品名稱。
有些瀏覽器會將「標題」連結屬性當做工具提示使用。
-
完成時，按一下 OK 以儲存連結。
連結的文字現在會在橫幅中反白顯示。
-
-
在舞台的右上角，按一下 關閉全熒幕 （
按一下此圖示會返回頁面的 Content 區段，並顯示預覽。
-
按一下右上角的 Save。
步驟6：重新排列列
完成全部三個資料列後，最後一個步驟是重新排列資料列，以符合原始的 簡單頁面 範例。 為了與原始範例相符，第一列必須移至底部，最後一列必須移至頂部。
-
如有必要，請展開
-
按一下 Edit with Page Builder 或在內容預覽區域內。
-
將滑鼠停留在舞台上的第一列以顯示工具箱，然後選擇 移動 （
-
按住滑鼠鍵，確認已選取列中的所有內容，並將列拖曳至頁面底部紅色指引下方的位置。
note note NOTE 如果您不小心只移動了部分內容（例如影像），只要將內容移回原地即可，然後再試一次。 
-
重複此程式，將第一列移至第二位置。
頁面上的列順序現在與簡單頁面範例相符。
-
在舞台的右上角，按一下 關閉全熒幕 （
按一下此圖示會返回頁面的 Content 區段，並顯示預覽。
-
在右上角，按一下 Save 箭頭並選擇 Save & Close。
-
如果出現提示，請按一下頁面頂端訊息中的快取管理連結，並重新整理任何無效的快取。
您已完成「簡單頁面」練習。 保留您建立的工作，以便稍後參考。
準備就緒後，請繼續進行第2部分：區塊。