レイアウトエディターを使用したテンプレートの構成とカスタマイズ

ドラッグ&ドロップテンプレートの構成やカスタマイズを行うには、デザインマネージャーの レイアウトエディター を使用します。モジュール、グループ、列を配置することで、複数のページにおけるコンテンツの構造を制御できます。これにより、制作担当者もページエディターでより詳細に制御できるようになります。

始める前に

デザインマネージャーのレイアウトエディターを使用してページの構成とカスタマイズを行う前に、要件と考慮事項を確認してください。 

制限事項と考慮事項について

• テンプレートに対する変更は、そのテンプレートを使用しているすべてのコンテンツに適用されます。 
• フレキシブルカラムなどの一部の機能は、ページテンプレートでのみ使用できます。

テンプレートの構成

レイアウトエディターを使用して、テンプレート内のコンテンツをどのように整理するかを構造化します。

1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
2. ファインダーでテンプレート をクリックし、レイアウトエディターで開きます。 

モジュールを追加して配置

モジュールはテンプレートレイアウトの構成要素です。モジュールを別のモジュールの横にある方向にドラッグすると、列が作成されます。モジュールを別のグループの上にドラッグすると、モジュールがグループ化されます。

1. インスペクターで、[ +追加]をクリックします。
2. テキスト を入力してモジュールを検索し、 そのモジュールをクリックします。 
3. モジュール を レイアウトエディターにドラッグします。

列の幅を変更

列の幅を変更するには、次の手順に従います。

1. レイアウトエディターで、2つの モジュールの間にマウスポインターを置きます。
2. クリックして水平方向にドラッグすると、列の幅を調整できます。 

モジュールをグループ化

テンプレートのセクションを整理するためにモジュールをグループ化します。

モジュールをグループ化するには、次の手順に従います。

1. レイアウトエディターで モジュールを選択します。
2. Control キー (Windows) または Command キー (Mac) を押したまま、追加の モジュールを選択します。 
3. インスペクターで、[ groupModule グループモジュール]アイコンをクリックします。

注：モジュールグループは、セクションセパレーターをまたいだり、部分的に選択されたモジュールのグループを保持したりすることはできません。

モジュールを水平方向に分割

1つのモジュールを半分に分割して、2つのモジュールを作成します。

モジュールを分割するには、次の手順に従います。

1. レイアウトエディターで モジュールをクリックします

2. インスペクターで、[ splitModule 分割モジュール ]アイコンをクリックします。 

モジュールを中央揃えにする

水平スペーサーを使用してモジュールとグループをページの中央に配置するか、モジュールとグループの両側に空白を追加します。 

水平スペーサーを追加するには:

1. インスペクターで、[ +追加]をクリックします。

2. 検索 欄に horizontal spacer と入力します。次に、 水平スペーサー モジュールを レイアウトエディター内のテンプレート上の位置にドラッグします。

3. 水平スペーサーのサイズを変更するには、 他のモジュールと間隔を分ける列の幅を変更します。

4. モジュールまたはグループを中央に配置するには、両側にHオリゾンタルスペーサー モジュールを追加します。

フレキシブルカラムを追加

フレキシブルカラムは、コンテンツ作成者によるページレベルでのコンテンツ管理に役立ちます。HubSpotページテンプレートにフレキシブルカラムを追加することにより、ユーザーは各ページエディター内でモジュールを追加、削除、並べ替えできるようになります。これにより、デザイナーによるテンプレート作成数を減らせると同時に、マーケティング担当者はニーズに応じて各ページを柔軟にカスタマイズすることができます。

1. インスペクターで、[ +追加]をクリックします。

2. [検索 ]フィールドに フレキシブルカラムを入力します。次に、フレキシブルカラム モジュールを レイアウトエディター内のテンプレートの所定の位置にドラッグします。

テンプレートをカスタマイズ

テンプレートのレイアウトの構成が終わったら、モジュールを入れ替えたり、ほかのテンプレートをカスタマイズすることができます。

モジュールオプションを編集

モジュールのオプションにはスタイル設定、既定のコンテンツなどがあり、モジュールのタイプによって異なる場合があります。モジュールCSSと既定のコンテンツと設定の編集について詳細をご確認ください。

1. レイアウトエディターで モジュールをクリックします。 
2. インスペクターで、モジュールの オプションをカスタマイズします。 

モジュールを差し替える

テンプレートにモジュールを追加した後に、別のモジュールと差し替えることができます。

1. レイアウトエディターで モジュールを右クリックし、[モジュールを入れ替え]を選択します。

2. ポップアップで、元のモジュールを置換する モジュールを選択します。

グローバルモジュールに変換

テンプレート内のモジュールを グローバルモジュールに変換して、複数のテンプレートで使用できます。モジュールを特定の方法でスタイル設定した場合や、他のテンプレートで再利用したい既定のコンテンツをモジュール内に設定する場合に、これを使用します。

1. レイアウトエディターでモジュールをクリックします。
2. インスペクターで [その他 ]ドロップダウンメニューをクリックし、[ グローバルモジュールに変換]を選択します。
3. ダイアログボックスにグローバルモジュール 名を入力し、[ 作成]をクリックします。

モジュールを削除

1. レイアウトエディターで モジュールをクリックします。

2. インスペクターで、delete ごみ箱アイコンをクリックします。 

ファインダーでテンプレートを管理

モジュールオプションに加えて、テンプレートに特有の処理がいくつか用意されています。

1. ファインダーで、テンプレート の名前 をクリックします。
2. [アクション ]ドロップダウンメニューをクリックし、 オプションを選択します。 
   • 別のアカウントにコピー:自分がユーザーとして登録されている別のアカウントにテンプレートをコピーします。マーケットプレイスから購入したテンプレートを他のポータルにコピーすることはできません。
   • テンプレートを複製：テンプレート自体の複製を作成します。既存のテンプレートのバリエーションを作成する場合に便利です。
   • [HTMLに複製]:ドラッグ&ドロップテンプレートの別個のHTMLバージョンを作成します。マークアップをより確実に管理する必要がある場合、またはテンプレートのコードについて学習する場合に役立ちます。
   • テンプレートソースを表示：テンプレートのソースコードHTMLを表示します。[HTMLに複製]オプションとは異なり、テンプレートの別個のHTMLバージョンを作成することはありません。
   • テンプレートの名前を変更:テンプレートの内部名を編集します。
   • 依存項目を表示：このテンプレートを現在使用している全てのページ、Eメール、ブログを表示します。
   • 変更履歴を表示：テンプレートの変更履歴を表示して、以前に公開したバージョンにテンプレートを戻せます。
   • Eメール/ページを作成:テンプレートから直接Eメールまたはページを作成します。
   • テンプレートを削除:テンプレートを削除します。テンプレートを削除すると、30日間は使用できますが、その期間が経過したら完全に削除されます。テンプレートを復元するには、 カスタマーサポートに連絡する必要があります。