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

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

 注: フレキシブルカラムはスマートコンテンツをサポートておらず、ブログツールでは使用できません。ページのレイアウトに関してさらに多くのことを制御できるようにするには、ウェブ開発者と協力して、ページテンプレートにドラッグ＆ドロップエリアを追加します。

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

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

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

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

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

フレキシブルカラムを含むテンプレートによって新しいページを作成したら、エディターで直接、構造とコンテンツをカスタマイズできます。

• ページにモジュールを追加するには、左側の [追加] パネルをクリックし、モジュールをクリックしてそれをレイアウトにドラッグします。コンテンツエディターでは、新しいモジュールをドロップできる場所の上を通るたびに、モジュールアイコンが強調表示されます。
• フレキシブルカラムのレイアウトからモジュールを削除するには、モジュールの上にカーソルを合わせて、 delete ゴミ箱のアイコンをクリックします。

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

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

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