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

最終更新日： 2024年7月14日

トピック：

作成対象：

初心者
中級
ユーザー

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

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

メモ

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

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

ツール	アイコン	説明
移動		ブロックコンテナとその内容をステージ上の別の位置に移動します。
設定		ブロックを編集ページが開きます。このページで、ブロックを選択し、コンテナのプロパティを変更できます。
Hide		現在のブロックコンテナとそのコンテンツを非表示にします。
表示		非表示のブロックコンテナとその内容を表示します。
複製		ブロックコンテナとその内容のコピーを作成します。
削除		ブロックコンテナとそのコンテンツをステージから削除します。

メモ

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

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

ターゲットページ、ブロック、製品またはカテゴリの Page Builder ワークスペースに移動します。
Page Builder パネルで Add Content を展開し、Dynamic Block プレースホルダーをステージにドラッグします。
空のダイナミックブロックコンテナにカーソルを合わせてツールボックスを表示し、設定（）アイコンを選択します。
ダイナミックブロックを編集 ページで「Select Dynamic Block」をクリックし、リストを使用してブロックを選択します。

リストで、挿入するダイナミックブロックを見つけて、[Select] をクリックします。次に、「Add Selected」をクリックします。

ダイナミックブロック情報の概要が下に表示されます。
Template を次のいずれかに設定します。

オプション
説明
Dynamic Block Block Template
スタンドアロンブロックを追加します。
Dynamic Block Inline Template
ブロックの内容をテキストに挿入します。
必要に応じて、詳細設定を完了します。
完了したら、「Save」をクリックして設定を適用し、Page Builder ワークスペースに戻ります。

詳細設定

親コンテナ内のダイナミックブロックの位置をコントロールするには、Alignment のいずれかを選択します。

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

オプション
説明
Default
関連付けられたスタイルシートで指定されている既定の罫線スタイルを適用します。
None
コンテナの境界線の表示はしません。
Dotted
コンテナの境界線は点線で表示されます。
Dashed
コンテナの境界線は破線で表示されます。
Solid
コンテナの境界線は実線で表示されます。
Double
コンテナの境界線は二重線で表示されます。
Groove
コンテナの境界線は溝付き線で表示されます。
Ridge
コンテナの境界線は、境界線として表示されます。
Inset
コンテナの境界線は、インセットされた線として表示されます。
Outset
コンテナの境界線は、先頭行として表示されます。
None 以外の境界線のスタイルを設定する場合は、境界線の表示オプションを完了します。

オプション
説明
Border Color
見本を選択するか、カラーピッカーをクリックするか、有効なカラー名または同等の 16 進数値を入力して、カラーを指定します。
Border Width
境界線の幅のピクセル数を入力します。
Border Radius
ピクセル数を入力して、境界線の各コーナーを丸めるために使用する半径のサイズを定義します。
（オプション）コンテナに適用する現在のスタイルシートの CSS classes の名前を指定します。

複数のクラス名はスペースで区切ります。
ダイナミックブロックコンテナの外側の余白と内側のパディングを決定する Margins and Padding の値をピクセル単位で入力します。

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

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

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

動的ブロックコンテナにカーソルを合わせてツールボックスを表示し、設定（）アイコンを選択します。
必要に応じて、次のようにダイナミックブロックを変更します。
- 「Select Dynamic Block」をクリックします。
- アクティブなダイナミックブロックの一覧で、追加するブロックの Select をクリックします。
必要に応じて、残りの設定を更新します。
完了したら、「Save」をクリックして設定を適用し、Page Builder ワークスペースに戻ります。

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

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

複製は、元の画像のすぐ下に表示されます。
新しい動的ブロックを別の位置に移動するには、そのコンテナの上にマウスポインターを置き、ツールボックスの移動（）を選択します。
ダイナミックブロックを選択し、新しい位置に赤いガイドラインが表示されるまでドラッグします。

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