サイトに行動を促すフレーズを表示することは、ユーザーの注意を引く最も邪魔にならない方法の XNUMX つです。 訪問者。 ほとんどの場合、ユーザーは CTA を無視するか、CTA を閉じてページの閲覧を続行しますが、場合によってはユーザーを説得できる場合もあります。 行動喚起スライドは次のような場合に最適です。 プロモート ランディング ページ上のほぼすべてのもの。

このチュートリアルでは、Divi テーマ ビルダーを使用してページの隅に追加できる、閉じられる行動喚起をデザインします。 これが完了すると、次のオプションが表示されます。 プロモート プラグインを使用しなくても、ページ上のどこにでも商品や特別オファーを表示できます。

のは、始めましょう！

概要

これは、ページテンプレートの四隅に追加するXNUMXつの挿入されたCTAの概要です。 もちろん、XNUMXつすべてを同時にデプロイする必要はありません。 「x」アイコンをクリックしてそれぞれを閉じる方法に注目してください。次に、「プラス」アイコンをクリックしてCTAを再度有効にすることを選択できます。

始めるために必要なもの

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

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

Diviのページテンプレートを使用した、スライド式のアクションコールの作成

新しいモデルの作成

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

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

新しいモデルで、[カスタムボディの追加]領域をクリックし、[カスタムボディの作成]を選択します。

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

出版物コンテンツセクションの作成

のセクション コンテンツ post は、ページ テンプレートを表示するために必要な部分です。 コンテンツ Divi または WordPress に埋め込まれた実際のページまたは投稿。 最初に挿入する行動喚起を作成する前に、これをテンプレートに追加します。

列に行を追加する

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

発行コンテンツモジュールを追加する

次にモジュールを追加します コンテンツ ラインへの公開。

ライン設定

その後、次のように行パラメーターを更新します。

• 幅：100％
• 最大幅：100％
• パディング：0px high、0px low

左上のアクション呼び出しの作成

投稿コンテンツモジュールが配置されたので、ページテンプレートの左上隅に挿入する最初のアクション呼び出しを追加する準備が整いました。

セクションを追加する

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

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

列に行を追加する

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

セクション設定

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

• 左の色の背景のグラデーション：
• 右の背景のグラデーション：
• 画像の上にグラデーションを表示します：はい
• 背景画像：[画像を挿入]
• 幅：320px
• 余白：320px左
• パディング：0px high、0px low
• アニメーションスタイル：スライド
• アニメーションの方向性：右
• アニメーションの遅延：2000ミリ秒

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

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

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

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

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

ライン設定

ここで、次のように行パラメーターを更新します。

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

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

行内に、Call toActionモジュールを追加します。

アクション設定の呼び出し

次に、アクション呼び出しの設定を更新します。

中身

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

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

設計パラメーター（テキスト、ボタン、塗りつぶし）

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

• タイトルのフォント：ラト
• タイトルのフォントの太さ：ヘビー
• タイトル行の高さ：1,3 em
• ボディポリス：ラト
• 本文のフォントの太さ：太字
• ボタンにカスタムスタイルを使用：はい
• ボタンのテキストサイズ：15px
• ボタンの境界線の幅：0px
• ボタンの文字間隔：1px
• ボタンのフォント：Lato
• ボタンのフォントの太さ：重い
• ボタンのフォントスタイル：TT
• ボタンのパディング：上部に12ピクセル、下部に12ピクセル、左側に32ピクセル、右側に32ピクセル
• パディング：上部に40ピクセル、下部に40ピクセル、左側に40ピクセル、右側に40ピクセル

Blurbモジュールで開閉アイコンを追加する

アクションの呼び出しが完了したら、アクションのスライド呼び出しを開いたり閉じたりするために使用するアイコンボタンを作成する必要があります。 これを作成するには、call toactionモジュールの下にblurbモジュールを追加します。

プレゼンテーションのテキスト設定

次の設計パラメーターを更新します。

中身

• デフォルトのタイトルと本文を削除する
• アイコンを使用してください：はい
• アイコン：詳細（スクリーンショットを参照）

概念

• アイコンの色：＃000000
• アイコンのフォントサイズを使用する：はい
• アイコンのフォントサイズ：40ピクセル
• 幅：40px
• 高さ：40px
• 角丸：50％
• Z軸の回転を変換：135度

詳細設定

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

• CSSクラス：slide-in_target

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

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

次のカスタムCSSをBlurbイメージに追加します。

margin-bottom: 0px;

結果

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

「x」アイコンをクリックしたときに閉じる機能と開く機能を追加するには、コードを追加する必要があることに注意してください。 モデルの四隅のそれぞれにアクションの呼び出しを作成した後、コードを追加します。

右上に行動を促すフレーズを作成

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

重複セクション

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

セクション設定の更新

次に、新しいセクションパラメータを次のように更新します。

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

次に、「left」を「right」に置き換えて、メイン要素のカスタムCSSを更新します。 これが完全な抜粋です：

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

Blurbモジュールのパラメーターを更新する

次に、Blurbモジュール設定を開き、「right」を「left」に置き換えて、メイン要素のカスタムCSSスニペットを更新します。 これが完全な抜粋です：

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

結果

これで、ページテンプレートの右上にスライドとしてアクションの呼び出しが表示されます。

残りの「右下」、「左下」セクションでも同じ操作を実行します。 また、次のような結果になるように、各モジュールのCSSコードを調整する必要があります。

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

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

コードモジュールを追加する

プレゼンテーションのセクションのXNUMXつにコードモジュールを追加します。

コードを貼り付けます

次に、コード設定を開き、次のコードをコード領域に貼り付けます。

<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を表示するページをより細かく制御できます。