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

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

Share on facebook
Share on twitter
Share on pocket
Share on pinterest
fullscreenmenu-thumbnail

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