WordPressでElementorを使用してフルスクリーンメニューを作成する方法

Muneeb WordPressチュートリアル Apr 27, 2022

現在、多くのWebサイトでは、複雑なナビゲーションバーではなく、フルスクリーンメニューを表示する基本的なナビゲーショントグル記号を採用しています。 フルスクリーンメニューは、ページ数が少なく基本的なデザインの小さなWebサイトに最適です。

WordPressを使用すると、カスタムナビゲーションメニューを作成し、魅力的なナビゲーションスタイルをElementorページビルダーに含めることができます。 このチュートリアルでは、Elementorページビルダーを使用して、パーソナライズされたフルスクリーンメニューを無料で作成することから始めます。

Elementorでフルスクリーンメニューを作成する方法

フルスクリーンメニューでは、フルスクリーンメニューのハンバーガーシンボルをクリックすると、Webサイト全体にオーバーレイが表示され、WordPressWebサイトのメニュー項目が表示されます。

まず、WordPressの[外観]、 [メニュー]の順に移動して、WordPressでメニューを作成します。

素晴らしいウェブサイトを作成します

最高の無料ページビルダーElementor を使用

今すぐ始める

次に、UnlimitedElementsアドオンをElementorにインストールする必要があります。

次に、無制限要素ウィジェットライブラリに移動し、検索フィールドに「フルスクリーンメニュー」と入力します。 フルスクリーンメニューウィジェットを任意のElementorページに追加するには、検索結果のウィジェットにカーソルを合わせて[インストール]をクリックします。

Elementorページ内で、新しいセクションを作成し、フルスクリーンメニューウィジェットをそのセクションにドラッグします。

ウィジェットの[位置]の下にあるウィジェットの[詳細設定]タブで、ウィジェットを固定位置にします。

以下に示すように、フルスクリーンメニューウィジェットに同じ変更を適用します。

  • メニューオプションで、準備したメニューを選択します。
  • Maxdepthの場合、メニューに表示するサブメニュー項目の最大数を選択します。
  • トグルメニューアイコンを左、右、または中央のいずれに配置するかを選択します。
  • アイコントグルタイプはデフォルトで「アニメーション」に設定されていますが、「カスタムアイコン」を選択することでメニューアイコンを変更できます。

さらに、フルスクリーンメニューの場合は、開いているトランジション効果を選択します。

ソーシャルアイコンがある場合は、表示または非表示を選択することもできます。

次に、[スタイル]タブでフルスクリーンメニューウィジェットのさまざまなコンポーネントを編集できます。

ハンバーガーアイコンの場合、アイコンの背景色、ホバー上のアイコンの色、およびホバー上のアイコンの背景色を変更できます。 ハンバーガーアイコンのサイズ、パディング、境界線、および境界線の半径をカスタマイズします。

次に、メニューの背景を追加し、位置やサイズなどの必要な調整を行うことを選択できます。

[メニュー項目]ドロップダウンを開いて、タイポグラフィ、マージン、色などの項目を編集します

さらに、[サブメニュー項目]ドロップダウンからサブメニューを編集することもできます。

最後の仕上げはあなたのソーシャルアイコンです。 [ソーシャルアイコン]ドロップダウンを使用して、前に追加したソーシャルアイコンを調整します。

それはおそらくそれです! これらは、Elementorを使用してWordPressWebサイトのフルスクリーンメニューを正常に作成するために必要なすべての設定です。

フルスクリーンメニューは、Webサイトから多くのナビゲーションの問題を解消し、ユーザーが混乱することなくWebサイト内をより自由に移動できるようにします。 このようにして、 Elementorを使用すると、洗練されたWebサイトのナビゲーションを作成し、アニメーションの選択肢を充実させて、サイトの外観を活気づけることができます。

このチュートリアルは以上です。 FacebookTwitterに参加して、投稿の最新情報を入手してください。

Divi WordPress Theme