サイト内検索

Elementorでメガメニューを作る方法(プラグイン不要)

Elementorのメガメニューは今までは他のプラグインに頼ってましたが、遂にElementor Proさえあればそれが使えるようになりました!

Elementorのことをもっと学びたい人は、どうぞElementorの使い方完全ガイドを見てください。
様々なElementorに関する情報がまとめられています。

Elementorのメガメニュー機能を有効化する

メガメニューは今はまだ隠された機能なので、有効化する必要があります。

Elementorのメガメニューを作るには実験機能を有効化する必要がある

まずはElementorの設定からFeaturesに行きます。

必要な機能を有効化

ElementorのFlexbox Containerの有効化
ElementorのNested Elementsの有効化

まずこの二つを有効化します。

  • Felxbox Container
  • Nested Elements
Elementorのメニューの有効化

そうしたら最後に「メニュー」を有効化します。
これでメガメニューが有効化されます。

実際にElementorでメガメニューを作る

ElementorのWordPress Menuと新しいメニューウィジェット

メガメニューを有効化すると「メニュー」というウィジェットが追加されます。
これがメガメニューウィジェットです。

新しいメニューウィジェットはWordPressのメニューと繋がってない

今までのメニュー系のウィジェットは全てWordPressのメニューでメニューを作りそれを使うという方法がとられていましたが、新しいメニューウィジェットは完全にWordPressのメニューを無視して好きなようにメニューを作れます。

Elementorのビルダーから離れる必要はありません。

ページに追加するとこのように三つのメニューアイテムが追加されます。

Elementorのメニューウィジェットを挿入したばかりの画面

それぞれのメニューアイテムを開くと次のような項目があります。

  • タイトル
  • リンク
  • Dropdown Content
  • アイコン
  • CSS ID
Elementorのメニューウィジェットのレイアウトの一つ一つのメニューアイテムのオプション

メガメニューを有効化するにはDropdown Contentを有効化する

ElementorのメニューウィジェットのDropdown Contentを有効化する

Dropdownって一見サブメニューのことかなって思っちゃいますが、これがメガメニューを有効化するスイッチです。

Dropdown ContentをONにするとリンクの横に三角のアイコンが出てきます。

Elementorのメニューウィジェットのリンクの横に三角のアイコンが出てくる

そのアイコンをクリックすると、アイコンの向きが変わりそのすぐ下にコンテナが表示されます。

Elementorのメニューウィジェットのリンクのアイコンをクリックすると、コンテナが出てくる

このコンテナがメガメニューの中身のコンテンツ

このようにプラスボタンを押すと、コンテナの構造が選べ、通常のコンテナであることがわかると思います。

Elementorのメニューウィジェットのリンクのアイコンをクリックすると、コンテナが出てくる

ここに好きなものを入れてみましょう。

Elementorのメニューウィジェットのリンクのアイコンをクリックすると、コンテナが出てきて自由に作ることができる

こんな感じでギャラリーを入れてみました。

実際のサイトを試してみてください。
ホバーでメガメニューが出てきますよ!

メガメニューをフェードインで出す

ElementorのメガメニューのDropdown Effectの設定でアニメーションをFade Inに設定

『コンテンツ→Dropdown Effect』のアニメーションをFade Inに設定するとメガメニューがフェードインで出てくるようになりますよ。

結構簡単にメガメニューが作れるようになりましたね。
是非試してみてください!

Elementorのことをもっと学びたい人は、どうぞElementorの使い方完全ガイドを見てください。
様々なElementorに関する情報がまとめられています。

Naomiです

このサイトを運営してるナオミです。エンジニア歴13年、海外在住歴18年です。
WordPressの情報やハッキングを防ぐ脆弱性の情報と自分の海外での生活の一部を無料のメルマガで配信しています。

目次

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

YouTubeライブでElementor 3.14の新機能を紹介中です!

WordPressの最新情報が
毎週届く無料メールマガジン

DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。

管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通