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

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

トピック：

作成対象：

初心者
中級
ユーザー

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

ストアフロントの動的ブロック {width="700" modal="regular"}

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`	親コンテナの右端に沿ってブロックを配置します。指定したパディングは許可されます。

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

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"}）を選択します。
ダイナミックブロックを選択し、新しい位置に赤いガイドラインが表示されるまでドラッグします。

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