WordPressで1ページのナビゲーションを使用して単一ページのWebサイトを作成する（ボーナス付き）

あなたはあなたのビジネスのためのウェブサイトを構築しようとしていますが、大きなものを作成する時間がありませんか？ または、長期間のWebサイトのメンテナンスに取り組む準備ができていませんか？

次に、1ページのナビゲーションを備えた単一ページのWebサイトに移動する必要があります。 単一ページのWebサイトは、魅力的な方法ですべての情報を提供し、Webサイトに見事な外観を与えるため、ユーザーはより多くの情報を得ることができます。

このブログでは、WordPressで1ページのナビゲーションを使用して単一ページのWebサイトを作成する方法だけでなく、ボーナスとしてポップアップに連絡フォームを追加する方法も学習します。

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

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

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

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

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

そして、この単純さは、単一ページのWebサイトに他のWebサイトよりも必要な優位性をもたらします。 1ページのWebサイトは、ウェディングプランナー、写真、スモールサロン、レストランなどの中小企業に最適です。

ただし、あまりにも多くの製品を販売したり、複数のサービスを提供したりして、より多くのオーディエンスに対応する必要がある大規模なeコマースビジネスがある場合は、単一ページのWebサイトは適していません。

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

あなたのビジネスが小さいという理由だけであなたのビジネスのために1ページのウェブサイトを手に入れることを考えるべきではありません。 1ページのウェブサイト、特に1ページのWordPressウェブサイトを持つことには他にもたくさんの利点があります。 いくつかの長所を見てみましょう：

• まず、モバイルフレンドリーです。 それはウェブサイトSEO（検索エンジン最適化）に関して考慮すべき重要なことです。 2021年の時点で、米国市民の70％がモバイルデバイスを使用してインターネットで検索しています。 このようなデータが、Googleがモバイルフレンドリーなウェブサイトを優先する理由です。 シングルページデザインで、あなたのウェブサイトは最初からグーグルの良い本に載っています。

• ほとんどの人は、不必要に長いWebサイトよりも、わかりやすく、美しく、要領を得たWebサイトを好みます。
• Googleは、ドメインおよびページレベルのリンク権限を40％の程度までカウントします。 これはあなたの1ページのサイトが有利になるもう一つの領域です。
• 単一ページのWebサイトは、大量のページがあるWebサイトよりも高速に読み込まれます。 今日の人々が無制限のオプションを持っているという事実を考えると、高速読み込みサイトを持つことは本当に交渉の余地がありません。
• 1ページのサイトは保守が簡単です。
• 1ページのWebサイトにはすべての情報が1ページに含まれているため、スクロールナビゲーションを使用するとナビゲートがはるかに簡単になり、スムーズなスクロール効果によりユーザーエクスペリエンスが快適になります。

もう少し続けることができますが、上記の情報は、あなたのビジネスが小さい場合、1ページのナビゲーションを備えた小さなウェブサイトを使用して実際に大きな利益を得ることができるというメッセージを伝えていると思います。 それでは、時間を無駄にすることなく、メインプロセスにジャンプしましょう。

WordPressで1ページのナビゲーションを使用して単一のWebサイトを作成する方法

このブログでは、ウェブサイトを構築する方法だけでなく、潜在的なクライアントを感動させるWordPressのモダンな外観の1ページのナビゲーションを紹介します。 このチュートリアルでは、人気のあるWebサイトビルダーのWordPressを使用します（タイトルに記載されていることはわかっています！）

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

ステップ1：必要なWordPressプラグインをインストールする

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

• Elementor （無料版）
• ElementsKit （無料版とPro版の両方）
• MetForm （無料版）

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

ステップ2：ElementsKitの既成のページを使用してWebサイトを作成する

ElementsKitには、多くの既成のページ、テンプレート、セクションが用意されているため、コーディングしなくても、必要なデザイン、レイアウト、スタイルでWebサイトを構築できます。 このブログでは、ElementsKitのWeddingplannerランディングページを使用します。

Webサイトを作成するには、WordPressダッシュボードから[ページ]⇒[新規追加]に移動します

• ホームなどのタイトルを付け、テンプレートオプションからElementorFullWidthを選択します
• クリックして公開し、公開後、Elementorで編集をクリックします

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

• [ページ]タブに移動し、[結婚式のページ]を検索して、[挿入]をクリックします

次に、更新をクリックして保存します

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

Webサイトができたので、1ページのスクロールナビゲーションを追加する楽しい部分があります。ElementsKit1ページのスクロールナビゲーションは使いやすく、サイトの見栄えを良くします。 ElementsKitと同じくらい優れた別の1ページのナビゲーションElementorアドオンを見つけることはほとんどありません。

それでは、WordPressサイトに1ページのスクロールナビゲーションリンクを追加するステップバイステップのプロセスを見てみましょう。

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

WordPressサイトにスクロールナビゲーションを追加するには、まず、OnepageScrollModuleをオンにする必要があります。

• 移動先： WordPressダッシュボード⇒ElementsKit⇒モジュール
• OnepageScrollをオンにする
• [変更を保存]をクリックして更新します

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

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

注： 1ページのスクロール設定オプションが見つからない場合は、ElementsKitProがアクティブ化されていない可能性があります。

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

次に、ナビゲーションスタイルを選択します。 ElementsKitには、ナビゲーション用の複数のオプションがあります。 たとえば、円の下には、スケールアップ、塗りつぶし、塗りつぶしなどがあります。正方形のパターンの場合、スケールアップなどのオプションがあり、線の一部として、拡大する線、線の塗りつぶしなどのオプションがあります。 、ラインシュリンクなど。

あなたは好きなスタイルを選ぶことができます、このブログのために私はカスタムアイコンを選ぶつもりです。 カスタムアイコンを選択すると、[1ページスクロールナビゲーションスタイル]オプションのアイコンを選択するオプションが表示されます。 アイコンライブラリからアイコンを選択するか、カスタムSVGアイコンをアップロードできます。

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

• ナビゲーションスタイルのドロップダウンから[カスタムアイコン]オプションを選択します
• ナビゲーションアイコンにカーソルを合わせ、アイコンライブラリをクリックします
• 好きなアイコンを検索して挿入します

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

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

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

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

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

• セクションにカーソルを合わせ、[セクションの編集]アイコンをクリックします
• [詳細設定]タブに移動します
• ElementsKitページスクロールオプションを展開
• [セクションを有効にする]をオンにして、セクションを表示します
• enable do tオプションをオンにして、このセクションをナビゲーションリンクの1つとして追加します
• ツールチップテキストの名前を入力します。 誰かがリンクにカーソルを合わせると、ツールチップのテキストが表示されます
• 最後に、更新をクリックして保存します

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

注：ナビゲーションには、内部セクションではなくセクションを追加できます。 そのため、内部セクションまたはその他のウィジェットの[詳細設定]タブの下に[ElementsKitオンページスクロール]オプションはありません。

すべてのナビゲーションを行ったら、更新してクリックし、WordPressで1ページのナビゲーションのプレビューを表示し、ナビゲーションメニューのリンクを確認します。

ステップ4：ElementsKitの既製のヘッダーフッターセクションを使用してヘッダーフッターを追加する

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

ElementsKitには、選択可能な多くの既成のヘッダーセクションとフッターセクションが用意されています。 ElementsKitヘッダーフッターを使用するには：

• ElementsKit⇒ヘッダーフッター⇒[新規追加]をクリックします

• [ヘッダーとしてタイプ]、[サイト全体として条件]を選択し、[アクティブ化/非アクティブ化]オプションをオンにして、最後に[変更を保存]をクリックします。

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

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

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

ステップ5：モーダルポップアップ（ボーナス）としてお問い合わせフォームを追加する

あなたのウェブサイトに連絡フォームを追加して、あなたの潜在的なクライアントがあなたとコミュニケーションを取りやすくする時が来ました。 ポップアップを使用して連絡フォームを追加すると、1ページのWebサイトがより魅力的になり、必要なフォームが必要になります。

モーダルポップアップを追加するには、 RSVPボタンをポップアップモーダルに置き換えて、それに連絡フォームを追加します。

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

• すべてのページ⇒ホームページ（またはページに名前を付けたもの）に移動し、Elementorで編集をクリックします

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

• モーダルボタンのテキストを変更するには、[コンテンツ]⇒[トグラーボタン]⇒[ラベルを付けて[モーダルを開く]]を[RSVP]（または任意のもの）に変更します。

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

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

• Metformを検索し、ウィジェットをドラッグアンドドロップします
• [編集]フォームをクリックして、お問い合わせフォームを選択します
• リストから目的のフォームを選択し、[保存して閉じる]をクリックします
• 最後に、更新をクリックして保存します

注：私はすでにMetformを使用してRSVPフォームを作成し、使用しているランディングページテンプレートに一致するように色とスタイルを少し変更しました。 Metformを使用して連絡先フォームを作成およびスタイル設定する方法についてのブログを確認できます。

Metformを使用してカスタムお問い合わせフォームを作成する方法については、以下のビデオをご覧ください。

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

さて、すべてが行われます。 最後のステップである、最も簡単でエキサイティングなステップです。 上記のすべてのカスタマイズと手順を完了したら、[更新]ボタンをクリックしてすべてを保存し、[プレビュー]ボタンをクリックしてサイトを表示します。

すべての手順を正しく実行した場合、WordPressで次のような1ページのナビゲーションを備えた単一ページのWebサイトを取得する必要があります。

要約

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

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

WordPress、Elementor、および魔法のElementsKitを使用したWebサイト構築の詳細については、ソーシャルメディアアカウントでフォローしてください。