WordPressで垂直メニューを作成する方法

あなたのウェブサイトにもっとモダンなタッチを加えたいですか?
さて、従来の水平メニューを垂直メニューに置き換えることで、WordPress サイトを即座にシックでモダンな外観にすることができます。さらに、垂直メニューでは、 ユーザーエクスペリエンスを向上させる 同じように。

しかし、WordPressで垂直メニューを作成するにはどうすればよいでしょうか?

WordPress サイトに垂直メニューを追加するには、いくつかの方法があります。

このブログでは、ご紹介させていただきます WordPressで縦メニューを作る方法 また、垂直メガメニューを作成することもできます。

WordPressの垂直メニューとは何ですか?

WordPress の垂直メニューは、 縦方向に並べられたリンクのコレクション 従来の水平型ではなく。最近、このタイプの WordPress 垂直メニューは、特にモバイルデバイスでよりユーザーフレンドリーであるため、最近非常に人気が高まっています。 

WordPress サイトで垂直メニューを使用する利点:

• これらのメニューは視覚的に見栄えが良くなります 
• ナビゲートが簡単 メニュー
• を維持します 応答性 モバイルデバイス上のウェブサイトの
• あなたは付け加えられます さらにトップレベルのメニュー 横メニューよりも縦メニューの方が
• eコマースウェブサイトでうまく機能します

ElementorとElementsKitを使用してWordPressで垂直メニューを作成する方法 

ここではWordPressで垂直メニューを作成する方法についてのステップバイステップガイドを示します。ページビルダーが必要になります。 エレメンター および垂直メニューWordPressプラグイン – ElementsKit。以下の手順でWordPressの垂直メニューを簡単に作成できます。

ステップ 1: Elementor と ElementsKit をインストールする  

 インストールするには、ダッシュボードにログインし、

• プラグイン ⇒ 新規追加 に移動します。
• Elementor / ElementsKit を検索します (一度に 1 つずつ)
• 「今すぐインストール」をクリックします

インストール後、「アクティベート」ボタンをクリックしてアクティベートします。

ステップ 2: WordPress 垂直メニューのメニューを作成する

それではメニューを作成してみましょう。このためには、「外観」⇒「メニュー」に移動します。 

メニュー ページに移動したら、次のことを行う必要があります。

1. クリック 新しいメニューを作成する
2. の下に名前を入力します メニュー名 オプション
3. 最後に、「メニューの作成」をクリックしてメニューを作成します。

次に、次のことを行う必要があります。

1. ドロップダウンからメニューを選択します
2. 「選択」をクリックします
3. 追加したいメニューのチェックボックスをクリックします
4. 「メニューに追加」をクリックします 選択したメニューに追加するには
5. ついに、 「メニューを保存」をクリックして更新します

複数レベルのメニューがある場合は、メニュー項目の順序を変更したり、 「メニューを保存」をクリックします 更新します。

ステップ3: ElementsKitの垂直メニューウィジェットを有効にする

案内する ElementsKit ⇒ ウィジェット ⇒ 縦型メニューウィジェット、 ウィジェットをオンにする そして 「変更を保存」をクリックします。

ステップ 4: ウィジェットをドラッグ アンド ドロップします。

「Elementor で編集」オプションを使用してページを編集します。それから 検索 Ekit アイコンを備えたスタイリスト リスト ウィジェットの場合は、 ウィジェットをドラッグアンドドロップします ページ上で。

ステップ 5: 垂直メニュー設定をカスタマイズする

次に、作成したメニューまたは好みのメニューを垂直メニューに追加します。これは、[メニューの選択] ドロップダウンから行うことができます。

Elementor の垂直メニューを折りたたみ可能なボタンにしたい場合は、トグル ボタンをオンにする必要があります。オンにすると、トグル ボタンのタイトルを変更でき、左側と右側の両方にアイコンを追加することもできます。

[ホバーを有効にする] オプションをオンにして、ホバー時の切り替えを有効にします (デフォルトではクリックで機能します)。

ステップ 6: 垂直メニューのスタイルをカスタマイズする

次に、垂直メニューのスタイルを変更します。そのためには、「スタイル」タブに移動します。

[メニュー コンテナ] オプションを展開して、背景の種類、色、位置、2 番目の色、ボックスの影、境界線の半径などを変更します。

同様に、メニュー項目とサブメニュー項目で多くのスタイル オプションを変更できます。

すべてのカスタマイズが完了したら、「公開」をクリックしてプレビューを確認します。

Elementor と ElementsKit を使用して WordPress で垂直メガメニューを作成する方法 

このチュートリアルに従うには、前にオンにした垂直メニュー ウィジェットがまだオンになっていることを確認する必要があります。

ステップ 1: 必要な ElementsKit モジュールをオンにする 

案内する ElementsKit ⇒ モジュール, Mega Menu と Header Footer Builder の両方をオンにします、 そして最後に 「変更を保存」をクリックして更新します。

次の手順に従って、垂直メニューのメニューを作成してください。 上に示す手順。 

ステップ 2: ElementsKit Megamenu オプションをオンにする 

メニューの準備が完了したら、ElementsKit Megamenu オプションをチェックしてメガ メニュー機能を有効にします。このオプションをチェックすると、メニューの上にカーソルを置くとメガ メニュー オプションが表示されます。

ステップ 3: ElementsKit を使用してメニューをメガメニューに変換する 

ここで、シンプル メニューをメガ メニューに変換するには、メニューにカーソルを置き、メガ メニュー オプションをクリックします。それから メガメニュートグルボタンをオンにします のd「メガメンの編集」をクリックしますu コンテンツ。 

次に、Ekit アイコンをクリックしてセクション タブに移動し、メガ メニューを検索して、好みの既製のメガ メニュー テンプレートを選択します。挿入したら、必要に応じて編集できます。

完了したら、「更新」をクリックしてメニューを保存します。メガ メニューを作成するすべてのメニューに対して同じプロセスを繰り返します。 

これでメガメニューの完成です。 ElementsKit ヘッダー フッター ビルダーを使用して、Web サイトにメガ メニューを追加できます。 

ElementsKit のメガ メニュー ビルダーの詳細については、ブログを参照してください。 Elementor と ElementsKit を使用してメガメニューを構築する方法。以下のビデオでプロセス全体を見ることもできます。

最後の言葉

ElementsKit を使用すると、WordPress で垂直メニューを作成する作業が非常に簡単になります。水平メニューは素晴らしいですが、メニューを変更すると Web サイトの外観が向上する場合があります。特に e コマース サイトをお持ちの場合は、ElementsKit のメガ メニュー機能を試してください。

このブログがお役に立てば幸いです。垂直メニューの WordPress プラグインに関してご質問がございましたら、お気軽にお知らせください。