ランディングページエディター

info

注意

最適なパフォーマンスのために、Google Chromeのランディングページエディタを使用することをお勧めします。

はじめに

希望のテンプレートを読み込んだ後、画面の左上隅にある AddElement_Icon.png アイコンをクリックすることで、ランディングページエディタにアクセスできます。

ランディングページエディターで利用可能なアクションは次のとおりです:

  • 要素を追加 : このオプションを使用すると、次の要素のいずれかを画面に追加できます。要素を追加するには、キャンバスにドラッグアンドドロップします。
    • カラム : この要素をドラッグアンドドロップしてカラムを追加します。
    • : この要素をドラッグアンドドロップして行を追加します。カラムと行の要素を使用してランディングページのレイアウトを作成し、その後に他の要素を追加できます。 2024-11-21_17-36-13 (1).gif
    • 基本 要素 : このセクションには次の要素が含まれています: テキスト、画像、ボタン、アイコン、スペーサー、地図、フォーム、ライン。詳細については、 基本 を参照してください。
    • メディア 要素 : このセクションには次の要素が含まれています: ギャラリー、ビデオ、オーディオ、およびプレイリスト。詳細については、 メディア を参照してください。
    • コンテンツ 要素 : このセクションには次の要素が含まれています: アイコンボックス、埋め込み、アラート、カウンター、カウントダウン、プログレス、Calendly、カルーセル、タブ、アコーディオン、スイッチャー、テーブル、およびタイムライン。詳細については、 コンテンツ を参照してください。
  • 検索要素 : 検索要素 検索ボックスは、名前を入力することで要素を検索するのに役立ちます。 2024-11-21_17-37-43 (1).gif
  • 要素を編集 : このオプションでは、要素追加パネルで必要な要素を選択できます。非表示にしたい要素をクリックすると、選択が解除されます(要素の左上隅に暗い円が表示されます)。デフォルトでは、すべての表示されている要素が選択されており、要素の左上隅にチェックマークが表示されています。たとえば、行要素が選択されている場合は、 SelectedElement.png のように表示され、選択されていない場合は、 DeselectedElement.png のように表示されます。 EditElement.gif

要素の一般的なスタイリングオプション

ランディングページエディタのほとんどの要素に利用可能なスタイリングオプションは次のとおりです。

タイポグラフィ リンク 設定 その他のオプション

要素にタイポグラフィオプションを追加するには、 landing pagePro_TypographyOptions.png アイコンをクリックします。ここで利用可能なオプションは次のとおりです:

  • 利用可能なオプションからフォントを選択して変更してください。
  • 新しいフォントを追加します。新しいフォントを追加するには:
    • + 新しいフォントを追加 をクリックし、Google Fontsからフォントを追加するか、 フォント タブにあるフォントの中から選択します。
  • テキストのスタイルをドロップダウンリストから選択できます: カスタム、段落、サブタイトル、タイトルの上、見出し 1、見出し 2、見出し 3、見出し 4、見出し 5、見出し 6、ボタン。
  • フォントサイズ、ウェイト、行間、文字間隔は タイポグラフィ セクションで選択できます。
  • パーソナライズを追加するには、 landing pagePro_Personalization.png アイコンをクリックして その他 を選択します。希望するパーソナライズ属性とフォールバックを選択してください。詳細については、 ランディングページのパーソナライズ を参照してください。

landing pagePro_TypographyOptions__1_.png

必需品

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

必須項目セクションには、以下の要素が含まれています:

  • テキスト : この要素を使用すると、メッセージにテキストを追加できます。画面上で直接テキストを編集でき、テキストブロック内をクリックすることでフォントやスタイリングオプションを追加できます。これにより、テキストブロックの下にエディターツールバーが開きます。 TextElement.png フォントファミリー、フォントサイズ、基本的なフォーマット、テキストの配置、番号付きおよび番号なしの箇条書き、フォントカラー、テキストの上部および下部にパディング(隙間)を追加し、HTMLでのテキストのスタイル(段落要素(

    タグ)や見出しなど)を選択し、リンクを追加し、スタイリングやエフェクトを選択できます。また、テキストをコピーしたり削除したりすることもできます。

  • 画像 : この要素を使用すると、ランディングページに画像を追加できます。画像要素を画面にドラッグ&ドロップし、それをクリックして編集オプションを取得します。画像エディタで次のことができます:
    • 画像をアップロードし、フィルター、タグ、マスクを追加します。
    • 画像の高さと幅を編集し、好みのアスペクト比を使用します。画像の高さと幅を指定するには、画像をクリックし、画像エディタツールバーでクリック Settings__2_.png . ポップアップで高さと幅(パーセンテージで)を指定します。画像を手動でリサイズすることもできます。
    • 画像に背景色、ボディカラー、ボーダーカラー、影を追加します。
    • 画像にリンクを追加します。このセクションには、次のオプションがあります:URL、ブロック、ファイル、アクション。
    • 画像の配置を変更します。
    • 画像を複製します。
    • 画像を削除します。
  • ボタン : この要素を使用すると、ランディングページにボタンを追加できます。ボタンのスタイルを変更したり、アクションを追加したりすることもできます。ボタンを画面にドラッグ&ドロップし、それをクリックして編集オプションを取得します。ボタンエディタでは、以下のことができます:
    • ボタン/アイコンのサイズ(幅と高さ)や配置、コーナーの形状(鋭いエッジ、曲線など)を変更します。スライダーをドラッグして、ボタンのコーナーの形状を決定します。
    • ボタン/アイコンにテキストを追加し、テキストのフォーマットやスタイルオプションを設定します。
    • ボタン/アイコンに背景色、ボディ色、境界線の色、影を追加します。
    • ボタンにリンクを追加します。このセクションには、次のオプションがあります: URL、ファイル、アクション。
    • ボタンの配置を変更します。
    • ボタンをコピーします。
    • ボタンを削除します。
  • アイコン : アイコン要素を使用すると、ランディングページにアイコンを追加できます。アイコンをスタイル設定したり、アクションを追加したりすることもできます。ボタンを画面にドラッグ&ドロップし、それをクリックして編集オプションを取得します。ボタンエディタには以下の機能があります:
    • アイコンの選択: ランディングページに表示するアイコンを選択できます。デフォルトのアイコンは星です DefaultIcon.png 。エディタツールバーの星アイコンをクリックすることで、使用するアイコンまたはアウトラインを選択できます。
    • カラー: エディタツールバーのカラーオプションをクリックすることで、アイコンの色を選択できます。
    • アイコンへのリンクの追加。このセクションには以下のオプションがあります: URL、ファイル、アクション。
    • スタイリングとエフェクト: ランディングページが表示されるときやユーザーがウェブサイトをスクロールするときにボタンに表示されるエフェクトを選択できます。
    • アイコンのコピー。
    • アイコンの削除。
  • スペーサー : スペーサー要素を使用すると、要素間にスペースを追加したり、通知に単にスペースを追加したりできます。
  • 地図 : 地図要素を使用すると、ランディングページに地図を追加できます。住所を追加したり、ズームレベルを決定したり、地図に色要素(背景色、境界線の色、影)を追加したり、地図の幅と高さを調整したり、効果やスタイルを追加したり、コピーしたり、削除したりできます。
  • フォーム : フォーム要素を使用すると、ユーザーからの入力を収集するためのフォームを追加できます。デフォルトのフォームには、次のオプションが含まれています:
    • メール
    • オプションセレクタ - オプション1、オプション2
    • ユーザーが追加の入力をタイプできるテキストボックス。
    • MoveIcon.png アイコンを使用して、これらの要素を自由に前後に移動できます。
    • 例えば、ユーザーにSMSメッセージを受信するためのオプトインを求めることができます。最初のフィールドは、ユーザーに対してブランドからのSMSメッセージを受信するためのサインアップの許可を求めるメッセージです。2番目のフィールドはサインアップ/興味なし、3番目のフィールドはユーザーの電話番号を取得するための入力フィールドです。
    • ユーザーの名前、メールID、または携帯番号を取得したい場合は、入力フィールドから属性をマッピングできます。
      2024-11-21_17-20-53 (1).gif
  • ライン : ライン要素は、ランディングページにラインを追加します。エディターツールバーで、ラインのスタイル、高さ、色、配置、幅、スタイリング、および効果を選択できます。また、ラインをコピーしたり削除したりすることもできます。

メディア

このセクションには、ユーザーに魅力的なランディングページを作成するために追加できるメディア要素が含まれています。以下の要素が含まれています:

ギャラリー : ランディングページにギャラリー要素を使用して画像をアップロードできます。画像をアップロードし、タグ、フィルター、マスクを追加できます。以下のオプションも利用可能です:

  • 画像のカラ―オプション: オーバーレイ、境界線、影を画像に追加できます ColorOption_Images.png 画像編集ツールバーのオプション。
  • 画像リンク:ユーザーが画像をクリックしたときに何が起こるかを指定するために、URLリンク、アクション、および外部CSSファイルオプションを追加できます。
  • 画像を移動: 画像を左または右に移動するには、画像編集ツールバーの MoveImage.png オプションをクリックしてください。
  • アイコンをコピーします。
  • 削除。

ビデオ : ビデオ要素を使用すると、ランディングページにビデオをアップロードできます。YouTubeビデオ、Vimeoビデオ、またはビデオのURLをアップロードできます。カバー画像とプレーヤーの設定を選択し、再生オプションを追加し、ビデオにフィルターを追加できます。カスタムビデオ(ローカルファイルのアップロード)はサポートされていません。

オーディオ : ランディングページにオーディオ要素を使用してオーディオをアップロードできます。ランディングページが表示されるときに再生されるオーディオ、オーディオの外観、オーディオのボタン、およびオーディオを自動再生するかどうかを選択できます。以下のオプションがあります:

  • カラオプション: オーバーレイ、ボーダー、シャドウをオーディオに追加できます。 ColorOption_Images.png オーディオエディターツールバーのオプション。
  • スタイリングとエフェクト:ランディングページが表示されるときに、オーディオにどのエフェクトを表示するかを選択できます。
  • アイコンをコピーします。
  • 削除。

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

  • 移動: あなたは、 MoveIcon.png アイコンを使用して、これらの要素を自由に前後に移動できます。
  • カラーオプション: オーディオにオーバーレイ、ボーダー、シャドウを追加できます。 ColorOption_Images.png オーディオエディタツールバーのオプション。
  • スタイリングとエフェクト:ランディングページが表示されるときに、オーディオにどのエフェクトを表示するかを選択できます。
  • アイコンをコピーします。
  • 削除

Content

このセクションには、いくつかの他の要素の組み合わせであるコンテンツ要素が含まれており、そのまま使用できます。ここで利用可能なオプションは次のとおりです:

  • アイコンボックス : アイコンボックスは、テキスト、ボタン、アイコンの組み合わせです。これらの要素のそれぞれは、クリックすることでカスタマイズできます。詳細については、上記の要素のカスタマイズに関するセクションを参照してください。 IconBox.png
  • 埋め込み : 埋め込み要素を使用すると、ランディングページにHTMLを埋め込むことができます。 EmbedIcon.png アイコンをクリックすることで、カスタムHTMLを貼り付けることができます。また、エディタツールバーを使用して、色のオプション、スタイリング、エフェクトを追加したり、要素を複製したり削除したりすることもできます。 Embed.png
  • アラート : アラート要素を使用すると、ポップアップにタイトルと説明テキストを追加できます。閉じるボタンを有効または無効にし、要素に色、配置、スタイルオプションを追加することができます。 Alert__1_.png
  • カウンター : カウンター要素を使用すると、ウェブページにカウンターを表示できます。たとえば、サイトが読み込まれるときにこのオプションを使用できます。 CounterIcon.png アイコンをクリックすると、カウンターのカスタマイズオプション - カウンタースタイル、開始および終了時間、カウンターの期間、プレフィックス、サフィックス、およびカウンターの演算子オプションを取得できます。また、要素の色、配置、スタイルをカスタマイズし、効果を追加することもできます。 Counter.png
  • カウントダウン : カウントダウン要素を使用すると、ウェブページにカウントダウンを表示できます。たとえば、このオプションをフラッシュセール、ライティングディール、または期限付きオファーに使用できます。 Countdown.png アイコンをクリックして、カウントダウンオプション - タイマースタイル、日付、時間、タイムゾーンの編集、および日、時間、分、秒を表示するかどうかを指定します。また、要素にテキスト、色のオプション、スタイリング、効果を追加し、配置を調整することもできます。 Countdown.gif
  • 進捗 : このオプションを使用すると、静的な進捗バーを追加できます。 ProgressIcon.png アイコンをクリックして、進捗バーのオプションを取得します。スタイル、塗りつぶし、およびタイトルとパーセンテージをここに表示するかどうかを指定できます。また、要素のテキスト、色のオプション、スタイリング、効果を追加し、それを整列させることもできます。 Progress.png
  • Calendly : Calendlyは、ユーザーが日付と時間を選択するのを助けるウィジェットを追加することができます。これを使用して、アポイントメントや会議を設定することができます。以下に示すように、リンクアイコンを編集することでCalendlyリンクを追加できます。 Calendly.gif
  • カルーセル : ポップアップにカルーセル要素を追加できます。これは、製品、ニューリリース、オファーなどを宣伝する際に便利です。カルーセル要素には、テキスト、画像、スライドを移動するためのナビゲーションアイコンがあります。クリックすることでカルーセル内の各要素をカスタマイズできます。 CarouselIcon.png アイコンをクリックしてカルーセル設定をカスタマイズします。利用可能なオプションは次のとおりです: 自動再生、スライド内の列数、列間の間隔、ナビゲーションアイコン、列要素からナビゲーションアイコンまでの間隔などです。また、個々の要素とは別に、カルーセル要素全体に色のオプションやスタイリング、効果を追加することもできます。 Carousel.gif
  • タブ : このオプションを使用してポップアップメッセージにタブを追加できます。利用可能なタブは以下の通りです:
    • 2つのタブを持つタブ要素。
    • 最初のタブにアイコン、2番目のタブにボタン。
    • TabIcon.png アイコンをクリックすることでタブをカスタマイズできます。タブの向き、タブスタイル、タブの間隔、タブのアクティベーション(ホバー時またはクリック時)などのオプションが利用可能です。また、各タブにアイコンを追加したり、タブ名を編集したり、タブを前後に移動したりすることもできます。個々の要素とは別に、カルーセル要素に色のオプション、スタイリング、エフェクトを追加することもできます。 Tab.gif
  • アコーディオン : このオプションを使用してポップアップメッセージにアコーディオンを追加できます。デフォルトでは、2つのアコーディオンが利用可能です。 AccordionIcon.png アイコンをクリックすることでアコーディオンをカスタマイズできます。利用可能なオプションは、折りたたみ可能、アコーディオンアイコン、間隔、サイズです。また、個々の要素に加えて、カルーセル要素に色のオプション、スタイリング、エフェクトを追加することもできます。 Accordion.gif
  • スイッチャー : スイッチャーはタブに似ています。このオプションを使用して、トグルのように2つのタブ間を切り替えることができます。スイッチャー要素をカスタマイズするには、 Switcher.png アイコンをクリックします。オプション間の間隔を追加したり、アイコンを追加したり、スタイルを設定できます。また、要素にテキスト、色、スタイル、効果を追加することもできます。 Switcher.gif
  • テーブル : このオプションを使用してポップアップにテーブルを追加できます。テーブル要素は、テキストとアイコン要素の組み合わせです。 TableIcon.png アイコンをクリックすることでテーブルをカスタマイズできます。以下のオプションが利用可能です: ヘッダーの表示、サイドバーの表示、テーブルの行数と列数の指定、テーブル幅の指定。テーブルの色オプション、スタイリング、および効果を追加し、個々のテーブル要素をカスタマイズできます。 Table.gif
  • タイムライン : このオプションを使用してポップアップにタイムラインを追加できます。タイムライン要素をカスタマイズするには、 TimelineIcon.png アイコンをクリックしてください。方向、スタイル、タイトル、スペーシングを変更したり、アイコンを追加したり、ボタンの境界を編集したりすることができます。また、タイムライン内の個々の要素をクリックすることでカスタマイズすることもできます。デフォルトでは、タイムライン要素には2つのタブと2つのコールアウトがあります。コールアウトには、それぞれアイコンとボタンが含まれています。 Timeline.gif

この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています

How can we improve this article?