WordPress で Elementor ランディング ページを作成する方法

Elementor を使用して WordPress ウェブサイトにランディング ページを作成したいですか?

コンバージョンを急増させるような衝撃的なランディング ページを作成するのは難しいと思いますか? 

この記事を読むと、コンバージョン率の高い Elementor ランディング ページを構築するのは、思っているほど難しくないことがわかるでしょう。わずか 7 つの簡単な手順に従って、あらゆる機会やキャンペーンに合わせたテンプレートを使用してランディング ページを簡単に作成できます。 

このハウツーガイドでは、次の手順を説明します。 Elementor を使用してランディング ページを作成する最も簡単なプロセス。 Elementor ランディング ページ テンプレートを使用して WordPress でランディング ページを最初から作成する方法を学びます。

 探していたようですね？それではどうぞ。

ランディングページとは何ですか?

ランディング ページの定義については多くの議論がありますが、Wikipedia ではそれについて非常に詳しく説明しています。 

オンライン マーケティングでは、「ランディング ページ」とも呼ばれます。リード獲得ページ「、」単一のプロパティ ページ「、」静的ページ「、」ページを絞る” または”宛先ページ「」は、検索エンジンに最適化された検索結果、マーケティングプロモーション、マーケティング電子メール、またはオンライン広告をクリックすると表示される単一の Web ページです。

ウィキペディア

ホームページや Web サイトの他のページとは異なり、ランディング ページは独立したページです。それでも、通常、ブログ ページや Web サイトの他のページよりも多くのコンバージョンが生成されます。 

一言で言えば、人々をリーチさせるページです。人々をランディング ページに誘導する目的は、キャンペーンごとに異なります。

ビジネス用の WordPress ランディング ページを作成する場合、ランディング ページで訪問者に実行してもらいたいことがいくつかあります。 

1. 電話でご連絡します
2. 買物をします
3. イベントに登録する
4. チャットで連絡する
5. ニュースレターを購読する
6. フォームに記入するなどしてリードになります。 

キャンペーンの目標と性質に基づいて、ランディング ページはクリックスルー ランディング ページまたは見込み客獲得ランディング ページのいずれかになります。 

初期セットアップ

Elementor ランディング ページを作成するには、次のものが必要です。 

1. ウェブサイトにインストールされたWordPress
2. エレメンター (無料版)、および
3. ElementsKit プロ.

ランディング ページを公開するか、Local by Flywheel などのツールを使用してコンピュータにローカルに保存するかは、あなた次第であることに注意してください。

ランディング ページの共通セクション

率直に言って、ランディング ページに含めるべきセクションに関して厳格なルールはありません。

ランディング ページにどのセクションを含めるべきかは、WordPress ランディング ページを作成する機会と目的によって大きく異なります。 

当面は、ランディング ページに含まれる可能性のある一般的な要素のいくつかについて触れておきます。 

1. ヒーローセクション— 訪問者がページにアクセスするとすぐにヒーロー セクションが表示されるため、これはランディング ページの最も重要な部分です。このセクションには、見出し、小見出し、テキスト、CTA (行動喚起) ボタンが含まれる場合があります。 

2. ナビゲーションメニュー— ナビゲーションメニュー このセクションは、訪問者がランディング ページのあらゆる部分を探索するのに非常に役立ちます。 

3. について— ランディング ページの about セクションを活用して、あなたのビジネスやサービスについてもう少し詳しく知らせます。 

4. 特徴— 提供している製品やサービスの特徴を、驚くような画像と説得力のある文章で列挙します。 

5. ギャラリー— これは、たくさんのウィジェットを使用してあなたの創造性をすべて発揮できるセクションです。画像、テキスト、ビデオ、ソーシャル アイコンなど、最適なものすべてのギャラリーを作成できます。 

6. フォームセクション— 訪問者に連絡してもらいたい場合は、シンプルだが効果的な連絡フォームを含めます。使用できます MetFormフォームビルダー ランディング ページにあらゆる種類のフォームを埋め込むことができます。 

7. お客様の声— 訪問者の信頼を集め、あなたがどれほど素晴らしいサービスを提供できるかを理解してもらうために、ランディング ページに紹介文を追加するのは素晴らしいアイデアです。 

8. フッター— フッターは必須の部分ではありませんが、 フッターを追加する ランディング ページの一部に追加して、行動喚起を強化したり、「今すぐ行動する」ことを促したりします。

ちなみに、プライバシー ポリシー、利用規約、FAQ ページのリンクをフッターの最後に配置することもできます。 

Elementor ランディング ページを作成する 7 つのステップ

ランディング ページとは何か、およびランディング ページに必要な共通の要素に関する十分な情報が得られたので、次はその知識を実践します。 Elementor プラグインを使用してコンバージョン率の高い WordPress ランディング ページを作成する方法については、以下の手順に従ってください。

ステップ 1: レイアウト、グローバル フォント、および色の設定

Elementor テンプレートを使用してランディング ページの作成を開始する前に、ビジュアル エディターを適切に設定してください。 

◉ に行く ページ >> 新規追加
◉ をクリックしてください 「エレメンターで編集」
◉ ページの左下にある「Elementor 設定」に移動します。
◉ ページレイアウトを設定する 「エレメンターキャンバス」として、 公開 ページ。

グローバルな色とフォントを選択する場合は、サイト設定からプライマリ、セカンダリ、テキスト、およびアクセントの色を設定できます。

新しいウィジェットを Elementor エリアに追加すると、グローバル設定が自動的に適用されます。

ステップ 2: Elementor ランディング ページのヒーロー セクションを作成する

がある ふたつのやり方 Elementor を使用してランディング ページのヒーロー セクションを構築します。

1. Elementor ウィジェットをドラッグ アンド ドロップして、ヒーロー セクションを手動で作成します。
2. Elementor で利用可能なブロックのリストから既製のヒーロー セクションを選択します。

ヒーローセクションを一から構築する

あなたがエキスパートで最高レベルのカスタマイズを求めている場合は、Elementor ウィジェットを使用してヒーロー セクションを手動で構築できます。

まず、 「+」アイコンをクリックします Elementor 領域の をクリックし、1 列または 2 列のセクション (推奨) を選択します。 2 列のセクションは、見出し、小見出し、画像/ビデオを並べて表示するのに役立ちます。

見出しを追加します。 Elementor ブロック領域から 2 つの「見出し」ウィジェット (上下に) をドラッグ アンド ドロップします。

最初の見出しには H1 HTML タグを使用し、小見出しには H2 または H3 HTML タグを使用します。

見出しでは提供する内容を 1 文で説明する必要がありますが、小見出しでは 2 文以内でアイデアを展開します。

CTA を追加します。 目を引く CTA ボタンを追加して、訪問者がすぐに行動を起こすことを促します。これをする： 

• Elementor コンテンツ領域から「ElementsKit アイコン」をクリックします。 
• 準備完了セクションのカテゴリから「Call to Action」を選択します。
• リストからアクションを促すボタンのいずれかを選択し、「挿入」をクリックします。
• コンテンツ、スタイル、レイアウトに必要な変更を加えれば完了です。

既製のエレメンターヒーローセクションを使用する

Elementor を使用してランディング ページを初めて作成する場合は、Elementor の既製ブロックのリストからヒーロー セクションを選択できます。その方法は次のとおりです。 

• 「テンプレートを追加」をクリックします Elementor コンテンツ領域から。 
• 「ブロック」に移動します
• 「ヒーロー」を選択
• 好きなヒーローブロックを見つけて「挿入」をクリックします。
• 必要な変更を加えます。 

ステップ 3: ナビゲーション領域を構築する

Elementor を使用してナビゲーション領域を構築するにはさまざまな方法があります。簡単にスクロールできるように、Elementor ランディング ページのナビゲーション領域を構築する最も簡単な方法を説明します。 

Elementor を使用してナビゲーション メニューを構築する

• Elementor コンテンツ領域から「テンプレートの追加」をクリックします。 

• 「ブロック」に移動します

• 「ヘッダー」を選択します

• 好みのヘッダー ブロックを見つけて (Elementor のすべてのヘッダーは PRO ユーザー専用です)、「挿入」をクリックします。
• 必要な変更を加えます。

ElementsKit を使用してナビゲーション メニューを構築する [Elementor Pro の最良の代替品]

• Elementor コンテンツ領域から「ElementsKit アイコン」をクリックします。

• 「セクション」に進みます。カテゴリから「ヘッダー」を選択します

• リストからヘッダーのいずれかを選択し、「挿入」をクリックします。 

• 必要な変更を加えて、Elementor ナビゲーション メニューを構築します。

ステップ 4: WordPress ランディング ページの領域について

WordPress ランディング ページの about セクションを作成する場合、厳格なルールに従う必要はありません。このセクションには 1 列以上の列を指定できます。必要に応じて、アイコン、見出し、テキストを追加できます。 

Elementor を使用して WordPress のランディング ページの About エリアを構築する方法は次のとおりです。

• Elementor コンテンツ領域から「テンプレートの追加」をクリックします。 

• 「ブロック」に進みます。 「概要」を選択します

• 気に入った about ブロックを見つけて「INSERT」をクリックします。

• コンテンツとスタイルに必要な変更を加えます。 

ちなみに、このエリアにチームの写真や関連ビデオを追加するのも良いアイデアです。その場合は、ElementsKit のセクションのリストから「チーム」セクションと「ビデオ」セクションを利用します。 

ステップ 5: 機能領域の設計

ランディング ページで提供している製品やサービスの主な特徴を訪問者に知らせることが重要です。訪問者に素晴らしい機能を教育することで、訪問者は期待どおりに行動できるようになります。 Elementor ランディング ページの機能セクションをデザインする方法を教えてください。

• Elementor コンテンツ領域から「テンプレートの追加」をクリックします。 
• 「ブロック」に移動します
• カテゴリから「機能」を選択します
• 気に入った機能ブロックを見つけて「挿入」をクリックします。
• ニーズに合わせて変更を加えます。

ステップ6: ギャラリーエリア

ランディング ページにギャラリー エリアを配置して、訪問者にとってページが視覚的に魅力的なものにします。 ElementsKitを使用したElementorページビルダーでギャラリーエリアを簡単に作成できます。その方法を説明しましょう。 

• 要素 >> ウィジェットの検索に移動します
• 「ギャラリー」を検索して Enter キーを押します

• 右上に「EKIT」と表示された「ギャラリー」ウィジェットを見つけます。
• ウィジェットを Elementor コンテンツ領域にドラッグ アンド ドロップします。

• コンテンツの追加、レイアウトの設定、その他の設定を好みに応じて行います。

ビデオ ギャラリーを作成する場合は、ElementsKit のビデオ ギャラリー ウィジェットをドラッグ アンド ドロップすることもできます。

ステップ 7: お問い合わせエリアと問い合わせフォーム

ランディングページの訪問者に連絡してもらいたい場合は、次のことが必須です。 お問い合わせフォームを追加する そこには。問い合わせフォームはたくさんありますが、Elementor でカスタマイズできるものはほとんどありません。 

そのごく少数の中から、 メットフォーム Elementor WordPress Web サイトに最適です。 Elementor を使用してシングルステップまたはマルチステップのフォームを数分で作成するのに役立ちます。 

初心者がフォームを作成できるように、MetForm にはすぐに使い始めることができる 30 以上の定義済みのテンプレートが用意されています。ちなみに、問い合わせフォームを最初から作成したい場合は、25 個以上のドラッグ アンド ドロップ フォーム フィールドを使用して作成することもできます。

MetForm を使用して WordPress ランディング ページ用のお問い合わせフォームを作成する方法は次のとおりです。 

支払い方法と CRM の統合は、MetForm を使用するほど簡単ではありませんでした。

MetForm を使用すると、訪問者はページをリロードすることなく、簡単にファイルをアップロードしたりフォームを送信したりできます。

必要に応じて、MetForm によって作成されたフォームを使用してユーザーのブラウザ データを収集することもできます。

MetForm を使用してすべての連絡先フォームを作成することに興味がありますか? 
MetForm の機能とデモを調べる ここから

ランディング ページに必要な調整

ランディング ページを作成する一般的な要素は理解できましたが、Elementor でできることはそれだけではありません。ランディング ページには、さらにひねりやバリエーションを追加する余地がまだ十分にあります。

ランディング ページに適用できる、または少なくとも A/B テストを実行できるいくつかの調整についてお話しましょう。

ゼロから構築するのではなく、Elementor ランディング ページ テンプレートを使用する

ランディング ページ全体を数分以内に構築したい場合は、Elementor ページ ビルダーが提供する既製のランディング ページ テンプレートを使用するのが最善です。これらのテンプレートを使用して構築された素晴らしい Elementor ランディング ページの例が数多くあります。

Elementor には無料とプロの両方のランディング ページ テンプレートがあるため、予算に応じて選択できます。さらに、これらの無料およびプロ向けの Elementor ランディング ページ テンプレートは、デバイス、SEO 向けに高度に最適化されています。

Elementor ランディング ページ テンプレートを挿入する方法は次のとおりです。

• Elementor コンテンツ領域から「テンプレートの追加」アイコンをクリックします。 

• 「ページ」に移動します
• 「ランディング ページ」を検索して Enter キーを押します
• またはプロ使用するランディング ページを見つけて、[挿入] をクリックします。

• レイアウトやテキストなど、お好みに合わせて変更してください。 

スティッキーメニューとアンカーの追加

メニューをスティッキーとして設定し、常に一番上に表示したい場合は、ランディング ページでスティッキー メニュー機能を活用する必要があります。

学ぶ： Elementorで透明なスティッキーヘッダーを作成する方法 

訪問者がページ内を素早く移動できるようにするため、 アンカーを使用する すべてのセクションに Elementor のウィジェットを使用します。 

ナビゲーションを非表示にする

サイト全体でナビゲーション エリアを見るのに飽きて休憩したい場合は、ランディング ページのナビゲーションを非表示にすることをお勧めします。 

その場合、最善の方法は、ユーザーがランディング ページの特定の位置を超えてスクロールしたときにナビゲーション領域を非表示にすることです。

お客様の声の追加

ユーザーからの感想は、WordPress のランディング ページで使用できる優れた社会的証拠となります。 Elementor または ElementsKit のウィジェットと Ready ブロックを使用して、推薦文を追加できます。

お客様の声ウィジェットを使用する

• 要素 >> ウィジェットの検索に移動します
• 「Testimonial」を検索して Enter キーを押します
• Elementor または ElementsKit による紹介ウィジェットを選択してください

• コンテンツを追加し、スタイルを選択し、詳細タブ設定から変更を加えます。 

Elementor の既製の証言ブロックを使用する

• Elementor コンテンツ領域から「テンプレートの追加」アイコンをクリックします。 
• 「ブロック」に移動します
• カテゴリから「お客様の声」を選択してください
• 気に入った紹介ブロックを見つけて「挿入」をクリックします。
• 必要な変更を加えます。 
  

または

ElementsKit の既製のお客様の声セクションを使用する 

• Elementor コンテンツ領域から「ElementsKit アイコン」をクリックします。 
• 「セクション」に進みます。
• カテゴリから「お客様の声」ブロックを選択します。

• リストからいずれかの紹介スタイルを選択し、「挿入」をクリックします。 

• 必要に応じてセクションを編集します。さらに、次のこともできます 体験談を表示する WordPress で作成し、ElementsKit を使用して必要に応じてカスタマイズします。

よくある質問 (FAQ)

ホームページとランディング ページは似ていますか?

いいえ、ランディング ページとホームページは似ていません。これら 2 つのページを区別する大きな違いがいくつかあります。ホームページは Web サイトのトップページです。一方、ランディング ページとは、訪問者がアクセスするページを指します。さらに、ホームページには、ブランドや製品を完全に説明するために必要なランディング ページよりも多くのリンクと情報が含まれています。簡単に言うと、ホームページはブランドや製品に必要なすべての情報を伝え、ランディング ページは特定の機能やトピックに焦点を当てています。

Elementor を使用してハロウィーン オファーのランディング ページにどのような要素を追加する必要がありますか?

ハロウィーンのオファーを宣伝するための WordPress ランディング ページを作成するには、次の素材の使用を検討できます。 

• ➜ 不気味な背景
• ➜ 不思議なアニメーション
• ➜ スピリチュアルなアイコン
• ➜ 特殊なタイポグラフィー
• ➜ 伝統的なハロウィーンのシンボルなど 

ハロウィーン用のテンプレートを使用して Elementor ランディング ページを作成するプロセス全体を知るには、このブログを読んでください。  ハロウィン向けのランディングページを作成する方法

Elementor ランディング ページに FAQ セクションを追加するにはどうすればよいですか? 

よくある質問をランディング ページに追加するには、FAQ セクションを使用します。従う必要がある手順を説明します。 

Elementor の既製 FAQ ブロックを使用する

• Elementor から「テンプレートの追加」アイコンをクリックして、テンプレート ライブラリを開きます。
• 「ブロック」に移動します
• カテゴリから「よくある質問」を選択してください

• 気に入った FAQ ブロックを見つけて、「挿入」をクリックします。

• 必要な変更を加えます。 

または

ElementsKit の既製 FAQ セクションを使用する 

• Elementor コンテンツ領域から「ElementsKit アイコン」をクリックします。 
• 「セクション」に移動します
• カテゴリから「FAQ」ブロックを選択します

• リストから FAQ スタイルのいずれかを選択し、「挿入」をクリックします。 

• 必要に応じてセクションを編集します。

ブラック フライデー キャンペーン用に WordPress で Elementor ランディング ページを作成するにはどうすればよいですか? 

ブラック フライデー キャンペーンを開始する予定がある場合は、ブラック フライデー セールを提供する専用のランディング ページを作成すると、より多くの売上を得ることができます。を書きました。 ブラック フライデー セールを宣伝するためのランディング ページの作成方法に関するブログ。手順に従うだけで、Elementor を使用して素晴らしいブラック フライデー ランディング ページを作成できます。 

ランディング ページにカウントダウン タイマーを追加するにはどうすればよいですか? 

ランディング ページにカウントダウン タイマーを追加する は、訪問者に FOMO (見逃しの恐怖) を引き起こし、迅速な行動を促す優れたマーケティング戦略です。 

Elementor にカウントダウン タイマーを追加する方法は次のとおりです。 

• 要素 >> ウィジェットの検索に移動します
• 「カウントダウン タイマー」を検索して Enter キーを押します
• ElementsKitのカウントダウンタイマーウィジェット（右上にEKITがある）をドラッグ＆ドロップします。 

• お気に入りのカウントダウン タイマー スタイルを選択し、設定から必要な変更を加えます。 

年末年始の販売キャンペーン用のElementorランディングページを作成するにはどうすればよいですか?

年末年始のセール キャンペーンは、年間収益を大幅に伸ばすのに役立ちます。提供するセールに合わせて魅力的な Elementor ランディング ページを作成できるように、ステップバイステップのガイドを作成しました。

ここで確認してください: 新年キャンペーン用のランディングページの作り方

Elementor WordPress ランディング ページにはどの無料/プレミアム テーマを使用する必要がありますか?

WordPress テーマの大部分は Elementor ページ ビルダーと競合せずに動作しますが、一部のテーマは最もよく動作します。優れた無料テーマをお探しの場合は、次のいずれかを選択できます。 

• アストラ
• 生成プレス
• ネーベ
• オーシャンWP

しかし、選択することは、 アストラ 最高の人気のある WordPress テーマを提供するため、非常に推奨されます。

関連している: 探検する Elementor 向けの無料およびプロ向けの最高のテーマ 15 個 それらの特徴とともに、メリット、デメリット。

結論

おめでとう！これで、あらゆる機会やマーケティング キャンペーンに合わせて、WordPress でテンプレートを使用した場合と使用しない場合の Elementor ランディング ページを作成する方法がわかりました。ご不明な点やご質問がございましたら、お気軽にコメント欄にご記入ください。