レイアウトエディターでページ、Eメール、ブログのテンプレートを作成する

テンプレートを使用すると、ブログ、ページ、またはEメールでさまざまなタイプのコンテンツの構造を制御できます。 デザインマネージャー でモジュールをドラッグアンドドロップしてテンプレートを作成できます。HubSpotのテンプレート構築については、こちらのアカデミーレッスン。

始める前に

この機能の使用を開始する前に、事前に実行する必要がある手順、および機能の制限と、それを使用した場合の潜在的な結果を完全に理解してください。

要件を理解する

• デザインマネージャーでテンプレートを作成および編集するための デザインツール 権限があることを確認します。
• グローバルなウェブアセットとブログ/ウェブサイトの設定を編集する必要がある場合は、「 グローバルコンテンツとテーマ設定 」権限と 「ウェブサイト設定 」権限も付与することをお勧めします。

制限事項と考慮事項の理解

• Eメールテンプレートを作成するには、Marketing Hub Professional または Enterprise サブスクリプションが必要です。 Content Hub アカウントでは、 ドラッグ&ドロップEメールエディターを使用してEメールを作成できます。
• Eメール テンプレートへの CSS または JavaScript ファイルの添付はサポートされていませんが、 カスタム HTML マークアップ、本文クラス、およびインライン スタイルをテンプレートに追加することはできます。 
• ドラッグ&ドロップテンプレート は、利用可能なすべてのコンテンツ機能をサポートしているわけではありません。幅広いツールを使用するには、 代わりにHTML+HubLテンプレート を使用する方法をご覧ください。

HubSpotテンプレートを理解する

HubSpot テンプレート はブログ、 ページ、 Eメールのフレームワークを提供し、ユーザーはコンテンツエディターで実際のコンテンツを生成します。コンテンツモジュールをドラッグ&ドロップしてレイアウトを作成することで、テンプレートを作成できます。代わりにHTMLを使用してテンプレートを作成するには、カスタムコードテンプレートの作成について詳細をご覧ください。 

レイアウトエディターは、アイデア、スケッチ、プロトタイプを、コンテンツを作成するためのレスポンシブテンプレートに変換するのに役立ちます。

新規テンプレートを作成

• HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
• 左側の列の上部にある [ファイル ] メニューをクリックし、[ 新規ファイル] を選択します。

• ダイアログボックスで、［今日は何を作成しますか？］ドロップダウンメニューをクリックし、［ドラッグ＆ドロップ］を選択します。［次へ］をクリックします。

• ［テンプレートタイプ］ドロップダウンメニューをクリックしてタイプを選択します。ほとんどのデフォルトモジュールはどのテンプレートでも利用可能ですが、一部のモジュールは特定のテンプレートタイプに限定されています。テンプレートのタイプは、次の中から選択します。
  • ブログ：個別のブログ記事およびブログリストページのテンプレート。
  • Eメール：Eメールのテンプレート。
  • ページ：ウェブサイトとランディングページのテンプレート。
  • システム：エラーページ、パスワードプロンプト、Eメールの配信登録ページ用のテンプレート。 
• ファイル名を入力します。完了したら、［作成］ をクリックします。

 

テンプレートの構成とカスタマイズ

デザインマネージャーの右側にあるインスペクター を使用して、テンプレートにさらにモジュールを追加することができます。右列add 追加]をクリックして、ドラッグ&ドロップテンプレートレイアウトに追加するモジュールを検索します。テンプレートの構造の編集について詳細をご確認ください。 

テンプレートのスタイルをカスタマイズするには、右側の列にあるオプションを使用できます。特定のモジュールを選択しない場合、テンプレートのHeadに直接スタイルを追加することができます。モジュールまたはグループをクリックすると、そのコンポーネントに固有のスタイルオプションにアクセスできます。、インスペクターを使って自分のテンプレートをスタイル設定するについて詳しく学びましょう。

テンプレートをプレビューして公開する

テンプレートを作成したら、公開中のページでどのように表示されるかをプレビューしてから公開できます。

• テンプレートをプレビューするには、次の手順に従います。
  • 右上の [プレビュー]をクリックします。 
  • [ 表示オプションを使用したライブプレビュー]を選択した場合は、 ビューポートプリセットを選択することで、他のデバイスでの表示時のテンプレートをプレビューできます。
  • [表示オプションなしでプレビュー]を選択した場合は、テンプレートがブラウザーでどのように表示されるかをプレビューすることしかできません。