ページでのフレキシブルカラムの使用

フレキシブルカラムは、ページエディターで新しいモジュールを編集して再構成できるページのセクションです。フレキシブルカラムをテンプレートに追加し、ページエディターでフレキシブルカラム内のモジュールを編集する方法について説明します。

 注: フレキシブルカラムは、ランディングページおよびウェブサイトページでのみ利用可能です。フレキシブルカラムはスマートコンテンツをサポートしていません.

テンプレートへのフレキシブルカラムの追加

ページテンプレートにフレキシブルカラムを追加することで、エディタでモジュールの追加、削除、または再配置を行えます。テンプレートのフレキシブルカラムに追加されたモジュールは、既定でページエディターで使用できます。

• HubSpotアカウントにて、［マーケティング］ > ［ファイルとテンプレート］ > ［デザインツール］の順に進みます。
• ファインダーで既存のテンプレートをクリックしてエディター内で開きます。新しいテンプレートを作成するには、[ファイル] ドロップダウンメニューをクリックし、[新規ファイル] を選択します。
• 右側のインスペクターで、[+追加] をクリックして、フレキシブルカラムモジュールを検索します。モジュールをクリックしてテンプレートの本文にドラッグします。
• フレキシブルカラムに表示する他のすべてのモジュールをクリックしてドラッグします.モジュールをドラッグしてフレキシブルカラムの上に置くと、青い四角形が表示され、コンテンツをドロップできるようになります。
• フレキシブルカラム内のモジュールを複数の列に横並びで配置する場合は、フレキシブルカラムモジュールを右クリックして、[フレキシブルカラムを分割] を選択します。 

注: 追加のモジュールは、ページレベルのフレキシブルカラムから追加、編集、または削除できます。

ページでのフレキシブルカラムの編集

• ページにモジュールを追加するには、左側のサイドバーのエディターペインでプラスアイコン + をクリックします。
• 新しいモジュールをレイアウトにドラッグ＆ドロップします。コンテンツエディターでは、新しいモジュールをドロップできる場所の上を通るたびに、モジュールアイコンが強調表示されます。

注: 新しいモジュールは、フレキシブルカラムを使用するページ内のエリアにのみ追加できます。特定のエリアでモジュールをドロップできない場合、そのエリアがテンプレートのフレキシブルカラムに含まれていない可能性があります。

• モジュールのレイアウトを再配置するには、フレキシブルカラムのいずれかのモジュールにカーソルを合わせて、[レイアウトを変更] アイコンをクリックします。

• 移動可能なモージュルの上部には、4 方向矢印アイコンが表示されます。マウスカーソルも 4 方向矢印アイコンに変わります。
• 移動するモジュールをクリックしてドラッグし、ページ上の新しい利用可能な位置にドロップします。コンテンツエディターでは、モジュールが配置される領域が紫色の影で表示されます。
• モジュールを移動したら、[レイアウトモードを終了] をクリックします。

左側のサイドバーペインで、フレキシブルカラムのレイアウトを編集することもできます。

• 左のサイドバーペインでモジュールアイコン integrations をクリックします。すべてのモジュールが、ページに表示される順番にフレキシブルカラムへ追加されます。
• モジュールを並べ替えるには、移動するモジュールをクリックして、モジュールリスト内の新しい位置にドラッグ＆ドロップします。右側のコンテンツエディターが、新しいレイアウトに更新されます。

• フレキシブルカラムのレイアウトからモジュールを削除するには、モジュールの上にカーソルを合わせて、ゴミ箱のアイコン delete をクリックします。
• モジュールとコンテンツの編集が完了したら、[保存] または [公開] をクリックして変更を公開します。