コンテンツを追加 – 動的ブロック

Last update: Fri May 17 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

トピック：

作成対象：

初心者
中級
ユーザー

動的ブロックコンテンツタイプを使用して、既存のを追加します動的ブロックに Page Builder ステージ.

ストアフロントの動的ブロック

NOTE

大きな変更を加えている場合 Page Builder コンテンツでは、を増やすことを推奨します管理セッションの有効期間を使用して、作業中にセッションがタイムアウトしないようにします。

ダイナミックブロックツールボックス

ツール

アイコン

説明

移動

{width="25"}

ブロックコンテナとその内容をステージ上の別の位置に移動します。

設定

{width="25"}

を開きます ブロックを編集 このページで、ブロックを選択し、コンテナのプロパティを変更できます。

Hide

{width="25"}

現在のブロックコンテナとそのコンテンツを非表示にします。

表示

{width="25"}

非表示のブロックコンテナとその内容を表示します。

複製

{width="25"}

ブロックコンテナとその内容のコピーを作成します。

削除

{width="25"}

ブロックコンテナとそのコンテンツをステージから削除します。

NOTE

非表示の要素はデータベースに保存され、顧客には表示されません。ただし、これらの要素は、サイトをクロールする検索エンジンやその他のボットには表示されます。また、非表示の属性を持つ API 呼び出しを通じてリクエストされた場合、ステージから削除しない限り、コンテンツの一部として返されます。

ステージに既存のダイナミックブロックを追加

に移動します。 Page Builder ターゲットページ、ブロック、製品またはカテゴリのワークスペース。
が含まれる Page Builder パネル、展開 Add Content をドラッグします。 Dynamic Block ステージへのプレースホルダー。

{width="600" modal="regular"}
空のダイナミックブロックコンテナにカーソルを合わせてツールボックスを表示し、設定（ {width="20"} ）アイコンをクリックします。

{width="600" modal="regular"}
日 ダイナミックブロックを編集 ページ、クリック Select Dynamic Block リストを使用して、ブロックを選択します。

{width="600" modal="regular"}

リストで、挿入するダイナミックブロックを探し、をクリックします Select. 次に、 Add Selected.

{width="600" modal="regular"}

ダイナミックブロック情報の概要が下に表示されます。

{width="600" modal="regular"}

を設定 Template を次のいずれかに変更します。

table 0-row-2 1-row-2 2-row-2 layout-auto
オプション	説明
`Dynamic Block Block Template`	スタンドアロンブロックを追加します。
`Dynamic Block Inline Template`	ブロックの内容をテキストに挿入します。

{width="200"}

必要に応じて、詳細設定を完了します。
完了したら、 Save 設定を適用し、 Page Builder ワークスペース。

詳細設定

親コンテナ内のダイナミックブロックの位置をコントロールするには、 Alignment:

table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
オプション	説明
`Default`	現在のテーマのスタイルシートで指定されている線形の既定の設定を適用します。
`Left`	親コンテナの左罫線に沿ってリストを配置します。指定したパディングはすべて許可されます。
`Center`	親コンテナの中央にリストを揃えます。指定したパディングに対する許容値を使用します。
`Right`	親コンテナの右端に沿ってブロックを配置します。指定したパディングは許可されます。

を Border ダイナミックブロックコンテナの 4 つの側面すべてに適用されるスタイル：

table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto
オプション	説明
`Default`	関連付けられたスタイルシートで指定されている既定の罫線スタイルを適用します。
`None`	コンテナの境界線の表示はしません。
`Dotted`	コンテナの境界線は点線で表示されます。
`Dashed`	コンテナの境界線は破線で表示されます。
`Solid`	コンテナの境界線は実線で表示されます。
`Double`	コンテナの境界線は二重線で表示されます。
`Groove`	コンテナの境界線は溝付き線で表示されます。
`Ridge`	コンテナの境界線は、境界線として表示されます。
`Inset`	コンテナの境界線は、インセットされた線として表示されます。
`Outset`	コンテナの境界線は、先頭行として表示されます。

境界線のスタイルを Noneの場合は、次のボーダー表示オプションを入力します。

table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
オプション	説明
Border Color	見本を選択するか、カラーピッカーをクリックするか、有効なカラー名または同等の 16 進数値を入力して、カラーを指定します。
Border Width	境界線の幅のピクセル数を入力します。
Border Radius	ピクセル数を入力して、境界線の各コーナーを丸めるために使用する半径のサイズを定義します。

（オプション）の名前を指定します CSS classes を現在のスタイルシートから取得して、コンテナに適用します。

複数のクラス名はスペースで区切ります。

次の値をピクセル単位で入力 Margins and Padding ダイナミックブロックコンテナの外側の余白と内側のパディングを決定する。

対応する値を図に入力します。

table 0-row-2 1-row-2 2-row-2 layout-auto
コンテナ領域	説明
Margins	コンテナのすべての側面の外側の端に適用される空白スペースの量。オプション： `Top` / `Right` / `Bottom` / `Left`
Padding	コンテナのすべての側面の内側の端に適用される空白のスペースの量です。オプション： `Top` / `Right` / `Bottom` / `Left`

ダイナミックブロックコンテナ設定を編集

動的ブロックコンテナにカーソルを合わせてツールボックスを表示し、設定（ {width="20"} ）アイコンをクリックします。

{width="500" modal="regular"}
必要に応じて、次のようにダイナミックブロックを変更します。
- クリック Select Dynamic Block.
  
  {width="20"}
- アクティブなダイナミックブロックのリストで、 Select 追加するブロック用。
必要に応じて、残りの設定を更新します。
完了したら、 Save 設定を適用し、 Page Builder ワークスペース。

ダイナミックブロックを複製する

動的ブロックコンテナにカーソルを合わせてツールボックスを表示し、複製（ {width="20"} ）アイコンをクリックします。

複製は、元の画像のすぐ下に表示されます。

{width="500" modal="regular"}
新しい動的ブロックを別の位置に移動するには、そのコンテナにカーソルを合わせて選択します。移動（ {width="20"} ）を選択します。
ダイナミックブロックを選択し、新しい位置に赤いガイドラインが表示されるまでドラッグします。

ダイナミックブロックを移動すると、各コンテナの上部と下部の境界が破線で表示されます。