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

Divi Mobileは、Divi Webサイトのカスタムモバイルメニューを簡単に作成できる、Diviのサードパーティプラグインです。 すべての設定はテーマカスタマイザーにあるため、モバイルメニューデザインのライブプレビューを見ることができます。 これは使いやすいプラグインであり、必要になる可能性のあるほぼすべてのタイプのメニューを作成できます。 このDiviプラグインのハイライトでは、Divi Mobileの機能を順を追って説明し、Diviツールボックスで必要かどうかを判断できるようにします。

デフォルトのDiviモバイルメニュー

比較のために、Diviのデフォルトのモバイルメニューを次に示します。 メニューが自動的に変わり、ハンバーガーメニューが表示されます。 メニューをクリックすると、すべてのリンクを含むドロップダウンメニューが表示されます。 これは、標準メニューとは別に調整することはできません。

テーマカスタマイザー

DiviMobileという新しいメニューがテーマカスタマイザーに追加されました。 濃い青に緑の文字が入っているので目立ちます。 すべての調整はこのメニュー内で行われます。 FinancialAdvisorレイアウトパックを使用しています。

上記の例のタブレットビューなどのモバイルビューでは、メニューは自動的にDiviMobileのデフォルト設定に設定されます。 紺色の円の中に白のハンバーガーメニューが含まれています。 色が入れ替わったDiviMobileメニューにカーソルを合わせています。

ハンバーガーメニューをクリックするとメニューが開き、横からスライドして画面全体が表示されます。 テーマカスタマイザでメニューを開いてタブを表示しました。 選択した内容に基づいて、他のアイテムが表示されます。 主な調整を見てみましょう。

メニューのスタイルと設定

メニューのスタイルと設定には、メニューを選択するためのいくつかのオプションがあります。 レイアウトオプションには、画面の外側（デフォルトのビュー）から表示されるメニュー、図形からの展開、および下部のナビゲーションが含まれます。 外画面メニュースタイルは、開いているアニメーションと完全に開いているスタイルをメニューに追加します。 3つのレイアウトには、それぞれ異なるオプションが含まれています。

上記の例は前の例と同じメニューを示していますが、メニュースタイルとしてフルスクリーンを選択しました。 プレビューモードは、デフォルトで表示されるモードを設定します。 背景が明るくなるので気に入っています。

図形から展開すると、右上隅から画面全体がカバーされます。 上から下にストレッチすることもできます。 これにより、背景の上にアイコンが追加され、上記の例のようにリンクが背景の外側に配置されます。 サークルストレッチ設定と呼ばれる別のメニューの他の設定で色とアイコンを調整できます。

下部ナビゲーションでは、画面の下部にアイコンが表示されます。 これは、下部ナビゲーション設定と呼ばれる別のメニューで調整されます。

ブレークポイントを調整することで、デスクトップにモバイルメニューを表示することができます。

カスタムヘッダー

カスタムヘッダーを使用すると、ヘッダーを完全に制御できます。 最初のセクションはヘッダーの外観です。 新しいロゴを追加し、サイズを調整し、背景色、影の長さ、ぼかしの半径、影の色などを調整します。この例では、新しいロゴを追加し、背景色を変更しました。

次のセクションは、スクロールでのヘッダーの外観です。 メニューを固定に設定し、高さ、ロゴサイズ、ハンバーガーアイコンの位置、背景色を調整します。 これらの各設定に変更を加えました。

ヘッダー要素を使用すると、ヘッダーに要素を追加し、それらの位置、サイズ、および色を調整できます。 ロゴを右に移動し、通常より少し低く設定しました（ヘッダーまたはコンテンツをオーバーラップさせたいだけ低く設定できます）。 また、WooCommerceショッピングカートを追加し、検索アイコンを有効にして左側に配置し、赤に変更してサイズを大きくしました。

バーガーメニューを選択

ハンバーガーメニューを選択すると、ハンバーガーメニューアイコンよりも多くのオプションが表示されます。 右または左に設定し、3つのアイコン（3本の線、2本の線、または3つのドット）から選択し、アニメーションスタイルを選択して、アニメーションの方向を選択します。 左側に配置して2行選択しました。

バーガーメニュー全般では、メニューの高さを調整したり、ハンバーガーアイコンの端と上部からの距離を設定したり、ホバーの不透明度を調整したりできます。 この例では、これらの各調整を変更しました。

バーガーメニューアイコンの調整により、ハンバーガーアイコンの線または点のサイズと色を、閉じた位置と開いた位置の両方で調整できます。 また、線の高さ、境界線の半径、および線の間隔を制御することもできます。 これが閉位置です。 線の色を赤に設定しました。

開いているアイコンの色をゴールドに設定しました。

これは、右側にメニューアイコンを配置し、3行を選択しました。 3本の線の色、線の高さ、境界線の半径、位置を調整しました。

テキストを追加することもできます。 水平位置と垂直位置、フォントサイズ、色、スタイルなど、テキストを完全に制御できます。 この例には、3つのドットがあるオプションが含まれています。

バーガーメニューの背景とバーガーメニューの背景の影は、Diviボタンと同様の設定を提供します。 これらには、色、幅、高さ、境界線の半径、シャドウの水平方向と垂直方向の長さ、ぼかしの半径、ぼかしの色が含まれます。 この例では、ほとんどの設定を調整して、アイコンを円ではなく正方形にしました。

レイアウトを挿入

Inject Layoutsを使用すると、Diviライブラリからレイアウトを選択して、ヘッダーのさまざまな場所に挿入できます。 メニューの上、メニューの下、またはモバイルカスタムヘッダーの上にレイアウトを配置します。

この例では、メニューの上に連絡先フォームを配置し、メニューの下に連絡先情報を配置するために使用しているレイアウトパックのセクションを追加しました。 メニューを全画面表示にして見やすくしました。

メニューの外観

メニューの外観では、背景色、リンクの配置、フォントサイズ、ファミリ、色、ホバーカラー、表示される画面の側面、およびメニュー領域の幅を変更できます。 メニューを左に移動し、背景を変更し、フォントサイズを大きくし、リンクが表示される場所の上部から位置を変更し、リンクを中央に配置しました。

これについては、メニュー領域を狭め、リンクを上げ、リンクを右揃えにし、フォントのホバーカラーを調整しました。

これでは、メニューを右に戻し、幅を広くし、テキストを左揃えにし、色を変更し、メニューの下に連絡フォームを挿入しました。

サブメニューの外観

サブメニューを表示するためのいくつかのスタイルがあります。 これは折りたたみネストスタイルです。 設定はデフォルトのままにしておきます。 外観を調整したり、境界線を削除したり、アイコンを変更したりすることもできます。

これはオーバーラップスライドインです。 フォントサイズ、色、高さ、ホバーカラー、コンテンツ領域などを調整できます。この例では、これらの設定のほとんどを調整しました。

これはサブメニュースタイルのサイドバイサイドです。 サブメニュー項目を指す矢印アイコンを配置します。 開くアイコンと閉じるアイコンの両方の高さ、位置、色などを調整できます。 開くアイコンの設定を調整しました。

スタッキングを停止します

レイアウトの挿入に関する問題の1つは、モジュールがスタックすることです。 Divi Mobileには、レイアウトに追加してスタックしないようにするDiviモジュールが含まれています。 上記の例は、積み重ねられている要素を含むレイアウトです。

モジュールを行に追加するだけです。 他に何も必要ありません。

列はスタックしなくなりました。 レイアウトによっては、メニューの幅を調整して、すべてを希望どおりに調整する必要がある場合があります。 また、他のメニューレイアウトやデザインでも機能します。 これはメガメニューを作るのに最適な方法です。

購入場所

Divi Mobileは、開発者のWebサイトから入手できます。 選択できるライセンスは複数あります。

年間

• 1サイト£12
• 2〜5サイト£36
• 無制限の£64

一生

• 1サイト£40
• 無制限の£196

1年間のサポートが含まれます。 ライセンスがWebサイトでアクティブ化されている限り、更新を取得します。

終わりの考え

これがDiviMobileプラグインの外観です。 これは、モバイルメニューを設計するための優れたプラグインです。 私はそれで何ができるかという表面をかじっただけです。 それは使いやすく、選択できる多くの調整があります。 テーマカスタマイザーを使用して変更をライブで確認できるのが気に入っています。

変更を確認するためにページを保存して再読み込みしなければならないことが何度かありましたが、それが私のサーバーであった可能性があります。 標準のDiviコントロールと同じように、デフォルト設定に簡単に戻れるように、デフォルトのリセットボタンが必要です。 ただし、これは必要ない場合があります。

私はDiviMobileで何ができるかに感銘を受けました。 カスタムモバイルメニューを作成するためのDiviプラグインに興味がある場合は、DiviMobileを一見の価値があります。

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

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