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

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

ドラッグ&ドロップエリアは、12列のレスポンシブグリッドを基盤としています。ドラッグ&ドロップタグでは、列と行を指定するクラス名を指定して、マークアップをレンダリングします。これらのクラス名をターゲットとするスタイルシートは、開発者が追加する必要があります。実装可能なレイアウトスタイルの例については、HubSpot CMSボイラープレートを参照してください。スタイルシートをテンプレートに追加するには、{{ require_css() }}を使用します。

現時点では、ブログ記事Eメールテンプレートでドラッグ&ドロップエリアを使用することはできません。

ドラッグ&ドロップエリア:dnd_area

ドラッグ&ドロップエリアは、ウェブページの一部の構造、デザイン、コンテンツを編集可能にするためのコンテナーです。{% dnd_area %}タグの本文で、ドラッグ&ドロップエリアの既定のコンテンツを指定します。モジュールにドラッグ&ドロップエリアを含めることはできません。モジュールへの追加コンテンツを統一するインターフェイスを制作担当者に提供するには、繰り返し可能なフィールドとグループを使用してください。

使用できる子:

dnd_section

ParameterTypeDescription Default
class
String

dnd_areaを囲むdivに追加するクラス。

label
String

エディター上のサイドバーのラベルとして使用されます。

{% dnd_area "unique_name", class="main" %} {% end_dnd_area %}<div class="container-fluid main"> <div class="row-wrapper"> <div class="row-fluid"> <div class="span12 widget-span widget-type-cell " style="" data-widget-type="cell" data-x="0" data-w="12"> </div> </div> </div> </div>

ドラッグ&ドロップセクション:dnd_section

{% dnd_section %}は最上位の行であり、常にドラッグ&ドロップエリアの直接の子でなければなりません。このHubLタグは、{% dnd_area %}タグ内にネストする必要があります。セクションはテンプレートとして定義してからdnd_areaに含めることもできるため、テンプレートの迅速な作成に適しています。

使用できる子:

- dnd_column
- dnd_module

ParameterTypeDescription
background_color
Dict

背景色の指定に使用するディクショナリー

background_image
Dict

背景画像の指定に使用するディクショナリー

background_linear_gradient
Dict

線形グラデーションの背景の指定に使用するディクショナリー

full_width
Boolean

セクションを全幅にするか、または内側のコンテナーの幅によって制限するかを指定するブール値。

margin
Dict

cmmmQinpcptpxemexchremlhvwvhvminvmax%でのマージン値の指定に使用するディクショナリー。単位を指定しない場合、既定のpxが適用されます。

max_width
Integer

囲む要素でコンテンツの最大幅を設定するピクセル値

padding
Dict

cmmmQinpcptpxemexchremlhvwvhvminvmax%でのパディング値の指定に使用するディクショナリー。単位を指定しない場合、既定のpxが適用されます。

vertical_alignment
String子コンテンツの垂直方向の位置合わせ。オプション:
  • TOP
  • MIDDLE
  • BOTTOM

注:background_colorbackground_imagebackground_linear_gradientは相互に排他的です。

{% dnd_section background_image={ "backgroundPosition": "MIDDLE_CENTER", "backgroundSize": "cover", "imageUrl": "https://example.com/path/to/image.jpg" }, margin={ "top": 32, "bottom": 32 }, padding={ "top": "1em", "bottom": "1em", "left": "1em", "right": "1em" }, max_width=1200, vertical_alignment="MIDDLE" %} {% end_dnd_section %}<div class="row-fluid-wrapper row-depth-1 row-number-1 unique_name-row-0-background-image dnd-section unique_name-row-0-max-width-section-centering unique_name-row-0-margin unique_name-row-0-padding"> <div class="row-fluid "> </div><!--end row--> </div><!--end row-wrapper -->

ドラッグ&ドロップ列:dnd_column

{% dnd_column %}は、垂直方向の構成要素であり、親の行で定義された1つ以上のレイアウト列を占めます。このHubLタグは、{% dnd_area %}タグ内にネストする必要があります。

使用できる子:

- dnd_row

ParameterTypeDescription
background_color
Dict

背景色の指定に使用するディクショナリー

background_image
Dict

背景画像の指定に使用するディクショナリー

background_linear_gradient
Dict

線形グラデーションの背景の指定に使用するディクショナリー

margin
Dict

cmmmQinpcptpxemexchremlhvwvhvminvmax%でのマージン値の指定に使用するディクショナリー。単位を指定しない場合、既定のpxが適用されます。

padding
Dict

cmmmQinpcptpxemexchremlhvwvhvminvmax%でのパディング値の指定に使用するディクショナリー。単位を指定しない場合、既定のpxが適用されます。

vertical_alignment
String

子コンテンツの垂直方向の位置合わせ。オプション:TOP、MIDDLE、BOTTOM

offset
Integer

12列グリッド上での位置を示す0からの値

width
Integer

12列グリッドで表示されるカラム数

注:background_colorbackground_imagebackground_linear_gradientは相互に排他的です。

{% dnd_column offset=0, width=12, background_color={ r: 255, g: 0, b: 0, a: 1 }, margin={ "top": "1em", "bottom": "1em" }, %} {% end_dnd_column %}<div class="span12 widget-span widget-type-cell unique_name-column-1-margin unique_name-column-1-background-color unique_name-column-1-vertical-alignment dnd-column" style="" data-widget-type="cell" data-x="0" data-w="12"> </div><!--end widget-span -->

ドラッグ&ドロップ行:dnd_row

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

使用できる子:

- dnd_column
- dnd_module

ParameterTypeDescription
background_color
Dict

背景色の指定に使用するディクショナリー

background_image
Dict

背景画像の指定に使用するディクショナリー

background_linear_gradient
Dict

線形グラデーションの背景の指定に使用するディクショナリー

margin
Dict

cmmmQinpcptpxemexchremlhvwvhvminvmax%でのマージン値の指定に使用するディクショナリー。単位を指定しない場合、既定のpxが適用されます。

padding
Dict

cmmmQinpcptpxemexchremlhvwvhvminvmax%でのパディング値の指定に使用するディクショナリー。単位を指定しない場合、既定のpxが適用されます。

vertical_alignment
String

子コンテンツの垂直方向の位置合わせ。オプション:

  • TOP
  • MIDDLE
  • BOTTOM

注:background_colorbackground_imagebackground_linear_gradientは相互に排他的です。

{% dnd_row background_color={ r: 123, g: 123, b: 123, a: 1.0 }, margin={ "top": 20, "bottom": 200 }, padding={ "top": 20, "bottom": 200, "left": 20, "right": 20 } %} {% end_dnd_row %}<div class="row-fluid-wrapper row-depth-1 row-number-1 main-row-0-padding main-row-0-background-color main-row-0-margin"> <div class="row-fluid "> </div> </div>

ドラッグ&ドロップモジュール:dnd_module

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

Use this table to describe parameters / fields
ParameterTypeDescription
path
必須
String

モジュールへのパス

horizontal_alignment
String

横方向の位置。次の値を使用できます。

LEFTCENTERRIGHT

offset
Integer

12列グリッド上での位置を示す0からの値

width
Integer

12列グリッドを占めるカラムの数

flexbox_positioning
非推奨
String

推奨されません。使用しないでください。代わりに、horizontal_alignmentを行やセクションのvertical_alignmentを併せて使用することが最適です。


モジュールのフレックスボックスの位置。垂直方向と水平方向の位置を示す以下の文字列に対応しています。

  • TOP_LEFT
  • TOP_CENTER
  • TOP_RIGHT
  • MIDDLE_LEFT
  • MIDDLE_CENTER
  • MIDDLE_RIGHT
  • BOTTOM_LEFT
  • BOTTOM_CENTER
  • BOTTOM_RIGHT

上記のdnd_moduleパラメーターのいずれかに一致するフィールド名がある古いモジュールを使用していますか?フィールドグループの場合と同様に、fieldsパラメーターを使用して既定値を渡すことができます。

{% dnd_module path="@hubspot/rich_text", offset=0, width=8, %} {% module_attribute "html" %} <h1>Hello, world!</h1> {% end_module_attribute %} {% end_dnd_module %}<div class="span8 widget-span widget-type-custom_widget" style="" data-widget-type="custom_widget" data-x="0" data-w="12"> <div id="hs_cos_wrapper_main-module-1" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module" style="" data-hs-cos-general-type="widget" data-hs-cos-type="module" > <span id="hs_cos_wrapper_module-1_" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_rich_text" style="" data-hs-cos-general-type="widget" data-hs-cos-type="rich_text"> <h1>Hello, world!</h1> </span> </div> </div>

背景

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

background_color

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

{% dnd_section %} // Hex Value (both 3 and 6 char length) {% dnd_column background_color="#F7F7F7" %} {% end_dnd_column %} {% dnd_column background_color="#FFF" %} {% end_dnd_column %} // Both RGB and RGBA {% dnd_column background_color="rgb(255,255,255)" %} {% end_dnd_column %} {% dnd_column background_color="rgba(0,0,0,.25)" %} {% end_dnd_column %} {% end_dnd_section %}

background_linear_gradient

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

ParameterTypeDescription
direction
String

グラデーションの方向を設定します。

  • to bottom
  • to top
  • to left
  • to right
colors
array

色を表す文字列の配列。現在、始点と終点を示す2つの値に対応しています。値には以下の形式の文字列を指定します。

  • RGB
  • RGBA
  • 3 char hex
  • 6 char hex
  • 8 char hex
{% dnd_section background_linear_gradient={ "direction": "to bottom", "colors": [ "#1EB6C3", "#2A2859" ] } %} {% dnd_module path="@hubspot/rich_text" width="6" %} {% end_dnd_module %} {% end_dnd_section %}

background_image

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

Use this table to describe parameters / fields
キーTypeDescription
backgroundPosition
String

画像の背景位置。垂直方向と水平方向の位置を示す文字列に対応しています。

  • TOP_LEFT
  • TOP_CENTER
  • TOP_RIGHT
  • MIDDLE_LEFT
  • MIDDLE_CENTER
  • MIDDLE_RIGHT
  • BOTTOM_LEFT
  • BOTTOM_CENTER
  • BOTTOM_RIGHT
backgroundSize
String

画像に使用されるCSS背景サイズのプロパティー。
サポートされる値:

  • cover
  • contain
  • auto
imageUrl
String

画像への絶対URL。

{% dnd_section background_image = { "backgroundPosition": "MIDDLE_CENTER", "backgroundSize": "cover", "imageUrl": "https://www.example.com/bg-image.jpg" }, %} {% dnd_module path="@hubspot/rich_text" width="6" %} {% end_dnd_module %} {% end_dnd_section %}

dndのスタイルパラメーターからページへの変換方法

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

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


参考になりましたか?
こちらのフォームではドキュメントに関するご意見をご提供ください。HubSpotがご提供しているヘルプはこちらでご確認ください。