ドラッグ&ドロップエリアを使用して、制作担当者が簡単にレイアウト、スタイル、コンテンツを変更できるようにサポートします。
新規HTMLテンプレートを作成する
{{ require_css() }}
を使用します。ドラッグ&ドロップエリアを作成する
dnd_area
は、ウェブページの一部の構造、デザイン、およびコンテンツを編集可能にするためのコンテナーです。ドラッグ&ドロップエリアのデフォルトのコンテンツは、dnd_area
タグの本文として提供します。このタグ自体によって、制作担当者がモジュールをコンテンツ制作ツール内にドラッグするためのドロップ領域が生成されます。モジュールでセクションを作成する
dnd_section
は最上位の行であり、常にdnd_area
の直接の子でなければなりません。セクションでは、制作担当者がコンテンツ制作ツール内のセクションに指定するスタイルのデフォルト値を制御するさまざまなパラメーターがサポートされます。例として、次のコードでは背景画像(background_image
)を含むセクションを作成します。このセクションはvertical-alignment
パラメーターを基準に中央に配置し、子コンテンツのフィールドの最大幅を1000px
に設定しています。ドラッグ&ドロップのHubLタグでサポートされる全てのパラメーターについては、ドラッグ&ドロップエリアのHubLタグに関する資料をご参照ください。セクションのコンテンツを事前に配置しておくために、コードにはパスを参照してモジュールを組み込むdnd_module
タグも含まれています。この例では、path
パラメーターで設定されているHubSpotのデフォルトのリッチ テキスト モジュールをdnd_module
で取り込んでいます。リッチ テキスト モジュールのデフォルト値は、module_attribute
タグを使用して指定します。dnd_section
にmax_width
を設定する場合、コンテンツにどのような影響があるかにご注意ください。複数のモジュールを含める
dnd_module
タグを使用します。12列グリッドに基づくoffset
およびwidth
パラメーターを設定することで、以下のようにリッチ テキスト モジュールの横に画像モジュールを配置できます。dnd_section
にvertical_alignment
を設定すると、コンテンツが垂直方向の中央に配置される点にご注意ください。列と行を組み込む
dnd_row
タグとdnd_column
タグを使用して行と列を組み込むことができます。行と列はコンテンツエディターのセクションと同様に機能します。制作担当者は行と列をドラッグして操作し、複製、削除、スタイル設定を行うことも可能です。ドラッグ&ドロップコンポーネントの汎用スタイルを設定する
dnd_sections
に設定できます。.dnd-section
、.dnd-column
、.dnd-row
、および.dnd-module
です。これらのdnd
プレフィックスが付いたクラス以外、マークアップの実際のグリッドクラス名はブートストラップ2の名前に基づいています。これは、ドラッグ&ドロップでブートストラップ2を使用する必要があることを意味するわけではありません。ページにdnd_area
を追加する場合、開発者には、グリッドが機能するようなスタイルを指定する責任があります。実装可能なレイアウトスタイルの例については、HubSpotのCMSボイラープレート(英語)をご参照ください。スタイルシートをテンプレートに追加するには、{{ require_css() }}
を使用します。