ポップアップ要素

ポップアップ要素について

ポップアップとは、訪問者がウェブサイトを閲覧している際に表示されるウィンドウです。その主な目的は、より多くのリードを獲得し、広告目標を効果的に達成することです。

ノーザンダイバー社の GemPagesダッシュボード編集するテンプレートを開きます。 エディターの左側のサイドバーにある コンバージョンブースター セクション。要素をページ上の任意の位置にドラッグ アンド ドロップします。

使用するには ポップアップ要素:

ステップ1： ノーザンダイバー社の GemPagesダッシュボード、対象のページを見つけてエディターを開きます。

ステップ2： その ポップアップ 要素は左側のサイドバーの コンバージョンブースター のセクションから無料でダウンロードできます。

ステップ3： ドラッグアンドドロップ ポップアップ 要素をページ上の任意の位置に配置できます。

ポップアップが最小化されると、エディターの右側に小さなラベルが表示されます。このラベルをクリックすると、いつでもポップアップを再度開いて編集できます。

ポップアップ コンテンツを編集するには、エディターの右側にあるポップアップ ラベルをクリックするだけです。

ポップアップがエディターに再表示され、内部の要素 (テキスト、画像、ボタンなど) を直接選択して編集できるようになります。

設定タブを構成する

ポップアップ名

名前: ポップアップ要素の希望する名前を入力します。

ボタンを閉じる

• アイコン: 閉じるボタンのアイコン（例：「X」または「X 太字」）を選択します。
• アイコンサイズ: アイコンのサイズを調整します。
• アイコンの色: アイコンの色を選択します (例: 白、#FFFFFF)。
• 幅高さ: ボタンのサイズを設定します。
  
• 経歴: 閉じるボタンの背景色を選択します。
• 役職: 閉じるボタンをポップアップの内側に表示するか外側に表示するかを選択します。

オーバーレイ

オーバーレイは、ポップアップが表示されると背景ページのコンテンツを暗くすることで、ポップアップ自体に注目を集めるのに役立ちます。有効にすると、オーバーレイの色と透明度をカスタマイズできます。

• 色圏: オーバーレイ カラーのパレットから色を選択します。
• 不透明度: セクション全体の不透明度を調整します。数値が低いほど、透明度が高くなります。
• 閉じます: このスイッチを切り替えると、ユーザーはオーバーレイの背景をクリックしてポップアップを閉じることができます。 

サイズ

• フルスクリーン: ポップアップを全画面に表示するかどうかを選択します (はい/いいえ)。
• 幅（Width）: ポップアップの幅を設定します (例: 600px)。
• 高さ: ポップアップの高さを調整します (自動または特定の値)。
• パディング: ポップアップ要素内のパディングを定義します (例: 全周 32 ピクセル)。

経歴

• 色圏: ポップアップの背景色を選択します (例: #FFFFFF)。

• 画像: 背景画像も追加できます。

形状

• ボーダー: 境界線の種類 (実線、破線など) を設定します。
• コーナー半径: 角の丸みを調整します (例: 丸い角の場合は 16px)。
• Shadow: ポップアップの影の効果を有効または無効にすることができます。

役職

画像の位置を、左上、中央上、右上、中央左、中央中央、中央右、左下、中央下、右下の 9 つの位置に調整します。

表示条件

ポップアップがいつトリガーされるかを設定します。

いつ表示するか： ドロップダウン メニューから 5 つのオプションのいずれかを選択して、ポップアップが表示される正確な時間を設定します。

• なし: ライブページにはポップアップは表示されません。
• ページが読み込まれた後ポップアップはページ読み込み時に表示されます。
• 部分的にスクロール: ユーザーがページの特定の割合までスクロールすると、ポップアップがトリガーされます。
• 終了間近: ユーザーがページを離れようとしたときにポップアップが表示されます。

ディレイ： この設定は、「ページ読み込み後」を選択すると表示されます。

このオプションを使用して、ページ読み込み後、ポップアップを表示するまでの待機時間を秒単位で設定します。

• 遅延時間を秒単位で入力してください。
• 最大遅延時間：100秒

スクロール： この設定は、「部分的にスクロール」を選択した場合に表示されます。

このオプションを使用して、ポップアップが表示されるまでにユーザーがページをどれだけスクロールする必要があるかを設定します。

• スクロール率を入力してください（例：50%は、ユーザーがページの半分までスクロールした後にポップアップが表示されることを意味します）。

モバイルの場合： この設定は、「バージョン情報」を選択して終了する際に表示されます。

モバイル端末でのポップアップの表示方法を選択してください。

対応周波数： この設定は、ポップアップが表示される頻度を制御します。

利用可能なオプション：

• ユーザーごとに1回のみ：ポップアップは各ユーザーにつき1回のみ表示されます。
• 訪問時：ポップアップは、ユーザーがページにアクセスするたびに表示されます。
• 一定期間後：指定された日数が経過すると、ポップアップが再び表示されます。

「一定期間後」を選択すると、同じユーザーにポップアップが再度表示されるまでの日数を入力できる追加設定が表示されます。

効果

この要素には、選択できる 7 つの入場効果があります。

• フェード
• Zoom
• ズームアウトする
• 水平移動
• 垂直移動
• 3D展開
• なし: 入場効果はありません。

詳細タブを設定する

より高度なカスタマイズについては、 詳細設定タブ の指示に従います。 この記事.

さらに役立つヒントやビデオチュートリアルもご覧いただけます。 ジェムページアカデミー.

ベストプラクティス: リンク付きのポップアップを表示する

GemPagesでは、ハイパーリンクテキストを介してポップアップをトリガーできます。つまり、ポップアップIDを取得し、選択したテキストにハイパーリンクを設定することができます。

• トリガーされたときに開きたいポップアップを選択し、右クリックします。
• まず クラスをコピー ポップアップ ID をコピーします。
• ポップアップ ウィンドウを閉じて、リンクに変換するテキストを強調表示します。
• ハイパーリンクボタンをクリックしてコピーしたリンクを貼り付けます。
• IDの先頭のドットを削除して#に置き換え、 このURLへのリンク.

ポップアップにフォームを追加する方法

ポップアップにフォームを埋め込むには、 お問合せフォーム Popup要素内の要素。

ステップ1： エディター右側のポップアップラベルをクリックして、ポップアップを開きます。

ステップ2： 次に、左側のサイドバーからドラッグアンドドロップします。 お問合せフォーム 要素をポップアップ領域に挿入します。

追加後は、必要に応じてフォームの項目や設定をカスタマイズできます。

最後に、クリック Save and パブリッシュ 変更を適用します。

ポップアップ要素に関するよくある質問

1. テーマ セクションでポップアップ要素が機能しないのはなぜですか?

現在、ポップアップ要素は テーマセクションではサポートされていませんつまり、ポップアップを含むテーマ セクションを作成しても、ライブ ページでは正しく表示または機能しません。

この場合、 各ページにポップアップ要素を直接追加します を代わりにお使いください。

2. ポップアップを最小化した後、そのコンテンツを編集するにはどうすればよいですか?

最小化すると、エディターの右側にポップアップラベルが表示されます。そのラベルをクリックするだけでポップアップが再表示され、コンテンツを編集できるようになります。

3. ポップアップはライブ ページにいつ表示されますか?

ポップアップの表示タイミングは選択した 表示する 条件下 表示条件:

• ページが読み込まれた後
• 部分的にスクロール
• 終了間近
• なし （ポップアップは表示されません）

4. リンクまたはボタンを使用してポップアップを開くにはどうすればよいでしょうか?

ポップアップのハイパーリンクテキストやボタンをコピーすることで、ポップアップをトリガーすることができます。 ID （「クラスのコピー」経由）をコピーし、URL に「#」プレフィックスを付けてリンクします。

5. ポップアップにはどのような効果を適用できますか?

ポップアップ要素には以下が含まれます 7つの入場効果: フェード、ズーム、ズームアウト、水平移動、垂直移動、3D 展開、なし。

6. エディターにポップアップを追加したのですが、見つかりません。どこにありますか？

ポップアップを最小化すると、キャンバス上に表示されなくなります。代わりに、エディターの右側に小さなポップアップラベルが表示されます。そのラベルをクリックするとポップアップが再び開き、編集を続行できます。

7. ポップアップ ID はどこで確認できますか?

エディタでポップアップを選択し、右クリックして、 コピー > クラスのコピーコピーされた値はポップアップ ID であり、リンク経由でポップアップをトリガーするために使用できます。

8. ポップアップ要素を複数のページでグローバルに使用するために保存できますか?

現在、GemPagesはグローバルな再利用のみをサポートしています。 テーマセクション この機能はセクションのみに適用され、個々の要素には適用されません。複数のページで同じポップアップを使用する場合は、ポップアップ要素をコピーして貼り付けることができます。

詳しい手順については、 要素のコピーと貼り付け.

9. ポップアップを削除するにはどうすればよいですか？

エディターの右側に小さなポップアップラベルが表示されます。そのラベルをクリックしてポップアップを再度開き、ゴミ箱アイコンをクリックして削除してください。