WordPress で 1 ページ ナビゲーションを備えた単一ページ Web サイトを作成する (ボーナス付き)

ビジネス用のウェブサイトを構築したいと考えていますが、大規模なウェブサイトを作成する時間がありませんか?それとも、長期間にわたるウェブサイトのメンテナンスに取り組む準備ができていませんか?

その場合は、1 ページ ナビゲーションを備えた単一ページ Web サイトを選択する必要があります。単一ページの Web サイトは、すべての情報を魅力的な方法で提供し、Web サイトに魅力的な外観を与えるため、ユーザーがより多くの関心を寄せることができます。

このブログでは、方法を学ぶだけでなく、 WordPress で 1 ページのナビゲーションを備えた単一ページの Web サイトを作成する さらに、おまけとしてポップアップに問い合わせフォームを追加する方法も紹介します。

ほとんどの人は、所有者に連絡する適切な方法が見つからないと Web サイトから離れてしまいます。そのため、このボーナス ヒントは、あなたの Web サイトに非常に大きな価値をもたらすことになります。

これ以上時間を無駄にせず、魅力的なウェブサイトを作成するプロセスを始めましょう。 Elementor の 1 ページ ナビゲーション。下のボタンからサイトの最終的な外観を確認できます。

ワンページナビゲーションとは何ですか?

名前が示すように、1 ページ ナビゲーションは、単一ページの Web サイトのさまざまな部分に移動するために特別に設計されたナビゲーション メニューです。スムーズなスクロール効果を備えた 1 ページのナビゲーションにより、さまざまなセクションへの移動が簡単でユーザーフレンドリーになります。

「シンプルさは究極の洗練です。」 - レオナルド・ダ・ヴィンチ

そして、このシンプルさにより、シングルページ Web サイトは他の Web サイトに対して必要な優位性を得ることができます。 1 ページの Web サイトは、ウェディング プランナー、写真撮影、小規模サロン、レストランなどの小規模ビジネスに最適です。   

However, if you have a big eCommerce business that sells too many products or provides multiple services and needs to cater to a bigger audience then Single page website is not for you. So, let’s jump to the main process without wasting time.

1 ページナビゲーションを備えた単一の Web ウェブサイトを作成する方法 WordPress で

In this blog, I am going to show you not just how to build a website but a modern-looking one page navigation in WordPress that will impress your potential clients. For this tutorial, I am going to use the Popular Website builder CMS (I know it says in the title!)

Further, I am going with a visual page builder – Elementor to get the ultimate flexbility for applying one page scroll navigation in WordPress. This is a popular drag-and-drop website builder choice

 それでは、始めましょう…

ステップ #1: 必要な WordPress プラグインをインストールする Elementor 1 ページ スクロールを作成するには

WordPress をシステムにインストールしたら。作成するには次の WordPress プラグインをインストールする必要があります

Web サイト Elementor の 1 ページ スクロール:

• エレメンター (無料版)
• ElementsKit (無料版とプロ版の両方)
• メットフォーム (無料版)

必要な WordPress プラグインのインストールとアクティブ化が完了したら、サイトを構築します。

ステップ #2: ElementsKit の事前作成ページを使用して Web サイトを作成する

ElementsKit は多くの機能を提供します 既製のページとテンプレート セクションとセクションがあるため、コーディングを行わずに、希望するデザイン、レイアウト、スタイルの Web サイトを構築できます。このブログでは、 ウェディングプランナーのランディングページ ElementsKit による。

ウェブサイトを作成するには、WordPress ダッシュボードから次の場所に移動します。 ページ ⇒ 新規追加

• 与える タイトル ホームなど、選択します 要素の全幅 テンプレートオプションから
• クリックして公開 公開後にクリックします Elementorで編集する

• Elementor Builder ウィンドウが開いたら、ElementsKit ボタン (EK) をクリックします。

• に行きます ページ タブ、検索 結婚式 ページを開いてクリックします 入れる

今 クリック 更新時に保存する

ステップ #3: Elementor の 1 ページ ナビゲーションを追加する方法 ElementsKit を使用する

Web サイトが完成したので、今度は Elementor の 1 ページ スクロール ナビゲーションを追加する楽しい部分を始めます。 ElementsKit Onepage スクロール ナビゲーションは使いやすくなり、サイトに素晴らしい外観を与えます。 ElementsKit ほど優れた 1 ページ スクロールの Elementor アドオンを見つける可能性は非常に低いです。

ここで、WordPress サイトに 1 ページのスクロール ナビゲーション リンクを追加するプロセスを段階的に見てみましょう。

3.1 1 ページ スクロール モジュールをオンにする

To add Elementor scroll navigation to your WordPress site, first, we need to turn on the Onepage Scroll Module.

• 次の場所に移動します: WordPress ダッシュボード ⇒ ElementsKit ⇒ モジュール 
• オンにする 1 ページのスクロール
• クリック 変更内容を保存 更新する

3.2 ページ設定から 1 ページ スクロールを有効にする

• Elementorパネルの左下隅にある設定アイコンをクリックします。
• ElementsKit 設定タブを開きます
• 1 ページ スクロール オプションを有効にする

注記： [1 ページ スクロール設定] オプションが見つからない場合は、おそらく ElementsKit Pro をアクティベートしました

3.3 ナビゲーション スタイルの選択

Now, it’s time to choose the navigation style. ElementsKit gives you multiple options for Elementor one page menu navigation. For example, under the circle, you get  Scale-up, fill in, fill out, etc. For square pattern, you will have options like scale-up and as part of Line you will get options like the line to grow, line fill, line shrink, etc.

好きなスタイルを選択できますが、このブログではカスタム アイコンを選択します。カスタム アイコンを選択すると、1 ページ スクロール ナビゲーション スタイル オプションのアイコンを選択するオプションが表示されます。次のいずれかのアイコンを選択できます。 アイコンライブラリ またはカスタムをアップロードする SVGアイコン. 

カスタムアイコンを選択するには

• カスタムアイコンの選択 ナビゲーション スタイル ドロップダウンからのオプション
• ホバー ナビゲーションアイコン上と クリック アイコンライブラリにある
• 検索と挿入 好きなアイコン

3.4 その他のナビゲーション設定をセットアップする

ナビゲーション スタイルを選択すると、次の設定にアクセスできるようになります。

• ナビゲーション位置: ナビゲーションの位置を上、右、下、または左に設定できます。 
• ナビゲーション位置オフセット: ここでナビゲーション位置のオフセット値を選択できます。
• ナビゲーションの間隔: 各ナビゲーション アイコン間に必要なスペースを選択します。
• ナビゲーションの色:  ナビゲーション アイコンの色を選択します。
• ツールチップのタイポグラフィ: ここでは、ツールチップのファミリー、フォント サイズ、ウェイト変換、スタイル、装飾、行の高さを選択できます。

3.5 ページセクションをナビゲーションリンクに追加する

すべての設定が完了したので、ナビゲーションに表示するセクションを追加します。そうするために

• ホバー セクションをクリックして、 セクションの編集 アイコン
• に行きます 詳細設定タブ
• 拡大する ElementsKit のオンページ スクロール オプション
• セクションを有効にするをオンにします セクションを表示するには
• 有効化をオンにするt オプションでこのセクションをナビゲーション リンクの 1 つとして追加します
• の名前を入力します。 ツールチップのテキスト。誰かがリンク上にカーソルを置くと、ツールヒントのテキストが表示されます
• 最後に、「更新」をクリックして保存します

上記と同じプロセスを繰り返して、必要なすべてのセクションをナビゲーションに追加できます。

注記：  ナビゲーションには、内部セクションではなくセクションを追加できます。そのため、内部セクションやその他のウィジェットの詳細タブには、ElementsKit Onpage Scroll オプションはありません。

すべてのナビゲーションを完了したら、 更新してクリック を見るために プレビュー WordPress の 1 ページ ナビゲーションの確認、およびナビゲーション メニューのリンクの確認にも使用できます。

ステップ #4: ElementsKit の事前作成されたヘッダー フッター セクションを使用してヘッダー フッターを追加する

さて、WordPress で Web サイトの 1 ページ ナビゲーションを作成しましたが、Web サイトを完成させるにはヘッダー フッターがまだ必要です。 Web サイトのヘッダーとフッターのセクションは、ロゴや重要な情報を顧客が簡単に見られるように表示するために非常に重要です。

ElementsKit は多くの機能を提供します 既製のヘッダー そして フッターセクション から選択します。 ElementsKit ヘッダー フッターを使用するには:

• に行く ElementsKit ⇒ ヘッダーフッター ⇒ クリック 新しく追加する

• タイプを選択してください ヘッダ、条件としては サイト全体, オンにする アクティブ化/非アクティブ化オプションを選択し、最後にクリックします 変更内容を保存.

• ヘッダーセクションを追加するには、作成したメニューの「編集」をクリックします。
• 「コンテンツの編集」をクリックします
• 「EK」ボタンをクリックし、「セクション」タブに移動します。
• 好みのヘッダーデザインを選択して「挿入」をクリックします 

以下のビデオに従って、Web サイトの美しいヘッダー フッターを作成できます。

注記： ヘッダーと同じ手順に従って、ElementsKit の既成セクションを使用して Web サイトのフッター セクションを作成できます。

ステップ #5: 連絡先フォームをモーダル ポップアップとして追加する （ボーナス）

潜在的な顧客があなたとコミュニケーションしやすくなるように、あなたのウェブサイトに問い合わせフォームを追加しましょう。ポップアップを使用して問い合わせフォームを追加すると、1 ページの Web サイトがより魅力的な外観になり、必要なフォームも追加されます。

モーダルポップアップを追加するには、 お返事お願いします ポップアップモーダルのボタンをクリックし、そこにお問い合わせフォームを追加します。

• ElementsKit ⇒ ウィジェット ⇒ ポップアップモーダルをオンにする ⇒ 変更を保存をクリックします

• すべてのページ ⇒ ホーム ページ (または任意の名前を付けたページ) に移動し、 をクリックします。 Elementorで編集する

• 編集モードで、[RSVP] セクションまでスクロールし、[RSVP] ボタンを削除します。
• RSVP ボタンの場所にモーダル ポップアップをドラッグ アンド ドロップします。

• モーダル ボタンのテキストを変更するには、[コンテンツ] ⇒ [トグラー ボタン] ⇒ [ラベル] に移動し、「モーダルを開く」を RSVP (または任意の文字列) に変更します。

• [スタイル] タブ ⇒ [トグラー ボタン] に移動して、通常ビューとホバー ビューの両方のボタンの背景色、テキストの色、境界線の半径、およびその他の設定を変更します。

• 次に、[コンテンツ] に移動し、[テンプレート モードを有効にする] をオンにして、連絡先フォームを追加できるようにします。
• ポップアップボタンをクリックします。開いたら、本体の編集アイコンをクリックしてElementorエディターを開きます

• Metformを検索し、ウィジェットをドラッグアンドドロップします
• 「フォームの編集」をクリックして「連絡先フォーム」を選択します 
• リストから必要なフォームを選択し、「保存して閉じる」をクリックします。
• 最後に、「更新」をクリックして保存します

注記： 私はすでに Metform を使用して RSVP フォームを作成していましたが、使用しているランディング ページ テンプレートに合わせて色とスタイルも少し変更しました。ブログをチェックできます Metform を使用してコンタクトフォームを作成およびスタイル設定する方法. 

もチェックできます 手順については以下のビデオをご覧ください Metform を使用してカスタムお問い合わせフォームを作成する方法について説明します。

ステップ #6: 更新してプレビューを表示する 1 ページ ナビゲーションを備えた単一の Web サイト

さて、すべてが完了しました。次は最後のステップに進みます。これは最も簡単でエキサイティングなステップです。上記のカスタマイズと手順をすべて完了したら、 更新ボタン すべてを保存して、 プレビューボタン あなたのサイトを見るために。

すべての手順を正しく実行していれば、以下のような WordPress で 1 ページのナビゲーションを備えた単一ページの Web サイトが得られるはずです。

1 ページ ナビゲーションを備えた単一ページ Web サイトの利点は何ですか?

ビジネスが小さいという理由だけで、1 ページの Web サイトを作成しようと考えるべきではありません。1 ページの Web サイト、特に 1 ページの WordPress Web サイトを作成することには、他にも多くの利点があります。メリットのいくつかを見てみましょう。

• まず、モバイルフレンドリーです。これは、ウェブサイトの SEO (検索エンジン最適化) に関して考慮すべき重要なことです。 2021年現在、 米国国民の 70% はモバイル デバイスを使用してインターネットで検索します。このようなデータが原因です Google、モバイルフレンドリーなウェブサイトを優先。シングルページのデザインを使用すると、あなたのウェブサイトは最初から Google の優れた書籍に掲載されます。

• ほとんどの人が わかりやすく、美しく、要点を絞ったウェブサイトを好む 不必要に長いものではなく。 
• Google カウント ドメインとページレベル 40% 程度のリンク権限。これは、1 ページ サイトが有利になるもう 1 つの領域です。
• 単一ページの Web サイトは、大量のページがある Web サイトよりも速く読み込まれます。現代人には無限の選択肢があるという事実を考えると、読み込みの速いサイトは交渉の余地がありません。
• 1 ページのサイトはメンテナンスが簡単です。
• シングルページ Web サイトではすべての情報が 1 ページにあるため、スクロール ナビゲーションによってナビゲーションがはるかに簡単になり、スムーズなスクロール効果によってユーザー エクスペリエンスが心地よいものになります。

もう少し続けますが、上記の情報は、ビジネスが小さくても、実際には大きくなれるというメッセージを伝えていると思います。 小さなウェブサイトを使用することで大きなメリットが得られる with one page navigation.

Elementor 1 ページ スクロール Web サイトに関する最後の言葉

自分の背中を押してあげてください！ Elementor と ElementsKit を使用して、1 ページのナビゲーションを備えたモダンな外観の美しい Web サイトを作成することに成功したからです。シングルページの Web サイトを使用すると、顧客は Web サイトのさまざまなセクションに簡単に移動して、ビジネスについて知ることができます。また、お問い合わせフォームを備えたワンクリック モーダル ポップアップにより、実際にワンクリックでコミュニケーションが可能になります。 

自分が構築したものに感銘を受けた場合は、さらに驚かれる準備をしてください。ElementsKit は、WordPress および Elementor ユーザーが素晴らしい外観の Web サイトを実験して構築するための無限の可能性を開くからです。時間を作って他のものをチェックしてください 高度なウィジェットとモジュール ElementsKitの。

WordPress、Elementor、魔法の ElementsKit を使用した Web サイト構築について詳しく知りたい場合は、当社のソーシャル メディア アカウントをフォローしてください。