Diviプラグインのハイライト–Diviスイッチ

Divi Switchは、Diviのサードパーティプラグインであり、スイッチを押すだけでオンとオフを切り替えることができる多くの新機能をDiviに追加します。 Diviコミュニティの多くは、Divi Switchが数年前から存在していることを知っていますが、3.0アップデートにより、一見の価値のある多くの新機能と改善がもたらされました。 これらの新機能には、新しいダッシュボード、インポートとエクスポート用のミニプラグイン、プリローダー、新しいテーマカスタマイザー設定、ロゴのカスタマイズ、レイアウトが組み込まれたカスタム404とメンテナンスページ、SVG画像のサポートなどがあります。

この記事では、新しいDivi Switchを見て、更新された機能セットに細心の注意を払います。

Diviスイッチのインストール

他のプラグインと同じように、DiviSwitchをアップロードしてアクティブ化します。 次に、新しいタブがダッシュボードのDiviテーマオプションメニューにDiviSwitchと呼ばれるように追加されます。 ライセンスキーを入力し、プラグインをアクティブ化します。 タブには、新しい直感的なダッシュボードが表示されます。

Diviスイッチダッシュボード

Divi Switchが再設計され、すべての設定が管理メニューの別の場所からDiviテーマオプションページに移動されました。 スイッチ自体は、Diviテーマオプションの新しい「Diviスイッチ」タブの下のサブタブに分散されています。

各トグルには、タイトル、簡単な説明、およびデフォルトで「無効」に設定されているシャドウアウトスイッチがあります。 エフェクトを有効にする場合は、スイッチをクリックするだけで「有効」に切り替わります。 青色に変わり、アクティブになったことを示します。

機能の説明を表示するには、エフェクトにカーソルを合わせたときに右側に表示される疑問符を選択します。

いくつかのタブを見て、何ができるか見てみましょう。

ヘッダ

[ヘッダー]タブには、8つのスイッチとカスタマイズが追加されています。 ヘッダーの下線を削除したり、電話番号をクリック可能にしたり、新しいタブでソーシャルリンクを開いたり、上部のヘッダーアイテムを中央に配置したり、スクロールで別のロゴを使用したり、ハンバーガーメニューのテキストを変更したり、ページ固有のロゴを使用したり、 Diviレイアウトのフルスクリーンメニュー。

ロゴのカスタマイズ

Diviテーマには、すべてのページまたは投稿に表示できるカスタムロゴを設定する機能があります。 しかし、サイトで異なるロゴを使用する必要がある場合はどうなりますか？ Divi Switchにはいくつかのロゴオプションが追加されているため、表示するロゴが増え、ロゴの表示方法と場所を制御できます。 設定により、スクロールで別のロゴを選択したり、特定のページに別のロゴを設定したりできます。

巻物の異なるロゴ

スクロールに新しいロゴを表示するには、設定画面にロゴをアップロードするだけです。 訪問者がスクロールすると、代替ロゴが表示されるようになりました。

ページ固有のロゴ

ページ固有のロゴを使用すると、Webサイト上のロゴが1つだけに制限されません。 必要な数のロゴを設定でき、どのロゴをどのページに表示するかを完全に制御できます。

設定でページ固有のロゴを有効にしている場合は、ページと投稿のコンテンツ領域の下部に新しい機能が追加されます。 ホームページに別のロゴを設定し、他のページや投稿に別のロゴを設定できるようになりました。 ここでは、そのページまたは投稿に表示するロゴをアップロードするだけです。

この例では、さまざまなページを示しています。各ページには、サイトのロゴのバリエーションが表示されています。

フルスクリーンメニュー

ヘッダーには、いくつかのメニューのカスタマイズもあります。 この例では、ハンバーガーメニューのテキストを変更し、フルスクリーンメニューのレイアウトを選択しました。

これが新しいテキストのハンバーガーメニューです。

ハンバーガーメニューをクリックすると、全画面メニューが開き、選択したDiviレイアウトが表示されます。 半透明なので、バックグラウンドでウェブサイトを見ることができます。 また、閉じるボタンが含まれています。

フッター

[フッター]タブでは、箇条書きを削除したり、下部のフッターを非表示にしたり、フッターが浮かないようにしたり、フッターをDiviレイアウトに置き換えたりすることができます。

このレイアウトは、[フッター]タブで選択するだけで、すべてのページのフッターに追加されました。

メインコンテンツ

[メインコンテンツ]タブには、11個のスイッチとカスタマイズが追加されています。 分割サイドバーラインを削除し、ホームページプリローダーを追加してタイプと色を設定し、ポートフォリオ画像の比率を変更し、ライトボックスで画像が開かないようにし、スライダーアニメーションを調整し、プロジェクトの投稿タイプを削除し、カスタムメンテナンスページを追加します。カスタム404ページを追加します。

プリローダー

プリローダーを有効にすると、ホームページの読み込み中にアニメーションアイコンが表示されます。 これは、ページの実際のコンテンツがバックグラウンドで読み込まれている間に何かが起こっていることを訪問者に示すのに最適です。 15のトランジションタイプと2つのカラーオプションがあります。

これは、ページの読み込み中にプリローダーがWebサイトでどのように表示されるかの例です。

カスタム404とレイアウト付きのメンテナンスページ

これらの機能を使用すると、ページのリストから任意のメンテナンスページと404ページを選択できます。 これは、作成したレイアウトまたはDiviライブラリにインポートしたレイアウトを使用してページを作成できることを意味します。

これを支援するために、Divi Switchには、デフォルトで簡単にカスタマイズおよび設定できる10個の事前に設計されたレイアウトを備えたプレミアム404ページおよびメンテナンスページレイアウトパックが含まれています。 それらはJSON形式です。 上の画像は404ページの1つです。

レイアウトは専門的に設計されているため、404ページとメンテナンスページは有益であるだけでなく魅力的でもあります。 この例は、メンテナンスページの1つです。 カウントダウンタイマーが含まれています。

モバイル

[モバイル]タブでは、画像サイズごとにブレークポイントを設定できます。 ブレークポイントを変更する値の数値を入力します。 モバイルでメニューを折りたたんで、特定のテキストを表示することもできます。

投稿

投稿にはクールなコメント機能があります。 これにより、コメントがトグルに移動し、デフォルトで非表示になります。

これは閉じたトグルです。 コメントが通常表示される投稿の下部に配置されます。

クリックして開き、コメントを表示します。 これは標準のWordPressコメントフォームです。

Diviコメントモジュールをレイアウトに追加すると、モジュール設定を使用してスタイルを設定できます。 トグル内に配置されたままで、デフォルトで閉じられています。

アーカイブ

[アーカイブ]タブでは、アーカイブページ（タグ、カテゴリ、作成者、検索などのページ）を制御できます。 カテゴリタイトルを追加し、サイドバーを削除し、続きを読むリンクを追加し、投稿の下に区切り線を追加します。

これは、すべてのアーカイブスイッチが有効になっている作成者ページの例です。

統合

[統合]タブでは、メインコンテンツの前、メインコンテンツの後、投稿コンテンツの前など、特定の場所にDiviレイアウトを挿入できます。 ドロップダウンリストからレイアウトを選択します。

テキストモジュールだけを使って全幅のバナーを作成し、コンテンツの前に挿入しました。 もちろん、任意のタイプのレイアウトを作成できます。 これは、CTAや特別メニューを作成するのに最適な方法です。

高度

[詳細設定]タブでは、スケーラブルベクターグラフィックス（SVG）をアップロードして、より鮮明なロゴ、アイコン、その他の画像を表示できます。 WordPressはデフォルトでSVGをブロックするため、これはDiviでこの画像形式を使用するための優れた方法です。

インポート・エクスポート

[インポート/エクスポート]タブでは、Divi Switchによって生成されたコードを軽量のカスタムブランドのプラグインにエクスポートして、クライアントのサイトにインストールできます。 これにより、Divi Switchプラグイン自体をインストールしてセットアップしなくても、お気に入りのDiviSwitchコードを簡単に使用できます。 プラグインの名前を入力し、説明を入力し、作成者情報を追加し、プラグインのバージョンを指定して、[プラグインのエクスポート]を選択します。

これで、他のプラグインと同じように、ブランド化されたプラグインをクライアントのサイトにアップロードできます。 それはあなたのブランディングになります。

テーマカスタマイザー

Divi SpaceSettingsという新しいタブがテーマカスタマイザーに追加されます。 ここには、DiviSwitchという別のタブがあります。 テーマカスタマイザーには、モバイルメニューのカスタムアイコンの作成、ヘッダーの背景画像の変更、トップボタンへのカスタマイズ、アーカイブページのカスタマイズをすべてライブプレビューで行うための追加設定が含まれています。

この例では、ヘッダーに背景画像を追加しました。 繰り返すように設定したり、画像の位置を変更したり、画像のサイズを変更したりできます。 この設定の上には、モバイルメニューのアイコンを選択できる選択領域があります。

この例では、レイアウトに合わせて[戻る]から[上へ]ボタンを調整しています。 アイコンのサイズ、半径、位置、背景色、アイコンの色、ホバーの色を調整できます。

この例では、アーカイブページのセパレータの色、高さ、幅を調整しています。 これらの例では、下にスクロールするとロゴが変更されていることにも気付くでしょう。 私はまだロゴスワップ設定をアクティブにしています（まあ、実際には「切り替えられている」と思います）。

ライセンス

Divi Switchには、次の3つのライセンスから選択できます。

• 単一サイト– $ 24
• 3サイト– $ 50
• 無制限のサイト– $ 96

Divi Switchは、Divi SpaceMembershipsプランでもご利用いただけます。

終わりの考え

DiviSwitchの新機能に感銘を受けました。 CSSクラスを貼り付ける必要がなく、新しいダッシュボードは歓迎すべき機能です。 ロゴオプション、プリローダー、ミニプラグイン、カスタム404ページとメンテナンスページは、それ自体でDiviに多くのことを追加します。 Diviレイアウトを挿入し、カスタムフッターを選択する機能が好きです。 また、ヘッダーに画像を追加してカスタマイズし、[戻る]ボタンの色、形、位置を変更するテーマのカスタマイズ機能も気に入っています。

Divi Switchは、Diviに多くの機能を追加します。 私はそれらのすべてが使いやすいと思いました。 可能な限り最も簡単な方法で追加できる多くのカスタマイズを探しているなら、DiviSwitchがあなたが探しているものかもしれません。

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

Oleh Donets /shutterstock.comによる注目の画像