Diviプラグインのハイライト：Next Image Effect Pro

Next Image Effect Proは、画像やリンクに注目を集めるのに役立つ多くの画像ホバー効果を追加するDiviのサードパーティプラグインです。 プラグインはDiviBuilderに7つのモジュールを追加し、それぞれに独自のデザインとエフェクトのセットがあります。 この記事では、Next Image Effect Proを見て、何ができるかを見ていきます。

次のImageEffectProのインストール

プラグインをDiviMarketplaceから購入してダウンロードします。 次の手順に従ってインストールします。

1. WordPressダッシュボードで、[プラグイン] > [新規追加]に移動します
2. コンピューターからプラグインをアップロードします
3. [今すぐインストール]をクリックします
4. プラグインがインストールされたら、[アクティブ化]をクリックします

次に、ライセンスをアクティブ化する必要があります。 プラグイン> Image Effect ProLicenseに移動します。 ライセンスキーを入力し、変更を保存します。

次の画像効果プロモジュール

Image Effect Proは、画像とテキストのスタイル付きの組み合わせを含む一連のモジュールをDiviBuilderに追加します。 それらは何百ものホバー効果と方向の組み合わせを追加します。 テキストのスタイル設定オプションには、見出し、フォーカステキスト、コンテンツ、およびそれらの背景の独立したコントロールが含まれます。

モジュールは次のとおりです。

• 円形画像ホバー
• 画像ホバーボックス
• 画像アイコン効果
• メガイメージエフェクト
• 最小限の画像ホバー
• 次の画像スクロール
• 究極の画像ホバー

円形画像ホバー

円形画像ホバーには、画像とテキスト（ホバーコンテンツ）の2つの主要なセクションがあります。 長方形の画像を追加しました。 画像を元の形で表示しますが、円形にします。 画像が正方形の場合、これは完全な円になります。

画像のデザイン設定には、ボックスの影の位置、強度、色が含まれます。

テキストには、タイトルとコンテンツを追加するセクションが含まれています。 デザイン設定でスタイルを設定できます。 この例ではサイズを大きくしました。

キャプションの背景は、単色またはグラデーションのいずれかです。 これはデフォルトのグラデーションを使用します。

19のホバー効果があり、各効果に4つの方向オプションがあります。 これがエフェクト1です。エフェクトには、画像を遷移させたり、コンテンツを遷移させたりするさまざまな方法があります。ズーム、フリップ、スライドなど、さまざまな方法があります。

画像ホバーボックス

画像ホバーボックスには、ホバーコンテンツを含む画像も含まれています。 画像の形は変わりません。

また、オーバーレイ（またはオーバーレイのように見える背景）が含まれ、見出しの背景が追加されます。 両方の背景に単色とグラデーションを含めることができます。 この例では、デフォルトのオーバーレイ背景を使用しています。 見出しの背景の色を変更し、テキストのサイズを大きくしました。

フリップ、スライド、フェード、ズームなど、13種類のホバー効果があります。いくつかの効果により、方向のオプションが追加されます。 これが効果1です。

画像アイコン効果

画像アイコン効果は、画像の上にタイトルとフォーカステキストを表示するホバー要素を追加します。 他の色と同様に、背景色は単色またはグラデーションのいずれかで変更でき、複数のホバー効果が含まれています。 これのホバー効果は境界線をもたらし、特にエレガントに見えます。 これがゾーイホバー効果です。

これを際立たせるのはアイコンです。 4つの異なるアイコンを追加して、同じウィンドウまたは新しいウィンドウで開くことができます。

アイコンの設定には、色、サイズ、間隔、線の高さ、背景色、影、境界線などが含まれます。この例では、背景色を追加し、線の高さを減らして線を作成しました。 影も追加しました。 これがホバー効果ヘラです。

これはホバー効果テリーです。 タイトルとフォーカステキストの色を変更し、前の例のフォントサイズとアイコンの設定を使用しました。

メガイメージエフェクト

Mega Image Effectは、片面に画像、もう片面にコンテンツを備えたもう1つの両面カードです。 前面には通常通り画像が表示されます。

カードの裏側には、通常どおりコンテンツが表示され、フォントと背景の調整が含まれています。 それを際立たせるのは、ボタンを追加する機能です。

標準の背景と同じ単色とグラデーションのオプションを含め、ボタンのデザインを完全に制御できます。 この例は、ボタンの背景のグラデーションを示しています。

フォントと背景のボタンのスタイルを完全に制御できます。 この例では、フォントと境界線を調整しました。 モジュールのすべての要素には、間隔の調整もあります。 ボタンの下部に20ピクセルを追加しました。 各モジュールには、これらの間隔調整があります。

このモジュールには、数えきれないほど多くのホバー効果があります。 画像効果だけでも印象的ですが、テキスト効果もたくさんあります。 画像ホバーとテキストホバーを別々に調整し、テキスト効果のタイミングを設定できます。

この例では、平行左画像のホバー、ズームインテキスト効果、および小さなテキスト遅延があります。

最小限の画像ホバー

最小限の画像効果は、セットの中で最も単純なモジュールです。 ホバー効果のある画像を表示します。

唯一のカスタム設定はホバー効果です。 10種類のエフェクトから選択できます。 いくつか見ていきます。

この例は、スケールアウト回転です。 画像は通常の状態でスケールアウトされ、少しだけ回転します。 ホバーすると、画像が拡大され、通常の状態に回転します。

これはブラーです。 ホバーするまで画像がぼやけ、その後、鮮明になるまでゆっくりとぼやけが解消されます。

これは点滅しています。 白のバーストが画像上で点滅し、ホバーすると消えます。

次の画像スクロール

次の画像スクロールは、画像の上にオーバーレイを配置し、右上隅にボタンを追加します。 ボタンの色は、単色とグラデーションの両方に合わせて調整できます。 この例は、デフォルト設定を示しています。

オーバーレイを調整することもできます。 単色またはグラデーションを設定します。 また、グラデーションタイプと標準コントロールも含まれています。

背景位置を使用すると、画像の上部または下部を表示できます。

ホバーすると、画像が上または下に移動します。 この例では、モジュールは画像の下部を表示し、ホバーすると画像の上部までスクロールします。

究極の画像ホバー

Ultimate Image Hoverは、選択した効果に基づいてサイズと形状を表示します。 これがエフェクト1です。写真の一部を背の高い長方形の画像で表示します。 これには、タイトルとフォーカスのテキスト、コンテンツ、およびオーバーレイが含まれます。 オーバーレイには、ソリッドまたはグラデーションとしての色の調整が含まれます。

ホバーすると、オーバーレイが明るくなり、テキストが表示されます。

画像の不透明度を使用すると、表示できる背景の量を調整できます。 この例では、不透明度を下げ、見出しとフォーカステキストのサイズ、見出しテキストの色、フォーカステキストの太字を変更し、フォーカステキストをすべて大文字にし、フォーカステキストにテキストシャドウを追加しました。

このモジュールには24のホバー効果があります。 画像をさまざまなサイズ、不透明度、テキストの配置で表示し、境界線を追加します。

これがエフェクト4です。画像を正方形で表示し、両端で重なる内側の周りに境界線を追加します。

これがエフェクト5です。オーバーレイを暗くし、画像の内側に境界線を追加して、画像を正方形で表示します。

効果6は、見出しとフォーカステキストを上部に配置し、その下に線を配置し、コンテンツを下部に配置します。

エフェクト8は、大きな長方形のサイズを維持し、細い境界線を追加します。

これがエフェクト10です。ホバーすると、画像がズームし、線がxになり、グラデーションが表示されます。

次の画像効果プロの例

簡単な例として、CTAを作成するためにUltimate ImageHoverモジュールが追加されたDiviHomeRenovationレイアウトを見てみましょう。 画像の左側に追加し、レイアウトの色を使用しました。

ホバーすると、画像が右にスライドし、CTAが表示され、画像の不透明度が低くなり（背景色がより多く通過できるようになります）、境界線が追加されます。 この例では、ホバー効果8を使用しています。

Next Image EffectProを購入する

Next Image Effect Proは、DiviMarketplaceで49ドルで入手できます。 これには、無制限のWebサイトの使用、30日間の返金保証、および1年間のサポートと更新が含まれます。

終わりの考え

これが、Divi用のNext Image EffectProの外観です。 7つのモジュールは、サイトを際立たせる多くの画像機能を追加します。 それらの使用は直感的です。 すべてのモジュール間のエフェクトと組み合わせの数は印象的です。 各モジュールは一意ですが、ほとんどの場合、画像、見出し、コンテンツを追加して、CTA、チームメンバー、証言、一般情報、連絡先情報など、さまざまなデザインの可能性を提供します。

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

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