Page Builder Workspace
Page Builder が有効になっている場合、Contentセクションとコンテンツ作成プロセスが変更され、CMS ページ 、製品、 カテゴリ ページ、 ブロック 、および動的ブロック の高度なPage Builder ツールを利用できるようになります。 このセクションには、_ コンテンツ見出し_フィールド、コンテンツのプレビュー、フルスクリーン Page Builder ワークスペースへの簡単なアクセスが含まれています。
Page Builderのプレビュー
コンテンツ見出し
検索エンジンはレベル 1 （H1）の見出しを探すので、レベル 1見出しを追加すると、ページが正しくインデックス付けされていることを確認する簡単な方法です。
すべてのレベルの見出しの位置と形式を最適に制御するには、Content Headingフィールドを空のままにして、Page Builder 見出し コンテンツタイプを使用することをお勧めします。
プレビュー
Contentセクションを展開し、Page Builderで作成された既存のコンテンツがある場合、ページに表示されるコンテンツのプレビューが表示されます。Edit with Page Builderをクリックするか、コンテンツのプレビュー領域内でPage Builder ワークスペースを開き、必要な更新を行うことができます。
ステージ
プレビューからPage Builder ワークスペースを開くと、このステージが主要な作業領域となり、コンテンツの作成と書式設定、ライブコンテンツのクイック編集を行うことができます。 ステージは最初は空で、左側のパネルから行、列、タブをドラッグできるデザインサーフェスが表示されます。
Viewports
ビューポートは、ユーザーが表示するweb ページの表示領域です。 フルスクリーンデザインモードでは、ビューポートボタンがPage Builder ステージの上に表示され、サイトユーザーがストアフロントでコンテンツを見たときにコンテンツが表示されます。
Page Builderは、ビューポートのブレークポイントも定義します。 ブレークポイントは、特定のスタイルが適用される最小幅と最大幅を定義します。 Page Builder ビューポートには、次のコンテンツ ブレークポイントが用意されています。
- デスクトップ ブレークポイント—
min-width: 1024px。 このブレークポイントは、1024 ピクセル以上の幅を測定するビューポート幅に定義されたスタイルを適用します。 - モバイルブレークポイント—
max-width: 768px, min-width: 640px。 これらのブレークポイントは、768 ピクセルから640 ピクセルのビューポート幅に定義されたスタイルを適用します。
Page Builder個のビューポートには、次の2つの機能があります。コンテンツプレビューとブレークポイント設定。
コンテンツプレビュー
デフォルトでは、Page Builderには2つのビューポート プレビューが用意されています。
-
デスクトップ – 定義済みの幅を持たずにコンテンツのプレビューを表示します。 デスクトップ定義のスタイル（ブレークポイントの最小幅1024 ピクセルを使用）は、ページに引き続き適用されます。 ただし、デスクトップビューポートの幅は、行などのコンテナコンテンツタイプの設定によって定義されます。 デスクトップビューポートを選択すると、ブラウザーページの幅が1024 ピクセル以上の場合に、ストアフロントでコンテンツがどのようにスタイル設定されるかを確認できます。
-
モバイル — コンテンツのプレビューを、事前に定義された幅768 ピクセルで表示します。 デスクトップビューポートとは異なり、モバイルビューポートでは、768 ピクセルの幅でページコンテンツが表示され、ブレークポイントの幅が768 ピクセル（最大）と640 ピクセル（最小）に定義されたスタイルも表示されます。
ブレークポイント設定
ビューポート ボタンには、選択したビューポートに基づいて、コンテンツ タイプに異なるブレークポイント スタイルを適用するオプションも用意されています。 デフォルトでは、Page Builderは、行、列、タブ、タブアイテム、バナー、スライダー、スライドの Minimum Height フィールドにブレークポイント設定を提供します。 モバイルビューポートを選択し、これらのコンテンツタイプのエディターを開くと、モバイルビューポートブレークポイントに固有のフィールド値を入力できます。 特定のブレークポイント設定を許可するコンテンツタイプフィールドでは、行の次の例のように、フィールドの右側にアイコンが表示されます。
ブレークポイント設定の
パネル
Page Builder パネルはステージの左側にあり、ステージにドラッグできるコンテンツタイプが含まれています。 コンテンツタイプに固有のコンテナが、オプションのツールボックスとともに表示されます。 コンテンツタイプは、次のようにパネルに整理されます。
レイアウト
Page Builder パネルの Layout セクションは、行、列、またはタブをステージに追加するために使用されます。 コンテンツタイプをパネルからステージにドラッグすると、コンテンツタイプに固有のオプションのツールボックスがコンテナに表示されます。
デフォルトでは、Page Builder ステージは空です。 レイアウトコンテンツタイプをパネルからステージにドラッグすると、ページの上、下、または他のレイアウトコンテナ内に配置できます。 行はステージに直接追加することしかできません。
レイアウトコンテンツタイプとステージ
要素
Page Builder パネルの Elements セクションを使用して、テキスト、見出し、ボタン、区切り記号、HTML コードをPage Builder ステージ の任意のレイアウトコンテナに追加します。 コンテンツタイプをパネルから行または列、またはステージ上のタブセットにドラッグすると、コンテナが表示されます。 コンテンツタイプツールボックスを使用して、タイプに固有の設定にアクセスします。
要素コンテンツタイプ
メディア
Page Builder パネルの Media セクションを使用して、Page Builder ステージ の任意のレイアウトコンテナに画像、ビデオ、バナー、スライダー、およびGoogle Mapsを追加します。 メディアコンテンツタイプをパネルからステージにドラッグすると、コンテンツタイプに固有のオプションのツールボックスがコンテナに表示されます。
メディアコンテンツタイプ
コンテンツを追加
Page Builder パネルの Add Content セクションを使用して、既存のコンテンツをPage Builder ステージ に追加します。 メディアコンテンツタイプをパネルからステージにドラッグすると、コンテナが表示されます。 コンテンツタイプツールボックスを使用して、タイプに固有の_設定_にアクセスします。
コンテンツタイプを追加する
ツールボックス
ステージ上の各コンテンツコンテナには、オプションのツールボックスがあります。 オプションはコンテンツの種類によって異なりますが、通常は移動、設定、非表示/表示、複製、削除などがあります。
ツールボックスを表示
コンテナにカーソルを合わせてツールボックスを表示し、オプションを選択します。
ツールボックスオプション
