セクション

ドラッグ＆ドロップエリアの最も外側にあるコンテナはセクションと呼ばれます。セクションは他のdnd要素内にネスト（入れ子構造に）することはできませんが、モジュール、行、列を含めることができます。制作担当者はページエディター上でセクションを変更し、ドラッグ＆ドロップで操作できます。セクションには、背景を使用したスタイルや、パディングを設定できます。

cmsページエディターでのセクションのスクリーンショット

セクションは制作担当者がコンテンツエディターで作成するか、または開発者がdnd_sectionタグを使用してdnd_areaに構築することができます。エディター内で使用できるスタイル設定オプションは、テンプレートのコーディング時にも使用できます。

<main class="body-container-wrapper"> {% dnd_area 'dnd_area' label='Main section', %} {% 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 %} {% end_dnd_area %} </main>

利用可能な全てのドラッグ＆ドロップ要素パラメーターと使用例の一覧については、dnd_areaタグを参照してください。

再利用可能なセクション

事前設定済みの再利用可能なセクションを作成できます。制作担当者はページエディター上で、このセクションをページ内のドラッグ&ドロップエリアにドラッグ＆ドロップできます。このような事前設定済みのセクションのコーディングには、dnd_area内と同じ構文を使用しますが、セクションテンプレートと呼ばれる専用のファイルに格納します。 

通常のドラッグ＆ドロップセクションで制御できる全ての内容を制御できますが、制作担当者が出発点として使用できるように再利用可能な方法で提供してください。

事前設定済みのセクションはテンプレート内で使用するか、またはエディター上で制作担当者に提供することができます。HubL includeタグを使用してテンプレートにコンテンツを挿入できるパーシャルテンプレートと同様に、セクションには独自の機能があります。事前設定済みのセクションを参照するには、include_dnd_partialを使用してセクションファイルを示すパス属性を指定します。include_dnd_partialはdnd_areaの内部でのみ使用できます。

{% dnd_area 'dnd_area' class='body-container body-container--home-page', label='Main section' %} {# Banner Section #} {% include_dnd_partial path='../sections/banner.html' context={} %} {# End Banner Section #} {% end_dnd_area %}

include_dnd_partialタグのコンテキスト引数に注意してください。このタグにより、ページテンプレートからセクションにインスタンス固有の変数を渡すことができ、セクションファイルの既定値よりも優先されます。詳細については、セクションコンテキストを参照してください。

このようにセクションを使用すると、読みやすいテンプレートを簡単に作成できます。コンテキストでテンプレート固有のインスタンスが異なる場所のみを指定するため、戻ってそのセクションテンプレートを変更することができます。テーマの全てのテンプレート内で、このセクションの全てのインスタンスが更新されます。 

注：セクションがインクルードされたテンプレートを使って以前に作成されたページは更新されません。これにより、破損につながる変更ミスが防止されます。制作担当者は必要に応じて、ページエディター上でセクションの最新バージョンを追加してから、古いバージョンを削除することにより、セクションの最新バージョンを取得できます。

セクションテンプレート

セクションテンプレートは、開発者によって定義される再利用可能なコードセクションです。

セクションテンプレートは、そのテンプレートアノテーションに含まれるtemplateType: sectionによって指定されます。セクションに固有の全てのテンプレートアノテーションを以下に示します。

<!-- templateType: section label: Banner description: "A banner typically used at the top of a page highlighting a product or main topic." isAvailableForNewContent: true screenshotPath: ../images/section-previews/banner.png -->
セクションテンプレートのアノテーション
ParameterTypeDescription Value
templateType
String

テンプレートの使用箇所とテンプレートでの使用データを決める、テンプレートタイプを設定します。

 section
label
String

ページエディターで、人間に分かりやすいセクション名を指定するために使用します。
description
String

ラベルに収まらない、セクションに関する詳しい説明です。ページエディター内に表示されます。最大255文字です。
screenshotPath
String/path

セクションのスクリーンショットのパスです。セクションがどのように表示されるかを示すビジュアルリファレンスを制作担当者に提供するために使用します。
ページエディターでの再利用可能なセクションを追加するUI

セクションスクリーンショットのヒント：ChromeまたはFirefoxを使用して公開ページのセクションラッパーを調べます。次に、セクションのラッパー要素を右クリックします。表示されるコンテキストメニューに、［screenshot node］/［capture node］という項目が表示されます。注：スティッキーヘッダーがある場合は、スクリーンショットに表示される可能性があるため、インスペクターを使用して非表示にすることができます。

セクションテンプレートの開始と終了にはdnd_sectionタグを使用する必要があります。セクションテンプレートに含めることができるセクションは1つのみです。このセクションの内部には、モジュール、行、列を配置できます。これらは全て、ページテンプレートに追加するdndエリアと同じdnd_areaルールに従います。例外として、定義は1つのセクションのコンテンツとその子ドラッグ＆ドロップ要素が対象になります。

<!-- templateType: section label: Banner description: "A banner typically used at the top of a page highlighting a product or main topic." isAvailableForNewContent: true screenshotPath: ../images/section-previews/banner.png --> {% dnd_section padding={ 'top': 200, 'right': 20, 'bottom': 200, 'left': 20 }, background_image={ 'backgroundPosition': 'MIDDLE_CENTER', 'backgroundSize': 'cover', 'imageUrl': context.backgroundImage || get_asset_url('../images/blank-page-banner.png') }, max_width=778, vertical_alignment='MIDDLE' %} {% dnd_column %} {% dnd_row %} {% dnd_module path='@hubspot/rich_text' %} {% module_attribute 'html' %} <div style="text-align: center"> {{ context.content || '<h1 style="color: #fff;">Communicate <span style="font-weight: 400;">Your Way</span></h1><p style="color: #fff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dapibus posuere mi, in pretium ante posuere a. Aliquam a risus at eros molestie pretium.</p>' }} </div> {% end_module_attribute %} {% end_dnd_module %} {% end_dnd_row %} {% dnd_row %} {% dnd_module path='../modules/button', button_text={{ context.buttonText || 'Subscribe' }} horizontal_alignment='CENTER' %} {% end_dnd_module %} {% end_dnd_row %} {% end_dnd_column %} {% end_dnd_section %}

セクションのプレビュー

開発中にセクションをプレビューする最も簡単な方法は、デザインマネージャーを使用することです。dnd_areaを含むテンプレートを開きます。これにより、include_dnd_partialタグを使用してセクションテンプレートが呼び出されます。右上にあるプレビューをクリックします。これにより、セクションを更新すると変更がすぐに反映されるようになります。これは、変更のたびに新しいページを作成するよりも大幅に効率的です。

セクションコンテキスト

セクションコンテキスト変数を使用して、セクションとモジュールの既定値を変更できます。セクションコンテキスト変数は開発者が定義します。つまり、モジュールとそのフィールドには直接関連付けられていません。

ページテンプレートでは、include_dnd_partialタグ内でコンテキストパラメーターを使用してこれらのコンテキスト変数を設定できます。

{% dnd_area 'dnd_area' class='body-container body-container--home-page', label='Main section' %} {# Banner Section #} {% include_dnd_partial path='../sections/banner.html' context={ 'content': '<h1 style="color: #fff;">Home Page</h1><p style="color: #fff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dapibus posuere mi, in pretium ante posuere a. Aliquam a risus at eros molestie pretium.</p>', 'buttonText': 'Buy Now' } %} {# End Banner Section #} {% end_dnd_area %}

コンテキストパラメーターに追加する変数は、セクションテンプレート内で参照できるようになります。コンテキストでも、カスタムHubL変数を使用したモジュールパラメーターとdnd要素パラメーターと同様に設定ができます。次の例では、画像URLがコンテキストに存在する場合にはそのURLを使用するように、画像URLを設定しています。リッチ テキスト エリアとボタンコンテンツについても同様です。

<!-- templateType: section label: Banner description: "A banner typically used at the top of a page highlighting a product or main topic." isAvailableForNewContent: true screenshotPath: ../images/section-previews/banner.png --> {% dnd_section background_image={ 'backgroundPosition': 'MIDDLE_CENTER', 'backgroundSize': 'cover', 'imageUrl': context.backgroundImage || get_asset_url('../images/blank-page-banner.png') }, max_width=778 %} {% dnd_column %} {% dnd_row %} {% dnd_module path='@hubspot/rich_text' %} {% module_attribute 'html' %} <div style="text-align: center"> {{ context.content || '<h1 style="color: #fff;">Communicate <span style="font-weight: 400;">Your Way</span></h1><p style="color: #fff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dapibus posuere mi, in pretium ante posuere a. Aliquam a risus at eros molestie pretium.</p>' }} </div> {% end_module_attribute %} {% end_dnd_module %} {% end_dnd_row %} {% dnd_row %} {% dnd_module path='../modules/button', button_text={{ context.buttonText || 'Subscribe' }} horizontal_alignment='CENTER' %} {% end_dnd_module %} {% end_dnd_row %} {% end_dnd_column %} {% end_dnd_section %}

コンテキスト変数が使用されている全ての箇所には||（or）があることに注意してください。最もシンプルな例は、ボタンモジュールです。context.buttonTextに値がある場合は、その値を使用してください。それ以外の場合はテキストを'Subscribe'に設定します。これにより、何も指定されない場合には、代替の既定コンテンツを提供できます。

セクションクラス

開発者はclassパラメーターを使用してセクションラッパーにクラスを追加できます。これにより、dndセクションのhtml要素のclassフィールドに、指定したクラスが追加されます。可能な限り、スタイル設定コントロールをセクションに組み込んで、セクションを制作担当者が変更できるようにしておくことをお勧めします。クラスオプションでは、さらに洗練されたスタイルを設定できます。

{% dnd_section class='my-hero-section' padding={ 'top': 200, 'right': 20, 'bottom': 200, 'left': 20 }, background_image={ 'backgroundPosition': 'MIDDLE_CENTER', 'backgroundSize': 'cover', 'imageUrl': context.backgroundImage || get_asset_url('../images/blank-page-banner.png') }, max_width=778, vertical_alignment='MIDDLE' %} ...

制作担当者は、クラスの編集、追加、または削除を行うことはできません。エディター内でセクションを手動で再作成することによってのみ、取り除くことが可能です。

また、CSSまたはJavaScriptを使用してセクションの子のレイアウトを変更することは避けてください。制作担当者がページエディター内で作業しにくくなるためです。 

関連コンテンツ

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