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

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

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

第2章では、新しいContained行を追加し大きさの等しい列に分割します。次に、分割した各列にそれぞれ画像を添付していきます。最後に添付した画像に商品ページをリンクしていきます。

それでは、下記のステップに沿ってこちらの行を作成していきます。

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

  1. ページビルダーパネルのレイアウトの中の「Row」を上の赤いガイドラインまでドラッグし、新しい行を配置します。
  2. 行にカーソルを合わせ、ツールボックスの設定を開きます。
  3. 外観設定（Appearance）→「Contained」（背景画像をコンテンツの幅に合わせ制限させるという事）を選択します。右上のsaveをタップします。

ステップ2：列を追加

  1. ページビルダーパネルのレイアウトの中のColumn（列）をステップ1で作った行の中にドラッグします。
  2. これで、行は幅が等しい2列に分割されました。分けられた列はそれぞれ個別のコンテナになります。
  3. 列の左上隅にある丸いグリッドのコントロールをクリックして分割の幅、分割数を変える事が出来ます。今回は等しい大きさを2つに分割するのでそのままにします。

ステップ3：画像を追加

  1. ページビルダーパネルからメディア欄の「Image」を左の列にドラッグします。
  2. 画像の添付方法は2つあります。1つ目は、アップロードかギャラリーから画像を選択し貼り付けます。
  3. 「Add Selected」を押して画像を貼り付けます。
  4. 2つ目の方法は、最初は同じで「Image」を右の列にドラッグします。
  5. デスクトップで、画像をダウンロードページを開き、作業しているMagentoページの横に配置します。
  6. ダウンロードページから画像をドラッグし、2列目にそのままドロップする方法です。

ステップ4：画像をリンク

  1. 追加した画像にカーソルを合わせ、ツールボックスの設定を選択します。
  2. 「Link」の設定までスクロールし、Linkを「Category」に変更します。
  3. カテゴリーツリーを「Men」→「Tops」→「Jackets」に設定します。
  4. 右上のsaveをタップします。
  5. もう一枚の右の列の画像には、カテゴリツリーを「Women」→「Bottoms」→「Shorts」にします。
  6. 右上のsaveをタップします。
  7. >編集ページに戻ったら右上隅にSAVEの中のSave & Close.を選択し保存します。

おめでとうございます。これで2つ目の、等しい大きさのリンク付き画像が添付されたContained行が出来上がりました！

第3章、最後の行は製品レビュー内容のページを作成します。Full-Width（全幅）行を使用し、幅の異なる2つの列に分割して画像とテキストを入れていきます。その後、これまで作成してきた3つの行を並び替えて完成です。