Diviプラグインのハイライト：シンプルなオーバーレイソリューション

Simple Overlay Solutionは、Divi Builderを使用してフルスクリーンのオーバーレイ、ポップアップ、およびメガメニューを簡単に作成できるようにするDiviのサードパーティプラグインです。 任意のページに複数のオーバーレイを追加します。 クリックまたは自動タイミング遅延トリガー、明るいまたは暗いローダー、明るいまたは暗い背景から選択します。 閉じるボタンのスタイルを設定するか、DiviBuilderを使用して独自の背景とボタンを作成します。 各オーバーレイには30日間のCookieがあります。

シンプルなオーバーレイソリューション

通常どおりプラグインをアップロードしてアクティブ化します。 次に、ライセンスをアクティブ化する必要があります。 ダッシュボードメニューで、 [設定] > [ Divi SOSアクティベーション]に移動し、APIキーとメールアドレスを入力します。

SOSサンプルのインポート

SOSプラグインには、SOSライブラリにインポートできるJSONファイルとして一連のデモが付属しています。 まず、ダウンロードファイルを解凍してJSONファイルにアクセスします。 これらはあなたが始めるのに最適です。

ダッシュボードメニューで、 Divi > SOSに移動します。 [インポートとエクスポート]を選択します。

他のレイアウトと同じようにJSONファイルをインポートします。

これで、SOSライブラリに5つのデモがあります。 デモは開発者のWebサイトで見ることができます。

SOSレイアウトの作成

SOSレイアウトもSOSライブラリに作成されます。 ライブラリに移動し、[新規追加]をクリックします。

レイアウトにわかりやすい名前を付けてください。 レイアウトタイプとしてレイアウトを選択します。

カテゴリのSOSレイアウトを選択します。

既製のレイアウトを選択し、リゾートのレイアウトパックからお問い合わせページを選択しました。 右側（またはビジュアルモードで表示している場合は下部）にレイアウト設定があります。 これにより、レイアウトのHREFコードが提供されるため、任意のページ（URLが許可されている場所）でトリガーできます。 これは、オーバーレイをトリガーするためにボタンやテキストなどに使用するリンクです。

自動的に表示することもできます（これにより、時間の設定が開き、Cookieが有効になり、訪問者がオーバーレイまたはポップアップを見たことを認識できます）。 トランジションをフェード、スライド、またはなしに設定します。 明るい、暗い、または背景なしを選択します。 ローダーの色を明るい色または暗い色から選択します。 閉じるボタンを表示するかどうかを選択します。 ボタンとその背景のスタイルを設定できます。

ローダーは明るい場合と暗い場合があります。 これが明るい背景の上の暗いローダーです。

SOSオーバーレイの例

訪問者が[休暇を予約]ボタンをクリックしたときに予約情報を表示するオーバーレイを作成しています。 オーバーレイをトリガーするには、ボタンのURLへのリンクを追加します。

セクションの背景を透明に設定し、SOS設定で明るい背景を選択し、セクションの1つだけを使用するようにレイアウトをカスタマイズしました。 [ゲッタウェイを予約]ボタンをクリックすると、滞在を予約するセクションが開きます。 背景には白いオーバーレイが含まれています。 また、閉じるボタンを追加し、レイアウトに合わせてスタイルを設定しました。 レイアウトは画面の上部に配置され、全幅を取ります。 これはパディングでカスタマイズできます。

セクションの上部に少しパディングを追加しました。 また、背景を無効にして、DiviBuilderで制御できるようにしました。

今回は同じレイアウトのお問い合わせフォームを使用しています。 今回は、下の行にボックスシャドウを追加して、オーバーレイの背景から目立つようにしました。

最初のオーバーレイと同じページのボタンへのリンクを追加しました（必要な数だけ追加できます）。 これは、[メッセージ]ボタンをクリックするとお問い合わせフォームを開きます。

結果は面白そうです。 これには閉じるボタンを追加しませんでした。 訪問者は、フォームの任意の場所をクリックしてオーバーレイを閉じることができます。 行に背景を追加し、不透明度を設定して、背景のほんの少しが透けて見えるようにしました。

これは、投資会社のレイアウトのセクションを使用しています。 召喚状を含むポップアップを作成したい。 1000ミリ秒の遅延で自動的に表示されるように設定しました。 自動的に表示する場合、リンクをどこかに追加する必要はありません。 すべてのページに自動的に表示されます。 また、ポップアップを30日に1回だけ表示するようにCookieを設定しました。

ページが読み込まれてから1秒後にポップアップが表示されます。 これにより、ポップアップとしてCTAが作成され、30日に1回だけ表示されます。 この画像ではわかりませんが、視差の背景も付けました。 これにより、他のページデザインと同じようにポップアップをクリエイティブに作成できます。

閉じるオプションを右上隅のボタンからDiviBuilderで作成したボタンに移動します。 レイアウトからボタンのクローンを作成し、テキストを変更して、URLに閉じるリンクを追加しました。

その結果、CTAとして優れた機能を発揮するすっきりとしたデザインになります。

デザインに戻り、新しい背景と別のページを開くボタンを追加しました。

これについては、Esportsレイアウトに基づいてニュースレターのポップアップを作成しました。 30秒後に自動的に開くようにポップアップを設定しました。 背景は暗く設定され、ローダーは明るく設定されています。 レイアウトの色を使用した閉じるボタンも含めます。

サブスクライブポップアップは見栄えがよく、実際にはサイトのデザインからのものであるため、サイトのデザインに完全に適合します。 通常のDiviレイアウトを使用してポップアップを作成できるのが気に入っています。

メガメニュー

SOSでメガメニューを作成することもできます。 メニュー項目としてカスタムリンクを作成してから、オーバーレイのリンクをメニュー項目のURLに追加します。

私は私のスライドインメニューでは約リンクにオーバーレイを追加しました。 必要に応じて、メニュー内のリンクごとに異なるオーバーレイを作成できます。これらは、Diviで作成できるものであれば何でもかまいません。

シンプルなオーバーレイソリューションの価格

SOSには2つのライセンスがあります。 どちらも1回限りの料金で、生涯の更新が含まれています。

• 1つのWebサイトと1つの開発サイト– $ 25
• 無制限のウェブサイト– $ 45

SOSは、開発者のWebサイトから購入できます。

終わりの考え

シンプルオーバーレイソリューションは使いやすいです。 コントロールはシンプルで直感的です。 オーバーレイの作成は、Diviを使用したページの作成とほぼ同じです。 Divi Builderを使用できる場合は、SOSを使用できます。 オーバーレイがプリロードされていないため、Diviページは高速にロードされます。 オーバーレイとポップアップも高速に読み込まれます。

私はそれがクッキーを持っているのが好きです。 これにより、ポップアップをある程度制御できるため、同じ訪問者がWebサイトにアクセスするたびにオファーを表示する必要がなくなります。 簡単なことではないと思いますが、いくつかのCookieオプションを確認したいと思います。 たとえば、週に1回、1日に1回、1か月に2回など、表示するように設定できます。いくつかのローダーオプションも便利です。 多分異なる選択と色のカスタマイズ。 また、自動オーバーレイの表示からページを除外する機能も必要です。

通常のDiviボタンを閉じるボタンに使用できるのが好きです。 これにより、多くのデザインの可能性が開かれ、組み込みのボタンの使用に限定されません。 ボタンを使用したい場合は、色のオプションがたくさんあります。

SOSはお勧めの簡単なプラグインです。 Divi Builderを使用してオーバーレイ、ポップアップ、およびメガメニューを作成する簡単な方法に興味がある場合は、Simple Overlay Solution（SOS）が必要なプラグインである可能性があります。

我々はあなたから聞きたい。 Simple Overlay Solutionプラグインを試してオーバーレイとポップアップを作成しましたか？ コメントであなたがそれについてどう思うか教えてください。

Bakhtiar Zein /shutterstock.comによる注目の画像