JetMenuの使い方:Elementor Proでメガメニューを作成する方法

執筆者 | 更新日 2021年01月19日 | Elementor Proの使い方 | コメント0件

Elementor Proを使っている方の中には、テーマビルダー機能を使って、ナビゲーションメニューを設定している方もいらっしゃると思います。でも、基本的にはテキストしか表示することはできません。そこで、もっと、いろんなコンテンツが表示できたら良いのに、と思っている方もいるのではないでしょうか?

今回は、そんなElementor ProユーザーにおすすめのJetMenuというプラグインをご紹介していきたいと思います。

JetMenuとは?

JetMenuというのは、Crocoblockというサイトで提供されているElementorの有料拡張プラグインです。名前の通り、メニューをカスタマイズすることに特化したプラグインで、特にメガメニューというものを作成するために使用します。

JetMenuのサンプル 1 scaled e1610761496953

メガメニューというのは、このような感じです。

JetMenuのサンプル 2 scaled e1610761469323

テキストでメニューを見せるのはもちろんですが、それ以上に、メニューに対してコンテンツをつけて、マウスカーソルを合わせると、そのコンテンツを表示することができるような仕組みを作成することができます。それでは、実際にメガメニューの作り方をご紹介していきます。

※Elementor Proが必須です。

JetMenuでメガメニューを作成する手順

それでは、実際にメガメニューの作り方をご紹介していきます。ステップバイステップになっていますので、実際に手を動かしながら作ってみてください。

Step1. JetMenuの契約

まずは、JetMenuの契約からやっていきます。

Clocoblockの公式サイト

JetMenuはCrocoblockというサイトで販売されていますので、Crocoblockの公式サイトに移動します。

CrocoblockのProduct

そして、メニューの「Products」にカーソルを置き、「JetMenu」を選択しましょう。

JetMenuの販売ページ

すると、JetMenuの販売ページに移動しますので、一番下までスクロール、もしくは「Buy for $24」というボタンをクリックします。

JetMenuのプラン

そして、いずれかのプランを選択してください。左から1サイトでの年間プラン、無制限のサイトでの年間プラン、JetMenuだけではなく、全てのプラグインの年間プランになります。

JetMenuのPersonal Info

次の画面では、

  • Email Address:Eメールアドレス
  • Full Name:名前
  • Phone Number:電話番号(ドロップダウンから「Japan」を選択)

これらの項目を記入して、「I accept the Privacy Policy agreement」にチェックを入れ、「Next Step」ボタンをクリックします。

JetMenuの決済手段

すると、決済手段を選択する画面が表示されますので、「Pay via PayPal(ペイパル)」か「Pay by Card(クレジットカード)」のどちらかのボタンをクリックしてください。

JetMenuの決済

Step2. JetMenuのインストール

Crocoblockからのメール

契約が終わると、購入の確認メールが届きます。「Crocoblock Account」という件名になっています。この中には、

  • Your Username:ログイン時のユーザー名
  •  Your Password:ログイン時のパスワード
  • Login:ログインページのURL

の3つの情報が記載されていますので、ログインページのURLをクリックして、

Crocoblockの会員サイトにログイン

ユーザー名もしくはEメールアドレスとパスワードを記入して、ログインしましょう。

JetMenuのダウンロード

無事にログインできたら、「JetMenu」プラグインの「Download」ボタンをクリックして、プラグインをダウンロードします。

JetMenuのインストール

次に、WordPressに移動して、JetMenuのインストールをやっていきます。「プラグイン」の「新規追加」から「プラグインのアップロード」、「ファイルを選択」からZip形式のままJetMenuを「今すぐインストール」そして「プラグインを有効化」します。

Step3. JetMenuのアクティベート

JetMenuのアクティベート

有効化が終わったら、それで使えるようになるわけではなく、プラグインのアクティベートが必要です。そのため、「Crocoblock」の「License」に移動し、「+Add New License」ボタンをクリックします。

そしたら、Crocoblockのマイアカウントページにある「View details」というリンクをクリックし、「License Key」をコピーして貼り付け、「Activate License」ボタンをクリックして、アクティベートの作業は完了です。

Step4. メニューの作成

メニューの作成

次に、メニューの作成をしていきます。

Step5. メガメニューの設定

次に、メガメニューの設定をしていきます。

メニューのHetMenuをクリック

作成したメニューのアイテムの上にマウスカーソルを合わせると、「JetMenu」というボタンが表示されますので、このボタンをクリックします。

Mega Contentの設定

まずは、「Mega Content」というタブで、「Mega submenu enabled」というボタンをオンに切り替えます。

Item Iconの設定

あとは、必要があれば「Item icon」タブに切り替えて、アイコンを設定します。これは、メニューテキストの左側に表示されるようになります。「Item icon」でアイコンを選択して、「Icon color」でアイコンの色を設定します。

Edit Mega Menu Item Content

そしたら、「Mega Content」タブで「Edit Mega Menu Item Content」ボタンをクリックします。

メガメニューの作成 scaled

すると、ポップアップでElementorの編集画面が表示されますので、好きなようにデザインしてください。

問合せのメガメニュー scaled

終わりましたら、左下の「更新」ボタンをクリックし、バツで編集画面を閉じましょう。

メガメニューをSave

あとは、「Save」して終了です。他にもメガメニューの設定をしたい項目がありましたら、同じ手順で設定しましょう。

Step6. Elementor Proでヘッダーの作成

メガメニューは、設定しただけだと表示することはできません。Elementor Proを使ってメガメニューのウィジェットを挿入する必要がありますので、そのやり方を次にご紹介していきます。

テンプレートの「Theme Builder」

まずは、「テンプレート」の「Theme Builder」に移動します。

Elementor Proの「Try it Now」

以前からElementor Proを使っていた方は、「Try it Now」ボタンをクリックし、

ヘッダーを新規追加する

このページに移動します。(最近使い始めた方は、「Theme Builder」に移動すると、このページに直で飛んできます。)

Mega Menuの追加

Elementorの編集画面が表示されたら、「JETELEMENTS」の「Mega Menu」ウィジェットをヘッダーに追加します。

メガメニューの選択

追加したら、「コンテンツ」の「General」にある「Select Menu for Desktop」から作成したメニューを選択します。

Desktop Menu Itemsの設定

あとは、必要に応じて「スタイル」の「Desktop Menu Items」でメニューテキストの色などを変更しましょう。通常時のテキストカラーは、「Text color」で変更できます。あとは、「HOVER」でマウスカーソルを置いたときのテキストカラー、「ACTIVE」で該当ページを開いている時のテキストカラーを設定します。

Mobile Toggleの設定 e1610808293476

また、スマホでの外見も設定しておきましょう。「Mobile Toggle」の項目では、「Icon Color」でトグルアイコンのメインカラー、「色」でトグルアイコンの背景色を設定することができます。

通常のメガメニュー

そして、最終的には、このようなメニューを作成してみてください。

JetMenuで縦並びのメニューを作成する方法

 

Elementorの使い方を学びませんか?

  • Elementorのウィジェットの使い方
  • ランディングページの作り方
  • テンプレートの使い方

通常、¥980で販売していますが、こちらから登録してくださった方限定で無料で受講することができます。

根本 耕輔

根本 耕輔

WordPressを使ったオンラインビジネスの構築が得意。

KClubマーケティング、KClubショーケースを運営。

0コメント

コメントを提出

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Elementor Proの使い方

無料でElementor Proの使い方を

網羅的に学びませんか?
 

基本的なウィジェットの使い方から、ページを作成する方法までカバーしています。デザイン性の高いランディングページの作成を考えている方にオススメです。 下のボタンから無料で受講できます。

かっこいいLP作りたくないですか?