ドラッグ&ドロップエリアを使ってみる
Marketing Hub
- Professional or Enterprise
CMS Hub
- Professional or Enterprise
ドラッグ&ドロップエリアを使用することで、開発者はコンテンツエディター内でレイアウト、スタイル、コンテンツを直接変更できる、ページ内のセクションを作成できます。これにより、開発者はグローバル構造を使用していくつかのテンプレートを作成して制作担当者をサポートできます。制作担当者は、小さなレイアウトを変更するためにコードに手を加えたり新しいテンプレートを必要としたりすることなく、さまざまな目的とレイアウトの多数のページを作成できます。

開発者は、ドラッグ&ドロップエリアに空のドロップ領域を設置できます。この場所に制作担当者は自分のページコンテンツとレイアウトを作成できます。また、開発者はドラッグ&ドロップエリアにさまざまなモジュール、レイアウト、コンテンツを事前に配置して、制作担当者が作業を開始する際に利用してもらうことができます。
このチュートリアルでは、簡単なドラッグ&ドロップエリアの設定について説明します。ドラッグ&ドロップエリアの開発者リソースについては、実装のベストプラクティスとしてboilerplate(ボイラープレート)を参照してください。また、ドラッグ&ドロップエリアHubLタグのリファレンスドキュメントも参照してください。
新しいHTMLテンプレートを作成して、ドラッグ&ドロップセクションのHubLおよびHTMLを格納します。
ドラッグ&ドロップエリアは、12列のレスポンシブグリッドを基盤としています。ドラッグ&ドロップタグでは、列と行を指定するクラス名を指定して、マークアップをレンダリングします。これらのクラス名をターゲットとするスタイルシートは、開発者が追加する必要があります。実装可能なレイアウトスタイルの例はこちらを参照してください:CMS-Theme-Boilerplate。スタイルシートをテンプレートに追加するには、{{ require_css() }}
を使用します。
dnd_areaは、ウェブページの一部の構造、デザイン、コンテンツを編集可能にするためのコンテナーです。ドラッグ&ドロップエリアの既定のコンテンツは、dnd_areaタグの本文として提供します。
このタグ自体によって、制作担当者がモジュールをコンテンツクリエイターにドラッグするためのドロップ領域が生成されます。
dnd_sectionは最上位の行であり、常にdnd_areaの直接の子でなければなりません。セクションでは、制作担当者がコンテンツエディター内のセクションに指定するスタイルの既定値を制御するさまざまなパラメーターがサポートされます。
この例では、バックグラウンド画像を設定し、子コンテンツの垂直方向の位置合わせを中央にし、最大幅を1000pxに設定しています。ドラッグ&ドロップHubLタグでサポートされる全てのパラメーターについては、ドラッグ&ドロップエリアHubLタグのリファレンスドキュメントを参照してください。
セクションのコンテンツをあらかじめ埋めておく場合は、dnd_moduleタグを使用してパスを参照することによりモジュールを含めることができます。この例では既定のHubSpotモジュールを参照していますが、デザインツールのファイルツリー内のパスを指定して、自分で作成した追加モジュールを含めることができます。
dnd_moduleの既定値を指定するには、module_attributeタグを使用できます。
複数のモジュールを含めるには、複数のdnd_moduleタグを使用できます。12列グリッドに基づくoffsetおよびwidthパラメーターを設定することで、リッチ テキスト モジュールの横に画像モジュールを配置できます。
ドラッグ&ドロップエリアをさらに複雑にする場合、dnd_rowおよびdnd_columnタグを使用して行と列を組み込めます。行と列はコンテンツエディターのセクションと同様に機能します。制作担当者は行と列をドラッグして操作し、複製、削除、スタイル設定を行うこともできます。
ドラッグ&ドロップエリア、セクション、列、行、モジュールのさまざまなコンポーネント全てには、CSSを使用してスタイル設定できるクラスがあります。これらのコンポーネントの編集可能なスタイルとオプションは、HubLではなくCSSを使用して設定できます。例えば、既定のパディングはCSSでdnd_sectionに設定できます。
ドラッグ&ドロップ エリア コンポーネントの汎用CSSセレクターは、.dnd-section、.dnd-column、.dnd-row、および.dnd-moduleです。これらのdndプレフィックスが付いたクラス以外、マークアップの実際のグリッドクラス名はブートストラップ2の名前に基づいています。これは、ドラッグ&ドロップでブートストラップ2を使用する必要があることを意味するわけではありません。ページにdnd_area
を追加するときは、グリッドで機能するスタイルを提供する責任があります。実装可能なレイアウトスタイルの例はこちらを参照してください:CMS-Theme-Boilerplate。スタイルシートをテンプレートに追加するには、{{ require_css() }}
を使用します。
ドラッグ&ドロップエリアの開発者リソースについては、実装のベストプラクティスとしてboilerplate(ボイラープレート)を参照してください。また、ドラッグ&ドロップエリアHubLタグのリファレンスドキュメントも参照してください。
貴重なご意見をありがとうございました。