Page Builder ワークスペース

条件 Page Builder 有効, Content ​高度な機能を活用するために、セクションとコンテンツの作成プロセスが変更されました Page Builder cms 用ツール ページ, 製品 および category ページ、 ブロック、および ダイナミック ブロック. このセクションには、_​コンテンツの見出し​_フィールド、コンテンツのプレビュー、フルスクリーンへの簡単なアクセス Page Builder ワークスペース。

コンテンツセクションと Page Builder プレビュー

コンテンツの見出し

検索エンジンはレベル 1 (H1)の見出しを検索するので、レベル 1 の見出しを追加すると、ページのインデックスが正しく作成されていることを簡単に確認できます。

NOTE
この Content Heading ​ページの上部に表示されるフィールドは、以前に作成されたコンテンツをサポートするレガシーフィールドです Commerce リリース。 しかし、それは以下の一部ではない Page Builder. この Content Heading 現在のテーマに関連付けられているスタイルシートに従って、H1 見出しとして書式設定されます。 で定義されたアクティブコンテンツ領域のすぐ上に配置されます。 Page Builder ステージ。

すべてのレベルの見出しの位置と形式を最適にコントロールするには、を終了することをお勧めします Content Heading ​フィールドが空で、 Page Builder 見出し コンテンツタイプ。

コンテンツの見出しとその他の見出し

プレビュー

を展開すると、 Content ​セクションに、で作成された既存のコンテンツがある Page Builderを選択すると、ページで表示されるとおりに、コンテンツのプレビューが表示されます。 クリック​ Edit with Page Builder ​またはコンテンツプレビュー領域内で、を開きます。 Page Builder ワークスペース(必要な更新を加えることができます)。

製品説明のプレビュー

NOTE
製品フォームとカテゴリフォームの場合、このコンテンツプレビューはデフォルトで有効になっていますが、無効にすることもできます。 プレビューの読み込みが原因でパフォーマンスが低下した場合は、でプレビューを無効にできます コンテンツ管理の設定 設定。

ステージ

を開くと Page Builder ワークスペース プレビューから、ステージは、コンテンツの作成や書式設定、さらにはライブコンテンツのクイック編集を行うことができるメイン作業領域です。 最初はステージは空で、デザインサーフェスが提供されます。このサーフェスで、左パネルから行、列、タブをドラッグできます。

NOTE
2.4.1 リリース以降、コンテンツ編集は、によって制御されるすべての領域に対してのみフルスクリーンになりました Page Builder- CMS ページ、製品およびカテゴリページ、ブロック、ダイナミックブロック。 全画面編集では、コンテンツに焦点を当て、ストアフロントでのユーザーエクスペリエンスにより適したビューを提供します。

ページコンテンツを使用したステージ

NOTE
大きな変更を加えている場合 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 ピクセル以上の場合に、ストアフロントでコンテンツがどのようにスタイル設定されるかが表示されます。

    最小幅 1024 ピクセルのデスクトップビューポートのプレビュー {width="500" modal="regular"}

  • モバイル – 定義済みの幅 768 ピクセルでコンテンツのプレビューを表示します。 デスクトップビューポートとは異なり、モバイルビューポートでは 768 ピクセルの幅と、768 ピクセル(最大)および 640 ピクセル(最小)のブレークポイントの幅に対して定義されたスタイルでページコンテンツが表示されます。

    最小幅 768 ピクセルのモバイルビューポートプレビュー {width="500" modal="regular"}

ブレークポイントの設定

また、ビューポート ボタンには、選択したビューポートに基づいて、コンテンツ タイプに異なるブレークポイント スタイルを適用するオプションもあります。 デフォルトでは Page Builder には、のブレークポイント設定があります Minimum Height ​行、列、タブ、タブ項目、バナー、スライダー、スライドのフィールド モバイルビューポートを選択し、これらのコンテンツタイプの 1 つに対してエディターを開くと、モバイルビューポートのブレークポイントに固有のフィールド値を入力できます。 特定のブレークポイント設定を許可するコンテンツタイプフィールドでは、フィールドの右側に、次の行の例のようにアイコンが表示されます。

ブレークポイント設定用のアイコンインジケーター

パネル

この Page Builder パネルはステージの左側にあり、ステージにドラッグできるコンテンツタイプを含んでいます。 コンテンツタイプに固有のコンテナが、オプションのツールボックスと共に表示されます。 コンテンツタイプは、パネル内で次のように整理されます。

レイアウト

この Layout ​の節 Page Builder パネルを使用して、行、列、タブをステージに追加します。 コンテンツタイプをパネルからステージにドラッグすると、コンテナが表示され、コンテンツタイプに固有のオプションのツールボックスが表示されます。

デフォルトでは、 Page Builder ステージが空です。 レイアウトコンテンツタイプをパネルからステージにドラッグする際に、ページ上の他のレイアウトコンテナの上、下または内側に配置できます。 行は、ステージに直接追加する場合にのみ選択できます。

Page Builder レイアウトのコンテンツタイプとステージを含むパネル

レイアウトコンテンツタイプ
説明
新しい行は、パネルからステージにドラッグして、別の行、タブ、列グループの上または下に配置する必要があります。 また、「複製」オプションを使用して、既存の行のコピーを作成することもできます。
列はパネルからステージに、または行とタブにドラッグできます。 追加できる列の最大数は、で指定されたグリッド分割の数によって決まります 設定.
タブ
単一のタブをパネルからステージに、または行と列にドラッグできます。 ツールボックスからタブを追加できます。

要素

の使用 Elements ​の節 Page Builder 上の任意のレイアウトコンテナにテキスト、見出し、ボタン、区切り文字、HTMLコードを追加するためのパネル Page Builder ステージ. パネルから行または列にコンテンツタイプをドラッグするか、ステージ上のタブセットにコンテンツタイプをドラッグすると、コンテナが表示されます。 コンテンツ タイプのツールボックスを使用して、そのタイプに固有の設定にアクセスします。

Page Builder 要素コンテンツタイプを含むパネル

要素コンテンツタイプ
説明
テキスト
テキストコンテナとエディターをステージに追加します。
見出し
見出しコンテナをステージに追加します。
ボタン
個々のボタンまたは一連のボタンのコンテナをステージに追加します。
ディバイダー
ステージに区切り記号用のコンテナを追加します。
HTMLコード
HTMLコードのコンテナをステージに追加します。

メディア

の使用 Media ​の節 Page Builder 画像、ビデオ、バナー、スライダーおよび Google Maps を任意の Page Builder ステージ. メディアコンテンツタイプがパネルからステージにドラッグされると、コンテナが表示され、コンテンツタイプに固有のオプションのツールボックスが表示されます。

Page Builder メディアコンテンツタイプを使用したパネル

メディアコンテンツタイプ
説明
画像
画像コンテナをステージに追加します。
ビデオ
ビデオコンテナをステージに追加します。
バナー
バナーコンテナをステージに追加します。
Slider
スライダーコンテナをステージに追加します。
マップ
を追加します Google Maps ステージへのコンテナ。

コンテンツを追加

の使用 Add Content ​の節 Page Builder 既存のコンテンツをに追加するパネル Page Builder ステージ. メディアコンテンツタイプをパネルからステージにドラッグすると、コンテナが表示されます。 コンテンツタイプのツールボックスを使用して、にアクセスします_​設定​_これは、タイプに固有です。

Page Builder コンテンツタイプを追加したパネル

コンテンツタイプ
説明
ブロック
既存のブロックをステージに追加します。
動的ブロック
既存のダイナミックブロックをステージに追加します。
製品
商品のリストをステージに追加します。
Adobe Commerceのみ 製品のRecommendations
レコメンデーションユニットをステージに追加します。

ツールボックス

ステージ上の各コンテンツコンテナには、オプションのツールボックスがあります。 オプションはコンテンツ タイプによって異なりますが、通常は [ 移動 ]、[ 設定 ]、[ 非表示/表示 ]、[ 複製 ]、[ 削除 ] が含まれます。

ツールボックスを表示する

コンテナの上にマウスポインターを置いてツールボックスを表示し、オプションを選択します。

行ツールボックスオプション

ツールボックスオプション

オプション
アイコン
説明
移動
移動アイコン {width="25"}
現在のコンテンツコンテナをステージ上の別の位置に移動します。
追加
アイコンを追加 {width="25"}
ボタン、スライド、タブなどの子要素を追加します。
(ラベル)
コンテナコンテンツタイプを識別します。
設定
設定アイコン {width="25"}
コンテンツコンテナのプロパティを編集モードで開きます。
Hide
アイコンを非表示 {width="25"}
現在のコンテンツコンテナを非表示にします。
表示
アイコンを表示 {width="25"}
現在のコンテンツコンテナを表示します。
複製
アイコンを複製 {width="25"}
現在のコンテンツコンテナをコピーします。
削除
削除 {width="25"}
ステージから現在のコンテンツコンテナを削除します。
NOTE
非表示の要素はデータベースに保存され、顧客には表示されません。 ただし、これらの要素は、サイトをクロールする検索エンジンやその他のボットには表示されます。 また、非表示の属性を持つ API 呼び出しを通じてリクエストされた場合、ステージから削除しない限り、コンテンツの一部として返されます。
recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d