Page Builder Workspace
Page Builder 有効にすると、CMS ページ、 製品および カテゴリページ、 ブロックおよび 動的ブロック用の高度な Page Builder ツールを利用するように Content セクションとコンテンツ作成プロセスが変更されます。 このセクションには、_ コンテンツ見出し _フィールド、コンテンツのプレビュー、フルスクリーン Page Builder ワークスペースへの簡単なアクセスが含まれます。
コンテンツの見出し
検索エンジンはレベル 1 （H1）の見出しを検索するので、レベル 1 の見出しを追加すると、ページのインデックスが正しく作成されていることを簡単に確認できます。
すべてのレベルの見出しの位置と形式を最適に制御するには、Content Heading フィールドを空のままにし、Page Builder 見出しコンテンツタイプを使用することをお勧めします。
プレビュー
「Content」セクションを展開すると、Page Builder で作成された既存のコンテンツがあり、ページに表示されるとおりにコンテンツのプレビューが表示されます。 コンテンツプレビュー領域の Edit with Page Builder または内部をクリックして Page Builder ワークスペースを開き、必要な更新を行うことができます。
ステージ
プレビューから Page Builder ワークスペースを開くと、ステージは、コンテンツの作成や書式設定、さらにはライブコンテンツのクイック編集を行うことができるメイン作業領域になります。 最初はステージは空で、デザインサーフェスが提供されます。このサーフェスで、左パネルから行、列、タブをドラッグできます。
ビューポート
ビューポート は、ユーザーに表示される 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 のフィールドのブレークポイント設定を提供します。 モバイルビューポートを選択し、これらのコンテンツタイプの 1 つに対してエディターを開くと、モバイルビューポートのブレークポイントに固有のフィールド値を入力できます。 特定のブレークポイント設定を許可するコンテンツタイプフィールドでは、フィールドの右側に、次の行の例のようにアイコンが表示されます。
パネル
Page Builder パネルはステージの左側にあり、ステージにドラッグできるコンテンツタイプを含んでいます。 コンテンツタイプに固有のコンテナが、オプションのツールボックスと共に表示されます。 コンテンツタイプは、パネル内で次のように整理されます。
レイアウト
Page Builder パネルの Layout セクションは、行、列、タブをステージに追加するために使用します。 コンテンツタイプをパネルからステージにドラッグすると、コンテナが表示され、コンテンツタイプに固有のオプションのツールボックスが表示されます。
デフォルトでは、Page Builder のステージは空です。 レイアウトコンテンツタイプをパネルからステージにドラッグする際に、ページ上の他のレイアウトコンテナの上、下または内側に配置できます。 行は、ステージに直接追加する場合にのみ選択できます。
レイアウトコンテンツのタイプとステージを含む
要素
Page Builder パネルの「Elements」セクションを使用すると、Page Builder stage の任意のレイアウトコンテナにテキスト、見出し、ボタン、区切り線、HTMLコードを追加できます。 パネルから行または列にコンテンツタイプをドラッグするか、ステージ上のタブセットにコンテンツタイプをドラッグすると、コンテナが表示されます。 コンテンツ タイプのツールボックスを使用して、そのタイプに固有の設定にアクセスします。
要素コンテンツタイプを含む
メディア
Page Builder パネルの Media セクションを使用して、画像、ビデオ、バナー、スライダー、Google Maps を Page Builder stage 上のレイアウトコンテナに追加します。 メディアコンテンツタイプがパネルからステージにドラッグされると、コンテナが表示され、コンテンツタイプに固有のオプションのツールボックスが表示されます。
メディアコンテンツタイプを含む
コンテンツを追加
Page Builder パネルの「Add Content」セクションを使用して、既存のコンテンツを Page Builder stage に追加します。 メディアコンテンツタイプをパネルからステージにドラッグすると、コンテナが表示されます。 コンテンツ タイプのツールボックスを使用して、そのタイプに固有の_ 設定 _にアクセスします。
「コンテンツタイプを追加」を含む
ツールボックス
ステージ上の各コンテンツコンテナには、オプションのツールボックスがあります。 オプションはコンテンツ タイプによって異なりますが、通常は [ 移動 ]、[ 設定 ]、[ 非表示/表示 ]、[ 複製 ]、[ 削除 ] が含まれます。
ツールボックスを表示する
コンテナの上にマウスポインターを置いてツールボックスを表示し、オプションを選択します。
ツールボックスオプション
