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

Divi Madmenuは、Divi ThemeBuilderに新しいメニュー機能を追加するDiviのサードパーティプラグインです。 ボタン、Woocommerceショッピングカート、検索オプションを追加し、各要素の配置を調整します。 デスクトップ、タブレット、電話用の独立したメニューを設計し、ブレークポイントを設定します。 ヘッダーを固定として設定し、アニメーションを追加します。 すべての要素はカスタマイズ可能です。 この記事では、Divi Madmenuを見て、何ができるかを見ていきます。

Diviテーマビルダーを使用したDiviMadmenu

Divi Madmenuは、Diviテーマビルダーと連携するように特別に設計されました。 プラグインをインストールしたら、Divi Theme Builderに移動し、[ Add Global Header ]をクリックして、[ Build GlobalHeader ]を選択してカスタムヘッダーを作成します。

MadMenuと呼ばれる新しいモジュールがDiviBuilderに追加されているのがわかります。 これは使用する必要がある唯一のモジュールですが、さらに機能を追加したい場合は他のモジュールを使用できます。

コンテンツ

モジュールはメニューを表示し、それをカスタマイズするための多くのオプションを提供します。 Elementsを使用すると、デスクトップとモバイルのメニュー、ロゴ、検索、カート、2つのボタンなどの機能を有効にできます。 それらは異なって配置され、独立してスタイリングすることができます。

デスクトップメニューでは、表示するメニューを選択し、ブレークポイントを設定してモバイルメニューにいつ変更するかを決定し、サブメニューのアニメーションと期間を設定できます。

モバイルメニューを使用すると、モバイル用に別のメニューを選択し、サブメニューを折りたたんだり、親リンクをクリック可能にしたり、アコーディオンモードを選択したりするためのオプションを追加できます。 デスクトップメニューと同じアニメーションオプションが含まれています。

モバイルメニューの切り替えには、切り替え形式、閉じたラベルと開いたラベル、ラベルの位置などのアイコンとラベルのオプションが含まれています。

ロゴが有効になっている場合は、ロゴを選択し、リンクURLを指定して、同じウィンドウで開くかどうかを決定するオプションが表示されます。

検索が有効になっている場合は、アイコンまたは画像を選択できます。

カートの場合、アイコン、コンテンツ、またはアイコンとコンテンツの表示、画像の選択またはロゴの表示、表示オプションの選択、ライブアップデートなどを行うことができます。

ボタン1とボタン2は個別に調整されますが、オプションは同じです。 テキスト、アイコンを追加し、アイコンの配置、可視性、リンクを選択して、開く方法を選択します。 上記の例では、両方のボタンにテキストを追加し、最初のボタンにアイコンを追加しました。

設計

[デザイン]タブには、テキスト、メニュー項目、デスクトップとモバイルのメニュー、デスクトップとモバイルのサブメニュー、ロゴ、検索、カート、ボタンなどのオプションが追加されています。 それらのいくつかを見てみましょう。

レイアウト一般では、配置を選択できます。 右、左、中央、スペース-周囲、スペース-間、スペース-均等に設定します。 ドロップダウンの方向を選択し、デスクトップとモバイルの両方のメニュー順序を設定します。 この例では、配置を右に設定し、サブメニューの直接ドロップダウンを上に設定しました。

レイアウト要素を使用すると、メニュー、ロゴ、検索、カート、ボタン1、およびボタン2の配置、幅などを制御できます。

各要素には、通常メニューと固定メニューの両方の設定を含むテキストデザインオプションがあります。 アクティブなリンクの色、通常のリンクの色、フォント、フォントの太さ、サイズ、間隔などを調整します。上の例はテキスト：デスクトップメニューです。 色、フォントサイズ、間隔を変更しました。

文章

これはテキスト：デスクトップサブメニューです。 色、フォントサイズを変更し、テキストを大文字にしました。

これはテキストです：モバイルメニューの切り替え。 開いているテキストと閉じているテキストのテキストのカスタマイズを提供します。 フォントの色を変更し、サイズと文字間隔を増やしました。

これはテキストです：モバイルメニュー。 フォントの色を変更し、テキストを大文字にしました。

テキスト：モバイルサブメニューは、ドロップダウンメニューのフォントを制御します。 色を変更し、各単語の最初の文字が大きい大文字のテキストを選択し、フォントサイズを大きくして、テキストを中央に配置しました。

テキスト：ボタン1とテキスト：ボタン2には同じオプションがあり、ボタンを個別に制御します。 両方のボタンのフォントサイズを大きくし、ボタン1を大きくしました。 色も変えました。 ボタン2には、別のフォントを選択しました。

テキスト：カートは、カートコンテンツテキストのフォントを制御します。 フォントの色を変更し、サイズを大きくし、フォントを斜体にし、波状のスタイルでフォントに下線を引き、下線の色を変更しました。

メニュー

デスクトップメニュー項目を使用すると、背景、余白、パディング、コーナー、境界線、ボックスシャドウなどを制御できます。背景色を変更し、余白とパディングを追加して、メニュー項目間にスペースを追加し、コーナー、境界線を追加しました。ボックスシャドウ。

デスクトップサブメニュー項目は、メニュー項目と同じコントロールを提供します。 背景色を変更し、各アイテムの上部に境界線を追加し、ボックスシャドウを追加しました。

それぞれのアイテムを個別にスタイリングできるのが好きです。 メインメニュー、メニュー項目、検索にボックスシャドウを追加し、それらの角を丸めました。 フォントや背景の色も変更しました。

これが私のテストサイト用に作成したものです。 ボックスシャドウ、メインメニュー、検索、カート、および両方のボタンを含むロゴを追加しました。 ボタンは、白い背景と黒い境界線でスタイル設定されています。 また、レイアウトの色を使用して下の境界線を追加しました。

デモを掘り下げることで、メニューで何ができるかをよりよく理解することができます。

ディビマッドメニューデモ

プラグインには、DiviLibraryにアップロードできる10個のMadmenuデモが付属しています。 いくつかのデモでは、フォルダー内に画像があります。 それらをメディアライブラリにアップロードする必要があります。

テーマビルダーでデモを使用するには、クリックしてグローバルヘッダーを作成します。 クリックしてセクションを挿入し、[ライブラリから追加]を選択します。 これで、使用するデモを選択できます。

デモを出発点として使用して、デザインを作成したり、ロゴやメニューを追加したりできます。 背景色、ロゴオプション、検索オプション、CTAボタンをうまく利用しています。 私のテストサイトでいくつかのデモを見てみましょう。 デスクトップ、タブレット、電話のヘッダーのさまざまなデザインが含まれています。

デモ1

デモ1は、サイトのタイトル、メニュー、およびボタン1を使用します。メニューは中央揃えを使用します。 サブメニューには、リンクを区切るためのボックスシャドウと境界線を使用したスタイル設定が含まれています。 2番目のリンクにカーソルを合わせています。

モバイルはフォントのサイズを大きくし、メインメニューとサブメニューに同じスタイルを使用します。 また、開くボタンと閉じるボタンにアイコン付きのテキストを使用し、サイトのタイトルをロゴに置き換えます。

デモ2

デモ2は、ロゴを追加し、片側に境界線のある丸で囲まれたアイコン、中央に配置されたメニュー、ショッピングカート、およびボタンで検索します。 両方のボタンにソーシャルメディアのロゴが表示されます。 サブメニュー項目は、背景に依存しないスタイルです。

モバイルメニューはすべてのアイコンを中央に配置し、メニューテキストを開いているアイコンに置き換え、メニューに水色を追加します。

デモ3

デモ3では、ボタンを興味深い方法で使用しています。 ボタン1には、ログインまたは登録するためのテキストが含まれており、ホバー時に背景を削除するホバー効果があります。 ボタン2は、線で描かれたハートの画像を使用しています。

モバイルの場合、開閉ボタンにはアイコンとアイコンの下のテキストが含まれます。 ボタンのアイコンは、スペース間を使用してヘッダー全体に等間隔で配置されます。 サイトのタイトルがロゴに置き換えられ、ロゴが右に移動します。

デモ5

デモ5では、レイアウトにスペースを使用し、ボタンをCTAとして表示します。 両方のボタンは、目立つように異なる色の背景を使用しています。

モバイルメニューは、ボタンを右端と左端に配置し、アイコンを追加します。 ロゴとテキストとアイコン付きの開閉ボタンが中央に配置されています。

デモ7

デモ7では、ヘッダーの両側にボタンを配置し、メニューを中央に配置します。 ロゴはサイト名の上に配置されます。 メニューには、テキスト付きの開閉アイコンが含まれています。 ドロップダウンメニューの項目は互いに分離されているため、背景の一部が透けて見えます。

モバイル版はボタンを所定の位置に保持し、テキストをアイコンに置き換えます。 サイトのタイトルも削除されます。

デモ8

デモ8には、左側にドロップダウンメニューとタイトルが付いた太字の黄色と、右側にボタンが付いたメニューが含まれています。 各ボタンにはグラフィックが含まれています。

モバイルメニューでは、左側にボタンが配置され、右側にロゴとメニューアイコンが配置されます。

デモ10

デモ10では、背景にグラデーションを使用し、各アイコンの後ろに暗い背景を配置します。 ボタンにはテキストとアイコンが含まれます。 ドロップダウンメニューの各リンクは互いに分離されており、アクティブなリンクは暗くなります。 ロゴは左側に配置されています。

モバイルメニューは、検索アイコンを除くすべてのアイコンを削除します。 メニューが開閉アイコンに置き換わり、ロゴが中央に配置されます。 ドロップダウンメニューは同じように見えます。

DiviMadmenuを購入する

Divi Madmenuは、Divi Marketplaceで年間39ドルで購入でき、無制限の使用と1年間の更新とサポートが可能です。

終わりの考え

Divi ThemeBuilderのDiviMadmenuには多くの機能とカスタマイズがあり、必要になる可能性のあるほぼすべてのタイプのヘッダーを簡単に設計できます。 [デザイン]タブの膨大な量の調整は、最初は混乱する可能性がありますが、使い方は簡単で、何が何を制御するかを理解するのにそれほど時間はかかりません。 検索ボタンとカートボタンに画像とアイコンを追加するとともに2つのボタンを使用すると、多くのデザインの可能性が広がります。 単一のモジュールで興味深いメニューを作成することに興味がある場合は、DiviMadmenuを一見の価値があります。

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

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