Page Builder チュートリアル第 1 部：シンプルなページ
この 3 部構成の演習に従って、独自のデザインのコンテンツに富んだページを簡単に作成できるシンプルなページを作成することで、Page Builder Workspace に精通します。
始める前に
この演習を開始する前に、 管理者セッションの有効期間を増やして、作業中にセッションがタイムアウトしないようにすることをお勧めします。
必要なコンテンツ管理設定を確認します。
-
WYSIWYG エディターは、WYSIWYG オプション設定で有効になっています。
-
Advanced Content Tools 設定で Page Builder が有効になっている。
チュートリアル画像アセットのダウンロード
-
simple-page-assetsファイルをダウンロードし、ローカルシステムに保存します。 -
ダウンロードしたファイルに移動し、zip 形式のファイルを解凍します。
Windows システムでは、右クリックしてファイル Extract All 選択します。 次に、宛先フォルダーを選択し、「Extract」をクリックします。
Mac システムでは、zip ファイルをダブルクリックするだけで、抽出したファイルを保存先フォルダーに移動できます。
フォルダーには、次の画像ファイルが含まれています。
このチュートリアルの 3 つの部分を順番に実行します。
パート 1：バナー付きフルブリード行
シンプルなページの演習のこの部分では、裁ち落とし行とバナーが満杯のページを作成します。 行の背景画像は、デスクトップとモバイルデバイスで異なります。
バ
手順 1：ページを作成する
-
管理者 サイドバーで、Content/Elements/Pages に移動します。
-
右上隅の「Add New Page」をクリックして、次の操作を行います。
-
このページがストアで公開されないようにするには、Enable Page を
Noに設定します。 -
Page Title には、
Simple Pageと入力します。
-
-
「
Layout は、デフォルトで
Page -- Full Widthに設定されています。 5 つの標準の レイアウトオプションに加えて、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 ワークスペースの左側のパネルには、ステージでコンテンツを作成するためのコンテンツツールが表示されます。
-
空の行の上にマウスポインターを置くと、ツールボックスが表示されます。
各コンテンツコンテナには、同様のオプションのセットを持つツールボックスがあります。
-
行ツールボックスで、設定 （
-
「Appearance」で「フルブリードアウト」を選択します。
フルブリードアピアランスの設定では、行と背景のコンテンツ領域の左右の境界線がページの全幅に拡張されます。
-
「Advanced」セクションまでスクロールし、すべての Margins and Padding 設定を「
0」に設定します。この設定により、バナーが行の全幅を拡張します。
-
設定を保存して Page Builder ワークスペースに戻るには、ページの上部まで上にスクロールし、右上隅の「Save」をクリックします。
手順 3：バナーの追加
-
Page Builder パネルで Media を展開し、「バナー」プレースホルダーをステージにドラッグします。
-
バナーコンテナの上にマウスポインターを置くと、ツールボックスが表示されます。
note note NOTE ステージに 2 つのコンテンツコンテナが追加され、それぞれに個別のツールボックスが表示されます。 バナーは行内にネストされているので、正しいツールボックスで作業していることを確認してください。 ツールボックスに加えて、画像をアップロード ボタンと ギャラリーから選択 ボタンが含まれており、ステージから直接バナーに素早く変更を加えることができます。
-
バナーツールボックスで、設定 （
-
「Appearance」で、「Collage Right」を選択します。
右にコラージュ設定では、コンテンツがバナーの右側に配置されます。
-
Background のセクションまでスクロールし、バナーの背景画像を設定します。
-
Background Image しくは、「アップロード」をクリックします。
抽出したシンプルなページアセットを保存したディレクトリに移動して、
wide-banner-background.jpgファイルを選択します。画像がアップロードされ、アップロードされた画像のサムネールが表示されます。 ファイル名、画像のサイズおよびファイルサイズについては、以下で説明します。
-
Background Mobile Image しくは、「アップロード」をクリックします。
同じファイルディレクトリで、
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：行を追加
-
ページグリッドで、この演習の最初の部分で作成した シンプルなページ を見つけ、Action の列の Edit を選択します。
-
「
-
コンテンツプレビュー領域の Edit with Page Builder または内側をクリックします。
-
Layout の下の Page Builder パネルで、Row プレースホルダーをステージにドラッグし、バナーの上に配置します。
赤いガイドラインは、2 行の境界を示します。
-
新しい行にカーソルを合わせてツールボックスを表示し、「設定」（
-
「Appearance」で、「含まれる デフォルト設定 を受け入れます。
この設定により、テーマで定義されているページの幅に行のコンテンツ領域が制限されます。
-
右上隅の「Save」をクリックして設定を保存し、Page Builder ワークスペースに戻ります。
手順 2：列の追加
-
Page Builder パネルの Layout の下で、Column のプレースホルダーを新しい行にドラッグします。
これで、行が同じ幅の 2 つの列に分割されました。 各列は、コンテンツ用の個別のコンテナであり、専用のオプションのツールボックスを持ちます。
-
最初の列の左上隅にある円形の Grid コントロール （
グリッドにより、コンテンツの一貫性が確保され、デスクトップとモバイルデバイスの両方で正しくレンダリングされます。 グリッド サイズの構成については、「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.jpgを simple page assets フォルダーからドラッグし、最初の列にドロップします。
この操作を繰り返して、
small-banner-2.jpgファイルを 2 番目の列に追加します。
-
-
各画像にリンクするページをカタログから決定します。
-
最初の列の画像の上にマウスポインターを置くと、ツールボックスが表示され、設定 （
-
画像をカテゴリにリンクする：
-
下にスクロールして、リンク を
Categoryに設定します。 -
カテゴリツリーでドリルダウンし、
Men's Hoodies & Sweatshirtのカテゴリを選択します。 -
右上隅にある設定を Save リックし、Page Builder ワークスペースに戻ります。
-
-
前の手順を繰り返して、2 列目の画像を 歯車 カテゴリにリンクします。
-
ステージの右上隅にある フルスクリーンを閉じる （
このアイコンをクリックすると、ページの「Content」セクションに戻り、プレビューが表示されます。
-
右上隅の Save 矢印をクリックし、「Save & Close」を選択します。
-
プロンプトが表示されたら、ページ上部のメッセージに含まれている キャッシュ管理リンクをクリックし、無効なキャッシュを更新します。
パート 3：列が等しくない全幅の行
このページの最後の行には、製品レビューのコンテンツが表示されます。 全幅の行を追加し、幅の異なる 2 つの列に分割します。 最初の列に背景画像が追加され、一致する背景色が行に適用されて、統一された効果が得られます。
手順 1：行を追加
-
ページグリッドで、この演習の最初の部分で作成した シンプルなページ を見つけ、Action の列の Edit を選択します。
-
「
-
コンテンツプレビュー領域の Edit with Page Builder または内側をクリックします。
-
Layout の下の Page Builder パネルで、Row プレースホルダーをステージにドラッグし、この演習の 2 番目の部分で作成した行の上に配置します。
赤いガイドラインは、2 行の境界を示します。
-
新しい行にカーソルを合わせてツールボックスを表示し、設定 （
-
Appearance の下の [ 行の編集 ] ページで、[Full Width] を選択します。
この設定により、コンテンツ領域が、テーマで定義されている最大ページ幅に制限されます。 背景色や画像に制限はなく、行の全幅を広げます。
-
「Background」セクションで、Background Color として
#f1f1f1と入力します。
-
Advanced セクションまで下にスクロールし、すべての 余白とパディング の値を
0に設定します。 -
ページの上部までスクロールして戻り、「Save」をクリックして設定を保存し、Page Builder ワークスペースに戻ります。
行の背景色が淡いベージュになります。
手順 2：異なる幅の列の追加
-
Layout の下の Page Builder パネルで、Column のプレースホルダーをステージの一番上の行にドラッグします。
-
最初の列の右側の境界線を、グリッド上の 4 つの 12 （
4/12）の位置にドラッグします。2 番目の列のサイズは、12 の 8 に調整されます（
8/12）。
-
最初の列コンテナにカーソルを合わせてツールボックスを表示し、設定 （
-
Advanced セクションまで下にスクロールし、すべての 余白とパディング の値を
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 ダイアログで、Source フィールドの横にある 検索 （
-
Select Images ページで「Choose Files」をクリックします。
-
シンプルなページアセットを保存したフォルダーで、「
rating.png」を選択します。 -
ページに戻り、画像タイルをダブルクリックして選択し、Source フィールドに 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に設定します。
-
-
Advanced セクションまでスクロールし、すべての 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：ブロックに進みます。