Diviプラグインのハイライト：簡単なスライドイン

Easy Slide-Insは、DiviおよびExtraのサードパーティプラグインであり、Diviビルダーを使用してスライドイン（およびポップアップ）を作成できます。 スライドインには、DiviBuilderで構築できるものなら何でも表示できます。 スライドインをスクロールパーセンテージ、終了インテント、複数の場所を持つボタン、およびCSSクラスでトリガーします。 これには、生涯の更新とデモが含まれます。

この記事では、Easy Slide-Insを見て、何ができるのか、そして簡単に使用できるのかを見ていきます。 プラグインに含まれているデモのいくつかも見ていきます。 プラグインは開発者のWebサイトから入手できます。

簡単なスライドインのインストール

まず、ファイルを解凍します。 フォルダ内には、デモ、ドキュメントへのリンクを含むファイル、およびEasySlide-Insプラグインがあります。

通常どおりプラグインをアップロードしてアクティブ化します。

EasySlide-Insと呼ばれる新しいメニューがダッシュボードに追加されます。 このメニューをクリックして、ライセンスキーを入力します。

ライセンスをアクティブ化すると、スライドインを表示して新しいスライドインを作成できる2つのメニュー項目（[すべての項目]と[新規追加]）が追加されます。

新しいスライドインの作成

クリックして新しいスライドを追加すると、エディターが開き、DiviBuilderを使用してスライドインを作成できます。

また、多くの設定が含まれています。 それらはDiviBuilderの下に配置されます。 位置は、左、右、左上、右上、左下、右下、上バー、下バー、左サイドバー、または右サイドバーから選択します。 スクロール時に自動トリガーするように設定し、スクロール量を選択します。 終了インテントで開くように設定することもできます。 背景色、ボックスの影、スライドインの幅を設定します。

タイトルを表示し、表示するテキストを入力します。 タイトルの背景色とテキストの色、およびフォントファミリ、サイズ、太さを選択します。 角の丸み、ラベルの高さ、ラベルの幅を設定します。 終了アイコンを表示し、背景とアイコンの色、およびアイコンのサイズを選択します。

コントロールは直感的に使用および理解できます。 Webサイトに一致するようにラベルのスタイルを設定し、スライドインの動作を制御するのに十分な調整があります。

選択したオプションに応じて、他の機能が追加または削除されます。 Box Shadowを選択すると、水平位置と垂直位置、ぼかしと広がりの強さ、色のオプションが提供されるようになりました。

[詳細設定]タブでは、スライドを表示できるページを選択できます。 すべてのページ、個々のページ、およびすべての投稿を選択できます。 特定のデバイスでスライドインを非表示にすることができます。

[カスタムフィールド]タブでは、他のページや投稿と同じようにカスタムフィールドを追加できます。

簡単なスライドインの例

これは、リスク管理レイアウトの連絡先ページです。 これを使用してスライドインを作成し、デザインがレイアウトに合うようにします。 サイドバーやドットナビゲーションを表示しないように設定しました。 標準ページと同じようにプレビューできます。 スライドをデザインしたら、通常どおり公開します。

設定でラベルを有効にし、背景を黒に、テキストを白に設定しました。 デフォルトのテキスト（お問い合わせ）を維持しました。 右上に表示するように設定しました。 これはデフォルトの高さを使用していますが、簡単に変更できます。

ラベルをクリックするとスライドが開き、リスク管理レイアウトパックの連絡フォームを示す画面上に表示されます。 [お問い合わせ]ボタンをもう一度クリックすると、スライドインが閉じます。 スライドインの幅を500ピクセル、ラベルの高さを150、ラベルの幅を60に設定しています。

この例は、ボックスの影を示しています。 場所を右側のサイドバーに変更しました。サイドバーには閉じるボタンが表示されます。 ラベルと閉じるボタンの色を変更し、ラベルの角をより丸くしました。 スライドインの幅も600ピクセルに設定しました。

これでは、ラベルをトップバーの位置に移動しました。 レイアウトの色を使用して、幅を122ピクセルに、高さを40ピクセルに変更しました。 この画像でわかるように、ラベルはスクロール時に所定の位置に残ります。

全画面で開き、閉じるボタンが含まれています。

これについては、左側のサイドバーに新しいスライドインを追加しました。 サイトに合わせてスタイルを設定し、ラベルの角を四角にしました。 ラベルの上部マージンを50％使用しています。これにより、ラベルの上部が画面の高さの中央に配置されます。

左から開きます。 ピクセル幅を1000にしたので、画面の大部分をカバーします。 メニューがニュースレターのスライドインでカバーされている場合でも、連絡先のスライドインは引き続き上部に表示されます。

スライドインは、ボタントリガークラスを提供します。 これをボタンと一緒に使用して、スライドインを開くことができます。

クラスをコピーして、ボタンのCSSクラスフィールドに貼り付けます。

ここで、ボタンをクリックするとスライドインが開きます。 ラベルはどこにでもある必要はありませんが、スライドインを配置した方向からスライドインします。 これは左側に配置されているので、左側から来ています。 幅を1000ピクセルに設定しました。

簡単なスライドインデモ

ダウンロードファイルには12のデモが含まれています。 これらは、Diviライブラリにアップロードできる事前に作成されたレイアウト（JSONファイル）です。 通常のレイアウトのように、それらをDiviライブラリにインポートします。 スタイル付きモジュールが含まれていますが、デザイン設定をセットアップする必要があります。 それらのいくつかを見てみましょう。

これは、ExitIntentを使用したコレクションメールです。 これには、いくつかのテキストモジュール、お問い合わせフォーム、および画像モジュールが含まれています。

画面上での表示は次のとおりです。 ここではすべてをデフォルトのままにしているので、ボタンには元のテキスト、場所、スタイルが引き続き表示されます。

これはスクロールインテント付きのコレクションメールです。 背景画像、2つのテキストモジュール、および電子メールモジュールが含まれています。

事前に作成された設定を使用すると、ページ上でどのように表示されるかを次に示します。 これは、スライドインの応答性を示しています（Diviレイアウトを示しているため、これはまさに私たちが期待するものです）。 より多くの画像を表示したい場合は、スライドインを広くしてください。

これはあなたの訪問者をガイドします。 これには、コードモジュール（Googleマップ用）、いくつかの宣伝文、テキスト、および連絡フォームが含まれています。

デフォルト設定を使用したページでの表示は次のとおりです。

これはラベル付きのプロモーションです。 これには、テキストモジュール、いくつかの価格表、およびボタンが含まれています。

画面上での表示は次のとおりです。 スライドインすると全幅が表示されるように800ピクセルに設定しました。ラベルを削除し、ページスクロールが60％に達したときに表示するように設定しました。

Extraで表示した場合の同じレイアウトです。 DiviとExtraの両方でうまく機能するのを見てうれしいです。

簡単なスライドインの価格とドキュメント

Easy Slide-Insは、開発者のWebサイトから入手できます。 2つの購入オプションがあります。

• 単一サイト– $ 27
• 無制限のサイト– $ 97

どちらのライセンスにも、デモとライフタイムアップデートが含まれています。

ドキュメントは、開発者のドキュメントとサポートページで提供されます。 このページには、各ポイントのウォークスルーと、それらを示す画像が含まれています。 このページには、電子メールサポートへのリンクも含まれています。

終わりの考え

Easy Slide-Insを使用すると、DiviおよびExtraのスライドインとポップアップを簡単に作成できます。 使いやすいと思いました。 ドキュメントは必要ありませんでしたが、必要に応じてあります。 これは、非表示のページ要素を取り込むための興味深い方法です。 スライドインでは何でも使用できるため、連絡フォーム、ニュースレターの登録、召喚状、ビデオ、ショップモジュールなどを表示できます。単一のモジュールまたは全ページレイアウトにすることができます。

複数のトリガーオプションがあるのが好きです。 終了インテントと自動トリガーにより、電子メールとCTAのポップアップを作成するのに適しています。 ラベルをクリックして開くと、ページの複数の場所にラベルを追加できます。 1つのページに複数のスライドインを追加でき、それらがどのページに表示されるかを決定できるのが気に入っています。 CSSクラスをボタンに追加することは、訪問者が情報を表示することを選択したときに情報を明らかにするための優れた方法です。

フロントエンドからスライドインを作成できますが、設定にアクセスする方法がわかりませんでした。 設定がないと、ラベルを移動してその場所をリアルタイムで確認することができませんでした。 それらを見るためにページをロードしなければなりませんでした。 それでも使用するのは難しくありませんでしたが、少し当て推量が必要でした。 これは非常にマイナーなので、使用したり推奨したりすることを妨げません。

Divi Builderを使用してスライドインを作成するためのシンプルで直感的な方法を探している場合は、EasySlide-Insを一見の価値があります。

我々はあなたから聞きたい。 DiviのEasySlide-Inを試しましたか？ コメントであなたがそれについてどう思うか教えてください。

ByEmo /shutterstock.com経由の注目の画像