もくじ
ToggleElementorの無料版でサイト全体を構築する事は、個人的にはオススメしていませんが、気持ちは分かります(笑)特に無料版の場合、ヘッダー周りに困る事が多いです。Elementor Proなら「ナビメニューウィジェット」という便利なウィジェットが用意されており、簡単にメニューを作る事が出来ます。
ですが、無料版でもメニューを手軽に導入したい!という場合、フルスクリーンメニューなら簡単にメニューを入れられるプラグインがあります!今日は、そのプラグインの紹介と使い方をご紹介します。
フルスクリーンメニューを作る
どんなメニュー?という事で、こちらをご覧ください!
Elementor Proで再現出来ないかポップアップを使ってみたんですが、トグルボタンの部分のBARからバツへの変化を再現出来ません・・・(クリック前はBARアイコン、クリック後はバツアイコンに変化)とは言え、半透明な背景ではなく、塗りつぶし背景であれば、トグルボタン(BARアイコン)は隠れてるので、アイコン自体は動きませんが、擬似的なものは再現出来ます。
また、純粋にElementor Proのナビメニューウィジェットでと思ったのですが、ドロップダウンが全画面に簡単に出来なかったり、メニューの出現方法がドロップダウンのみだったりと、なかなかの不自由。
ん〜なんか悔しい・・・w 半透明背景じゃなければ使えるのに!!
という訳で、前半部分で使った「Full Screen Menu for Elementor」をご紹介します。
Full Screen Menu for Elementor
このプラグインはElementor無料版でも使え、メニュー以外にも作って保存したテンプレートを表示する事が出来ます。
https://wordpress.org/plugins/full-screen-menu-for-elementor/
使い方を見てみましょう!
Full screen menuウィジェット
プラグインをインストールすると、管理画面上の変化は特にありません。フルスクリーンメニューを使いたいページを編集画面で開き、ウィジェットを検索すると「Full screen menuウィジェット」があります。なぜか検索じゃないと見つかりません(笑)
これを入れたい場所にドラッグ&ドロップして準備OKです。細かい設定をみてみましょう!
まずは、コンテンツ設定です。コンテンツにはレイアウトしか項目はありません。ここで、メニューとして何を表示させるかを設定します。
「Content Type」では、Menu(WordPressの外観で設定するメニューのこと)、Saved Section(Elementorで作ったパーツ、すなわちセクションテンプレート)、Saved Page(同様にElementorで作ったページテンプレート)の3つが選択できます。
気付いた方もいるかもしれませんが、そうなんです。クリックして表示されるメニューを自作する事ができるんです!
試しに上の画像の様なセクションテンプレートを事前に作成しておきます。その上で、先ほどのレイアウト設定で「Template Section」を選択すると、下に「Select section」と出てきます。そこに先ほど作っておいたテンプレートを選択します。
少し小さいのですが、「Select Section」には事前に作っておいたメニューテストが選択されています。試しにトグルボタンをクリックし、テンプレートが表示された所です。
見方を変えればメガメニュー(リッチなメニュー)的なものは作れそうです。section同様にテンプレートのページを開く事も出来るので、かなり自由度があると思います。
と、思うじゃないですか・・・残念?なのがトグルボタンのアイコンは変えれないので、バーアイコンがボタンとなってしまいます。
そうなんですよ。自分もポップアップで?!なんて思ったんですけどね・・・
スタイルの設定は他のウィジェットと大差ないので、軽く解説します。
まず、コントロール出来る部分としては、トグルボタンのデザインと、メニュー表示時の背景(オーバーレイ)を設定できます。1つ誤解しやすいのが、オーバーレイの部分です。背景の透明度の項目が無い為、半透明にしたい場合はカラーパレットの部分で透明にする必要があるという点です。
もちろんですが、グラデーションも出来ますし、透明度0でも設定できます。
ざっくり解説ですが「Full Screen Menu」の解説でした。他にもフルスクリーンメニューが使えるプラグインがあるので、こだわりたい方は他も試してみてください。個人的にはメニュー表示にテンプレートが使えた事が魅力的に思いました。
まとめ
ちょっと気になったので、他にもフルスクリーンメニューが使えるプラグインが無いか調べてみましたが、使えそうなのはありませんでした・・・唯一使えそうなのが
「Power pack」
https://powerpackelements.com/elementor-full-screen-overlay-menu/
プラグインは無料なのですが、フルスクリーンメニューは有料版じゃないと使えないみたいです。
Elementor Proをお使いの方は、トグルボタンの変形にこだわるのであれば、プラグインの導入を!トグルボタンにこだわらないという方はポップアップ+ナビメニューで全画面メニューが作れます。
少し違うメガメニューについても、近々ご紹介したいと思います!