ドラッグ&ドロップエリアのHubLタグ
ドラッグ&ドロップエリアを使用することで、開発者はコンテンツエディター内でレイアウト、スタイル、コンテンツを直接変更できる、ページ内のセクションとグローバルパーシャルを作成できます。ドラッグ&ドロップエリアのセットアップ手順については、ドラッグ&ドロップエリアの作成チュートリアルをご覧ください。
ドラッグ&ドロップエリアは、12列のレスポンシブグリッドを基盤としています。ドラッグ&ドロップタグでは、列と行を指定するクラス名を指定して、マークアップをレンダリングします。そのようなクラス名を対象とするスタイルシートを追加する必要があります。実装可能なレイアウトスタイルの例については、HubSpot CMSボイラープレート(英語)を参照してください。スタイルシートをテンプレートに追加するには、{{ require_css() }}
を使用します。
注:現時点では、ブログ記事とEメールテンプレートでドラッグ&ドロップエリアを使用することはできません。
ドラッグ&ドロップエリアは、ウェブページの一部の構造、デザイン、コンテンツを編集可能にするためのコンテナーです。ドラッグ&ドロップエリアの既定のコンテンツは、{% dnd_area %}タグの本文として提供します。
モジュール自体にドラッグ&ドロップエリアを含めることはできません。モジュールへの追加コンテンツを統一するインターフェイスを制作担当者に提供するには、繰り返し可能なフィールドとグループを代わりに使用してください。
dnd_area
タグには、以下のパラメーターを含めることができます。
パラメーター | データ型 | 説明 | 既定値 |
---|---|---|---|
class
| 文字列 | dnd_areaを囲むdivに追加するクラス。 | |
label
| 文字列 | エディター上のサイドバーのラベルとして使用されます。 |
dnd_area
タグには、dnd_section
タグを含めることもできます。
注:制作担当者は、テンプレートに「dnd_area」タグが含まれているかどうかに応じて、ページのテンプレートを同じタイプの別のテンプレートと入れ替えることができます。
- ビジュアル ドラッグ&ドロップ レイアウト エディター上で作成したテンプレートは、「
dnd_area
」タグの有無に関係なく、他のドラッグ&ドロップテンプレートまたはコードテンプレートと入れ替えることができます。 - dnd_areaタグを含むコードテンプレートは、
dnd_area
タグを含む他のコードテンプレートとのみ入れ替えることできます。 dnd_area
タグを含まないコードテンプレートは、dnd_area
タグを含まない他のコードテンプレートとのみ入れ替えることできます。
{% dnd_section %}は、最上位の行で、{% dnd_area %}タグ内にネストする必要があります。セクションはテンプレートとして定義してから、dnd_area
に含めることもできるため、テンプレートの迅速な作成に最適です。
dnd_section
タグには、以下のパラメーターを指定することができます。
パラメーター | データ型 | 説明 |
---|---|---|
background_color
| 辞書 | 背景色の指定をサポートするディクショナリー。 |
background_image
| 辞書 | 背景画像の指定をサポートするディクショナリー。 |
background_linear_gradient
| 辞書 | 線形グラデーションの背景の指定をサポートするディクショナリー。 |
full_width
| ブール | セクションを全幅にするか、または内側のコンテナーの幅によって制限するかを指定するブール値。 |
margin
| 辞書 |
|
max_width
| 整数 | ディクショナリー囲む要素でコンテンツの最大幅を設定するピクセル値 |
padding
| 辞書 |
|
vertical_alignment
| 文字列 | 子コンテンツの垂直方向の位置合わせ。使用可能なオプションには、以下のものがあります。
|
注:dnd_section
タグあたり1つのbackgroundパラメーターのみ使用できます。
dnd_section
タグには、以下のタグも含めることができます。
- dnd_column
- dnd_module
{% dnd_column %}は、垂直方向の構成要素であり、親の行で定義された1つ以上のレイアウト列を占めます。
このHubLタグは、{% dnd_area %}タグ内にネストする必要があります。
dnd_column
タグには、以下のパラメーターを含めることができます。
パラメーター | データ型 | 説明 |
---|---|---|
background_color
| 辞書 | 背景色の指定をサポートするディクショナリー。 |
background_image
| 辞書 | 背景画像の指定をサポートするディクショナリー。 |
background_linear_gradient
| 辞書 | 線形グラデーションの背景の指定をサポートするディクショナリー。 |
margin
| 辞書 |
|
max_width
| 整数 | ディクショナリー囲む要素でコンテンツの最大幅を設定するピクセル値 |
padding
| 辞書 |
|
vertical_alignment
| 文字列 | 子コンテンツの垂直方向の位置合わせ。使用可能なオプションには、以下のものがあります。
|
注:dnd_column
タグあたり1つのbackgroundパラメーターのみ使用できます。
dnd_column
タグには、dnd_row
を含めることもできます。
{% dnd_row %}は横方向の構成要素であり、列とモジュールを配置できる、ネストされた12列レイアウトのグリッドを作成します。
このHubLタグは、{% dnd_area %}タグ内にネストする必要があります。
dnd_row
タグには、以下のパラメーターを含めることができます。
パラメーター | データ型 | 説明 |
---|---|---|
background_color
| 辞書 | 背景色の指定をサポートするディクショナリー。 |
background_image
| 辞書 | 背景画像の指定をサポートするディクショナリー。 |
background_linear_gradient
| 辞書 | 線形グラデーションの背景の指定をサポートするディクショナリー。 |
margin
| 辞書 |
|
max_width
| 整数 | ディクショナリー囲む要素でコンテンツの最大幅を設定するピクセル値 |
padding
| 辞書 |
|
vertical_alignment
| 文字列 | 子コンテンツの垂直方向の位置合わせ。使用可能なオプションには、以下のものがあります。
|
注:dnd_row
タグあたり1つのbackgroundパラメーターのみ使用できます。
dnd_rowには、以下のタグを含めることもできます。
- dnd_column
- dnd_module
{% dnd_module %}は、div内に囲まれたモジュールであり、レイアウト、スタイル、コンテンツを追加できます。このモジュールを指定するには、そのパスを参照します。HubSpotの既定のモジュールを指定することも(@hubspot/名前空間を使用)、独自に作成したモジュールを、デザインマネージャーのファイルツリー内のパスで指定することもできます。
このHubLタグは、{% dnd_area %}タグ内にネストする必要があります。
dnd_module
タグには、以下のパラメータを指定することができます。
パラメーター | データ型 | 説明 |
---|---|---|
path
必須
| 文字列 | モジュールへのパス |
horizontal_alignment
| 文字列 | 横方向の位置。次の値を使用できます。
|
offset
| 整数 | 12列グリッド上での位置を示す0からの値。 |
width
| 整数 | 12列グリッドを占めるカラムの数。 |
flexbox_positioning
非推奨
| 文字列 | 推奨されません。使用しないでください。代わりに、
|
上記のdnd_module
パラメーターのいずれかに一致するフィールド名がある古いモジュールを使用していますか?フィールドグループの場合と同様に、fieldsパラメーターを使用して既定値を渡すことができます。
列、セクション、行のdnd要素に背景を設定するには、background_image
、background_linear_gradient
、background_color
を使用できます。
列、セクション、行のdnd要素は、背景の線形グラデーションをサポートしています。既定のグラデーションを設定するには、background_linear_gradient
パラメーターを使用します。このパラメーターで想定される値はディクショナリー(辞書型)です。現時点でサポートされるのは色の開始点と終了点のみです。
パラメーター | データ型 | 説明 |
---|---|---|
direction
| 文字列 | グラデーションの方向を設定します。
|
colors
| 配列 | 色を表す文字列の配列。現在、始点と終点を示す2つの値をサポートしています。値は、以下の形式の文字列として指定します。
|
列、セクション、および行のdnd要素は、背景画像をサポートしています。既定の背景画像を指定するには、background_image
パラメーターを使用します。このパラメーターで想定される値はディクショナリーです。
背景、マージン、パディングなど、スタイルのパラメーターを使用した場合、クラス名はセクション、列、行、モジュールに基づいて自動的に割り出されます。割り当てたプロパティー値は、自動的に作成されたクラス名に追加され、その後生成されたCSSコードがページ内の</body>
終了タグの前にある<style>
タグに配置されます。
ブレークポイントごとに異なるドラッグ&ドロップのスタイルを設定して、外観をレスポンシブにすることができます。
貴重なご意見をありがとうございました。