コーディングなしで Elementor オフキャンバス メニューを作成する方法 (4 つの簡単なステップ)

オフキャンバス メニューは、Web サイトの UI を美しくします。さらに、サイトの訪問者や顧客を保持することもできます。これらとは別に、Elementor のオフキャンバス メニューもさまざまなビジネス チャンスへの扉を開きます。

したがって、Web サイトの UI と UX に妥協したくない場合は、それをサイトに追加することが最も必要になります。幸いなことに、WordPress には Elementor オフキャンバス メニューを完全に無料で追加するオプションがあります。

どれでも採用できます。ただし、ElementsKit を使用すると、数秒でオフキャンバス メニューを追加できるため、最も適切で簡単なオプションになります。

それでは、調べてみましょう ElementsKit を使用してオフキャンバス メニューを追加する最も簡単なプロセス。ただし、その前に、このオフキャンバス メニューとその重要性について簡単に説明します。

Elementor のオフキャンバス メニューとは何ですか?

オフキャンバスメニューは、 フライアウトメニュー それが現れる ウェブサイト側から アイコン、画像、またはテキストをクリックします。控えめなメニューです ユーザーエクスペリエンスを向上させます これを使用すると、ヘッダー セクションを簡素化できるため、モバイル デバイスや小さな画面上の Web サイトの表示に役立ちます。

Elementor のオフキャンバス メニューを使用する理由は何ですか?

このオフキャンバス メニューの主な利点は、 多くのスペースを節約する Web サイトでヘッダー メニューを表示する必要がある場合。そのため、以下のようなWebサイトを表示する場合には、 小さな画面でも優れた UI、このオフキャンバス メニューが必要です。

ただし、次のことができます。 特別割引を促進する このオフキャンバス メニューで。また、オフキャンバス メニューの割引を紹介すると、Web サイト訪問者の注目を集めることができます。

これらとは別に、オフキャンバス メニューの特定のセクションを表示するのにも適しています。たとえば、特定の割引商品を表示して、プロモーションをより際立たせ、コンバージョンを高めることができます。

以来 ウェブサイト訪問者の半数以上 モバイルを使用してサイトにアクセスするには、サイト上のこのオフキャンバス メニューを利用する必要があります。 ビジネスチャンスを倍増させる。さらに、モバイル ユーザー向けにオフキャンバス メニューを使用すると、その目的が達成されます。

これらに加えて、オフキャンバス メニューには他の利点もあります。様々な用途に使ってプレゼントしていただけます ビジネス目標への方向性 適切に活用することで。

オフキャンバス メニューの機能をすべて理解したので、最も簡単な方法に従ってこれをサイトに追加するプロセスを見てみましょう。

Elementor のオフキャンバス メニューを作成する手順

Elementor オフキャンバス メニューを使用すると多くの利点があるにもかかわらず、それを WordPress サイトに追加するには数秒かかります。その上で、それは、 100% Elementor オフキャンバス メニューを自由に追加 を使用して ElementsKit。 ElementsKit には「Header Offcanvas」という専用の無料ウィジェットがあるからです。

このウィジェットを使用してオフキャンバス メニューを追加するには、コーディングは必要ありません。さらに、このメニューは制限なく、必要に応じてカスタマイズできます。また、わずか 4 つのステップで構成される最も簡単な方法に従って、オフキャンバス メニューを追加することもできます。を通過してください 4つの簡単なステップ そして オフキャンバスメニューを追加する WordPress サイトへ:

ステップ 1: オフキャンバス メニュー プラグインをインストールします。

ElementsKit のオフキャンバス メニュー ウィジェットの利点を活用するには、まずそれをインストールする必要があります。オフキャンバスメニュープラグインをインストールするには、 「新規追加」をクリックします プラグインの下のオプションと ElementsKit を検索する 検索ボックスに。 ElementsKitを見てから、 今すぐインストールを押してください ボタンと 活性化 それは後で。

ステップ 2: ヘッダーオフキャンバスウィジェットを有効にします。

2 番目のステップでは、次のことを行う必要があります。 ElementsKit にアクセス >> ElementsKit そして ウィジェットをクリックします セクション。

ウィジェットエリアから、 「ヘッダーオフキャンバス」ウィジェットを有効にする そして 変更を保存を押します ボタン。

ステップ 3: キャンバス メニューから Elementor を追加します。

次に、オフキャンバス メニューを Elementor Web サイトに追加します。そのためには、 「新規追加」をクリックします 投稿の下のオプションと タイトルを付ける ポストに。その後、 「Elementorで編集」をクリックします ボタンをクリックして、WordPress にオフキャンバス メニューを追加します。

これにより、Elementor ダッシュボードにリダイレクトされます。 ヘッダー Offcanvas ウィジェットを検索します そしてそれを見つけた後、 プラスにドラッグアンドドロップします アイコン。

今、 ハンバーガーのアイコンをクリックします オフキャンバス メニューにメニューまたは項目を追加します。

それから 「コンテンツの編集」をクリックします オプションを選択し、必要に応じて項目をメニューに追加します。それはあなたを次の場所に連れて行きます ウィジェットエリア ここから、オフキャンバス メニューにさまざまな項目を追加して、バリエーションを追加できます。

例えば、 縦型メニューを検索 そして ドラッグアンドドロップしてください ヘッダーのオフキャンバス ウィジェットと同様に、プラス アイコンをクリックします。その後、同じプロセスに従って項目をオフキャンバス メニューに追加します。

垂直メニューウィジェットを追加した後、 メニューを選択する Elementor のオフキャンバス メニューに表示し、それに応じてカスタマイズしたいと考えています。すべてのカスタマイズが完了したら、 「更新」をクリックします ボタン。

ヘッダーのオフキャンバス メニューに項目を追加した後、次のことができます。 カスタマイズして更新する 次の領域:

• オーバーレイの色: ここから、オフキャンバス メニューの色を選択します。
• メニューの種類: アイコン、テキスト、およびテキスト オプション付きのアイコンが表示されます。ヘッダーのオフキャンバス メニューの代わりに表示したいものを選択します。
• アイコン： メニュータイプでアイコンを選択すると、アイコンを選択する必要がある場所からこのセクションが表示されます。

「コンテンツ」タブのすぐ隣に「スタイル」タブがあります。 [スタイル] タブをクリックし、オフキャンバス メニュー用に以下をカスタマイズします。

• 色。
• 背景色。
• ホバーカラー。
• ホバー時の背景色。
• ホバー時の境界線の色。
• アイコンのサイズ。
• ボーダータイプ。
• 位置合わせ。
• ボックスの影。
• 境界線の半径。
• パディング。
• マージン。

オフキャンバスで編集した後。あなたがしなければならない 幅、背景の種類、位置、パディングを編集します オフキャンバスパネルの。ついに、 「公開」を押します カスタマイズが完了したら、ボタンをクリックします。

ステップ 4: キャンバス メニューのヘッダーを最後に確認します。

ElementsKit を使用して作成したオフキャンバス メニューの概要または例を次に示します。ただし、ウィジェット領域からオフキャンバス メニューをカスタマイズすることで、さらにバリエーションを追加できます。

ヘッダーのオフキャンバス メニューを使ってみる

オフキャンバス メニューを使用すると、サイトが よりインタラクティブで魅力的な WordPress サイトのスペースを大幅に節約できるためです。さらに、それは持っているのに最適です 小さな画面でも優れた UI と UX。それでも、オフキャンバス メニューの追加は非常に簡単かつ迅速です。

上記の 4 つの手順を採用するだけで、ヘッダー オフキャンバス メニューの優れた利点と機会を享受する準備が整います。上記では、このメニューを追加する最も簡単なオプションを提供する ElementsKit を使用しました。

それに加えて、ElementsKit を使用すると、多くの機能を見つけることができます。それは Elementor 用のオールインワン アドオン Web サイトをシームレスで競争力のあるものにするためのあらゆるオプションが備わっています。したがって、Elementor Web サイトにオフキャンバス メニューを追加するには、最適なプラグインを利用してください。