Page Builder チュートリアル第 1 部：シンプルなページ
この 3 つのパートから成る演習に従って、 Page Builder workspace：独自のデザインのコンテンツに富んだページを簡単に作成できるシンプルなページを作成します。
始める前に
この演習を開始する前に、を増やすことを推奨します 管理セッションの有効期間 を使用して、作業中にセッションがタイムアウトしないようにします。
必要なコンテンツ管理設定を確認します。
-
で WYSIWYG エディターが有効になっている WYSIWYG オプション 設定。
-
Page Builder では有効になっています 高度なコンテンツツール 設定。
チュートリアル画像アセットのダウンロード
-
をダウンロード
simple-page-assetsファイルを作成し、ローカルシステムにファイルを保存します。 -
ダウンロードしたファイルに移動し、zip 形式のファイルを解凍します。
Windows システムでは、右クリックして次のコマンドを選択します。 Extract All ファイル。 次に、保存先フォルダーを選択し、 Extract.
Mac システムでは、zip ファイルをダブルクリックするだけで、抽出したファイルを保存先フォルダーに移動できます。
フォルダーには、次の画像ファイルが含まれています。
このチュートリアルの 3 つの部分を順番に実行します。
パート 1：バナー付きフルブリード行
シンプルなページの演習のこの部分では、裁ち落とし行とバナーが満杯のページを作成します。 行の背景画像は、デスクトップとモバイルデバイスで異なります。
手順 1：ページを作成する
-
日 Admin サイドバー、に移動 Content > Elements>Pages.
-
右上隅のをクリックします。 Add New Page 次の手順を実行します。
-
このページがストアで公開されないようにするには、次を設定します Enable Page 対象：
No. -
の場合 Page Title、と入力します
Simple Page.
-
-
を展開
に注意してください Layout はに設定されています。
Page -- Full Widthデフォルトでは。 5 つの標準に加えて layout オプション、 Page Builder ページ、カテゴリ、製品に全幅レイアウトを追加します。 -
サンプルデータが使用可能な場合は、を設定します New Theme 対象：
Magento Luma. それ以外の場合は、別の使用可能なテーマを選択するか、空白のままにしてデフォルトのテーマを使用できます。この New Theme 設定を使用して、デフォルトのテーマを上書きしたり、ページに別のテーマを適用したりできます。
note note NOTE 全幅レイアウトは、互換のでのみ使用できます テーマ. 
-
右上隅のをクリックします。 Save.
ページを保存すると、名前 シンプルなページ ページの左上隅に表示されます。
手順 2：行のフォーマット
-
を展開
このアクションにより、が表示されます Page Builder 空の行でプレビューします。
note note NOTE この コンテンツの見出し フィールドはオプションです。 デフォルトでは、テーマに従って見出しレベル 1 （H1）の形式になっています。 この演習では、 コンテンツの見出し は空白のままにします。 
-
クリック Edit with Page Builder またはコンテンツプレビュー領域内です。
展開済み Page Builder workspace左側のパネルには、ステージでコンテンツを作成するためのコンテンツツールが表示されます。
-
空の行の上にマウスポインターを置くと、ツールボックスが表示されます。
各コンテンツコンテナには、同様のオプションのセットを持つツールボックスがあります。
-
行ツールボックスで、 設定 （
-
次の下 Appearance、を選択 全出血.
フルブリードアピアランスの設定では、行と背景のコンテンツ領域の左右の境界線がページの全幅に拡張されます。
-
にスクロール ダウンします。 Advanced section と set all Margins and Padding 設定
0.この設定により、バナーが行の全幅を拡張します。
-
設定を保存し、に戻るには Page Builder ワークスペースで、ページの上部までスクロールし、 Save 右上隅
手順 3：バナーの追加
-
が含まれる Page Builder パネル、展開 Media をドラッグします。 バナー ステージへのプレースホルダー。
-
バナーコンテナの上にマウスポインターを置くと、ツールボックスが表示されます。
note note NOTE ステージに 2 つのコンテンツコンテナが追加され、それぞれに個別のツールボックスが表示されます。 バナーは行内にネストされているので、正しいツールボックスで作業していることを確認してください。 ツールボックスに加えて、 画像をアップロード および ギャラリーから選択 ボタンを使用すると、ステージから直接バナーに素早く変更を加えることができます。
-
バナーツールボックスで、 設定 （
-
次の下 Appearance、を選択 Collage Right.
右にコラージュ設定では、コンテンツがバナーの右側に配置されます。
-
にスクロール ダウンします。 Background セクションに移動して、バナーの背景画像を設定します。
-
の場合 Background Image を選択し、 Upload.
抽出したシンプルなページアセットを保存したディレクトリに移動して、
wide-banner-background.jpgファイル。画像がアップロードされ、アップロードされた画像のサムネールが表示されます。 ファイル名、画像のサイズおよびファイルサイズについては、以下で説明します。
-
の場合 Background Mobile Image を選択し、 Upload.
同じファイルディレクトリで、
wide-banner-background-mobile.jpgファイル。モバイルの背景画像はモバイルデバイスで使用され、デスクトップブラウザーウィンドウのサイズがモバイルデバイスの幅に変更された場合にも使用されます。
-
ページの先頭までスクロールして戻り、 Save 設定を保存し、に戻ります Page Builder ワークスペース。
背景がステージ上に表示され、行の全幅を拡張します。
行の右側にプレースホルダーテキストが表示されます。 このテキストの位置は、 コラージュ権限 外観設定。
-
-
プレースホルダーテキストをクリックし、次のメッセージを 2 行で入力します。
Get fit and look fab in new seasonal styles.New LUMA yoga collectionテキストボックスの上にエディターツールバーが表示されます。 テキストの入力と書式設定は、ステージから直接行うことも、 設定 バナーのツールボックスで調整します。
-
テキストに書式を適用する：
-
テキストの 1 行目を選択します。 次に、の下にあるエディターツールバーで 形式、を選択
Heading 2.
-
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または 16 進数値#ffffff.
次に、 Apply.
-
ページの先頭までスクロールして戻り、 Save 設定を保存し、に戻ります Page Builder ワークスペース。
ボタンは、ステージのバナーメッセージの下に表示されます。
-
-
ステージの右上隅にあるをクリックします 全画面表示を閉じる （
このアイコンをクリックすると、に戻ります Content プレビューが表示されたページの「」セクション。
2 つのワークスペースモードは、必要に応じていつでも切り替えることができます。
-
右上隅のをクリックします Save 矢印と選択 Save & Close.
-
プロンプトが表示されたら、 キャッシュ管理 ページ上部のメッセージ内のリンクをクリックし、無効なキャッシュを更新します。
パート 2:2 つの等しい列を持つ行
演習のこの部分では、ページに行を追加し、その行を 2 つの等しい列に分割します。 次に、各列にリンク画像を追加します。 この手順では、新しい各行を最初の行の前に追加して、 Page Builder ステージに合わせてパネルを並べます。 演習の最後では、簡単なページの例と一致するように行を並べ替えます。
手順 1：行を追加
-
ページグリッドで、を見つけます。 シンプルなページ この練習の最初のパートで作成し、を選択していること Edit が含まれる Action 列。
-
を展開
-
クリック Edit with Page Builder またはコンテンツプレビュー領域内です。
-
が含まれる Page Builder 下のパネル Layout、ドラッグ：Row プレースホルダーをステージに追加して、バナーの上に配置します。
赤いガイドラインは、2 行の境界を示します。
-
新しい行にカーソルを合わせてツールボックスを表示し、 設定 （
-
次の下 Appearance、を承認します 含まれる デフォルト設定。
この設定により、テーマで定義されているページの幅に行のコンテンツ領域が制限されます。
-
右上隅のをクリックします。 Save 設定を保存し、に戻ります Page Builder ワークスペース。
手順 2：列の追加
-
が含まれる Page Builder 下のパネル Layout、ドラッグ：Column 新しい行へのプレースホルダー。
これで、行が同じ幅の 2 つの列に分割されました。 各列は、コンテンツ用の個別のコンテナであり、専用のオプションのツールボックスを持ちます。
-
最初の列の左上隅にある円形をクリックします グリッド コントロール （
グリッドにより、コンテンツの一貫性が確保され、デスクトップとモバイルデバイスの両方で正しくレンダリングされます。 グリッド サイズの設定については、 設定 Page Builder セクション： Page Builder 設定トピック。
各列コンテナの上部の境界線の括弧内の数字（6/12）は、各列のグリッド分割数と、行内の分割数の合計を示します。
手順 3：リンクを使用した画像の追加
この手順では、画像をバナーにアップロードする方法を説明します。
-
が含まれる Page Builder パネルの、 Media を選択してドラッグ Image 最初の列へのプレースホルダー。
-
サンプル画像をプレースホルダに挿入します。
システム上の画像の場合は、次のいずれかの方法を選択できます。
-
画像ファイルのアップロード：最初の列で、 Upload Image. 次に、抽出したシンプルなページアセットを保存したディレクトリに移動して、を選択します。
small-banner-1.jpgファイル。
このアクションを繰り返して、
small-banner-2.jpgファイルを 2 番目の列に追加します。 -
画像ファイルをドラッグ：デスクトップで、シンプルページアセットフォルダーを開いて、を使用している管理者ブラウザーウィンドウの横に配置します Page Builder ステージ。 次に、ファイルをドラッグします
small-banner-1.jpgsimple page assets フォルダーから、最初の列にドロップします。
このアクションを繰り返して、
small-banner-2.jpgファイルを 2 番目の列に追加します。
-
-
各画像にリンクするページをカタログから決定します。
-
最初の列の画像の上にマウスポインターを置いてツールボックスを表示し、 設定 （
-
画像をカテゴリにリンクする：
-
下にスクロールして設定 リンク 対象：
Category. -
カテゴリツリーでドリルダウンし、
Men's Hoodies & Sweatshirtカテゴリ。 -
右上隅に Save 設定を選択し、に戻ります。 Page Builder ワークスペース。
-
-
前の手順を繰り返して、2 列目の画像をにリンクします 歯車 カテゴリ。
-
ステージの右上隅にあるをクリックします 全画面表示を閉じる （
このアイコンをクリックすると、に戻ります Content プレビューが表示されたページの「」セクション。
-
右上隅のをクリックします Save 矢印と選択 Save & Close.
-
プロンプトが表示されたら、 キャッシュ管理 ページ上部のメッセージ内のリンクをクリックし、無効なキャッシュを更新します。
パート 3：列が等しくない全幅の行
このページの最後の行には、製品レビューのコンテンツが表示されます。 全幅の行を追加し、幅の異なる 2 つの列に分割します。 最初の列に背景画像が追加され、一致する背景色が行に適用されて、統一された効果が得られます。
手順 1：行を追加
-
ページグリッドで、を見つけます。 シンプルなページ この練習の最初のパートで作成し、を選択していること Edit が含まれる Action 列。
-
を展開
-
クリック Edit with Page Builder またはコンテンツプレビュー領域内です。
-
が含まれる Page Builder 下のパネル Layout、ドラッグ：Row ステージにプレースホルダーを配置し、この演習の 2 番目の部分で作成した行の上に配置します。
赤いガイドラインは、2 行の境界を示します。
-
新しい行にカーソルを合わせてツールボックスを表示し、 設定 （
-
の下にある行を編集ページで Appearance、を選択 Full Width.
この設定により、コンテンツ領域が、テーマで定義されている最大ページ幅に制限されます。 背景色や画像に制限はなく、行の全幅を広げます。
-
が含まれる Background セクション、を入力
#f1f1f1as the Background Color.
-
にスクロール ダウンします。 Advanced section と set all 余白とパディング 値：至
0. -
ページの先頭までスクロールして戻り、 Save 設定を保存し、に戻ります Page Builder ワークスペース。
行の背景色が淡いベージュになります。
手順 2：異なる幅の列の追加
-
が含まれる Page Builder 下のパネル Layout、ドラッグ：Column ステージの一番上の行へのプレースホルダー。
-
最初の列の右側の境界線をドラッグして、「4/12」にします（
4/12）をグリッド上に配置します。2 番目の列のサイズは、8/12 に調整されます（
8/12）に設定します。
-
最初の列コンテナにポインタを合わせてツールボックスを表示し、 設定 （
-
にスクロール ダウンします。 Advanced section と set all 余白とパディング 値：至
0. -
ページの先頭までスクロールして戻り、 Save 設定を保存し、に戻ります Page Builder ワークスペース。
手順 3：最初の列への画像の追加
-
が含まれる Page Builder パネル、展開 Media をドラッグして Image 最初の列にコンテンツタイプを追加します。
-
画像のプレースホルダーでをクリックします Upload Image.
-
抽出したシンプルなページアセットを保存したディレクトリに移動して、
review-image.jpgファイル。アップロードされた画像は最初の列に表示され、行の背景色とシームレスにブレンドされます。
手順 4:2 列目へのレビューコンテンツの追加
行の 2 番目の列には、顧客レビューのコンテンツ（5 つ星評価の画像と書式設定されたテキストメッセージを含む）が含まれている必要があります。
-
が含まれる Page Builder パネルの、 Elements 「」セクションをドラッグします。 Text 2 番目の列にコンテンツタイプを追加します。
-
テキスト要素内をクリックして、エディターツールバーを表示します。
-
ツールバーで、 画像の挿入 （
-
が含まれる Insert/edit image ダイアログで、検索（
-
日 Select Images ページ、クリック Choose Files.
-
シンプルなページアセットを保存したフォルダーで、を選択します。
rating.png. -
ページに戻り、画像タイルをダブルクリックして選択し、その URL をソースフィールドに挿入します。
-
の場合 Image Description、と入力します
5-Star Ratingをクリックして、 OK をクリックして、画像を列に挿入します。 -
エディターツールバーで、 中央揃え （
-
-
5 つ星の画像の直後に挿入ポイントを置き、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入力したテキストが中央揃えになります。
-
テキストの書式を設定します。
-
テキストの 1 行目とエディターツールバーの下の任意の場所をクリックします 形式、を選択
Heading 2. -
残りのテキストを選択し、の下にあるエディターツールバーで 形式、を選択
Paragraph.
テキストは、テーマに関連付けられたスタイルシートに従って書式設定されます。
-
-
コンテンツを垂直方向に列の中央に配置できるように、画像のサイズを取得します。
-
最初の列の画像の上にマウスポインターを置いてツールボックスを表示し、 設定 （
-
画像のサムネールの下に、画像のサイズが表示されます。
-
右上隅のをクリックします。 閉じる.
-
-
コンテンツを 2 列目に垂直方向の中央に配置します。
- 2 番目の列にカーソルを合わせてツールボックスを表示し、 設定 （
note note NOTE 正しいツールボックスを表示するには、必ずテキストコンテナではなく列コンテナを選択します。 -
の場合 Minimum Height、と入力します
450最初の列の画像の高さをピクセル単位で指定します。 -
を設定 Vertical Alignment 対象：
Center.
- 2 番目の列にカーソルを合わせてツールボックスを表示し、 設定 （
-
にスクロール ダウンします。 Advanced section と set all Margins and Padding 値をゼロに（
0）に設定します。 -
ページの先頭までスクロールして戻り、右上隅のをクリックします。 Save 設定を保存し、に戻ります Page Builder ワークスペース。
手順 5：カタログ製品リンクの挿入
-
「」を選択します
Antonia Racer Tankテキストを入力し、 リンクを挿入 （
-
が含まれる リンクを挿入 ダイアログで、カタログ製品へのリンクを指定します。
-
製品を入力 URL.
相対 URL または完全修飾 URL のいずれかを入力できます。 この例では、次の相対リンクが入力されます。
../antonia-racer-tank.html -
（オプション） タイトル、製品名を入力します。
タイトルリンク属性は、一部のブラウザーでツールヒントとして使用されます。
-
完了したら、 OK をクリックしてリンクを保存します。
リンクされたテキストがバナーでハイライト表示されます。
-
-
ステージの右上隅にあるをクリックします 全画面表示を閉じる （
このアイコンをクリックすると、に戻ります Content プレビューが表示されたページの「」セクション。
-
右上隅のをクリックします。 Save.
手順 6：行の並べ替え
3 つの行がすべて完了したら、最後の手順は、元の行に一致するように行を再配置することです シンプルなページ 例えば、のようになります。 元の例と一致させるには、最初の行を一番下に、最後の行を一番上に移動する必要があります。
-
必要に応じて、を展開
-
クリック Edit with Page Builder またはコンテンツプレビュー領域内です。
-
ステージの最初の行の上にマウスポインターを置いてツールボックスを表示し、 移動 （
-
マウスボタンを押したまま、行内のすべてのコンテンツが選択されていることを確認し、行をページ下部の赤いガイドラインの下にドラッグします。
note note NOTE コンテンツの一部（画像など）のみを誤って移動した場合は、コンテンツが属する場所にコンテンツを戻して、もう一度試してください。 
-
この手順を繰り返して、1 行目を 2 行目に移動します。
ページの行の順序が、シンプルなページの例と一致するようになりました。
-
ステージの右上隅にあるをクリックします 全画面表示を閉じる （
このアイコンをクリックすると、に戻ります Content プレビューが表示されたページの「」セクション。
-
右上隅のをクリックします Save 矢印と選択 Save & Close.
-
プロンプトが表示されたら、 キャッシュ管理 ページ上部のメッセージ内のリンクをクリックし、無効なキャッシュを更新します。
これで、シンプルなページの演習は完了です。 作成した作業は保持しておくと、後で参照できます。
準備ができたら、次に進みます。 パート 2：ブロック.