ドラッグ＆ドロップエリアのHubLタグ

ドラッグ＆ドロップエリアを使用することで、開発者はコンテンツエディター内でレイアウト、スタイル、コンテンツを直接変更できる、ページ内のセクションとグローバルパーシャルを作成できます。ドラッグ＆ドロップエリアのセットアップ手順については、ドラッグ＆ドロップエリアの作成チュートリアルをご覧ください。

ドラッグ＆ドロップエリアは、ウェブページの一部の構造、デザイン、コンテンツを編集可能にするためのコンテナーです。ドラッグ＆ドロップエリアの既定のコンテンツは、{% dnd_area %}タグの本文として提供します。

モジュール自体にドラッグ＆ドロップエリアを含めることはできません。モジュールへの追加コンテンツを統一するインターフェイスを制作担当者に提供するには、繰り返し可能なフィールドとグループを代わりに使用してください。

dnd_areaタグには、以下のパラメーターを含めることができます。

dnd_areaタグには、dnd_sectionタグを含めることもできます。

{% dnd_section %}は、最上位の行で、{% dnd_area %}タグ内にネストする必要があります。セクションはテンプレートとして定義してから、dnd_areaに含めることもできるため、テンプレートの迅速な作成に最適です。

dnd_sectionタグには、以下のパラメーターを指定することができます。

dnd_sectionタグには、以下のタグも含めることができます。

• dnd_column
• dnd_module

{% dnd_column %}は、垂直方向の構成要素であり、親の行で定義された1つ以上のレイアウト列を占めます。

このHubLタグは、{% dnd_area %}タグ内にネストする必要があります。

dnd_columnタグには、以下のパラメーターを含めることができます。

dnd_columnタグには、dnd_rowを含めることもできます。

{% dnd_row %}は横方向の構成要素であり、列とモジュールを配置できる、ネストされた12列レイアウトのグリッドを作成します。

このHubLタグは、{% dnd_area %}タグ内にネストする必要があります。

dnd_rowタグには、以下のパラメーターを含めることができます。

dnd_rowには、以下のタグを含めることもできます。

• dnd_column
• dnd_module

{% dnd_module %}は、div内に囲まれたモジュールであり、レイアウト、スタイル、コンテンツを追加できます。このモジュールを指定するには、そのパスを参照します。HubSpotの既定のモジュールを指定することも（@hubspot/名前空間を使用）、独自に作成したモジュールを、デザインマネージャーのファイルツリー内のパスで指定することもできます。

このHubLタグは、{% dnd_area %}タグ内にネストする必要があります。

dnd_moduleタグには、以下のパラメーターを指定することができます。

列、セクション、行のdnd要素に背景を設定するには、background_image、background_linear_gradient、background_colorを使用できます。 

列、セクション、行のdndタグは、背景色をサポートしています。ドラッグ＆ドロップ要素の既定の背景色を設定するには、background_colorパラメーターを使用します。これは文字列のパラメーターであり、以下の例に示されている形式を含めることができます。 

列、セクション、行のdnd要素は、背景の線形グラデーションをサポートしています。既定のグラデーションを設定するには、background_linear_gradientパラメーターを使用します。このパラメーターで想定される値はディクショナリーです。現時点でサポートされるのは色の開始点と終了点のみです。

列、セクション、および行のdnd要素は、背景画像をサポートしています。既定の背景画像を指定するには、background_imageパラメーターを使用します。このパラメーターで想定される値はディクショナリーです。

背景、マージン、パディングなど、スタイルのパラメーターを使用した場合、クラス名はセクション、列、行、モジュールに基づいて自動的に割り出されます。割り当てたプロパティー値は、自動的に作成されたクラス名に追加され、その後生成されたCSSコードがページ内の</body>終了タグの前にある<style>タグに配置されます。 

ブレークポイントごとに異なるドラッグ＆ドロップのスタイルを設定して、外観をレスポンシブにすることができます。