Diviのページテンプレートの任意の隅に閉じることができるスライドインの召喚状を追加する方法

公開: 2019-12-28

サイトでスライドインの召喚状を用意することは、訪問者の注意を引くための最も目立たない方法の1つです。ほとんどの場合、CTAを無視するか、CTAを閉じてページの閲覧を続行しますが、場合によってはCTAに勝つこともあります。スライドインの召喚状は、ランディングページのほぼすべてのものを宣伝するのに最適です。

このチュートリアルでは、Diviテーマビルダーを使用してページの隅に追加できる、閉じることができるスライドインの召喚状を設計します。完了すると、プラグインを使用せずに、ページのどこにでも商品や特別オファーを宣伝できるようになります。

始めましょう！

スニークピーク

これは、ページテンプレートの四隅すべてに追加する4つのスライドインCTAの概要です。もちろん、4つすべてを一度にデプロイする必要はありません。「x」アイコンをクリックしてそれぞれを閉じることができることに注意してください。次に、「プラス」アイコンをクリックしてCTAを元に戻すことができます。

スライドインの召喚

スライドインの召喚状のDiviページテンプレートを無料でダウンロードする

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

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

無料でダウンロード

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

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

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

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

始めるために必要なもの

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

また、結果を表示するために新しいテンプレートをそのページに割り当てるために、テスト目的でDiviBuilderで作成された少なくとも1つのページが必要になります。

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

Diviでページテンプレートの隅々に閉じることができるスライドインの召喚状を作成する

新しいテンプレートの作成

WordPressダッシュボードから、Divi> ThemeBuilderに移動します。次に、[新しいテンプレートの追加]ボックスをクリックして、新しいテンプレートを作成します。

ソーシャルメディアフォローボタンバー

プロモーションバーを表示するページにテンプレートを割り当てます。

ソーシャルメディアフォローボタンバー

新しいテンプレートで、[カスタムボディの追加]領域をクリックし、[カスタムボディの作成]を選択します。

ソーシャルメディアフォローボタンバー

次に、「最初からビルド」オプションを選択します。

ソーシャルメディアフォローボタンバー

投稿コンテンツセクションの作成

投稿コンテンツセクションは、DiviまたはWordPressで作成されたページまたは投稿の実際のコンテンツを表示するために、ページテンプレートの必要な部分です。最初のスライドインの召喚状を作成する前に、これをテンプレートに追加します。

1列の行を追加する

まず、通常のセクションに1列の行を追加します。

ソーシャルメディアフォローボタンバー

投稿コンテンツモジュールの追加

次に、投稿コンテンツモジュールを行に追加します。

スライドインの召喚

行設定

その後、次のように行設定を更新します。

幅：100％
最大幅：100％
パディング：0px上、0px下

スライドインの召喚

左上のスライドインの召喚状の作成

投稿コンテンツモジュールが配置されたので、最初のスライドインの召喚状をページテンプレートの左上隅に追加する準備が整いました。

セクションを追加

新しい行動の呼びかけはそれぞれ、まったく新しいセクションで作成されます。これにより、召喚状の設計に必要なレイアウトまたはモジュールを追加できます。

テンプレートレイアウトに新しい通常のセクションを追加します。

スライドインの召喚

1列の行を追加する

次に、セクションに1列の行を指定します。

スライドインの召喚

セクション設定

投稿コンテンツセクションの上のセクションをドラッグ（または移動）し、次のようにセクション設定を更新します。

背景グラデーションの左の色：
背景グラデーションの正しい色：
画像の上にグラデーションを表示：はい
背景画像：[画像を挿入]
幅：320px
マージン：残り320px
パディング：0px上、0px下
アニメーションスタイル：スライド
アニメーションの方向性：右
アニメーションの遅延：2000ms

次に、[詳細設定]タブにジャンプして、次のCSSクラスとZインデックスを追加します。

CSSクラス：slide-in-cta
Zインデックス：999

そして、次のカスタムCSSスニペットをメイン要素に追加します。

position: fixed;
top: 80px;
left: -320px;

スライドインの召喚

後でコードでセクションをターゲットにできるように、CSSクラスが必要です。カスタムCSSは、ページテンプレートの左上にあるセクションを固定（またはスティッキー）の位置に配置します。「左：-320px」の位置は、セクション全体（幅320px）をブラウザウィンドウの外に移動する必要があります。しかし、それを表示に戻すために、320pxの左マージンがあります。これがこのように構築されている理由は、「x」アイコンをクリックしたときにマージン値のオンとオフを切り替えることができるようにするためです。これにより、CTAがスライドして表示されたり表示されなくなったりします。

行設定

次に、行の設定を次のように更新しましょう。

カスタムガター幅を使用：はい
側溝幅：1
幅：100％
パディング：0px上、0px下

スライドインの召喚

アクションモジュールへの呼び出しの追加

行内に、召喚状モジュールを追加します。

スライドインの召喚

召喚状の設定

次に、召喚状の設定を更新します。

コンテンツ

タイトル：[選択したテキストを入力してください]
ボタン：[選択したテキストを入力してください]
本文：[選択したテキストを入力してください]
ボタンリンクURL：[実際のURLまたは＃を入力]

スライドインの召喚

次に、デフォルトの背景色を削除して、前に追加したセクションの背景を表示します。

スライドインの召喚

デザイン設定（テキスト、ボタン、パディング）

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

タイトルフォント：ラト
タイトルフォントの太さ：重い
タイトルラインの高さ：1.3em
ボディフォント：ラト
ボディフォントの太さ：太字
ボタンにカスタムスタイルを使用する：はい
ボタンのテキストサイズ：15px
ボタンの境界線の幅：0px
ボタンの文字間隔：1px
ボタンフォント：ラト
ボタンのフォントの太さ：重い
ボタンのフォントスタイル：TT
ボタンのパディング：上12px、下12px、左32px、右32px
パディング：上40px、下40px、左40px、右40px

スライドインの召喚

宣伝文で開くアイコンと閉じるアイコンを追加する

召喚状が終了したら、スライドインの召喚状を開いたり閉じたりするためのアイコンボタンを作成する必要があります。これを作成するには、召喚状モジュールの下に宣伝文モジュールを追加します。

スライドインの召喚

宣伝文句の設定

次のデザイン設定を更新します。

コンテンツ

デフォルトのタイトルと本文を削除する
アイコンを使用：はい
アイコン：プラス（スクリーンショットを参照）

スライドインの召喚

設計

アイコンの色：＃000000
アイコンのフォントサイズを使用：はい
アイコンフォントサイズ：40px
幅：40px
高さ：40px
丸みを帯びた角：50％
変換回転Z軸：135度

スライドインの召喚

高度な設定

[詳細設定]タブで、次のCSSクラスを追加します。

CSSクラス：slide-in_target

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

position: absolute;
bottom: 0px;
right: -40px;

次のカスタムCSSを宣伝文画像に追加します。

margin-bottom: 0px;

スライドインの召喚

結果

これがこれまでの結果です。

スライドインの召喚

「x」アイコンをクリックしたときに閉じる機能と開く機能を追加するには、コードを追加する必要があることに注意してください。テンプレートの四隅のそれぞれに召喚状を作成した後、コードを追加します。

右上のスライドインの召喚状の作成

最初のスライドインの召喚状を作成すると、すでに作成されているセクションを複製することで、残りのCTAを作成するプロセスをスピードアップできます。次に、右上隅にスライドインの召喚状を作成します。

重複セクション

ワイヤフレームビューモードを展開してから、左上のCTAセクションを複製します。

スライドインの召喚

セクション設定の更新

次に、新しいセクション設定を次のように更新します。

マージン：320px右
アニメーションの方向：左

次に、「left」を「right」に置き換えて、メイン要素のカスタムCSSを更新します。完全なスニペットは次のとおりです。

position: fixed;
top: 80px;
right: -320px;

カスタムCSS

宣伝文モジュールの設定を更新する

次に、宣伝文モジュールの設定を開き、「右」を「左」に置き換えて、メイン要素のカスタムCSSスニペットを更新します。完全なスニペットは次のとおりです。

position: absolute;
bottom: 0px;
left: -40px;

カスタムCSS

結果

これで、ページテンプレートの右上にスライドインの召喚状が表示されます。

右上の召喚状

左下のスライドインの召喚状の作成

重複セクション

ページテンプレートの左下隅にスライドインの召喚状を作成するには、ページレイアウトの上部にある左上のCTAセクションを複製します。重複するセクションに「左下のCTA」というラベルを付けてから、投稿コンテンツセクションの下に移動します。

重複セクション

セクション設定の更新

次に、セクション設定を開き、「top：80px」を「bottom：0px」に置き換えて、メイン要素のCSSを更新します。最終的なスニペットは次のとおりです。

position: fixed;
bottom: 0px;
left: -320px;

コードスニペット

宣伝文モジュールの設定を更新する

次に、「bottom：0px」を「top：0px」に置き換えて、Blurbモジュールのメイン要素CSSを更新します。最終的なスニペットは次のとおりです。

position: absolute;
top: 0px;
right: -40px;

スライドインの召喚

結果

次に、ライブページで左下のスライドインの召喚状を確認してください。

スライドインの召喚

右下のスライドインの召喚状の作成

重複セクション

右下のスライドインの召喚状を作成するには、右上のCTAセクションを複製し、複製したセクションを投稿コンテンツセクションの下に移動します。

スライドインの召喚

セクション設定の更新

セクション設定を開き、「top：80px;」を置き換えてメイン要素のCSSを更新します。「bottom：0px;」を使用します。最終的なスニペットは次のとおりです。

position: absolute;
bottom: 0px;
right: -320px;

スライドインの召喚

宣伝文モジュールの設定を更新する

次に、宣伝文モジュールの設定を開き、「bottom：0px;」を置き換えてメイン要素のCSSを更新します。「top：0px;」で。最終的なスニペットは次のとおりです。

position: absolute;
top: 0px;
right: -40px;

スライドインの召喚

結果

次に、ライブページで右下のスライドインの召喚状を確認してください。

スライドインの召喚

コードモジュールを使用したカスタムjQueryおよびCSSコードスニペットの追加

最後のステップでは、カスタムjQueryとCSSを追加して、各スライドインCTAのオープン機能とクローズ機能を取得できるようにする必要があります。

コードモジュールの追加

レイアウトのセクションの1つにコードモジュールを追加します。

スライドインの召喚

コードを貼り付け

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

<style>
  .slide-in-cta, .slide-in_target, .slide-in-toggle-active {
    transition: all 400ms ease-in-out;
  } 
  .slide-in-toggle-active {
    margin: 0px 0px 0px 0px !important;
  }
   .slide-in-toggle-active .slide-in_target  {
    transform: none !important;
    background: rgba(0,0,0,0.2);
  }  
  .slide-in_target {
    cursor: pointer;
  }
</style>
<script>
(function($) {
  $(document).ready(function(){
    $('.slide-in_target').click(function(){
      $(event.target).closest('.slide-in-cta').toggleClass('slide-in-toggle-active'); 
    });    
  });
})( jQuery );   
</script>

スライドインの召喚

最終的な考え

Diviを使用すると、スライドインの召喚状を作成することはまったく難しくありません。また、テーマビルダーを使用して、ページテンプレートに召喚状を追加できるため、これらのCTAを表示するページをより細かく制御できます。 CTAセクションのアニメーションの遅延を自由に増やして、ユーザーがページの読み込み後少し遅れて（または早く）CTAスライドインアニメーションを表示できるようにします。また、Diviリードを使用し、分割テストを有効にして、これらのCTAのコンバージョンを改善し、どのコーナーが最適なコンバージョンになるかを見つけることもできます。

コメントでお返事をお待ちしております。

乾杯！

Diviのページテンプレートの任意の隅に閉じることができるスライドインの召喚状を追加する方法

スニークピーク

スライドインの召喚状のDiviページテンプレートを無料でダウンロードする

無料でダウンロード

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

始めるために必要なもの

Diviでページテンプレートの隅々に閉じることができるスライドインの召喚状を作成する

新しいテンプレートの作成

投稿コンテンツセクションの作成

1列の行を追加する

投稿コンテンツモジュールの追加

行設定

左上のスライドインの召喚状の作成

セクションを追加

1列の行を追加する

セクション設定

行設定

アクションモジュールへの呼び出しの追加

召喚状の設定

コンテンツ

デザイン設定（テキスト、ボタン、パディング）

宣伝文で開くアイコンと閉じるアイコンを追加する

宣伝文句の設定

コンテンツ

設計

高度な設定

結果

右上のスライドインの召喚状の作成

重複セクション

セクション設定の更新

宣伝文モジュールの設定を更新する

結果

左下のスライドインの召喚状の作成

重複セクション

セクション設定の更新

宣伝文モジュールの設定を更新する

結果

右下のスライドインの召喚状の作成

重複セクション

セクション設定の更新

宣伝文モジュールの設定を更新する

結果

コードモジュールを使用したカスタムjQueryおよびCSSコードスニペットの追加

コードモジュールの追加

コードを貼り付け

最終的な考え

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