あなたのウェブサイトのUI / UXを改善するのに役立つ素晴らしいメニューを作成する方法を探していますか? もしそうなら、あなたは正しい場所にいます。 ここでは、あなたを助けるための詳細なガイドをまとめました。
最初に、WordPressWebサイトのメニューを作成する方法を段階的に説明します。 そして、そのコツをつかんだら、Elementor NavigationMenuウィジェットを使用してWordPressメニューをカスタマイズおよびスーパーチャージする方法について説明します。
目次:
ナビゲーションメニューは、サイトにトラフィックをもたらすだけでなく、SEOランキングを向上させるためにも重要であることを理解することが重要です。
実際、ナビゲーションメニューは主にユーザーエンゲージメントのために設計されていますが、これが唯一の目的ではありません。
2番目に重要な要素は、「WebCrawler」またはWebサイトをクロールしてコンテンツを関連するレベルにインデックス付けし、検索エンジンにレポートして適切な場所にコンテンツをランク付けするように設計されたボットの役割を監視することです。
したがって、あまりに複雑なメニューを作成している場合、ボットがコンテンツをランク付けすることは難しくなりますが、訪問者も失われます。
要するに、「ナビゲーションのしやすさ」は、より良いユーザーエクスペリエンスを向上させるための極めて重要な貢献者であるだけでなく、サイトのランキングとトラフィックの向上にも不可欠な役割を果たします。
多くのビジネスWebサイトが複雑なメニューバーの代わりに単一のナビゲーションアイコンを保持することは、クリックしたときに全画面メニューにロードされるという優れた理由です。
100%レスポンシブなナビゲーションメニューを備えたElementor proウィジェットのおかげで、コードを使用せずに、ピクセルパーフェクトで非常に柔軟なメニューバーを作成できます。
このチュートリアルでは、 Elementorナビゲーションメニューウィジェットを使用して、カスタマイズされた高度なWordPressメニューを取得する方法を示します。
Elementor Navigationウィジェットを始める前に、Elementorの無料バージョンを使用して簡単なWordPressメニューを作成する方法を見てみましょう。
これで、WordPressメニューを作成するために、特別なpluginをインストールする必要はありません。 デフォルトでは、WordPressには使いやすいメニュービルダーが付属しており、Webサイトのシンプルなナビゲーションメニューを作成するのに役立ちます。
そうは言っても、メニューのカスタマイズオプションにアクセスすることはできません。 現在アクティブなWordPressテーマのデザインを引き継ぎます。 しかし、それだけが必要な場合は、これがWordPressWebサイトのナビゲーションメニューを設定するための優れた方法です。
まず最初に、WordPressバックエンドダッシュボードにログインする必要があります。
次に、左側のサイドバーから[外観]>[メニューます。 ここでは、左側に「メニュー項目の追加」、右側に「メニュー構造」がある2列のレイアウトがあります。
メニュー構造の下に、「メニュー名」のフィールドがあります。 これが、今作成するメニューの名前になります。 それをメニュー1と呼びましょう。
注:心配しないでください。 読者はメニュー名を見ることができなくなります。 これは、さまざまなメニューをすべて整理するのに役立つ機能です。
メニューに名前を付けたら、「メニューの作成」ボタンをクリックして利用できるようにします。 次に、さまざまなメニュー項目を追加する必要があります。
次に、新しいメニューにメニュー項目を入力する部分があります。 左側の[メニュー項目の追加]セクションの下に、メニューに追加できるものの整理されたリストがあります。
デフォルトでは、これにはページ、投稿、ランディングページ、カスタムリンク、およびカテゴリのいずれかが含まれます。
チェックボックスを使用して追加するメニュー項目を選択し、「メニューに追加」ボタンをクリックするだけです。 これにより、選択したすべてのメニュー項目がメニューに表示されます。
注最新 、 [すべて表示] 、 検索]を切り替えるオプションがあることに。 アイテムが多い場合は、これらのオプションを使用することを忘れないでください。
すべてのメニュー項目の追加が完了したら、[メニューの保存]ボタンを押して、次の手順に進みます。
デフォルトでWordPressでサブメニューも作成できることをご存知ですか? サブメニュー構造を作成するときは、親メニュー項目と子メニュー項目があります。
ユーザーが親メニュー項目にカーソルを合わせると、その下に隠されているすべての子メニュー項目が表示されます。
かっこいいでしょ?
サブメニュー構造を作成するには、親メニューに表示するメニュー項目を選択するだけです。 次に、子メニュー項目として必要なすべてのメニュー項目をその下にドラッグアンドドロップします。 右にドラッグするだけで完了です。
新しいメニューを作成し、サブメニューを追加したので、次はその場所を管理します。
メニューエディタの上部に、「場所の管理」というオプションが表示されます。 それをクリックすると、次の画面のようなものが表示されます。
これで、使用可能なメニューの場所は、インストールしたテーマによって異なります。 この例ではampル、我々は3つのメニューをサポートテーマを持っています。
利用可能な各メニューの場所にメニューを割り当てたら、「変更を保存」をクリックします。それだけです。
これで、WordPressがデフォルトで提供するすべての基本的なメニュー機能を理解できました。 ただし、さらにカスタマイズや機能が必要な場合は、Elementor ProNavメニューウィジェットについて学習してください。
カスタマイズされたナビゲーションメニューをWordPressサイトに追加する場合は、ElementorProバージョンが必要です。 Elementor Proバージョンには、300以上のテンプレート、テーマビルダー、ポップアップウィジェット、WooCommerceウィジェット、その他多くの興味深い機能など、他の多くの特別な機能とともにElementornavウィジェット
ナビゲーションメニューウィジェット自体の主な機能は何ですか? ここでは簡単な紹介です。
上記で説明したように、基本的なWordPressメニューを作成する必要があります。その後、pro-nav-menuウィジェットを使用してデフォルトのWordPressメニューをカスタマイズします。 プライマリリストを作成したら、次のステップはそれを希望の場所、つまりヘッダーセクションに追加することです。
基本設定が完了したら、nav-menuウィジェットを使用してメニューをカスタマイズしましょう。
設定セクションの一番上の隅には、3つのオプションがあります。 コンテンツ、スタイル、高度。
レイアウトセクション:水平、垂直、または非表示のドロップダウンアコーディオンの3つのオプションがあります。
セクションの整列:このセクションは、メニューテキスト項目の整列に役立ちます。 中央、右、または左。
アニメーションセクション:このセクションでは、アニメーション効果の下、上、または二重線のアニメーション効果を追加できます。 フレーム、背景、微妙なテキストアニメーションを選択することもできます。
下線付きのアニメーションは次のとおりです。
同様に、フレーム、オーバーライン、二重線、背景、およびテキストアニメーションがあります。 それぞれが独自のアニメーションのセットを提供しており、自分でチェックして、何が得られるかを学ぶことができます。
ポインタセクション:ドロップダウンメニューからポインタの種類を選択します。
サブメニューインジケーターセクション:Elementorウィジェットには多くのサブメニュースタイリングオプションが満載です。 メニューの色、スタイル、背景を制御できるだけではありません。
パディングとメニュー間隔:パディングはすばやく調整できます。 メニューとサブメニューの水平方向のパディング、垂直方向のパディング、中間スペース、右、左、および中央揃えを変更できます。
Elementorは、メニューの間隔とパディングに非常によく近づいています。 彼らはドアの後ろで一生懸命働いて、彼らが考えているデザインを簡単に作成できるように、開発者にツールを持ってくることができるようにしました。
メニュー間隔には、次のような多くのオプションがあります。
色の背景とタイポグラフィ:希望の配色と背景色を使用して、カスタマイズされたブランドの外観を得ることができます。 また、透明または半透明のメニューオプションを選択することもできます。
デザイナーは、これらのオプションを可能な限り試して、好みに応じて背景をデザインすることができます。
モバイルはWebの重要な部分であるため、Elementor開発者は、モバイル用のナビゲーションバーも作成できるツールも提供しています。
Elementorウィジェットを使用すると、WordPressのモバイルメニューオプションを完全に制御できます。 Elementor設定セクションの下部にモバイル画面設定のオプションがあり、モバイル画面オプションを表示できます。
つまり、Elementorのモバイルメニュー機能は次のとおりです。
レスポンシブナビゲーション:メニューのレスポンシブポジショニングを提供します。
メニューは、どのWebサイトでも最も重要な機能の1つです。 それは訪問者があなたのウェブサイトをウォークスルーするのを助けます、そしてあなたが賢くリストを作成したならばそれはあなたの訪問者をあなたのサイトに長い間保つのに役立ちます。 メニューは、ウェブサイトのレイアウト全体、ヘッダー、フッターセクションと同じくらい重要です。
したがって、メニューウィジェットは、すべての重要な機能を備えた独自のブランドルックを提供できる必要があります。 Elementor Navigationウィジェットは、顧客がブランドの声に合うようにメニューセクションをカスタマイズできる豊富な機能が付属しています。 これで、Webサイト全体、ランディングページ、ヘッダー、またはその他の表示したいセクションで、カスタムメイドのスタイリッシュなメニューを使用できます。
コメントを表示
Hola gracias por el post、cuandoañadoelnavmenúnomeaparecemimenúsequedasoloun recuadro gris en el editor de elementor y si voy a la pagina donde lo tengo no aparecenada。 Como puedo solucionarlo? グラシアス
こんにちは! 通常、この問題は、メニューが空であるか保存されていない場合に発生します。 WordPressメニュー側を再確認してください。
Hola、una Consulta、cómose puededarlainstrucciónparacerrarautomáticamenteunsubmenualabrirotroítemdelmenu。
グラシアス。
こんにちは、申し訳ありませんが、私はあなたの質問を完全に理解していませんか? ご指定いただけますか?
ciao quando le voci del submenu sono troppo Lunghe come si riesce a Dividele su piauu righe ?
こんにちは、ナビゲーションが非常に読みにくいため、これはお勧めしません。この場合は、メガ メニュー スタイルの方がよいでしょう。
メニューwwersji mobilnej nie otwierasie。 Jak moge je utworzyc zeby wyswietlalo sie na telefonach?
こんにちは。Elementorナビゲーションウィジェットを使用すると、モバイルメニューの表示は自動的に行われます。 ただし、メニュー設定で設定呼び出し「ブレークポイント」を確認する必要があります。 これは、メニューが切り替わるときの画面サイズです。
Tôidùngthằngnày、màtrêndestoptôiđểchếđộHorizontalmànókhôngnằmngang、nócứnằmdọc、tôidùngテーマクレアトン。 Cógìhỗtrợmìnhvớinhé。
Sziasztok、azmiképpoldhatómeg、hogyegyvertikálismenübenazalmenürekattintásutánnezárjaösszeamenütazoldalbetöltésekor? EPro
こんにちは、残念ながらそれは不可能です。Elementornavウィジェットにはそのようなオプションはありません。
チャオ。 Vorrei sapere se è possibile fare in modo che il menu rimanga semper visibile anche quando si scende con la visualizzazione della pagina. Purtroppo tutte le volte che ci ho provato il menu scende mail colore di background del menu no rendendolo praticamente illegibile le scritte. グラジー