Page Builder チュートリアル パート 1: シンプルなページ
この3つの部分で構成される演習に従って、独自のデザインのコンテンツ豊富なページを簡単に作成できるシンプルなページを作成して、Page Builder ワークスペースに慣れましょう。
始める前に
この演習を開始する前に、作業中にセッションがタイムアウトしないように、管理者セッション有効期間を増やすことをお勧めします。
必要なコンテンツ管理設定を確認します。
-
WYSIWYG エディターは、WYSIWYG オプション 設定で有効になっています。
-
Page Builderは、詳細コンテンツツール 設定で有効になっています。
チュートリアル画像アセットのダウンロード
-
simple-page-assetsファイルをダウンロードし、ローカルシステムにファイルを保存します。 -
ダウンロードしたファイルに移動し、圧縮されたファイルを抽出します。
Windows システムで右クリックし、Extract All ファイルを選択します。 次に、宛先フォルダーを選択し、Extractをクリックします。
Macでは、zip ファイルをダブルクリックして、抽出したファイルを保存先のフォルダーに移動することができます。
フォルダーには、次の画像ファイルが含まれています。
このチュートリアルの3つの部分を順番に進めます。
パート 1：バナー付きのフルブリード行
シンプルなページの演習のこの部分では、フルブリードの行とバナーを持つページを作成します。 行には、デスクトップとモバイルデバイスの異なる背景画像があります。
バナー
手順1：ページの作成
-
管理者 サイドバーで、Content > Elements>Pagesに移動します。
-
右上隅の「Add New Page」をクリックし、次の操作を行います。
-
このページがストアで公開されないようにするには、Enable Pageを
Noに設定します。 -
Page Titleに対して、
Simple Pageと入力します。
-
-
Design セクションの
Layoutがデフォルトで
Page -- Full Widthに設定されていることに注意してください。 5つの標準 レイアウト オプションに加えて、Page Builderでは、ページ、カテゴリ、製品の全幅レイアウトが追加されます。 -
サンプルデータが使用可能な場合は、New Themeを
Magento Lumaに設定します。 そうでない場合は、別の利用可能なテーマを選択するか、空白のままにしてデフォルトのテーマを使用できます。New Theme設定を使用すると、デフォルトのテーマを上書きしたり、別のテーマをページに適用したりできます。
note NOTE 全幅レイアウトは、互換性のある テーマ でのみ使用できます。 
-
右上隅の「Save」をクリックします。
ページを保存すると、ページの左上隅に「シンプルなページ」という名前が表示されます。
手順2：行の書式設定
-
Content セクションの
このアクションは、空の行を含むPage Builder プレビューを表示します。
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 ステージには2つのコンテンツコンテナがあり、それぞれに個別のツールボックスがあります。 バナーは行の内側にネストされているため、正しいツールボックスで作業していることを確認してください。 ツールボックスに加えて、画像をアップロードおよびギャラリーから選択 ボタンが含まれているため、ステージから直接バナーを素早く変更できます。
-
バナーツールボックスで、設定 （
-
Appearanceで、Collage Rightを選択します。
コラージュの右設定では、バナーの右側にコンテンツが配置されます。
-
Backgroundセクションまでスクロールして、バナーの背景画像を設定します。
-
Background Imageの場合、「アップロード」をクリックします。
抽出した単純なページアセットを保存したディレクトリに移動し、
wide-banner-background.jpgファイルを選択します。画像がアップロードされ、アップロードされた画像のサムネールが表示されます。 ファイル名、画像サイズおよびファイルサイズは以下のとおりです。
-
Background Mobile Imageの場合、「アップロード」をクリックします。
同じファイルディレクトリで、
wide-banner-background-mobile.jpgファイルを選択します。モバイル背景画像は、モバイルデバイスに使用され、デスクトップブラウザーウィンドウがモバイルデバイスの幅にリサイズされるたびに使用されます。
-
ページの先頭までスクロールして Save をクリックし、設定を保存してPage Builder ワークスペースに戻ります。
背景がステージに表示され、行の全幅が拡張されます。
行の右側に表示されるプレースホルダーテキストに注目してください。 このテキストの位置は、Collage Rightのアピアランス設定を反映しています。
-
-
プレースホルダーテキストをクリックし、次のメッセージを2行として入力します。
Get fit and look fab in new seasonal styles.New LUMA yoga collectionエディターツールバーがテキストボックスの上に表示されます。 テキストは、ステージから直接入力するか、バナーツールボックスで 設定 を選択して入力および書式設定できます。
-
テキストに書式を適用する：
-
テキストの最初の行を選択します。 次に、形式の下のエディターツールバーで、
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を選択します。
-
プロンプトが表示されたら、ページ上部のメッセージのCache Management リンクをクリックし、無効なキャッシュを更新します。
パート 2:2つの同じ列を持つ行が含まれる
この部分では、ページに行を追加し、その行を2つの等しい列に分割します。 次に、リンクされた画像を各列に追加します。 手順では、最初の行の前に新しい各行が追加され、Page Builder パネルがステージに合わせて並べられます。 演習の最後に、行を単純ページの例に一致するように並べ替えます。
手順1：行を追加する
-
ページグリッドで、この演習の最初の部分で作成した シンプルなページ を見つけ、Action列の Edit を選択します。
-
Content セクションの
-
コンテンツのプレビュー領域の内側にある Edit with Page Builder をクリックします。
-
Layoutの下のPage Builder パネルで、Rowプレースホルダーをステージにドラッグし、バナーの上に配置します。
赤いガイドラインは、2つの行の境界を示します。
-
新しい行にカーソルを合わせてツールボックスを表示し、設定 （
-
Appearanceで、Containedのデフォルト設定を受け入れます。
この設定は、行のコンテンツ領域を、テーマで定義されたページの幅に制限します。
-
右上隅の「Save」をクリックして設定を保存し、Page Builder ワークスペースに戻ります。
手順2：列の追加
-
Layoutの下のPage Builder パネルで、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.jpgをドラッグし、最初の列にドロップします。
この操作を繰り返して、
small-banner-2.jpgファイルを2番目の列に追加します。
-
-
各画像にリンクするカタログのページを決定します。
-
最初の列の画像にカーソルを合わせてツールボックスを表示し、設定 （
-
画像をカテゴリにリンクします。
-
下にスクロールして、Linkを
Categoryに設定します。 -
カテゴリーツリーで、ドリルダウンして
Men's Hoodies & Sweatshirtカテゴリを選択します。 -
右上隅の設定を Save し、Page Builder ワークスペースに戻ります。
-
-
前の手順を繰り返して、2列目の画像を歯車 カテゴリにリンクします。
-
ステージの右上隅で、フルスクリーンを閉じる （
このアイコンをクリックすると、プレビューが表示されたページの Content セクションに戻ります。
-
右上隅の Save 矢印をクリックし、Save & Closeを選択します。
-
プロンプトが表示されたら、ページ上部のメッセージのCache Management リンクをクリックし、無効なキャッシュを更新します。
パート 3：不均等な列を持つ全角行
このページの最後の行には、製品レビューのコンテンツが表示されています。 全幅の行を追加し、幅の異なる2つの列に分割します。 最初の列に背景画像が追加され、一致する背景色が行に適用されて統一された効果が得られます。
手順1：行を追加する
-
ページグリッドで、この演習の最初の部分で作成した シンプルなページ を見つけ、Action列の Edit を選択します。
-
Content セクションの
-
コンテンツのプレビュー領域の内側にある Edit with Page Builder をクリックします。
-
Layoutの下のPage Builder パネルで、Rowプレースホルダーをステージにドラッグし、この演習の2番目の部分で作成した行の上に配置します。
赤いガイドラインは、2つの行の境界を示します。
-
新しい行にカーソルを合わせてツールボックスを表示し、設定 （
-
Appearanceの下の行を編集ページで、Full Widthを選択します。
この設定は、コンテンツ領域をテーマで定義される最大ページ幅に制限します。 背景色や画像は制限されず、行の幅が広くなります。
-
Backgroundセクションに、
#f1f1f1を Background Color として入力します。
-
Advancedセクションまでスクロールし、すべての マージンとパディング の値を
0に設定します。 -
ページの先頭までスクロールして Save をクリックし、設定を保存してPage Builder ワークスペースに戻ります。
行の背景色は淡いベージュになっています。
手順2：幅の異なる列を追加する
-
Layoutの下のPage Builder パネルで、Columnプレースホルダーをステージの一番上の行にドラッグします。
-
最初の列の右端を、グリッド上の12の4つの位置（
4/12）にドラッグします。2番目の列のサイズは、12 （
8/12）のうち8つに調整されます。
-
最初の列コンテナにカーソルを合わせてツールボックスを表示し、設定 （
-
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を選択します。 -
ページに戻り、画像タイルをダブルクリックして選択し、そのURLをSource フィールドに挿入します。
-
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テキストは入力中に中央に配置されます。
-
テキストの書式設定：
-
テキストの最初の行の任意の場所をクリックし、形式の下のエディターツールバーで、
Heading 2を選択します。 -
残りのテキストを選択し、形式の下のエディターツールバーで、
Paragraphを選択します。
テキストは、テーマに関連付けられているスタイルシートに従って書式設定されます。
-
-
画像のサイズを取得して、コンテンツを列の垂直方向に中央に配置できるようにします。
-
最初の列の画像にカーソルを合わせてツールボックスを表示し、設定 （
-
画像のサムネールの下に、画像の寸法をメモします。
-
右上隅で、閉じるをクリックします。
-
-
コンテンツを2列目で垂直方向に中央に配置します。
- 2番目の列にカーソルを合わせてツールボックスを表示し、設定 （
note NOTE 正しいツールボックスを表示するには、テキストコンテナではなく列コンテナを選択してください。 -
Minimum Heightに対して、最初の列の画像の高さをピクセル単位で
450と入力します。 -
Vertical Alignmentを
Centerに設定します。
- 2番目の列にカーソルを合わせてツールボックスを表示し、設定 （
-
Advancedセクションまでスクロールして、すべての Margins and Padding 値を0に設定します（
0）。 -
ページの上部までスクロールし、右上隅の Save をクリックして設定を保存し、Page Builder ワークスペースに戻ります。
手順5：カタログ製品リンクの挿入
-
Antonia Racer Tankテキストを選択し、エディターツールバーのリンクを挿入 （
-
リンクを挿入 ダイアログで、カタログ製品へのリンクを指定します。
-
製品 URL を入力します。
相対URLまたは完全修飾URLを入力できます。 この例では、次の相対リンクが入力されます。
../antonia-racer-tank.html -
（オプション）「タイトル」に、製品名を入力します。
タイトルリンク属性は、一部のブラウザーでツールチップとして使用されます。
-
完了したら、OKをクリックしてリンクを保存します。
リンクされたテキストがバナーでハイライト表示されるようになりました。
-
-
ステージの右上隅で、フルスクリーンを閉じる （
このアイコンをクリックすると、プレビューが表示されたページの Content セクションに戻ります。
-
右上隅の「Save」をクリックします。
手順6：行の並べ替え
3つの行がすべて完了したら、最後の手順は、元の 単純ページ の例に一致するように行を並べ替えることです。 元の例と一致させるには、最初の行を下に移動し、最後の行を上に移動する必要があります。
-
必要に応じて、Content セクションの
-
コンテンツのプレビュー領域の内側にある Edit with Page Builder をクリックします。
-
ステージの最初の行にカーソルを合わせてツールボックスを表示し、移動 （
-
行のすべてのコンテンツが選択されていることを確認するには、マウスボタンを押しながら、ページの下部にある赤いガイドラインの下の位置に行をドラッグします。
note NOTE 画像などのコンテンツの一部だけを誤って移動した場合は、コンテンツを属する場所に戻して、もう一度試します。 
-
このプロセスを繰り返して、最初の行を2番目の位置に移動します。
ページ上の行の順序が、シンプルなページの例と一致するようになりました。
-
ステージの右上隅で、フルスクリーンを閉じる （
このアイコンをクリックすると、プレビューが表示されたページの Content セクションに戻ります。
-
右上隅の Save 矢印をクリックし、Save & Closeを選択します。
-
プロンプトが表示されたら、ページ上部のメッセージのCache Management リンクをクリックし、無効なキャッシュを更新します。
簡易ページの演習が完了しました。 後で参照できるように、作成した作業を保存します。
準備ができたら、 パート 2: ブロック に進みます。