訪問者のメールアドレスからウェブサイトのアドレスまで、PageSenseのポップアップテンプレートエディタを使用して、顧客にアプローチし、ビジネスのコンバージョンを向上させるために必要な情報をすべて収集することができます。 簡単に使用できるドラッグアンドドロップエディタを使用すると、テキスト、画像、ビデオ、入力ボックス、ソーシャルメディア、ラジオボタンなどのカスタム要素をポップアップボックスにHTMLやCSSの知識なしで挿入できます。さらに、ポップアップテンプレートエディタを使用して各要素のスタイルとフォーマットをカスタマイズすることもできます。背景色、影の効果、ボーダースタイルなど、左側のパネルで利用可能な多機能設定を使用して要素の外観をスタイル付けすることができます。  

この記事では、PageSenseのテンプレートエディタを使用して、ポップアップにさまざまなタイプの要素を追加およびカスタマイズする方法について学びます。

ポップアップに新しい要素を挿入するには：

グリッドを挿入する

グリッドは、行と列のコンテナのセットで構成され、ポップアップの初期構造を作成するために使用されます。必要なコンテンツ要素を追加することもできます。コンテンツを最適な場所に整理して配置することができます。グリッド構造を選択するたびに、テンプレートエディタは自動的に1つ以上の空の列と行をポップアップスポットに配置します。

グリッドを挿入するには：
1. 左のペインからグリッド要素をドラッグアンドドロップし、オブジェクトを挿入するコンテナを表示するためにポップアップ上にカーソルを合わせます。. 

2. 必要に合わせたグリッドスタイルを選択し、ポップアップに追加する行数と列数を入力してください。 

3. 該当するコンテナ内に、テキスト、画像、ビデオなどのコンテンツ要素を挿入します。そして、左側のパネルで利用可能なさまざまな書式設定オプションを使用して、要素の外観をカスタマイズします。

テキストの挿入

ポップアップ内のテキストは、できるだけ短く保つようにしてください。テキストが多すぎると、モバイルデバイスでのナビゲーションが困難になる可能性があります。また、お客様がメッセージを読むのを避ける原因にもなります。大きなインパクトを与えるために、見出しは1文に、本文は2〜3文に制限してください。  

1. 左のペインから「TEXT」要素をドラッグしてポップアップの場所にドロップします。

2. ポップアップのテキストボックスに必要なテキストを入力してください。

3. エディタウィンドウに表示されるさまざまなテキスト書式設定オプションを使用して、テキストのフォントスタイル、フォントサイズ、フォントの太字、斜体、下線、テキストの配置（左、右、中央）、文字間隔など、必要な変更を行うことができます。リンクアイコンをクリックして、テキストにリンクを追加することもできます。

さらに、左ペインからテキストボックスの外観を以下のようにカスタマイズすることができます：

• 左側のパネルのBACKGROUNDセクションで、テキストボックス内に埋めたい背景色または画像を選択してください。
  注意:ポップアップから背景色または画像を削除する場合は、 透明 を選択してください。

• 左側のペインのテキストシャドウセクションで、テキストの影の色をカラーピッカーから選択します。また、スライダーを使用して、テキストの垂直および水平位置、ぼかしの具合など、そのプロパティをカスタマイズすることもできます。スクリーンショットに示されているように。
  
  
  

• ［パディング］セクションでは、上、右、下、左のパディングスライダーを使用して、テキストボックスの枠線とテキストの間のスペースを増減させることができます。 また、希望の値（ピクセル単位）を手動で入力し、Enterキーを押すこともできます。
  
  
  

• ［余白］セクションでは、［上］、［右］、［下］、［左］を含む余白スライダーを使用して、テキストボックスの周囲全体または特定の側面に適した余白を調整および追加します。希望の値（ピクセル単位）を手動で入力し、［Enter］キーを押すこともできます。
  
  
  

• ［ボーダーとシャドウ］セクションでは、［ボーダースタイル］ドロップダウンをクリックして、ドット、ダッシュ、またはダブルなど、適用するボーダーラインのタイプを選択します。
  スクリーンショットに示されているように、［ボーダーカラー］、［ボーダーサイズ］、および［ボーダーラジウス］オプションを使用して、ボーダーのプロパティをカスタマイズすることができます。
  
  
  

• テキストボックスの影の色を、カラーピッカーから選択してください。その後、位置やぼかしのようなプロパティをカスタマイズできます。カスタマイズは、ボーダーとシャドウセクションから行います。 スクリーンショットに示されているように。
  

  
  
  

入力ボックスを挿入する 

訪問者からの入力や情報を収集したい場合は、入力ボックスを使用します。これらはポップアップ上の対話型フィールドのような役割を果たし、訪問者が入力するカスタムレスポンスを通じて顧客の多様なニーズを理解することができます。この情報は、将来のプロモーションやウェブサイト上のオファーを最適化するために活用することができます。年齢、名前、国、または興味のある分野など、ユーザーに質問をすることができます。

入力ボックスを挿入するには：

1. 左のペインから「INPUT BOX」要素をドラッグして、ポップアップの場所にドロップしてください。入力ボックスを追加したい場所です。

2. 左ペインのプレースホルダーフィールドに、入力ボックスに訪問者が入力する必要のあるテキストを入力します。

3. 左ペインで利用可能なさまざまな書式設定オプションを使用して、入力ボックスのプロパティをカスタマイズできます。ポップアップ内の要素に適用できる異なる書式設定オプションについて詳しく学ぶことができます。  

ボタンを挿入する 

ポップアップ内のボタンを使用することは、訪問者をウェブサイトの異なるページに接続する最良の方法です。これにより、ウェブページ全体のエンゲージメント率をさらに向上させることができます。PageSenseでは、ポップアップにCTA（Call to Action）を簡単に追加し、訪問者がそれをクリックした際のボタンの動作方法をカスタマイズすることができます。これには、訪問者を別のウェブページにリダイレクトさせる、別のポップアップ画面にジャンプさせる、または単にポップアップウィンドウを閉じるなどが含まれます。さらに、テンプレートエディタでは、ポップアップ内のボタンクリックの成功と失敗の両方を変換と拒否の観点から追跡することができ、ポップアップのパフォーマンスが十分に良いか、さらなる変更や改善が必要かを把握するのに役立ちます。

ボタンを挿入するには：
1. 左のペインからBUTTON要素をドラッグして、新しいボタンを追加したいポップアップの場所にドロップし、ボタンの名前を編集します。


2. 左のペインのクリックアクションドロップダウンで、このボタンをクリックしたときに何が起こるかを選択します。以下のいずれかを選択できます：

1. 選択リダイレクト は、訪問者を新しいウェブページのURLにリダイレクトします。左ペインのプレースホルダー フィールドに、このボタンをクリックした時に開きたいウェブページのURLリンクを入力してください。
   
   例えば、ECサイトを運営している場合、このリダイレクトオプションを使用して、新しく発売された商品のオファーをプロモーションするウェブページに顧客を誘導したり、注文確認後にカスタマーサティスファクションフォームを開いたりすることができます。
   
   
   
2. クエリパラメータを含めてウェブページに訪れる訪問者をリダイレクトするために、Redirect with query paramsをオンにします（オプション）。URL内のクエリパラメータ文字列を表示することで、ボタン名やID、ポップアップキャンペーン名、メインのランディングページなどが、サイト上でどのポップアップボタンやページがより多くのヒットを受けているか、どのランディングページが実際にトラフィックをリダイレクションページに送っているかを把握することができます。
   
   
   
3. 新しいタブでリダイレクトリンクを開くために、新しいタブでリンクを開くをオンにしてください（任意）。
   
   
   
4. 次の画面、感謝の画面、またはキャンペーン内の特定の画面に訪問者を移動させるために、画面にジャンプを選択します。このオプションは、訪問者が以前の応答に基づいてポップアップ内の正しいシーケンスに移動することを希望する場合に使用できます。
   
   たとえば、画面にジャンプを使用して、ポップアップ内の以前の画面で「クーポンコードを取得」や「特別なショッピング割引を受ける」といったアクション可能なCTAをクリックした顧客に、クーポンコードや追加のショッピング割引を表示することができます。
   
   
   
5. ポップアップウィンドウをリダイレクトせずに閉じるには、閉じるを選択してください。
   

1. 変換：このオプションを選択してくださいマークポップアップ内のボタンクリックをコンバージョンとして扱います。
   
   たとえば、キャンペーンの目的がニュースレターの購読を記録し、送信した訪問者を追跡することである場合、ポップアップブログ内に配置されている場合、それをマークすることができます。e 'はい、ニュースレターを購読した訪問者数をカウントするために、「購読する」ボタンをクリックしてください。ポップアップ。
   
   
   
2. 拒否： このオプションを選択してくださいにマークポップアップ内のボタンクリックが拒否として扱われます。訪問者がポップアップメッセージを拒否する理由の一部は、次のようなものがあります。彼らはあなたが提供するものに興味がないか、あなたのメッセージが関係ないと感じているか、またはあなたの質問に答えたくないのかもしれません。その瞬間。 
   
   ブログ内にニュースレターの購読フォームが配置されているとしましょう。、そして2つのCTAがあります 'はい、購読する と いいえ、Ｔ「ありがとう」ボタン。この場合、ポップアップの「いいえ、結構です」ボタンのクリックを拒否としてマークすることができます。
   
   
   
   
3. なし： このオプションを選択すると、ボタンクリックを変換または拒否としてマークすることなく、訪問者が単に別のポップアップ画面に移動するか、サイト上の他のページに移動するために使用できます。 
   

画像の挿入 

画像を挿入するには：
1. 左のペインから［画像］要素をドラッグアンドドロップして、画像を追加したい場所に配置します。

2. アップロードアイコンをクリックして、ローカルコンピュータに保存された画像を選択します。

3. 左ペインから以下のオプションをカスタマイズできます: 

1. 画像のサイズを変更するには、サイズスライダーを使用します。
   

2. 画像のスクイーズとストレッチを調整するには、画像のフィットドロップダウンをクリックします。
   

3. プレースホルダー内で複数の画像を互いに整列させるために、左、右、中央、または両端揃えなどの配置オプションを選択します。
   

4. 左側のペインから、画像のマージン、パディング、ボーダー、シャドウの設定を編集します。. 
   

   
   

注意： 画像を削除または置き換えるには、左ペインの 削除アイコンをクリックしてください。

ビデオの挿入

動画は世界中で最も人気のあるコンテンツマーケティングの形態です。ポップアップに動画を含めることで、驚くべき効果を発揮することができます。それらは、メッセージを視覚的に表現し、ウェブサイトの訪問者のエンゲージメント時間を向上させるのに役立ちます。PageSenseのテンプレートエディタを使用すると、YouTubeの動画を簡単に埋め込むことができます (ローカルの動画は直接アップロードできません)。また、ポップアップウィンドウ上で動画のプレビューを表示することもできます。ボーダーやシャドウ効果の追加、マージン位置の調整、動画の自動再生の設定など、動画をカスタマイズすることも可能です。

ビデオを挿入してカスタマイズするには：
1. 左のペインからビデオ要素をドラッグしてポップアップの場所にドロップします。

2. 左ペインの ビデオURLボックスに、ポップアップに挿入したいビデオのURLを入力します。

1. ビジターがポップアップにアクセスした瞬間に自動的に動画が再生されるようにするには、自動再生ボタンを有効にします。
   

2. 動画をポップアップ内のプレースホルダーと他の要素に合わせて配置するために、左揃え、右揃え、中央揃え、または両端揃えのオプションをクリックします。 
   

3. ポップアップ内の動画ボックスのサイズを拡大または縮小するために、サイズスライダーを使用します。さらに、左側のパネルから動画の margin や border、shadow の設定を編集できます。
   
   

テキストエリアの挿入

テキストエリアは、訪問者がポップアップに短い文章を追加できる入力ボックスです。詳細な情報を訪問者から取得したい場合には、この要素が最適です。テンプレートエディタを使用して、テキストエリアの見た目を向上させることができます。背景色や影の効果、角丸などを適用することができます。例えば、週末の予定は何ですか？やお好きな旅行先はどこですか？などの質問をすることができます。また、製品やサービスの改善方法についてもお聞かせください。

テキストエリアを挿入してカスタマイズするには：

1. 左のペインからテキストエリア要素をドラッグしてポップアップの位置にドロップします。

2. プレースホルダー フィールド（左ペイン）に、テキストエリアに訪問者が入力する必要のあるテキストを入力してください。

3. 左側のパネルで利用可能なさまざまな書式設定オプションを使用して、テキストエリアボックスのプロパティをカスタマイズできます。 ポップアップ内の要素に適用できる さまざまな書式設定オプションについて詳しく学びましょう。

ラジオボタンの挿入

ポップアップにラジオボタンを追加すると、訪問者は表示されるリストから1つのオプションを選択できます。これはフォームやアンケートでよく使用されます。 テンプレートエディタを使用すると、ラジオボックスのオプションを簡単に追加、編集、整理できます。さらに、背景色、影の効果、その他のカスタマイズオプションを適用することで、訪問者の注意をウェブサイトに引きつけることができます。  

ラジオボタンを挿入してカスタマイズするには：
1. 左のペインからRADIO要素をドラッグ＆ドロップして、ラジオボタンを挿入したいポップアップ位置に配置します。

2.  フィールド設定（左ペインにある）で、ポップアップに表示する質問と回答を入力してください。 ラジオボックスに新しいオプションを追加するには、新しいオプションを追加をクリックしてください。

3. 以下のいずれかを実行します：

1. 表示セクションでは、ラジオボックスのオプションとボタンに色を追加することができます。また、ラジオボタンのスタイルも選択できます。スクリーンショットに示されているように。
   
   

2. ［フォント］セクションでは、ラジオボックスのコンテンツに適用するフォントの種類と色を選択します。
   

   さらに、ラジオボタンにはマージン、ボーダー、シャドウなどの異なる書式設定オプションを適用することができます。これらは左側のパネルから設定できます。ポップアップの要素に適用できる異なる書式設定オプションについて詳しくはこちら。
   
   
   

   
   

チェックボックスの挿入 

チェックボックスを挿入してカスタマイズするには：
1. 左のペインからチェックボックス要素をドラッグ&ドロップして、チェックボックスを挿入する場所をポップアップに指定します。

2. 左ペインのフィールド設定（）に、ポップアップに表示する質問と回答を入力します。 チェックボックスに新しいオプションを追加するには、新しいオプションを追加をクリックします。

3. 以下のいずれかを実行します：

• 表示セクションでは、オプションのリストやチェックボックスのボタンに色を追加することができます。また、ここからチェックボックスのボタンにスタイルを適用することもできます。
  

• フォントセクションでは、チェックボックスフィールドに適用するフォントの種類と色を選択します。
  

  さらに、チェックボックスにはさまざまな書式設定オプションを適用することができます。例えば、マージン、ボーダー、シャドウなど、左ペインから選択できます。詳細は、ポップアップテンプレートエディタを使用して要素をカスタマイズする方法について詳しく学びましょう。
  

ソーシャルメディアアイコンの挿入

ソーシャルメディアのアイコンは、現代のマーケティング世界で非常に強力な存在です。ウェブサイトの可視性を高めるために、Facebook、Twitter、Instagramなどのソーシャルメディアアイコンをポップアップに追加することで、訪問者が簡単にコンテンツを共有し、フォローすることができます。これにより、ウェブサイトのリーチがグローバルに広がり、訪問者がページを「いいね！」する機会が生まれます。

ソーシャルメディアアイコンを挿入してカスタマイズするには：
1. 左のペインからSOCIAL要素をドラッグアンドドロップして、ソーシャルメディアアイコンを挿入したいポップアップの場所に配置します。

1. ［スタイル］セクションで、テキストに適用するフォントの種類と色を選択します。 
   

2. また、ソーシャルメディアアイコンの高さ、アイコンの種類（円形または四角形）、およびスタイル（カラー、白黒、ビンテージ）を選択できます。スクリーンショットで示されています。
   
   

さらに、ソーシャルメディアアイコンには異なる書式設定オプションを適用することができます。例えば、マージン、ボーダー、シャドウなど、左ペインからさまざまな設定を選択できます。詳細は ポップアップの要素に適用できるさまざまな書式設定オプションについて詳しく学びましょう。