Diviプラグインのハイライト– Tilt BlurbDiviモジュール

公開: 2017-08-13

宣伝文句はDiviレイアウト内で人気があります。テキスト、画像、アイコンなどが表示されるため、製品やサービスを紹介するのに最適です。それらをもっと目立たせて、いくつかの興味深いホバーアニメーションを提供したい場合はどうなりますか？一般的なアニメーションはCSSを介して実行できますが、何か別のものが必要な場合はどうでしょうか。 Tilt Blurb DiviModuleと呼ばれるプラグインがあなたが探しているものかもしれません。

ティルト宣伝文モジュールとは何ですか？

Tilt Blurb Moduleは、Hadwormのサードパーティプラグインであり、Divi Builder（DiviとExtraの両方）に新しいblurbモジュールを追加して、興味深い傾斜効果を追加し、3Dの外観を作成します。このプラグインのハイライトでは、モジュールを見て、何ができるかを見ていきます。いくつかのgifを表示しましたが、ほとんどはgifのファイルサイズのために画像になります。例の画像は、Unsplash.comおよびWordPress.orgから取得されています。

Tilt BlurbDiviモジュールのインストール

通常どおりプラグインをアップロードしてアクティブ化します。ダッシュボードメニュー内のプラグインリンクには、タイル宣伝文ライセンスと呼ばれる新しいアイテムがあります。これをクリックし、ライセンスキーを入力して、変更を保存します。これにより、更新を確実に取得できます。

TiltBlurbと呼ばれる新しいモジュールがDiviBuilderに追加されます。 Divi Builder内では紫色になっているので、見逃すことはありません。開発者がモジュールに異なる色を使用して、標準のモジュールから目立つようにするのが好きです（その価値のために）。

このモジュールには、標準のタブと新しいタブが含まれています。

コンテンツ–テキスト、リンク、画像とアイコン、背景、管理ラベル
傾斜設定–傾斜設定、傾斜背景、傾斜レイヤー
デザイン–画像とアイコン、テキスト、ヘッダーテキスト、本文テキスト、境界線、サイズ変更、間隔
高度– CSS IDとクラス、カスタムCSS、アニメーション、可視性

傾斜設定

これらの例では、背景を追加し、その上に前景として小さな画像を配置して、3D効果を作成しました。そしてコーヒーを作りました。たくさんのコーヒー。

デフォルト設定の例

微調整前の3Dチルトの例を次に示します。タイトル、テキスト、背景、アイコンを追加しました。傾きはマウスに追従し、テキストとアイコンを画像とは別に設定して3Dの外観にします。私にとって視差効果は背景を取り除いたので、私はそれを使用しませんでした。

画像付きサイズ

これにより、非表示の画像を使用して宣伝文のサイズが変更され、コンテンツが中央に配置されます。

フロートコンテンツを含む2つの画像を含む宣伝文句のサイズを傾ける

これには2つの画像が含まれています。1つは前景用、もう1つは背景用です。前景の画像とテキストは、フロートコンテンツ機能を使用して3Dで表示されます。

ズームのように機能するフロートの量を調整して、前景のコンテンツをリーダーに近づけることができます。この画像は、最大のフロート量に200を使用しています。

傾斜量

傾斜量スライダーを使用すると、画像をどれだけ傾斜させるかを制御できます。デフォルト設定は20です。これは100を使用します。

傾斜の視点

ティルトパースペクティブはパースペクティブを深めます。数値が小さいほど、視点が深くなります。デフォルトは1000です。この例は200です。

チルトスケール

チルトスケールはズームレベルです。デフォルトは1.1です。これは、ホバーすると画像に1.1が掛けられることを意味します。この例は2です。0になりますが、0レベルでは、この画像では機能しない連続的な前後ズームが作成されました。やりたいことを実行するには、ある程度の実験が必要になる場合があります。

傾斜速度

傾斜速度は、ホバーしたときに画像が移動する速度を制御します。数値が小さいほど、動きが速くなります。デフォルトは100です。これは5000です。私は遅い効果に部分的です。

チルトリバース

チルトリバースは、チルトの方向を変更します。通常、傾きはマウスから離れます。逆方向に画像をマウスに向けて傾けます。

ティルトグレア

チルトグレアは、マウスに続くグレア効果を追加します。グレア量は調整可能です。上の画像は、デフォルト設定である.8を使用しています。これは、照明効果を作成するのに最適です。

境界半径

Border Radiusは、境界線の形状を変更します。デフォルトは40です。これは最大量である100に設定されています。

傾斜の背景

背景を傾けると、背景色と境界線の効果を設定できます。

傾斜の背景

傾斜背景色の副作用の1つは、画像の周囲に素敵な輝きを与えることです。

傾斜の背景色、境界線の幅、背景の境界線のスタイル、境界線の幅、境界線とボックスの影の色を調整します。

傾斜背景距離

傾斜背景距離は、影の距離を調整します。デフォルトでは-50に設定されています。この例では-25を使用しています。

この例では、背景の傾斜距離0と不透明度.3を使用して、背景の上にオーバーレイを作成します。

傾斜背景のサイズ/スケール

傾斜背景のサイズ/スケールは、傾斜背景の距離を変更します。デフォルトは1.04です。これは1.2です。

傾斜層

Tilt Layersは、同じ画像を複数のレイヤーとして何度も適用し、立体的な3D効果を作成します。画像や背景色を使用したり、レイヤーの深さを調整したりできます。上の画像をレイヤーの深さ50で適用しました。

私が適用した画像は、ここでは境界線として表示されます。見やすくするために傾斜量を調整しました。

予想通り、画像の下部は異なって見えます。これは、境界線にテクスチャを追加するための優れた方法です。レイヤーの深さが浅いほど、境界線が薄くなります。

これは10の層の深さを使用します。

この例では、傾斜背景と傾斜レイヤーの両方を使用しています。

これは、クリスタルに包まれているように見える3DWordPressロゴです。ロゴを画像とアイコンの画像領域にアップロードし、傾斜量を100に設定し、デフォルトの傾斜グレアを使用し、傾斜レイヤーの下のレイヤー画像にロゴを追加し、レイヤーの深さを50に設定し、レイヤーの色を白に設定しました。ほぼ完全に透明です。

こちらがレイヤーカラーのないロゴです。側面が見えにくいです。

ライセンス、サポート、およびドキュメント

プラグインはあなたとあなたのクライアントのために無制限のウェブサイトで使用することができます。 6か月のサポートが含まれます。ドキュメントは開発者のWebサイトで提供されています。これには、Webサイトに表示されているいくつかの例を作成する方法の説明が含まれています。ロゴの作り方など、もっと例を見てみたいです。

最終的な考え

Tilt Blurb Moduleは、多くの興味深い傾斜効果を提供し、画像、アイコン、およびテキストに見栄えの良い3D外観を作成します。これは、CTA、3Dブックカバー、および製品画像を作成するための優れた方法です。 Tilt Blurb Moduleは、革新的で直感的です。宣伝文句に素敵な宣伝文句を追加したい場合は、宣伝文句モジュールを一見の価値があります。

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

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