Diviのブログ投稿にスクロールトリガーポップアップを追加する方法

スクロールトリガーポップアップをブログ投稿に追加することは、本当に賢いことのように思えます。 他のブログを読んでいるときに、以前にそれらを見たことがあるかもしれません。 ユーザーが投稿の特定のポイント（通常は最後）までスクロールすると、行動を促すメッセージを含むボックスが突然表示されます。 スクロールトリガーポップアップの全体的な目的は、訪問者にページ上で表示させたい正確な瞬間に、ターゲットを絞った行動の呼びかけを提示することです。 要するに、それはコンバージョンを後押ししたり、資格のあるリードを獲得したりするための素晴らしいツールです。 このため、多くの変換ブーストプラグイン（独自のBloomやOptin Monsterなど）を使用すると、これとまったく同じことができます。

このチュートリアルでは、プラグインを使用せずに、スクロールトリガーポップアップをDiviのブログ投稿に最初から追加する方法を示します。 これを行うために、Divi Theme Builderを使用して、カテゴリ別の関連する投稿を特徴とするポップアップと、電子メールオプチンを含むポップアップを設計します。 スクロールのトリガーは、jQueryの小さなスニペットを使用して実行されます。

始めましょう！

スニークピーク

これは、作成するスクロールトリガーポップアップの概要です。

以下に示すように、ポップアップで作成して、関連する投稿を（カテゴリ別に）表示します。

また、ここで見られるように、ポップアップに電子メールオプチンを追加する方法も示します。

Scroll Triggered PopupDivi投稿テンプレートを無料でダウンロード

このチュートリアルの投稿テンプレートを入手するには、まず下のボタンを使用して投稿テンプレートをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

ダウンロード

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

レイアウトをページにインポートするには、zipファイルを抽出し、テーマビルダーの移植性オプションを使用してjsonファイルの1つをDiviテーマビルダーに追加するだけです。

チュートリアルに行きましょう。

始めるために必要なもの

開始するには、Diviテーマをインストールしてアクティブ化する必要があります。 最新バージョンのDiviを使用していることを確認してください。

このチュートリアルでは、そのパックから作成済みの投稿テンプレートを使用するため、4番目のテーマビルダーパックをダウンロードする必要があります。

また、投稿テンプレートに結果を表示するには、テスト目的で作成されたブログ投稿が少なくともいくつか必要になります。

その後、あなたは行く準備ができています。

Diviブログ投稿の最後にスクロールトリガーポップアップを作成する

4番目のテーマビルダーパックからブログ投稿テンプレートをインポートする

WordPressダッシュボードから、Divi> ThemeBuilderに移動します。 テーマビルダー内で、ページの右上にある移植性アイコンを選択します。 移植性ポップアップで、[インポート]タブを選択し、theme-builder-pack-4-post-template.jsonファイルを選択して、[インポート]ボタンをクリックします。 （このインポートファイルは、Fourth Theme Builder Packフォルダー内にあります）

グローバルヘッダーとフッターを静的レイアウトとしてインポートするオプションを選択することもできます。

テンプレートをインポートしたら、アイコンをクリックしてカスタムボディ領域を編集します。

これにより、ボディテンプレートレイアウトエディタが表示され、スクロールでトリガーされるポップアップが追加されます。

カテゴリ別の関連記事を使用したスクロールトリガーポップアップのデザイン

ポップアップはDivi行に含まれます。 したがって、ポップアップ機能を配置したら、その行に任意のモジュールを入力して、必要なコンテンツを作成できます。 この最初の例では、関連する投稿をカテゴリ別に表示するポップアップを作成します。 そうすれば、訪問者が投稿の一番下までスクロールすると、関連する投稿がポップアップで提案されます。

これがその方法です。

1列の行を追加する

まず、投稿テンプレートレイアウトの投稿コンテンツモジュールを含む行のすぐ下に1列の行を追加します。

行設定

モジュールを追加する前に、次のように行設定を更新します。

• 背景色：#ffffff
• 側溝幅：1
• 幅：300px（デスクトップ）、200px（電話）
• パディング：上20px、下0px
• ボックスシャドウ：スクリーンショットを参照

テキストモジュールを追加

行設定をカスタマイズしたら、テキストモジュールを行に追加します。 これは、関連する投稿ポップアップのタイトル領域になります。

コンテンツ

本文の内容を「関連記事」というテキストで更新します。

設計

次に、次のように設計設定を更新します。

• テキストフォント：Heebo
• テキストフォントスタイル：TT
• テキストテキストの色：＃f94857
• テキストの配置：中央

ブログモジュールを追加する

テキストモジュールの下に、ブログモジュールを追加します。

コンテンツ

関連する投稿を1つだけ取り上げたいので、投稿数を1つに制限し、「現在のカテゴリ」を含めて、ポップアップに表示される投稿がテンプレートに表示される実際の投稿と同じカテゴリを共有するようにします。

以下を更新します。

• 投稿数：1
• 含まれるカテゴリー：現在のカテゴリー

要素

要素オプショングループの下で、注目の画像のみを表示するように選択していることを確認してください。 他のすべてを非表示にします。

設計

[デザイン]タブで、以下を更新します。

• タイトルフォント：Heebo
• タイトルフォントの太さ：超太字
• タイトルテキストサイズ：16px
• タイトルラインの高さ：1.4em
• パディング：上5％、左5％、右5％

高度な行設定

CSSクラス、カスタムCSS、およびZインデックス

[詳細設定]タブで、行にCSSクラスと小さなカスタムCSSを指定し、ポップアップがページ上の他のコンテンツの上に表示されるようにzインデックスを更新する必要があります。

この手順により、フロントエンドでビジュアルビルダーを使用するときに行が非表示になります。 したがって、これらのオプションを更新する前に、ワイヤーフレームビューを展開する方がよい場合があります。

ワイヤーフレームビューモードになったら、行設定を開いてバックアップし、次のCSSクラスを追加します。

• CSSクラス：ポスト行

次に、次のカスタムcssをメイン要素に追加します。

position: fixed;
bottom: 0%;
right: -300px;

そして、Zインデックスを更新します。

• Zインデックス：999

スクロールトリガーポイントとして分周器を追加する

この時点で、ポップアップを表示する準備が整いました。 次に、投稿テンプレートのどこにスクロールトリガーポイントを追加するかを決定する必要があります。これにより、ユーザーがこれらのポイントまでスクロールすると、ポップアップが表示または非表示になります。 スクロールトリガーポイントは、CSSクラスの要素によって決定されます。 スクロールトリガーポイントを投稿の下部に配置する必要があるため、CSSクラスの仕切りをスクロールトリガーポイント要素として使用できます。

スクロールトリガーポイント＃1を追加

最初のスクロールトリガーポイントを追加するには、投稿コンテンツモジュールのすぐ下に仕切りモジュールを追加しましょう。

次に、次のCSSクラスを追加します。

• CSSクラス：ポストウェイポイント

それは簡単でした。

スクロールトリガーポイント＃2を追加

次に、2番目のトリガーポイント（ポップアップをページのさらに下に非表示にするトリガーポイント）を追加するには、作成したばかりの仕切りモジュールをコピーします。

次に、ポップアップを閉じる（または非表示にする）投稿テンプレートのさらに下の場所に貼り付けます。 この例では、関連する投稿ブログモジュールのすぐ下、投稿テンプレートのコメントセクションのすぐ上に追加しています。

コードモジュールを使用してカスタムコードを追加する

このスクロールトリガーポップアップが機能するために残されているのは、小さなコードだけです。

先に進み、投稿テンプレートにコードモジュールを追加します。

次に、次のコードをコードボックスに貼り付けます。

<style>
  .post-row {
    transition: all .4s;
  }
  .post-row.show-post {
    right: 0px;
  }
</style>
<script>
  jQuery(document).ready(function($) {
    $('.post-waypoint').waypoint(function() {
        $('.post-row').toggleClass('show-post');
    }, {offset: '97%'});
  });
</script>

結果

結果を確認するには、ブログ投稿の1つにアクセスして、ページを下にスクロールします。 投稿コンテンツの最後に到達すると、関連する投稿ポップアップが表示されます。 スクロールし続けると、投稿の関連する投稿セクションの直後に非表示になります。

スクロールトリガーポップアップへのEメールオプチンの追加

関連する投稿のポップアップはかっこいいですが、代わりにメールのオプトインをポップアップしたい場合があります。 これは簡単です。 実際、このテンプレートの事前に作成されたフッターレイアウトで既に設計されている電子メールオプチンを使用することもできます。

Footer EmailOptinをDiviライブラリに保存

レイアウトを保存して、テーマビルダーに戻ります。 次に、クリックしてカスタムフッターテンプレートのレイアウトを編集します。

電子メールオプチンモジュールを見つけて、diviライブラリに保存します。

保存したEメールオプチンをポップアップ行に追加

次に、カスタムの本文テンプレートレイアウトに戻り、ポップアップとして使用しているのと同じ行に保存された電子メールオプトインを追加します。 その行内のすべてがポップアップコンテンツとして表示されることを忘れないでください。

テキストとブログモジュールを使用していないため、フロントエンドに表示されないようにすることができます。

メールオプチン設定

電子メールオプチンが配置され、他のモジュールが無効になったら、次のように電子メールオプチン設定を更新します。

• タイトル：「この記事が気に入りましたか？」
• 本文：「ニュースレターに参加してください！」

次に、次のパディングを追加します。

• パディング：下5％、右20px

結果

次に、ライブ投稿で結果を確認します。

最終的な考え

スクロールトリガーポップアップは、間違いなくブログにとって貴重な資産になる可能性があります。 それらは、適格なリードを活用する目立たない方法を提供します。 関連する投稿ポップアップを使用して、サイトへの関心を維持するか、メールオプチンを使用してリストを拡大します。 また、Diviを使用すると、考えられる他のほぼすべてのコンテンツを追加できます。 そして、訪問者にこれらのポップアップをいつ表示させるかを正確に決定できます。これは非常に強力です。 自分のブログや次のプロジェクトに役立つことを願っています。

以下のコメントであなたからの連絡を楽しみにしています。

乾杯！