Diviプラグインのハイライト：Divi Toolbox

Divi Toolboxは、通常CSS、JavaScript、PHP、または多くの個別のプラグインを必要とする多くの新しい効果をDiviに追加するサードパーティのプラグインです。 エフェクトは使いやすくカスタマイズが簡単で、DiviWebサイトに群衆から目立つように特別な輝きを与えます。

効果には、サイト全体の変更、新しいモバイルメニュー、パーティクルの背景、フッター、ウィジェット、スタイリング、アニメーション、ヘッダー、ナビゲーション、新しいブログレイアウト、新しい場所でのDiviレイアウト、ログイン画面のカスタマイズ、ポップアップなどが含まれます。 機能の多くは、テーマカスタマイザーに新たに追加してスタイルを設定できます。 Divi Toolboxは、ExtraまたはDiviBuilderプラグインでは機能しません。

DiviToolboxの一般設定

Diviツールボックスオプション画面がDiviダッシュボードメニューに追加されました。 ここで設定が有効になりますが、調整はカスタマイザーで行われます。

一般設定には、グローバル見出しスタイル、ログインページのカスタマイズ、プロジェクトの非表示、SVGファイルタイプのアップロードの許可、カスタムブラウザスクロールバー、404ページ設定（レイアウトを選択してヘッダーとフッターを非表示）、ソーシャルアイコン設定（スタイルを有効にし、で開く）が含まれます新しいタブ、およびアイコンを追加します）。

さらにソーシャルアイコンを追加すると、さらに9つのソーシャルネットワークのURLを入力できるフィールドが開きます。

これがカスタマイザーの[全般]タブで、有効にした設定を調整できます。 設定には、見出しとフォント、ブラウザのスクロールバー、およびログイン画面が含まれます。 この例では、h1と本文のテキストにいくつかの調整を加え、スクロールバーにスタイルを追加しました。 ソーシャルアイコンも追加しました。

ログイン画面の場合は、変更を加えてからログアウトするか、別のブラウザで画面を表示する必要があります。

これは、背景画像とロゴを追加し、フィールドとテキストのサイズと色を変更した後のログイン画面です。 変更を加えると画面が表示されないため、少し調整が必要です。

DiviToolboxヘッダー設定

ヘッダー設定は、メニューにスタイルを追加し、カスタムドロップダウンメニューを有効にし、CTAメニューボタンを追加し、固定メニューのロゴを変更し、重複するロゴを有効にし、ホームページのナビゲーションの前にDiviレイアウトを追加し、前後のレイアウトを追加します他のページのナビゲーション。

CTAメニューボタンを使用すると、CTAを最初または最後のメニュー項目に適用したり、カスタムクラスを適用したりできます。 CSSとそれを追加する場所の説明を提供します。

これがヘッダーのカスタマイザーです。 メニューの上にレイアウトを追加しました（この例では単なるテキストモジュールですが、必要に応じて完全なレイアウトを追加できます）。 重なり合うロゴには、影の効果のある四角いボックスがあります。 ロゴのサイズを200から140に変更し、ソーシャルアイコンをメインメニューに移動しました。 CSSの効果を確認できるように、[サービス]メニュー項目にカーソルを合わせます。

DiviToolboxフッター設定

フッターの設定には、スティッキーフッター、フッターの表示、メニューとウィジェットのカスタマイズ、トップに戻るボタンのカスタマイズ（カスタムボタンリンクオプションの追加）、フッターレイアウトの前後の追加が含まれます。

この例では、ヘッダーとメニューのフォントをすべて大文字に変更し、間隔を広げました。 また、ホバーの色を調整し、ホバーのテキストの横にアイコンを追加しました。 フッターレイアウトの後にレイアウトを追加しました。 これは公開されたフッターを使用します（そのため、テキストはその上のテキストモジュールの後ろにあります）。

テキストを表示するように、[トップに戻る]ボタンのスタイルを設定しました。 影の効果があり、位置を調整しました。 色はデフォルトのままにしました。 下部のテキストとソーシャルアイコンを中央に配置しました。 ホバー効果として、Growを選択しました（縮小、上への移動、下への移動、ぐらつき、ハートビート、ゼリー、パルスも含まれます）。 効果を確認できるように、Facebookアイコンにカーソルを合わせています。

DiviToolboxモバイル設定

モバイル設定には、モバイルメニューブレークポイント（メニューがデスクトップからモバイルに変わるときの正確な画面幅）、カスタムスタイル、ロゴの変更、ハンバーガーアイコンのクリック効果の選択、ネストされたサブメニューの折りたたみ、および有効化を行うためのフィールドが含まれますいくつかのCSSクラス。 CSSクラスを使用すると、列を逆にして、テキスト、モジュール、およびボタンを中央に配置できます。

レスポンシブが選択されたGoogleChromeのページを見てみましょう。 画面サイズが980ピクセル未満になるとすぐに、選択したモバイルアイコンに変わり、選択したアニメーション付きのハンバーガーメニューが追加されました。

この画面では、モバイルメニューの背景色、ホバー背景色、ハンバーガーメニューのスタイルを設定しています。 メインメニュー項目のテキストをすべて大文字に変更し、CTAテキスト標準のままにしました。 CTAメニュー項目の背景も変更しました。 メニューとアイコンのサイズを調整することもできます。

DiviToolboxブログ設定

ブログ設定では、サイドバーとウィジェット、投稿メタ、アーカイブとカテゴリページをカスタマイズし、レイアウトを選択し（6つのオプションから）、アーカイブサイドバーを非表示にし、続きを読むボタンのテキストをカスタマイズできます。

単一の投稿の場合、サイドバーレイアウトの選択、投稿タイトルの非表示、作成者ボックスの追加、前と次のリンクの追加、関連する投稿の追加、コメントフォームのカスタマイズを行うことができます。 ナビゲーション後に、単一の投稿、アーカイブ、カテゴリ、作成者ページ、および検索結果ページにカスタムレイアウトを追加することもできます。

ブログページでは、サイドバーに影の効果を追加し、フォントとそのスタイルを変更し、検索ボックスのスタイルを設定して、境界線のサイズを大きくしました。 交互のレイアウトを使用し、続きを読むボタンのテキストをカスタマイズしました。

この例はレイアウト6です。メタフォントの色を再度カスタマイズし、ホバーカラーを追加しました。 続きを読むボタンの背景もカスタマイズしました。

個々のブログ投稿では、ブログ設定で追加した各要素をカスタマイズできます。 この画面では、関連する投稿、次と前のリンク、および作成者ボックスをカスタマイズしています。 すべてのテキスト、色、影などを制御できます。

この例では、コメントフォームをカスタマイズしています。 フィールドの色（フォーカスと非フォーカスの両方）、境界線、テキスト、色、ボタンなどを制御できます。ボタンの背景色、フィールドのフォーカス色を変更し、フィールドに境界線を追加し、半径。

Diviツールボックスモジュールの設定

[モジュール]タブには、マウスのフォロー効果を追加する設定、スリムなメールオプトイン（3つの異なるオプションのCSSを提供）、セカンダリボタン（カスタマイズの新しいレイヤーを追加）、および多くの調整を追加する設定があります。

微調整には、アコーディオンおよびトグルモジュール用のアニメーション化された三角形アイコン、価格表の水平下の境界線とパディングの削除、証言のコンテンツの下へのポートレート画像の移動、水平スクロールバーの非表示、列の垂直方向の配置と高さの変更のためのCSSの追加が含まれますビューポートの高さの100％までの任意の要素の。

スリムなメールオプトインを見てみましょう。 すべてのフィールドを1行に配置します。 この例では、セカンダリボタンも使用しています。 これらの変更を取得できるのは、CSSクラスを追加したボタンだけです。 CSSクラスを使用するということは、2つのグローバルボタンスタイルがあることを意味します。

Divi ToolboxExtras設定

[エクストラ]タブには、プリローダー、ポップアップ、パーティクルの背景、3D傾斜効果、モジュールの視差スクロールが含まれています。

選択できるプリローダーは12個あります。 必要に応じてホームページにのみ表示するようにし、遷移の種類と速度を選択することができます。 セレクター画面には、プリローダーのアニメーションが表示されます。 テーマカスタマイザーでさらにカスタマイズできます。

メニュー項目、ボタン、テキスト内のリンクなどからの任意のリンクでポップアップをトリガーします。必要な数だけ作成します。 ポップアップ用に事前に作成されたレイアウトを選択します。 カスタマイザーで背景と閉じるボタンをカスタマイズします。

これは動く粒子です。 色、形状、粒子数、速度、サイズ、線のサイズ、不透明度、および対話性を完全に制御できます。 パーティクルには2つのCSSIDがあり、2つの異なるデザインを使用できます。

傾斜機能を見てみましょう。 傾き、遠近法、スケール、速度、グレアを調整できます。 任意のセクション、行、またはモジュールに追加します。

DiviToolboxライセンス

選択できるライセンスは2つあります。

• 通常ライセンス（1つのプロジェクトで使用）–€49.00
• 拡張ライセンス（無制限のプロジェクトで使用）–€169.00

終わりの考え

このプラグインの機能と設定の量に感銘を受けました。 私は特に、Divi Builderで作成されていないブログ投稿に、関連する投稿、前のリンクと次のリンク、および作成者ボックスを追加するのが好きです。 スクロールバーもいい感じです。

ヘッダーテキストなど、Diviモジュールで取得できる設定がいくつかありますが、これにより、これらの設定の詳細が提供されます。 さらにいくつかの調整を追加してほしい（たとえば、コメントボックスの影の効果、ロゴオプションの追加、ソーシャルメディアアイコンの配置など）。

可能な限り最も簡単な方法でDiviに大量の新しいエフェクトを追加することに興味がある場合は、DiviToolboxを一見の価値があります。

我々はあなたから聞きたい。 Divi Toolboxを試しましたか？ 以下のコメントであなたの経験について教えてください。

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