未分類

Scroll Triggered Popups

商品コード: popup-maker-scroll-triggered-popups カテゴリー: 未分類

機能 / 特徴
使い方ガイド

Scroll Triggered Popupsは、Popup Maker プラグインで作成したポップアップ画面を、ページをスクロールした際に表示する機能を追加するアドオンです。

スクロールでポップアップを表示

Scroll Triggered Popups アドオンを追加すると、Popup Maker プラグインで作成したポップアップ画面が、ページ内の特定の場所に到達すると表示される設定を追加することができます。

クリック時や時間経過などPopup Maker プラグインで用意された既定のタイミングよりも、サイトの利用者に対して適切なタイミングでスムーズにポップアップ画面を表示することができるようになります。

ページの終端で表示

スクロール量が90％を超えたタイミングで関連記事を表示することで、他のページを表示する機会増え、滞在時間を伸ばす効果があります。

入力フォームのフローティング

FAQやトラブルシューティングのページの上下に、問い合わせフォームや連絡先を記載したポップアップを常に表示することで、問い合わせフォームのコンバージョン率を上げる効果があります。

表示トリガーにページのスクロール量や特定の要素を設定

Popup Makerで作成したポップアップ画面のトリガーに、ページを一定量スクロールした場合にポップアップ画面を表示させることができます。

スクロールの量も、ピクセルやパーセンテージなどページの構成に応じて単位を使い分けることができます。

また、スクロール量の他にもページ内の特定の要素が表示された条件でもポップアップ画面を表示させる設定をすることもできます。

Scroll Triggered Popups アドオンは、Popup Maker プラグインで作成したポップアップ画面を表示させるタイミングにページのスクロール量や、特定の場所に到達すると表示される設定を追加することができます。

Popup Maker プラグインで提供される、クリック時や時間経過などタイミングよりも、サイトの利用者がページで行う操作に対してスムーズにポップアップ画面を表示することができるようになります。

Scroll Triggered Popupsの使い方

一定量スクロールしたらポップアップを表示させる方法
特定の要素が画面上に表示されたらポップアップを表示させる方法
- ショートコード
- CSS セレクター

一定量スクロールしたらポップアップを表示させる方法

Scroll Triggered Popups アドオンを使って、ページのスクロール量に応じてポップアップ画面を表示するには、次の手順で行います。

管理画面の [Popup Maker] メニューの [ポップアップを作成する] をクリックします。
表示された [新しいポップアップを作成する] 画面で、[ポップアップの名前] に後で分かりやすい名前を入力します。
本文部分に、ポップアップ画面のコンテンツを追加します。
[ポップアップ設定] の左側の [トリガー] をクリックして表示された [新しいトリガーを追加する] ボタンをクリックします。
ポップアップした [どのタイプのトリガーを追加しますか？] 画面の一覧から [スクロール] を選択して [追加] ボタンをクリックします。
表示された [スクロールトリガー設定] 画面の [距離] を入力して [追加] ボタンをクリックします。（指定できる単位は、ピクセル [px] 、パーセンテージ [%]と相対的な文字サイズ [rem] の3種類から選択できます）
[ポップアップ設定] の左側の[表示] をクリックして表示されたプリセット表示の一覧から [トップバー] をクリックします。
[新しいポップアップを作成する] 画面の [公開] ボタンをクリックします。
投稿（または固定ページ）をプレビューして、ページをスクロールしていくとポップアップ画面がページの上部に表示されます。

特定の要素が画面上に表示されたらポップアップを表示させる方法

Scroll Triggered Popups アドオンで追加されるトリガーに、特定の要素が表示された条件を指定する方法があります。

ページのスクロール量とは違い、ページ内に配置されているボタンやアンカーなどのHTMLで構成されている要素のクラスやショートコードを貼り付けることで、ポップアップ画面を表示させることができます。

ショートコード

Scroll Triggered Popups アドインで自動的に生成された [ショートコード] を使って、ページ内の要素を特定するには次の手順で行います。

ポップアップ画面の編集時に [どのタイプのトリガーを追加しますか？] 画面の一覧から [スクロール] を選択して [追加] ボタンをクリックします。
[スクロールトリガー設定] 画面の [どのタイプのスクロールトリガーを使用しますか？] で [要素] を選択します。
表示された [どのタイプの要素をトリガーポイントとして使用しますか？] で [ショートコード] を選択して [以下のショートコードを使用してください] に記載されているコードをコピーします。
[ポップアップ設定] の左側の[表示] をクリックして表示されたプリセット表示の一覧から [トップバー] をクリックします。
[新しいポップアップを作成する] 画面の [公開] ボタンをクリックします。
表示する投稿（または固定ページ）の編集画面を開きます。
ページ内の適当な段落ブロックを追加してコピーしておいた [ショートコード] を貼り付けます。
投稿（または固定ページ）をプレビューして、ページをスクロールしてショートコードを貼り付けた段落が表示されるとポップアップ画面がページの上部に表示されます。

CSS セレクター

ショートコードをページに埋め込む代わりに、ページ内のクラス名を指定してポップアップを表示することができます。

ポップアップ画面を表示するページの編集画面で、ブロックを選択して [ブロック] 画面の [高度な設定] > [追加 CSS クラス] に適当なクラス名を追加します。（下の画像では “scroll-trigger” を指定）
ポップアップ画面の作成時に [どのタイプのトリガーを追加しますか？] 画面の一覧から [スクロール] を選択して [追加] ボタンをクリックします。
[スクロールトリガー設定] 画面の [どのタイプのスクロールトリガーを使用しますか？] で [要素] を選択します。
表示された [どのタイプの要素をトリガーポイントとして使用しますか？] で [CSSセレクター] を選択して [トリガー要素セレクター] に [追加 CSS クラス] 追加した名前の先頭にドットを付け加えて入力します。（クラス名が”scroll-trigger”の場合は”.scroll-trigger”を入力します）
[ポップアップ設定] の左側の[表示] をクリックして表示されたプリセット表示の一覧から [トップバー] をクリックします。
[新しいポップアップを作成する] 画面の [公開] ボタンをクリックします。
投稿（または固定ページ）をプレビューして、ページをスクロールしてCSSクラスを追加した段落が表示されるとポップアップ画面がページの上部に表示されます。