Divi Toolboxはプラグインです 通常、CSS、JavaScript、PHP、または多くの個別のプラグインを必要とする多くの新しいエフェクトを Divi に追加します。 エフェクトは使いやすく、カスタマイズしやすく、 サイトのWeb 余分な輝きを与えて、群衆の中で目立ちます。
効果には、サイト全体の変更、新しいモバイルメニュー、パーティクルの背景、フッター、ウィジェット、スタイル、アニメーション、ヘッダー、ナビゲーション、新しいブログレイアウト、新しい場所でのDiviプレゼンテーション、ログイン画面のカスタマイズ、ポップアップなど。 多くの機能は、テーマカスタマイザーに新しく追加することでカスタマイズできます。 Divi Toolboxは、ExtraまたはDiviBuilderプラグインでは機能しません。
Divi Toolboxの一般設定
DiviToolboxオプション画面がDiviダッシュボードメニューに追加されました。 ここで設定が有効になりますが、調整はカスタマイザーで行われます。
設定 一般的な グローバルヘッダースタイル、カスタムログインページ、プロジェクトの非表示、SVGファイルタイプのアップロード権限、カスタムブラウザスクロールバー、404ページ設定（レイアウトを選択して非表示）を含めるヘッダーとフッター）とソーシャルアイコン（スタイルをアクティブにし、ファイルを開きます）。 新しいタブとアイコンを追加します）。
ソーシャルアイコンを追加すると、9つの追加ソーシャルネットワークのURLを入力できるフィールドが開きます。
これがタブです 一般的な カスタマイザーの、有効にした設定を調整できます。 設定には、ヘッダーとフォント、ブラウザーのスクロールバー、およびログイン画面が含まれます。 この例では、h1のテキストと本文にいくつかの調整を加え、スクロールバーにスタイルを追加しました。 ソーシャルアイコンも追加しました。
ログイン画面の場合、変更を行ってからログアウトするか、別のブラウザで画面を表示する必要があります。
これは、背景画像、ロゴを追加し、フィールドとテキストのサイズと色を変更した後のログイン画面です。 変更を加えている間は画面が表示されないため、少し調整が必要です。
DiviToolboxヘッダー設定
設定 ヘッダ メニューにスタイルを追加し、カスタムドロップダウンメニューをアクティブにし、CTAメニューボタンを追加し、ドッカーのロゴを変更し、オーバーレイロゴをアクティブにし、ホームページを閲覧する前にDiviレイアウトを追加します。 '前後のフォーマット。 他のページを閲覧する。
CTAメニューボタンを使用すると、CTAを最初または最後のメニュー項目に適用したり、カスタムクラスを適用したりできます。 CSSとそれを追加する場所の説明を提供します。
ヘッダーのカスタマイザーは次のとおりです。 メニューの上にレイアウトを追加しました（この例では単なるテキストモジュールですが、必要に応じて完全なレイアウトを追加できます）。 重なり合うロゴには、シャドウ効果のある四角いボックスがあります。 ロゴのサイズを200から140に変更し、ソーシャルアイコンをメインメニューに移動しました。 CSSの効果を確認できるように、[サービス]メニュー項目にカーソルを合わせます。
Diviツールボックスのフッター設定
フッター設定には、スティッキーフッター、ディスプレイフッター、メニューとウィジェットのカスタマイズ、トップに戻るボタン（カスタムボタンリンクオプションを追加）のカスタマイズ、レイアウトの前後の追加が含まれますフッター。
この例では、ヘッダーとメニューのフォントをすべて大文字に変更し、間隔を広げました。 また、ホバーの色を調整し、ホバーテキストの横にアイコンを追加しました。 レイアウトの後にレイアウトを追加しました。 これは、公開されたフッターを使用します（これが、テキストが上記のテキストモジュールの背後にある理由です）。
テキストを表示するようにページ上部のボタンのスタイルを設定しました。 シャドウ効果があり、位置を調整しました。 デフォルトの色のままにしました。 下のテキストとソーシャルアイコンを中央に配置しました。 ホバー効果には、Growを選択しました（縮小、上下移動、ぐらつき、ハートビート、ゼリー、パルスも含まれます）。
Divi Toolbox Mobileの設定
設定 携帯電話 モバイルメニューのブレークポイント（メニューがデスクトップからモバイルに変わるときの画面の正確な幅）を入力するフィールド、カスタムスタイル、ロゴの編集、ハンバーガーアイコンのクリック効果の選択を含める、ネストされたサブメニューを折りたたんでアクティブにします。 いくつかのCSSクラス。 CSSクラスを使用すると、列を反転し、テキスト、モジュール、およびボタンを中央に配置できます。
これはページのプレビューです でログイン レスポンシブが選択された Chrome。 画面サイズを980px以下にするとすぐに、選択したモバイルアイコンに変わり、選択したアニメーション付きのハンバーガーメニューが追加されました。
この画面では、背景色、ホバー背景色、モバイルメニューハンバーガーメニューをスタイリングしています。 メインメニュー項目のテキストを大文字に変更し、CTAテキスト標準のままにしました。 CTAメニュー項目の背景も変更しました。 メニューとアイコンのサイズを調整することもできます。
ブログ設定Diviツールボックス
のパラメータ ブログ サイドバーとウィジェットのカスタマイズ、メタ、アーカイブ、カテゴリページの投稿、レイアウトの選択（6つのオプションから）、アーカイブサイドバーの非表示、ボタンテキストのカスタマイズを行うことができます続きを読む。
単一の投稿の場合、サイドバー レイアウトの選択、投稿タイトルの非表示、作成者ボックスの追加、前後のリンクの追加、関連投稿の追加、カスタマイズが可能です。 フォーム コメントの。 カスタムのポスト ナビゲーション レイアウトを単一の投稿、アーカイブ、カテゴリ、作成者ページ、および検索結果ページに追加することもできます。
ブログページでは、サイドバーにシャドウエフェクトを追加し、フォントとスタイルを変更し、検索ボックスのスタイルを設定し、境界線のサイズを大きくしました。 交互のレイアウトを使用し、続きを読むボタンのテキストをカスタマイズしました。
この例はレイアウト6です。メタセクションのフォントの色を再度カスタマイズし、ホバーの色を追加しました。 [詳細]ボタンの背景もカスタマイズしました。
個々のブログ投稿では、ブログ設定で追加した各アイテムをカスタマイズできます。 この画面では、関連する記事、次と前のリンク、および作成者領域をカスタマイズします。 すべてのテキスト、色、影などを制御します。
この例では、 フォーム コメントの。 フィールドの色 (フォーカスと非フォーカス)、境界線、テキスト、色、ボタンなどを制御します。 ボタンの背景色、フィールドのフォーカス カラーを変更し、フィールドに境界線を追加し、半径を変更しました。
Divi Toolboxライセンス
XNUMXつから選択できます ライセンス :
- 通常のライセンス（プロジェクトで使用）-€49,00
- 拡張ライセンス（無制限のプロジェクトで使用）-€169,00
覚えておくべきこと
このプラグインの機能と設定の量に感銘を受けました。 Divi Builderで作成されていないブログ投稿に、同様の記事、前と次のリンク、および作成者領域を追加できるという事実が特に気に入っています。 スクロールバーもいい感じです。
ヘッダーテキストなど、Diviモジュールのいくつかの設定にアクセスできますが、それらの設定の詳細が提供されます。 さらにいくつかの調整を追加したいと思います（たとえば、コメント領域のシャドウ効果、ロゴオプションの追加、ソーシャルメディアアイコンの場所など）。
可能な限り簡単な方法でDiviに大量の新しいエフェクトを追加したい場合、Divi Toolboxは迂回する価値があります。
