Page Builder逐步解說第1部分：簡單頁面

下載simple-page-assets檔案並將檔案儲存到您的本機系統。

導覽至下載的檔案，然後解壓縮檔案。

在Windows系統上，按一下滑鼠右鍵並選擇​ Extract All ​個檔案。 然後，選擇目的地資料夾並按一下​ Extract。

在Mac系統上，只要按兩下zip檔案，並將解壓縮的檔案移至目標資料夾即可。

資料夾包含下列影像檔案：

{width="500"}

在​ 管理員 ​側邊欄上，移至​ Content > Elements>Pages。

按一下右上角的​ Add New Page ​並執行下列動作：

• 若要防止此頁面在您的存放區中發佈，請將​ Enable Page ​設為No。

• 針對​ Page Title，輸入Simple Page。

{width="600" modal="regular"}

展開​ Design ​區段的 。

請注意，Layout ​預設為Page -- Full Width。 除了五個標準版面選項外，Page Builder還新增了頁面、類別和產品的完整版面配置。

如果範例資料可用，請將​ New Theme ​設為Magento Luma。 否則，您可以選擇另一個可用的主題，或將其保留空白以使用預設主題。

New Theme ​設定可用來覆寫預設佈景主題，以及將不同的佈景主題套用至頁面。

{width="600" modal="regular"}

按一下右上角的​ Save。

儲存頁面時，名稱​ Simple Page ​會出現在頁面的左上角。

展開​ Content ​區段的 。

此動作以空白列顯示Page Builder預覽。

{width="600" modal="regular"}

按一下​ Edit with Page Builder ​或在內容預覽區域內。

在展開的Page Builder 工作區中，左側的面板提供您可用來在階段中建置內容的內容工具。

將滑鼠懸停在空白列上以顯示工具箱。

每個內容容器都有一個工具箱，其中包含一組類似的選項。

{width="600" modal="regular"}

在「列」工具箱中，選擇​ 設定 ( {width="20"}圖示。

在​ Appearance ​底下，選擇​ 完整出血。

「完整出血」外觀設定會將列與背景內容區域的左右邊界延伸至頁面的完整寬度。

{width="600" modal="regular"}

向下捲動至​ Advanced ​區段，並將所有​ Margins and Padding ​設定設為0。

此設定可確保橫幅延伸整列的寬度。

{width="600" modal="regular"}

若要儲存設定並返回Page Builder工作區，請向上捲動至頁面頂端並按一下右上角的​ Save。

在Page Builder面板中，展開​ Media ​並將​ 橫幅 ​預留位置拖曳到舞台。

{width="600" modal="regular"}

將滑鼠懸停在橫幅容器上以顯示工具箱。

除了工具箱之外，還包含​ 上傳影像 ​和​ 從相簿選取 ​按鈕，以便您可以直接從舞台上快速變更橫幅。

{width="600" modal="regular"}

在橫幅工具箱中，選擇​ 設定 （ {width="20"} ）圖示。

在​ Appearance ​底下，選擇​ Collage Right。

「拼貼右側」設定會將內容放置在橫幅的右側。

{width="600" modal="regular"}

向下捲動至​ Background ​區段，並設定橫幅的背景影像：

• 針對​ Background Image，按一下​ 上傳。

  {width="600" modal="regular"}

  導覽至您儲存擷取之簡單頁面資產的目錄，然後選擇wide-banner-background.jpg檔案。

  影像會上傳，並顯示上傳影像的縮圖。 檔案名稱、影像尺寸和檔案大小如下所述。

  {width="600" modal="regular"}

• 針對​ Background Mobile Image，按一下​ 上傳。

  在相同檔案目錄中，選擇wide-banner-background-mobile.jpg檔案。

  行動背景影像會用於行動裝置，也會在案頭瀏覽器視窗調整為行動裝置寬度時使用。

  {width="600" modal="regular"}

• 捲動回頁面頂端，然後按一下​ Save ​以儲存設定並返回Page Builder工作區。

  背景會出現在舞台上，並延伸列的完整寬度。

  {width="600" modal="regular"}

請注意顯示在列右側的預留位置文字。 此文字的位置反映​ 拼貼右側 ​外觀設定。

按一下預留位置文字，然後輸入下列訊息作為兩行：

Get fit and look fab in new seasonal styles.

New LUMA yoga collection

編輯器工具列會顯示在文字方塊上方。 您可以直接從舞台輸入文字並設定格式，或是選擇橫幅工具箱中的​ 設定。

{width="600" modal="regular"}

套用格式至文字：

• 選取文字的第一行。 然後，在​ 格式 ​下的編輯器工具列上，選擇Heading 2。

  {width="600" modal="regular"}

• 選取第二行文字。 然後，在​ 格式 ​下的編輯器工具列上，選擇Paragraph。

格式設定會套用與目前主題關聯的樣式表中的樣式。

{width="600" modal="regular"}

將游標暫留以顯示「橫幅工具箱」，再次選擇「設定」（「 {width="20"}）圖示，然後捲動至「Content」區段。

請注意，您的文字會顯示在​ 訊息文字 ​方塊中。 您可以從舞台或橫幅設定的​ Content ​區段輸入及編輯文字。

{width="600" modal="regular"}

繼續在​ Content ​區段中，設定橫幅連結和按鈕：

• 將​ 連結 ​設定為Category，然後按一下​ Select ​以顯示類別樹狀結構。

• 選擇What's New作為連結的類別。

  {width="600" modal="regular"}

• 將​ Show Button ​設為Always。

• 針對​ Button Text，輸入Shop Now作為按鈕上顯示的文字。

• 對於​ Button Type，接受Primary預設值。

  目前主題的按鈕樣式決定按鈕格式。

設定橫幅覆蓋：

您可以使用覆蓋將背景顏色套用至由「外觀」設定所定義的作用中內容區域。 橫幅背景影像在橫幅的整個寬度內仍可見。

• 將​ Show Overlay ​設為Always。

• 針對​ Overlay Color，執行下列任一項作業：

  • 按一下色塊並選擇白色色票。
  • 按一下​ 無色彩 ​文字方塊，並輸入White或十六進位值#ffffff。

  然後，按一下​ Apply。

  {width="600" modal="regular"}

• 捲動回頁面頂端，然後按一下​ Save ​以儲存設定並返回Page Builder工作區。

  按鈕會出現在舞台上橫幅訊息的下方。

  內容階段中的 {width="600" modal="regular"}

在舞台的右上角，按一下​ 關閉全熒幕 （ ）圖示。

按一下此圖示會返回頁面的​ Content ​區段，並顯示預覽。

您可以隨時在兩種工作區模式之間切換。

在右上角，按一下​ Save ​箭頭並選擇​ Save & Close。

如果出現提示，請按一下頁面頂端訊息中的快取管理連結，並重新整理任何無效的快取。

在「頁面」格線中，尋找您在本練習第一部分建立的​ 簡單頁面，並在​ Action ​欄中選取​ Edit。

展開​ Content ​區段的 。

按一下​ Edit with Page Builder ​或在內容預覽區域內。

在​ Layout ​下方的Page Builder面板中，將​ Row ​預留位置拖曳至舞台，並將其置於橫幅上方。

紅色指引會標籤兩列之間的邊界。

{width="600" modal="regular"}

將游標停留在新列上以顯示工具箱，然後選擇​ 設定 （ {width="20"} ）圖示。

{width="600" modal="regular"}

在​ Appearance ​底下，接受​ 包含 ​預設設定。

此設定會將列的內容區域限製為主題所定義的頁面寬度。

{width="600" modal="regular"}

在右上角，按一下​ Save ​以儲存設定並返回Page Builder工作區。

在​ Layout ​下方的Page Builder面板中，將​ Column ​預留位置拖曳到新列。

{width="600" modal="regular"}

該列現在分成兩個寬度相等的欄。 每一欄都是一個單獨的內容容器，有其專用的選項工具箱。

{width="600" modal="regular"}的列

在第一欄的左上角，按一下圓形的​ 格線 ​控制項（ ）以顯示格線指導方針。

格線可確保內容保持一致，並在桌上型電腦和行動裝置上正確轉譯。 如需設定網格大小的資訊，請參閱Page Builder設定主題中的設定 Page Builder區段。

每個欄容器頂端邊界括弧(6/12)中的數字表示每個欄的網格分割數，以及列的分割總數。

{width="600" modal="regular"}的格線大小詳細資料

在Page Builder面板中，展開​ Media ​區段並將​ Image ​預留位置拖曳到第一欄。

{width="600" modal="regular"}

將範例影像插入預留位置。

{width="600" modal="regular"}

對於位於您系統上的影像，您可以選擇下列其中一種方法：

• 上傳影像檔：在第一欄，按一下​ Upload Image。 然後，導覽至您儲存擷取之簡單頁面資產的目錄，並選擇small-banner-1.jpg檔案。

  {width="600" modal="regular"}

  重複此動作，將small-banner-2.jpg檔案新增至第二欄。

• 拖曳影像檔案：在案頭上，開啟簡單頁面資產資料夾，並將其置於您正在處理Page Builder階段的管理瀏覽器視窗旁。 然後，從簡單頁面資產資料夾拖曳檔案small-banner-1.jpg，並將它拖放到第一欄。

  {width="600" modal="regular"}

  重複此動作，將small-banner-2.jpg檔案新增至第二欄。

決定目錄中的哪個頁面要連結至每個影像。

將滑鼠停留在第一欄中的影像上，以顯示工具箱，並選擇​ 設定 （ {width="20"} ）圖示。

{width="600" modal="regular"}

將影像連結至類別：

• 向下捲動並將​ 連結 ​設定為Category。

• 在類別樹狀結構中，向下展開並選擇Men's Hoodies & Sweatshirt類別。

• 在右上角，Save ​設定並返回Page Builder工作區。

重複上一步驟，將第二欄的影像連結至​ 齒輪 ​類別。

在舞台的右上角，按一下​ 關閉全熒幕 （ ）圖示。

按一下此圖示會返回頁面的​ Content ​區段，並顯示預覽。

在右上角，按一下​ Save ​箭頭並選擇​ Save & Close。

出現提示時，請按一下頁面頂端訊息中的快取管理連結，並重新整理任何無效的快取。

在「頁面」格線中，尋找您在本練習第一部分建立的​ 簡單頁面，並在​ Action ​欄中選取​ Edit。

展開​ Content ​區段的 。

按一下​ Edit with Page Builder ​或在內容預覽區域內。

在​ Layout ​下方的Page Builder面板中，將​ Row ​預留位置拖曳至舞台，並將其置於本練習第二部分所建立的列上方。

紅色指引會標籤兩列之間的邊界。

{width="600" modal="regular"}

將游標停留在新列上以顯示工具箱，然後選擇​ 設定 （ {width="20"} ）圖示。

{width="600" modal="regular"}

在​ Appearance ​下的[編輯列]頁面上，選擇​ Full Width。

此設定會將內容區域限製為主題所定義的最大頁面寬度。 背景顏色和/或影像不受限制，並會延伸列的完整寬度。

{width="600" modal="regular"}

在​ Background ​區段中，輸入#f1f1f1作為​ Background Color。

{width="600" modal="regular"}

向下捲動至​ Advanced ​區段，並將所有​ 邊界與內距 ​值設定為0。

{width="600" modal="regular"}

捲動回頁面頂端，然後按一下​ Save ​以儲存設定並返回Page Builder工作區。

該列的背景顏色現在為淺褐色。

{width="600" modal="regular"}

在​ Layout ​下方的Page Builder面板中，將​ Column ​預留位置拖曳到舞台上的頂端列。

{width="600" modal="regular"}

將第一欄的右框線拖曳至格線上12個位置中的4個(4/12)位置。

第二欄的大小會調整為12的八個(8/12)。

{width="600" modal="regular"}

將游標停留在第一欄容器上以顯示工具箱，然後選擇​ 設定 （ {width="20"} ）圖示。

向下捲動至​ Advanced ​區段，並將所有​ 邊界與內距 ​值設定為0。

{width="600" modal="regular"}

捲動回頁面頂端，然後按一下​ Save ​以儲存設定並返回Page Builder工作區。

在Page Builder面板中，展開​ Media ​並將​ Image ​內容型別拖曳到第一欄。

{width="600" modal="regular"}

在影像預留位置中，按一下​ Upload Image。

{width="600" modal="regular"}

導覽至您儲存擷取之簡單頁面資產的目錄，然後選擇review-image.jpg檔案。

上傳的影像會顯示在第一欄，並順暢地與列的背景顏色混合。

{width="600" modal="regular"}

在Page Builder面板中，展開​ Elements ​區段並將​ Text ​內容型別拖曳到第二欄。

{width="600" modal="regular"}

按一下文字元素，以顯示編輯器工具列。

在工具列中按一下​ 插入影像 （ ）圖示，然後執行下列動作：

{width="600" modal="regular"}

• 在​ Insert/edit image ​對話方塊中，按一下​ Source ​欄位旁的​ 尋找 （ ）圖示。

  {width="600" modal="regular"}

• 在​ Select Images ​頁面上，按一下​ Choose Files。

• 在您儲存簡易頁面資產的資料夾中，選擇rating.png。

• 返回頁面，按兩下影像圖磚加以選取，並將其URL插入Source欄位。

  {width="600" modal="regular"}

• 針對​ Image Description，輸入5-Star Rating並按一下​ OK ​將影像插入資料行。

• 在編輯器工具列中，按一下​ 「置中對齊」 （ ）將影像置中於欄。

  {width="600" modal="regular"}

將插入點放在五星級影像之後，按下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

文字會在您鍵入時置中。

{width="600" modal="regular"}中置中的文字

格式化文字：

• 按一下第一行文字中的任何位置，然後在編輯器工具列的​ 格式 ​下選擇Heading 2。

• 選取剩餘的文字，然後在編輯器工具列的​ 格式 ​下，選擇Paragraph。

文字會根據與主題關聯的樣式表來格式化。

取得影像的尺寸，讓您可以在欄中垂直置中內容：

• 將滑鼠停留在第一欄中的影像上，以顯示工具箱，並選擇​ 設定 （ {width="20"} ）圖示。

• 在影像縮圖下方，記下影像的尺寸。

  {width="600" modal="regular"}

• 按一下右上角的​ 關閉。

將內容垂直置中於第二欄：

• 將滑鼠游標停留在第二欄以顯示工具箱，然後選擇​ 設定 （ {width="20"} ）圖示。

• 對於​ Minimum Height，請在第一欄輸入450作為影像的高度（畫素）。

• 將​ Vertical Alignment ​設為Center。

{width="600" modal="regular"}

向下捲動至​ Advanced ​區段，並將所有​ Margins and Padding ​值設定為零( 0 )。

{width="600" modal="regular"}

捲動回頁面頂端，然後在右上角按一下​ Save ​以儲存設定並返回Page Builder工作區。

{width="600" modal="regular"}具有稽核內容

選取Antonia Racer Tank文字並按一下編輯器工具列中的​ 插入連結 （ ）圖示。

在​ 插入連結 ​對話方塊中，指定目錄產品的連結：

• 輸入產品​ URL。

  您可以輸入相對或完全限定的URL。 此範例會輸入下列相對連結：

  ../antonia-racer-tank.html

• （選擇性）對於​ Title，請輸入產品名稱。

  有些瀏覽器會將「標題」連結屬性當做工具提示使用。

  {width="600" modal="regular"}

• 完成時，按一下​ OK ​以儲存連結。

  連結的文字現在會在橫幅中反白顯示。

  {width="600" modal="regular"}

在舞台的右上角，按一下​ 關閉全熒幕 （ ）圖示。

按一下此圖示會返回頁面的​ Content ​區段，並顯示預覽。

按一下右上角的​ Save。

如有必要，請展開 Content ​區段。

按一下​ Edit with Page Builder ​或在內容預覽區域內。

將滑鼠停留在舞台上的第一列以顯示工具箱，然後選擇​ 移動 （ ）圖示。

{width="600" modal="regular"}

按住滑鼠鍵，確認已選取列中的所有內容，並將列拖曳至頁面底部紅色指引下方的位置。

{width="600" modal="regular"}

重複此程式，將第一列移至第二位置。

頁面上的列順序現在與簡單頁面範例相符。

在舞台的右上角，按一下​ 關閉全熒幕 （ ）圖示。

按一下此圖示會返回頁面的​ Content ​區段，並顯示預覽。

在右上角，按一下​ Save ​箭頭並選擇​ Save & Close。

如果出現提示，請按一下頁面頂端訊息中的快取管理連結，並重新整理任何無效的快取。