Magento Commerce2.3からの拡張機能で付いてきたPage Builderを使い、マークアップが得意ではない方やこれから触ってみたいと思ってる方でも簡単なページが作成できるようになりました。入門ページ作成を3章に分けて説明していきます。前回の2章では大きさの等しい2つのリンク付き画像が入った行を作成しました。

第1章　バナー付き・Full-Bleed の行を作る

第2章　Contained 行と等しい2つの列

第3章　Full Widthの行と不等列

簡単なページ作成シリーズ最後の第3章では、商品レビューの作成です。Full-Width（全幅：コンテンツの幅は制限するが、背景色や画像は制限なしに広がる）の行を使用します。そして今回は幅の異なる2つの列に分割し、画像とテキストを追加します。最後に今まで作ってきた行の配置を並び替えて完成となります。

それでは下記の画像を、次のステップに沿って作成していきます。

ステップ1：新しい行の追加

    1. ページビルダーパネル内のレイアウトの行 （Row）をステージ上にドラッグします。
    2. カーソルを合わせツールボックスの設定を選択します。
    3. Appearance（外観）を真ん中のFull-Widthを選択します。
    4. Background（背景）の Background Colorを＃f1f1f1を入力します
    5. Advanced（詳細）Margins & Padding を全て0にします。
    6. 右上のsaveをタップします。
    7. 薄いグレーのFull Widthの行が出来上がりました。

ステップ2：幅の異なる列を追加

  1. ページビルダーパネル内のレイアウトの「Column」を今作ったグレーの行にドラッグします。
  2. 真ん中の境界線にカーソルを合わせると列の大きさを変えられるので左側を（4/12）サイズに右側が（8/12）サイズにします。
  3. 左（4/12）の列にカーソルを合わせてツールボックスの設定を選択します。
  4. Advanced（詳細）Margins & Padding を全て0にします。
  5. 右上のsaveをタップします。

ステップ3：画像の貼り付け

  1. ページビルダーパネル内のMedia内の「image」を左（4/12サイズ）の列にドラッグします。
  2. アップロードかギャラリーから画像を選択します。
  3. 貼り付けた画像の背景と行の背景が同じ色になり統一が出ました。
  4. 右上のsaveをタップします。

ステップ4：レビューコンテンツの追加

  1. ページビルダーパネル内のElementsの中のTextを右の列にドラッグします。
  2. テキストツールバー内の（insert/edit image）を選択します。
  3. Sourceの隣のカメラマークを選択します。
  4. ギャラリーかアップロードの中から画像を選択します。
  5. Image Description欄に名前をつけて下のOKボタンをタップします。
  6. ツール内のAlign Centerをタップして中央揃えにします。
  7. 追加した星の画像の直後に挿入ポイントを置き、Enterキーを押して新しい行を開始します。
  8. 一行目を選択して「Formats」をHeading2（見出し2）にして書いていきます。
  9. 二行目以降は「Formats」をParagraph（段落）にして書きます。
  10. 入力後はテキストも星画像と同様、中央揃えにします。
  11. 左の画像とテキストを横一列に合わせにするには画像の縦のサイズを確認する必要があります。
  12. 左の画像にカーソルを合わせてツールボックス内の設定を選択します。
  13. 画像の下の寸法を書き留めます。
  14. 二列目の「Text」ではなく外枠の「Column」にカーソルを合わせ、ツールボックス設定を選択します。
  15. 「Layout」のMinimum Heightを先ほどの画像の高さを入力します。（この画像だと450pxです）
  16. Vertical Alignmentをセンターに変更します。
  17. Advanced（詳細）Margins & Padding を全て0にします。
  18. 右上のsaveをタップします。

ステップ5：商品リンクの挿入

  1. テキスト内の文章をクリックし、Insert Linkをタップします。
  2. 商品のURLを入力します。
  3. Text to display とTitleを入力します。
  4. OKをタップでテキストにリンクを貼れました。

ステップ6：行の並び替え

  1. ステージ上の最初の行にカーソルを合わせ、ツールボックスのMoveを選択します。
  2. マウスボタンを押したまま、行のすべてのコンテンツが選択されていることを確認します。次に、ページの下部にある赤いガイドラインの下の位置に行をドラッグします。
  3. このプロセスを繰り返して、最初の行を2番目の位置に移動します。
  4. 右上のsaveをタップします。
  5. 編集ページに戻ったら右上隅にSAVEの中のSave & Close.を選択し保存します。

おめでとうございます。これで商品レビューの行を作り、「簡単なページ作成」を完成する事が出来ました。Page Builderの基本の操作は分かっていただけましたでしょうか？次回からは各コンテンツの詳細を説明し、マップや商品カタログなどの追加機能の作成紹介をしていきます。