Mega Menuを使ってヘッダーを超強化する【Elementor】

アップデートにより、MegaMenuが作れるようになりました。

今回はその作り方を教えます。

※Elementor Pro向けの記事になっています。

デモサイト のようなメガメニューが作れます。

 

MegaMenuの作り方

Elementorの設定を行う

管理画面から「Elementor」→「設定」「Features」タブ→「メニュー」を「有効」にします。

そうすると、Elementor編集画面を開くと「メニュー」というウィジェットが利用可能になります。

メニューウィジェットを使う

Theme Builderのヘッダーテンプレートなどで、Elementor編集画面を開いたら、

メニューウィジェットをコンテナに入れてください。

 

項目は何個でも追加できます。

項目の設定は、タイトル、リンクをつけましょう。また、ドロップダウンコンテンツをONにすることでメガメニューが使えます。

メガメニューのドロップダウンを編集する

プレビュー画面の項目をクリックして、+アイコンをクリックすることで、通常のコンテナ編集が可能になります。

これは最近アップデートされて使いやすくなったタブと同じですね。

【新機能】Elementorタブを超活用する【Nested Tabs 】

なぜかドロップダウン内の大きいコンテナがコピーできないので、その辺は手作業でいきましょう。不具合でしょうか。

ドロップダウン内のコンテナは「全幅」VW「100」にすると綺麗に全部表示されます。

 

デモサイト

 

 

まとめ

これまでElementorに高品質なMegaMenuを搭載するのには有料プラグインが必要でした。

この新しいアップデートによりコンテナ編集ができるようになったので、ヘッダーメニューの幅が広がりましたね。

ECサイトで重宝されそうです。

関連する記事があります。
【簡単な方法で】Elementorでハンバーガーメニューの作り方解説
【新機能】Elementorタブを超活用する【Nested Tabs 】
無料のLINE相談をしましょう!

・Elementorの操作がわからない
・プラグインの使い方がわからない
・おしゃれなCSSを教えて欲しい
・Wordpressで出来るSEO対策を教えて欲しい

などなどご自由にご相談ください。
メッセージ、LINE電話、画面共有など最適な方法で解決します。
2023年内は無料で相談ができます。

Elementor大学

プロのWebデザイナーからElementorの使い方を学べる場所です。2022年に建立。

講師:Elementorで企業サイトの制作・監修200社以上、個人サイト制作100本以上達成!

カスタマイズの依頼も随時受け付けています。TwitterのDM、フォームから送れます。

人気記事ランキング

1位

人気記事

学習カテゴリー
Elementor大学

プロのWebデザイナーからElementorの使い方を学べる場所です。2022年に建立。

講師:Elementorで企業サイトの制作・監修200社以上、個人サイト制作100本以上達成!

カスタマイズの依頼も随時受け付けています。TwitterのDM、フォームから送れます。