WordPressのテーマビルダープラグイン「Elementor」のファンブログ

Elementorでフル スクリーンメニュー を作ろう

Elementorの無料版でサイト全体を構築する事は、個人的にはオススメしていませんが、気持ちは分かります(笑)特に無料版の場合、ヘッダー周りに困る事が多いです。Elementor Proなら「ナビメニューウィジェット」という便利なウィジェットが用意されており、簡単にメニューを作る事が出来ます。

ですが、無料版でもメニューを手軽に導入したい!という場合、フルスクリーンメニューなら簡単にメニューを入れられるプラグインがあります!今日は、そのプラグインの紹介と使い方をご紹介します。

フルスクリーンメニューを作る

どんなメニュー?という事で、こちらをご覧ください!

Elementor Proで再現出来ないかポップアップを使ってみたんですが、トグルボタンの部分のBARからバツへの変化を再現出来ません・・・(クリック前はBARアイコン、クリック後はバツアイコンに変化)とは言え、半透明な背景ではなく、塗りつぶし背景であれば、トグルボタン(BARアイコン)は隠れてるので、アイコン自体は動きませんが、擬似的なものは再現出来ます。

また、純粋にElementor Proのナビメニューウィジェットでと思ったのですが、ドロップダウンが全画面に簡単に出来なかったり、メニューの出現方法がドロップダウンのみだったりと、なかなかの不自由。

おじさん
おじさん
なんでもかんでもProにすれば良いってもんじゃないって事だな・・・

ん〜なんか悔しい・・・w 半透明背景じゃなければ使えるのに!!

という訳で、前半部分で使った「Full Screen Menu for Elementor」をご紹介します。

Full Screen Menu for Elementor

このプラグインはElementor無料版でも使え、メニュー以外にも作って保存したテンプレートを表示する事が出来ます。

fsm-plugin

https://wordpress.org/plugins/full-screen-menu-for-elementor/

使い方を見てみましょう!

Full screen menuウィジェット

プラグインをインストールすると、管理画面上の変化は特にありません。フルスクリーンメニューを使いたいページを編集画面で開き、ウィジェットを検索すると「Full screen menuウィジェット」があります。なぜか検索じゃないと見つかりません(笑)

fsm-widget

これを入れたい場所にドラッグ&ドロップして準備OKです。細かい設定をみてみましょう!

まずは、コンテンツ設定です。コンテンツにはレイアウトしか項目はありません。ここで、メニューとして何を表示させるかを設定します。

fsm-w01

「Content Type」では、Menu(WordPressの外観で設定するメニューのこと)、Saved Section(Elementorで作ったパーツ、すなわちセクションテンプレート)、Saved Page(同様にElementorで作ったページテンプレート)の3つが選択できます。

気付いた方もいるかもしれませんが、そうなんです。クリックして表示されるメニューを自作する事ができるんです!

fsm-w02

試しに上の画像の様なセクションテンプレートを事前に作成しておきます。その上で、先ほどのレイアウト設定で「Template Section」を選択すると、下に「Select section」と出てきます。そこに先ほど作っておいたテンプレートを選択します。

fsm-w03

少し小さいのですが、「Select Section」には事前に作っておいたメニューテストが選択されています。試しにトグルボタンをクリックし、テンプレートが表示された所です。

見方を変えればメガメニュー(リッチなメニュー)的なものは作れそうです。section同様にテンプレートのページを開く事も出来るので、かなり自由度があると思います。

これってElementor Proのポップアップと同じじゃない。
おばさん
おばさん

と、思うじゃないですか・・・残念?なのがトグルボタンのアイコンは変えれないので、バーアイコンがボタンとなってしまいます。

もどかしいわね。
おばさん
おばさん

そうなんですよ。自分もポップアップで?!なんて思ったんですけどね・・・

スタイルの設定は他のウィジェットと大差ないので、軽く解説します。

fsm-w04

まず、コントロール出来る部分としては、トグルボタンのデザインと、メニュー表示時の背景(オーバーレイ)を設定できます。1つ誤解しやすいのが、オーバーレイの部分です。背景の透明度の項目が無い為、半透明にしたい場合はカラーパレットの部分で透明にする必要があるという点です。

fsm-w05

もちろんですが、グラデーションも出来ますし、透明度0でも設定できます。

ざっくり解説ですが「Full Screen Menu」の解説でした。他にもフルスクリーンメニューが使えるプラグインがあるので、こだわりたい方は他も試してみてください。個人的にはメニュー表示にテンプレートが使えた事が魅力的に思いました。

 

まとめ

ちょっと気になったので、他にもフルスクリーンメニューが使えるプラグインが無いか調べてみましたが、使えそうなのはありませんでした・・・唯一使えそうなのが
「Power pack」
 https://powerpackelements.com/elementor-full-screen-overlay-menu/
プラグインは無料なのですが、フルスクリーンメニューは有料版じゃないと使えないみたいです。

Elementor Proをお使いの方は、トグルボタンの変形にこだわるのであれば、プラグインの導入を!トグルボタンにこだわらないという方はポップアップ+ナビメニューで全画面メニューが作れます。

少し違うメガメニューについても、近々ご紹介したいと思います!

この記事の関連講座

Elementorのレスポンシブモード 講座
Elementorを使うためのWordPress講座
ブログの作り方講座

author

ITKA / 加藤 誠

ITKA / 加藤 誠

Elementorを使い始めて6年目、好き過ぎてファンブログを始めて4年。Elementorを使って年間約30サイトを制作しております。主にWebマーケティング支援事業を中心とし、現在5社の顧問・コンサルティングとして携らさせて頂いております。Elementorのご相談からWeb集客のご相談はお気軽にお問い合わせ下さい。

こちらもご覧下さい

ポップアップ!

こんな感じで横スライドイン!
なんてことも出来ます。