Page Builder ワークスペース
条件 Page Builder 有効, Content 高度な機能を活用するために、セクションとコンテンツの作成プロセスが変更されました Page Builder cms 用ツール ページ, 製品 および category ページ、 ブロック、および ダイナミック ブロック. このセクションには、_コンテンツの見出し_フィールド、コンテンツのプレビュー、フルスクリーンへの簡単なアクセス Page Builder ワークスペース。
コンテンツの見出し
検索エンジンはレベル 1 (H1)の見出しを検索するので、レベル 1 の見出しを追加すると、ページのインデックスが正しく作成されていることを簡単に確認できます。
すべてのレベルの見出しの位置と形式を最適にコントロールするには、を終了することをお勧めします Content Heading フィールドが空で、 Page Builder 見出し コンテンツタイプ。
プレビュー
を展開すると、 Content セクションに、で作成された既存のコンテンツがある Page Builderを選択すると、ページで表示されるとおりに、コンテンツのプレビューが表示されます。 クリック Edit with Page Builder またはコンテンツプレビュー領域内で、を開きます。 Page Builder ワークスペース(必要な更新を加えることができます)。
ステージ
を開くと Page Builder ワークスペース プレビューから、ステージは、コンテンツの作成や書式設定、さらにはライブコンテンツのクイック編集を行うことができるメイン作業領域です。 最初はステージは空で、デザインサーフェスが提供されます。このサーフェスで、左パネルから行、列、タブをドラッグできます。
ビューポート
A viewport は、ユーザーに表示される 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 パネルはステージの左側にあり、ステージにドラッグできるコンテンツタイプを含んでいます。 コンテンツタイプに固有のコンテナが、オプションのツールボックスと共に表示されます。 コンテンツタイプは、パネル内で次のように整理されます。
レイアウト
この Layout の節 Page Builder パネルを使用して、行、列、タブをステージに追加します。 コンテンツタイプをパネルからステージにドラッグすると、コンテナが表示され、コンテンツタイプに固有のオプションのツールボックスが表示されます。
デフォルトでは、 Page Builder ステージが空です。 レイアウトコンテンツタイプをパネルからステージにドラッグする際に、ページ上の他のレイアウトコンテナの上、下または内側に配置できます。 行は、ステージに直接追加する場合にのみ選択できます。
要素
の使用 Elements の節 Page Builder 上の任意のレイアウトコンテナにテキスト、見出し、ボタン、区切り文字、HTMLコードを追加するためのパネル Page Builder ステージ. パネルから行または列にコンテンツタイプをドラッグするか、ステージ上のタブセットにコンテンツタイプをドラッグすると、コンテナが表示されます。 コンテンツ タイプのツールボックスを使用して、そのタイプに固有の設定にアクセスします。
メディア
の使用 Media の節 Page Builder 画像、ビデオ、バナー、スライダーおよび Google Maps を任意の Page Builder ステージ. メディアコンテンツタイプがパネルからステージにドラッグされると、コンテナが表示され、コンテンツタイプに固有のオプションのツールボックスが表示されます。
コンテンツを追加
の使用 Add Content の節 Page Builder 既存のコンテンツをに追加するパネル Page Builder ステージ. メディアコンテンツタイプをパネルからステージにドラッグすると、コンテナが表示されます。 コンテンツタイプのツールボックスを使用して、にアクセスします_設定_これは、タイプに固有です。
ツールボックス
ステージ上の各コンテンツコンテナには、オプションのツールボックスがあります。 オプションはコンテンツ タイプによって異なりますが、通常は [ 移動 ]、[ 設定 ]、[ 非表示/表示 ]、[ 複製 ]、[ 削除 ] が含まれます。
ツールボックスを表示する
コンテナの上にマウスポインターを置いてツールボックスを表示し、オプションを選択します。
ツールボックスオプション
![移動アイコン](./media_1224013998716f9ac04c80146b04284c714a0f6df.png?width=750&format=png&optimize=medium)
![アイコンを追加](./media_184203c0bc621d63187622f7bbb53ebc4771477b1.png?width=750&format=png&optimize=medium)
![設定アイコン](./media_1cc57ae4793d2e40ac1b861dcfbf325d3b0725c54.png?width=750&format=png&optimize=medium)
![アイコンを非表示](./media_1f29e192a54526dd4f87e66b30ee7290d513264e1.png?width=750&format=png&optimize=medium)
![アイコンを表示](./media_1195f7af93e8019cfde3b86b9fa7fc3fe10079e92.png?width=750&format=png&optimize=medium)
![アイコンを複製](./media_1d20e9c33185846c6ce9b8ad56d7e52d49d00f42f.png?width=750&format=png&optimize=medium)
![削除](./media_199b42b869af4609c58f76eb9b94cc3bc8ba1d5a0.png?width=750&format=png&optimize=medium)