注目を集めるDiviでスティッキーメールオプチンを作成する方法
公開: 2020-09-30Diviのスティッキー位置オプションを使用すると、ページ上の任意の要素をスティッキーにすることができます。 これにより、ユーザーがページを下にスクロールするときに一定の間隔でページ上の要素を修正して、要素が長く表示されたままになるようにすることができます。 そして、そこにいるあなたのブロガーにとって、その重要なフォームを最前線に保つために、微妙でありながら効果的な投稿テンプレートに粘着性のある電子メールオプトインを追加することは非常に理にかなっています。
このチュートリアルでは、より多くの注目を集め、できればより多くのリードを獲得する、スティッキーな電子メールオプトインをDiviブログ投稿テンプレートに追加する方法を紹介します。 スティッキーメールのオプトインにポップアップホバー効果を追加する方法も紹介します。
始めましょう！
スニークピーク
これは、このチュートリアルで構築するデザインの概要です。
Sticky Email OptinPostテンプレートを無料でダウンロード
このチュートリアルのデザインを手に入れるには、まず下のボタンを使用してデザインをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
スティッキーメールオプチンを使用して投稿テンプレートをサイトにアップロードする方法
テンプレートをアップロードするには、WordPressWebサイトのバックエンドにあるDiviThemeBuilderに移動します。
次に、右上隅に2つの矢印の付いたアイコンが表示されます。 アイコンをクリックします。
[インポート]タブに移動し、この投稿でダウンロードできたJSONファイルをアップロードして、[Diviテーマビルダーテンプレートのインポート]をクリックします。
ファイルをアップロードすると、すべての投稿に割り当てられた新しい本文領域を持つ新しいテンプレートが表示されます。 テンプレートをアクティブ化したらすぐに、Diviテーマビルダーの変更を保存します。
チュートリアルに取り掛かりましょう。
パート1：作成済みのブログ投稿テンプレートをインポートする
このチュートリアルでは、このブログ投稿からダウンロードできるDiviのビジネスコンサルタントレイアウトパックのブログ投稿テンプレートを使用します。
zipファイルをダウンロードしたら、解凍してDiviテーマビルダーにインポートする必要があります。
方法は次のとおりです…
- Divi> ThemeBuilderに移動します。
- 右上の移植性アイコンをクリックします。
- 移植性ポップアップでインポートタブを選択します。
- ダウンロードしたファイルからjsonファイルを選択します。
- [インポート]ボタンをクリックします。
パート2：スティッキーメールオプチンをテンプレートに追加する
JSONファイルがインポートされたら、編集アイコンをクリックしてカスタムボディテンプレートのレイアウトを編集します。
投稿テンプレートレイアウトの下部に、スティッキーメールオプトインに使用するメールオプトインフォームのセクションがあります。
この例では、ユーザーがスティッキーメールオプトインのあるセクションにスクロールするまでメールオプトインが表示されないように、セクションへのメールオプトインのスティッキー位置が必要です。 ただし、メールオプトインは独自のセクションにあるため、メールオプトインには移動するのに十分なスペースがありません。 したがって、コメントセクションを含む上記のセクションに移動して、メールオプトインが元の場所で停止する前にそのセクションにカーソルを合わせる必要があります。
上記のセクションに新しい行を追加
これを行うには、コメントモジュールを含む行のすぐ下に新しい1列の行を作成します。
行のスタイリングを追加
次に、新しい行の設定を開き、次のように背景色を追加します。
- 背景色：＃282828
[デザイン]タブで、次の行のサイズと間隔を更新します。
- 幅：100％
- 最大幅：100％
- マージン：15vwトップ
- パディング：0px上、0px下
メールオプトインを新しい行に移動
行のスタイルを設定したら、下部のセクションにあるメールオプトインを作成したばかりの新しい行に移動します。
下部のセクションを削除します（もう必要ありません）。
スティッキーポジションでメールオプトインを更新
次に、新しい行内でメールオプトインの設定を開き、スティック位置オプションを次のように更新します。
- スティッキーポジション：ボトムに固執
- スティッキーの上限：セクション
これにより、セクションをスクロールしたときに、親行で停止する前に、電子メールオプトインがブラウザウィンドウの下部に留まります。
メールオプトインスタイリングの更新
[デザイン]タブで、メールオプトインのレイアウトを次のように更新します。
- レイアウト：本体を上に、フォームを下に
次に、次のスタイルを更新します。
- タイトルテキストサイズ：32px
- 最大幅：600px
- モジュールの配置：中央
次に、アニメーションスタイルをnoneに設定します。
結果
この時点で、別のブラウザウィンドウで投稿を表示して結果を確認できます。
スティッキーポジションスタイリングの追加
メールオプトインがスティッキー位置にある場合、スティッキー状態にのみ適用される特定のスタイルをモジュールに追加できます。 これにより、さまざまな配色を追加して白い背景をオフセットし、もう少し目立たせることができます。
スティッキー状態に別の背景色を追加するには、メールオプトイン設定を開き、背景オプションの横にあるサムネイルアイコン（スティッキーアイコン）を選択します。 次に、スティッキータブをクリックして、次の背景色を追加します。
- 背景色（スティッキー）：＃282828
これと同じプロセスを続けて、[デザイン]タブの次のオプションにスティッキーなスタイルを追加します。
- タイトルテキストの色（スティッキー）：＃ffffff
- 本文の色（スティッキー）：＃ffffff
- 最大幅（スティッキー）：500px
- パディング（スティッキー）：上18px、下30px、左30px、右30px
結果
それでは、ライブ投稿で結果を確認しましょう。
スティッキーメールオプトインにホバーポップアップ効果を追加
スティッキーメールオプトインにホバーポップアップ効果を追加するには、メールオプトイン設定を開き、スティックトランスフォームを次のように更新します。
- 変換変換Y軸（スティッキー）：85％
これにより、電子メールオプトインが（ビューポートの外側で）それ自体の高さの85％下に移動し、ユーザーがタイトルにカーソルを合わせることができるように、電子メールオプトインが十分に公開されます。
次に、変換オプションにホバー状態を追加して、変換変換位置がホバー時の元の位置に戻るようにします。
- 変換変換Y軸（ホバー）：0％
結果
これが最終結果です。
最終結果
これが、私たちが作成したスティッキーヘッダーの3つのバージョンです。
最終的な考え
ありがたいことに、Diviを使用すると、スティッキーな電子メールオプトインをサイトに簡単に追加できます。 これにより、スティッキー要素のデザインを微調整して、フォームをよりユニークな方法で表示するための時間をより多く解放できます。 うまくいけば、このテクニックは今後のブログプロジェクトであなたに役立つでしょう。
コメントでお返事をお待ちしております。
乾杯！