エレメンターのメガメニューを実装してみた

私はいつもワードプレスでサイトを作る時には、Elementorという無料のプラグインを使っています。Elementorはコーディング無しで直感的なデザインを実装することが可能です。

今日は練習がてら、私のElementorで作ったポートフォリオにElements Kitを導入してメガメニューを実装してみました。↓こんな感じです。従来のメニューをクリックしてカテゴリーが下にニョキッと出てくるのでは無く、メニューをホバーするだけでこの大きなカテゴリースクリーンが出てきます。先日投稿した日本のコーポレートサイトについての記事でも思いましたが、最近は多くの企業がこのメガメニューを取り入れています。

Elements Kit プラグインを追加する

Elementorの機能をさらに拡張する「Elements Kit」 という無料アプリを入れることで、ウィジットが増えたりモダルを作ったりと、できることが広がります。プラグイン追加後からの、メガメニューを入れるまでの簡単な導入の流れを書き残したいと思います。

外観のメニューから新しい「メガメニュー」という項目を作成

ブルーのMega Menuのボタンを押すと設定画面へ

メガメニューはページ作成時と同じ要領でデザイン可能です。

最後は更新して、保存。

Elements Kitよりヘッダーバーを作り直す必要があります。

ヘッダーバーを編集します

わかりにくいUIボタン操作で編集に進みます。

Elements Kit のメニューウィジットを入れます。

最初このウィジットが出てきませんでした。エレメンターをアップデートしたら出てきました。

メガメニューを入れてみて

メガメニューを入れることでより直感的にサイトを回遊していただけるようになりました。モバイルでハンバーガーを開けないとこのメガメニューにたどり着けないのは難点なので工夫して動線をお作りしたいです。