Diviプラグインのハイライト：Divi Sensei Before After Slider

前後のスライダーは、訪問者が2つの画像を比較できるようにするための優れた方法です。 名前が示すように、減量、レタッチされた画像、装飾された部屋、塗装された車など、何かが変更される前後の画像である可能性があります。もちろん、以前よりもはるかに便利です。と写真の後。 グラフィック、製品、休暇の目的地などを比較するために使用できます。

この記事では、DiviBuilderの前後のスライダーモジュールであるDiviSensei Before and After Sliderを見て、何ができるかを確認し、Diviでこのサードパーティプラグインが必要かどうかを判断するのに役立ちます。ツールボックス。

スライダーモジュールの前後のDivi先生

通常どおり、Divi Sensei Before andAfterプラグインをアップロードしてインストールします。 3つは通過する設定ではありません。 プラグインをアップロードしてアクティブ化すると、Sensei Before and AfterSliderと呼ばれる新しいモジュールがDiviBuilderに追加されます。

モジュールは、左側に前の画像を表示し、右側に後の画像を表示します。 中央にスライダーバーが表示され、ユーザーはこれをつかんで一方の側からもう一方の側にスライドできます。 画像にカーソルを合わせると、ラベルの前後が表示され、オーバーレイが追加されます。 これらの各要素を設計制御できます。

スライダーの機能とオプションを見てみましょう。 これらの例では、Unsplash.comの画像を使用しています。

[コンテンツ]タブ

[コンテンツ]タブでは、前の画像、後の画像、およびラベルを追加できます。 この例では、同じ画像の2つの異なるバージョンを追加して、前と後の画像を作成しました。 これは、レタッチされた写真の結果を表示するのに役立ちます。 オプションには、標準のリンク、背景、および管理ラベルの設定も含まれます。

また、前後のラベルのテキストを変更できるフィールドもあります。 画像にカーソルを合わせてラベルを表示しています。 デフォルトではホバー時にのみ表示されますが、これは変更できます。

[デザイン]タブ

[デザイン]タブには、スライダー、ラベル、オーバーレイの設定が含まれています。 また、サイズ、間隔、境界線、ボックスシャドウ、フィルター、変換、およびアニメーションの標準設定も含まれています。

スライダー

スライダーの設定では、スライダーの方向を水平と垂直の間で選択し、開始オフセットを設定して画像のどこからスライダーを開始するかを決定し、スライダー、ハンドル、ハンドルの背景、ハンドルのアイコンの色を変更できます。 上記の例では、これらの各設定を調整しました。

ラベル

ラベルについては、常に表示するか、ホバー時にのみ表示するようにしたり、背景やフォントを調整したりできます。 背景色には、単色と不透明度の調整が含まれます。 背景を個別に調整することはできますが、テキストの色を個別に調整することはできません。 フォントを選択したり、サイズ、スタイル、配置、線の高さを変更したり、影を追加したりすることもできます。線の高さは、背景のサイズを設定します。

上記の例では、背景色とフォントの色を指定し、フォントのサイズと行の高さのサイズを変更しました。 また、ユーザーが画像にカーソルを合わせなくても表示されるように、常に表示するように設定しました。

かぶせる

オーバーレイはデフォルトで有効になっています。 無効にしたり、色を調整したり、不透明度を調整したりできます。 デフォルトの色は黒で、不透明度は50％です。

この例では青を選択し、不透明度を50％のままにしました。 ホバリング中に画像が透けて見えるようにするのが最も効果的です。 明るい色と暗い色のどちらを使用するか、および設定する不透明度の量は、画像の色とオーバーレイの使用方法によって決まります。

この例では、白黒の配色を使用しました。 オーバーレイとラベルのテキストは白で、スライダー要素は黒です。 ラベルの背景の不透明度を下げて暗くしました。 デフォルトのサイズのままにしておきます。

スライダーの例の前後のDivi先生

スライダーの使用方法とDiviレイアウト内での外観の例をいくつか見てみましょう。 Unsplashの画像と、Diviに組み込まれている無料のDiviレイアウトで利用できる画像を使用しています。 使用しているDiviレイアウトを特定します。

グラフィックの比較

これには、Divi VideoGameレイアウトパックのデザイン要素を使用しました。 オーバーレイを無効にし、スライダー要素を緑色に変更し、ラベルを常に表示するようにしました。 ラベルの背景は青一色です。 フォントサイズを大きくし、色を変更し、Rubikフォントファミリを使用し、フォントの太さを中程度にして、すべて大文字にしました。 あなたがこれらのゲームシステムを所有またはプレイしたことがあり、この作り上げられたグラフィックスの比較が存在できない理由を知っているなら、称賛に値します。

これは、レイアウト内でどのように見えるかです。 この2つの異なるゲーム機のグラフィックのモックアップのような比較を行うのに最適です。

ポートフォリオ前後のサービス

この例は、改修が行われる前後の部屋のアイデアを模倣しています。 2つの画像のサイズが異なる場合、大きい画像のサイズが使用され、小さい画像にはギャップが表示されます。 高さまたは幅を均等に配置し、残りを空のスペースとして埋めます。 この例では、右側の画像は左側の画像よりも短くなっています。 同じサイズの画像の方がうまく機能しますが、同じサイズに近い画像でもうまく機能します。

HomeImprovementレイアウトパックから色とフォントを追加しました。 レイアウトの一部でどのように表示されるかを次に示します。

オーバーレイでの外観は次のとおりです。 前の画像をもっと表示するために、スライダーを片側に移動しました。

参考までに、後の画像をより多く表示するためにハンドルを動かした画像を次に示します。

製品比較

この例では、TeaShopレイアウトの3つのお茶の画像を3つのDSB＆Aスライダーに置き換えています。 ボタンとスライダーコントロールのレイアウトの色を使用しています。 真ん中のスライダーは、違いを出すために垂直に設定されています。 オーバーレイは、不透明度を下げたレイアウトの色を使用します。

レイアウト内での外観は次のとおりです。 これは、複数の製品、複数の場所、複数の色の視覚的な詳細を比較したり、オプションの有無にかかわらず表示する複数のオプションがある製品などに最適です。

場所の比較

この例では、スライダーを使用して2つの場所を比較しています。 それらは類似している必要はなく、何らかの理由で比較するためのものです。 スライダーとラベルのレイアウト、およびラベルのフォントから色を追加しました。 また、他の画像から目立つようにボックスシャドウを追加しました。

レイアウトの色を使用したSiteseeingレイアウトパック内での外観は次のとおりです。 これは、2つの画像が同じものまたは類似したものの前後である必要がないことの良い例です。 これは、結婚式の会場や休暇の場所などを表示して、購入者がどちらかを選択できるようにするための良い方法です（または、選択を難しくしますが、目標としてはお勧めしません）。

購入

DiviMarketplaceでDiviSensei Before and AfterSliderを購入できます。 無制限のウェブサイトの使用と1年間のサポートとアップデートの費用は5ドルです。 この価格には、30日間の返金保証が含まれています。

終わりの考え

スライダーの前後のDivi先生は単純なモジュールです。 たとえば、スライダーには幅のコントロールがなく、ラベルには境界線、ボックスシャドウ、グラデーションなどが含まれていませんが、スライダーの設定により、追加したすべてのレイアウトのスタイルに簡単に合わせることができます。 価格とそれができることに関して、設定のレベルは理にかなっていて、私は簡単に欲しいデザインを手に入れることができました。

すべてのコントロールは直感的で、指示が必要だとは思いもしませんでした。 画像にさまざまなaltタグを使用して、SEOを改善することもできます。 Divi Webサイトで使用する前後のスライダーに興味がある場合は、DiviSenseiの前後のスライダーを検討する価値があります。

我々はあなたから聞きたい。 スライダーの前後でDivi先生を試しましたか？ 以下のコメントであなたがそれについてどう思うか教えてください。

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