​

はじめに

目的のテンプレートを読み込んだ後、画面左上の アイコンをクリックすると、ランディングページエディターにアクセスできます。 ランディングページエディターで使用できる操作は次のとおりです。

• Add element: このオプションを使用すると、次のいずれかの要素を画面に追加できます。要素を追加するには、キャンバスにドラッグ＆ドロップします。
  • Column: この要素をドラッグ＆ドロップすると、列を追加できます。
  • Row: この要素をドラッグ＆ドロップすると、行を追加できます。列要素と行要素を使用してランディングページのレイアウトを作成し、そこに他の要素を追加できます。
  • Essential elements: このセクションには、Text、Image、Button、Icon、Spacer、Map、Form、Line の各要素が含まれています。詳細については、Essentials を参照してください。
  • Media elements: このセクションには、Gallery、Video、Audio、Playlist の各要素が含まれています。詳細については、Media を参照してください。
  • Content elements: このセクションには、Icon Box、Embed、Alert、Counter、Countdown、Progress、Calendly、Carousel、Tabs、Accordion、Switcher、Table、Timeline の各要素が含まれています。詳細については、Content を参照してください。
• Search element: Search element 検索ボックスでは、要素名を入力して要素を検索できます。
• Edit element: このオプションを使用すると、Add Elements パネルに表示する要素を選択できます。非表示にしたい要素をクリックすると、選択が解除されます（要素の左上に暗い円が表示されます）。デフォルトでは、表示されているすべての要素が選択されており、要素の左上にチェックマークが付いています。たとえば、Row 要素が選択されている場合は のように表示され、選択されていない場合は のように表示されます。

​

要素に共通のスタイル設定オプション

ランディングページエディターのほとんどの要素では、次のスタイル設定オプションを使用できます。

​

Essentials

このセクションには、ランディングページの作成を始めるための要素が含まれています。これはランディングページの下書きを作成するのに役立つ、まとめられたスターターキットのようなものです。メディア要素やエフェクトを追加して、メッセージをより魅力的にすることができます。 Essentials セクションには次の要素が含まれています。

• Text: この要素を使用すると、メッセージにテキストを追加できます。テキストは画面上で直接編集でき、テキストブロック内をクリックするとテキストブロックの下にエディターツールバーが開き、フォントやスタイルのオプションを追加できます。 フォントファミリー、フォントサイズ、基本的な書式設定、テキストの配置、番号付きおよび番号なしの箇条書き、フォントの色の編集、テキストの上下へのパディング（余白）の追加、HTML でのテキストのスタイルの選択（段落要素（<p> タグ）にするか見出しにするかなど）、リンクの追加、スタイルとエフェクトの選択ができます。テキストのコピーと削除もできます。
• Image: この要素を使用すると、ランディングページに画像を追加できます。画像要素を画面にドラッグ＆ドロップし、クリックすると編集オプションが表示されます。画像エディターでは次の操作ができます。
  • 画像をアップロードし、フィルター、タグ、マスクを追加します。
  • 画像の高さと幅を編集し、任意のアスペクト比を使用します。画像の高さと幅を指定するには、画像をクリックし、画像エディターツールバーで をクリックします。ポップアップで高さと幅（パーセンテージ）を指定します。画像のサイズを手動で変更することもできます。
  • 画像に背景色、本体色、枠線の色、影を追加します。
  • 画像にリンクを追加します。このセクションには次のオプションがあります: URL、Block、File、Action。
  • 画像の配置を変更します。
  • 画像を複製します。
  • 画像を削除します。
• Button: この要素を使用すると、ランディングページにボタンを追加できます。ボタンのスタイルを設定したり、アクションを追加したりすることもできます。ボタンを画面にドラッグ＆ドロップし、クリックすると編集オプションが表示されます。ボタンエディターでは次の操作ができます。
  • ボタン/アイコンのサイズ（幅と高さ）と位置、および角の形状（鋭角、曲線など）を変更します。以下に示すように、スライダーをドラッグしてボタンの角の形状を決定します。
  • ボタン/アイコンにテキストを追加し、テキストの書式設定とスタイルのオプションを設定します。
  • ボタン/アイコンに背景色、本体色、枠線の色、影を追加します。
  • ボタンにリンクを追加します。このセクションには次のオプションがあります: URL、File、Action。
  • ボタンの配置を変更します。
  • ボタンをコピーします。
  • ボタンを削除します。
• Icon: アイコン要素を使用すると、ランディングページにアイコンを追加できます。アイコンのスタイルを設定したり、アクションを追加したりすることもできます。ボタンを画面にドラッグ＆ドロップし、クリックすると編集オプションが表示されます。ボタンエディターでは次の操作ができます。
  • アイコンの選択: ランディングページに表示するアイコンを選択できます。デフォルトのアイコンは星 です。エディターツールバーの星アイコンをクリックすると、使用するアイコンまたはアウトラインを選択できます。
  • 色: エディターツールバーの色オプションをクリックすると、アイコンの色を選択できます。
  • アイコンへのリンクの追加。このセクションには次のオプションがあります: URL、File、Action。
  • スタイルとエフェクト: ランディングページが表示されたときや、ユーザーが Web サイトをスクロールしたときにボタンに表示するエフェクトを選択できます。
  • アイコンをコピーします。
  • アイコンを削除します。
• Spacer: スペーサー要素を使用すると、要素間にスペースを追加したり、通知にスペースを追加したりできます。
• Map: マップ要素を使用すると、ランディングページにマップを追加できます。住所の追加、ズームレベルの決定、マップへの色要素（背景色、枠線の色、影）の追加、マップの幅と高さの調整、エフェクトとスタイルの追加、コピー、削除ができます。
• Form: フォーム要素を使用すると、ユーザーから入力を収集するためのフォームを追加できます。デフォルトのフォームには次のオプションが含まれています。
  • Email
  • オプションセレクター - option 1、option 2
  • ユーザーが追加の入力を行えるテキストボックス。
  • アイコンを使用して、これらの要素を自由に前後に移動できます。
  • たとえば、SMS メッセージの受信をオプトインするためにユーザーの許可を求めることができます。最初のフィールドには、ブランドからの SMS メッセージの受信登録についてユーザーに許可を求めるメッセージを入れ、2 番目のフィールドには Sign-up/Not Interested を、3 番目のフィールドにはユーザーの電話番号を取得する入力フィールドを設定できます。
  • ユーザーの名前、メール ID、携帯電話番号を取得したい場合は、入力フィールドから属性をマッピングできます。
• Line: ライン要素は、ランディングページに線を追加します。エディターツールバーで、線のスタイル、高さ、色、配置、幅、スタイル、エフェクトを選択できます。線のコピーや削除もできます。

​

Media

このセクションには、ランディングページに追加してユーザーにとって魅力的なものにするためのメディア要素が含まれています。次の要素が含まれています。 Gallery: Gallery 要素を使用すると、ランディングページに画像をアップロードできます。画像をアップロードし、タグ、フィルター、マスクを追加できます。次のオプションも使用できます。

• 画像の色オプション: 画像エディターツールバーの オプションを使用して、画像にオーバーレイ、枠線、影を追加できます。
• 画像リンク: URL リンク、アクション、外部 CSS ファイルのオプションを追加して、ユーザーが画像をクリックしたときの動作を指定できます。
• 画像の移動: 画像エディターツールバーの オプションをクリックすると、画像を左または右に移動できます。
• アイコンをコピーします。
• 削除します。

Video: Video 要素を使用すると、ランディングページに動画をアップロードできます。YouTube 動画、Vimeo 動画、または動画の URL をアップロードできます。カバー画像とプレーヤーの設定を選択し、再生オプションを追加し、動画にフィルターを追加できます。カスタム動画（ローカルファイルのアップロード）はサポートされていません。 Audio: Audio 要素を使用すると、ランディングページに音声をアップロードできます。ランディングページが表示されたときに再生する音声、音声の外観、音声のボタン、音声を自動再生するかどうかを選択できます。次のオプションがあります。

• 色オプション: 音声エディターツールバーの オプションを使用して、音声にオーバーレイ、枠線、影を追加できます。
• スタイルとエフェクト: ランディングページが表示されたときに音声に表示するエフェクトを選択できます。
• アイコンをコピーします。
• 削除します。

Playlist: ランディングページで再生する動画のプレイリストをアップロードできます。動画の再生順序やループ再生するかどうかなどを設定します。ブランディング要素やコントロール要素を追加することもできます。次のオプションがあります。

• 移動: アイコンを使用して、これらの要素を自由に前後に移動できます。
• 色オプション: 音声エディターツールバーの オプションを使用して、音声にオーバーレイ、枠線、影を追加できます。
• スタイルとエフェクト: ランディングページが表示されたときに音声に表示するエフェクトを選択できます。
• アイコンをコピーします。
• 削除します。

​

Content

このセクションには、そのまま使用できるいくつかのコンテンツ要素（他のいくつかの要素の組み合わせ）が含まれています。ここでは次のオプションを使用できます。

• Icon Box: アイコンボックスは、テキスト、ボタン、アイコンの組み合わせです。これらの各要素は、クリックしてカスタマイズできます。詳細については、上記のこれらの要素のカスタマイズに関するセクションを参照してください。
• Embed: 埋め込み要素を使用すると、ランディングページに HTML を埋め込むことができます。 アイコンをクリックすると、カスタム HTML を貼り付けることができます。エディターツールバーを使用して、色オプション、スタイル、エフェクトの追加、要素の複製と削除もできます。
• Alert: アラート要素を使用すると、ポップアップにタイトルと説明テキストを追加できます。閉じるボタンを有効または無効にしたり、要素に色、配置、スタイルのオプションを追加したりできます。
• Counter: カウンター要素を使用すると、Web ページにカウンターを表示できます。たとえば、サイトの読み込み時にこのオプションを使用できます。 アイコンをクリックすると、カウンターをカスタマイズするオプション（カウンタースタイル、開始時間と終了時間、カウンターの期間、プレフィックス、サフィックス、演算子オプション）が表示されます。要素の色、配置、スタイルのカスタマイズやエフェクトの追加もできます。
• Countdown: カウントダウン要素を使用すると、Web ページにカウントダウンを表示できます。たとえば、フラッシュセール、タイムセール、期間限定オファーにこのオプションを使用できます。 アイコンをクリックすると、カウントダウンのオプション（タイマースタイル、日付、時刻、タイムゾーンの編集、日、時間、分、秒を表示するかどうかの指定）をカスタマイズできます。要素のテキスト、色オプション、スタイル、エフェクトの追加や配置もできます。
• Progress: このオプションを使用すると、静的なプログレスバーを追加できます。 アイコンをクリックすると、プログレスバーのオプションが表示されます。ここでは、スタイル、塗りつぶし、タイトルとパーセンテージを表示するかどうかを指定できます。要素のテキスト、色オプション、スタイル、エフェクトの追加や配置もできます。
• Calendly: Calendly を使用すると、ユーザーが日付と時刻を選択するのに役立つウィジェットを追加できます。これは予約やミーティングの設定に使用できます。以下に示すように、リンクアイコンを編集して Calendly リンクを追加できます。
• Carousel: ポップアップにカルーセル要素を追加できます。カルーセルは、製品、新製品の発売、オファーなどを宣伝する際に役立ちます。カルーセル要素には、テキスト、画像、スライドを移動するためのナビゲーションアイコンが含まれています。カルーセル内の各要素は、クリックしてカスタマイズできます。 アイコンをクリックすると、カルーセルの設定をカスタマイズできます。次のオプションを使用できます: 自動再生、スライド内の列数、列間のスペース、ナビゲーションアイコン、列要素からのナビゲーションアイコンの間隔など。個々の要素とは別に、カルーセル要素全体に色オプション、スタイル、エフェクトを追加することもできます。
• Tabs: このオプションを使用すると、ポップアップメッセージにタブを追加できます。次のものが用意されています。
  • 2 つのタブを持つタブ要素。
  • 最初のタブにアイコン、2 番目のタブにボタン。
  • アイコンをクリックすると、タブをカスタマイズできます。タブの向き、タブのスタイル、タブの間隔、タブのアクティブ化（ホバー時またはクリック時）などのオプションを使用できます。各タブへのアイコンの追加、タブ名の編集、タブの前後への移動もできます。個々の要素とは別に、カルーセル要素に色オプション、スタイル、エフェクトを追加することもできます。
• Accordion: このオプションを使用すると、ポップアップメッセージにアコーディオンを追加できます。デフォルトでは、2 つのアコーディオンが用意されています。 アイコンをクリックすると、アコーディオンをカスタマイズできます。次のオプションを使用できます: 折りたたみ可能、アコーディオンアイコン、間隔、サイズ。個々の要素とは別に、カルーセル要素に色オプション、スタイル、エフェクトを追加することもできます。
• Switcher: Switcher はタブに似ています。このオプションを使用すると、トグルと同様の方法で 2 つのタブを切り替えることができます。スイッチャー要素をカスタマイズするには、 アイコンをクリックします。スタイルの設定、オプション間のスペースの追加、アイコンの追加ができます。要素にテキスト、色、スタイル、エフェクトを追加することもできます。
• Table: このオプションを使用すると、ポップアップにテーブルを追加できます。テーブル要素は、テキスト要素とアイコン要素の組み合わせです。 アイコンをクリックすると、テーブルをカスタマイズできます。次のオプションを使用できます: ヘッドの表示、サイドバーの表示、テーブルの行数と列数の指定、テーブル幅の指定。テーブルの色オプション、スタイル、エフェクトを追加し、個々のテーブル要素をカスタマイズできます。
• Timeline: このオプションを使用すると、ポップアップにタイムラインを追加できます。タイムライン要素をカスタマイズするには、 アイコンをクリックします。向き、スタイル、タイトル、間隔の変更、アイコンの追加、ボタンの枠線の編集などができます。タイムライン内の個々の要素は、クリックしてカスタマイズすることもできます。デフォルトでは、タイムライン要素には 2 つのタブと 2 つのコールアウトがあります。各コールアウトには、アイコンとボタンが 1 つずつ含まれています。