Elementorの使い方

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

作者：根本耕輔

[et_pb_section fb_built=”1″ _builder_version=”4.3.2″ width=”100%” width_tablet=”” width_phone=”” width_last_edited=”on|desktop” module_alignment=”center”][et_pb_row column_structure=”1_2,1_2″ module_class=”custom_row” _builder_version=”4.0.6″][et_pb_column type=”1_2″ module_class=”second-on-mobile” _builder_version=”4.0.6″][et_pb_text _builder_version=”4.0.7″]

この記事では、Elementorを使ってランディングページを作成する方法をご紹介していきます。一口にランディングページといっても、色々な意味がありますが、このページでは、

  • お問い合わせページ
  • オプトインページ
  • セールスページ

の作り方をご紹介していきます。とはいっても、コピーライティングの要素ではなく、Elementorの使い方をメインにご紹介していきます。

【限定】Elementorの使い方を網羅的に解説したオンラインコースが”無料”で受講できます。詳しくはこちら>>>

[/et_pb_text][/et_pb_column][et_pb_column type=”1_2″ module_class=”first-on-mobile” _builder_version=”4.0.6″][et_pb_image src=”https://kohsukenemoto.com/wp-content/uploads/2019/11/Elementorでランディングページを作成する方法.jpg” _builder_version=”4.3.2″][/et_pb_image][et_pb_text _builder_version=”4.0.6″]

（↑Pinterestでシェアお願いします！）

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.0.6″][et_pb_column type=”4_4″ _builder_version=”4.0.6″][et_pb_text _builder_version=”4.0.7″]

Elementorでページを作成する前に

ElementorをWordPress（ワードプレス）で使って行く前に、不具合や環境設定について確認をしておいてください。「Elementorが使えない？不具合が起こる原因はこれ！」という記事を確認し、テーマな使用環境を整えてみてください。

関連記事Elementorの基本的な使い方に関しては、「【完全版】無料で使えるページビルダープラグイン・Elementorの使い方」をご確認ください。

Elementorでランディングページを作成するのに最低限用意しておくもの

次に、Elementorでランディングページを作成するのに用意しておきたいものをご紹介していきます。

  • WordPress
  • Elementor

この2つを必ず用意しておいてください。まずは、WordPressです。ドメインを取得して、レンタルサーバーを契約し、インストールするところまで終わらせておいてください。ちなみに、すでにブログを所有しているという方は、ランディングページはサブドメインで運用していくことをおすすめします。先ほどご紹介した記事でもお伝えしていますが、WordPressテーマによってはElementorがうまく機能しなかったり、背景の色が変になってしまったりします。なので、サブドメインでワードプレスをインストールして、Elementorと相性が良いテーマをインストールすることをおすすめします。

  • Hello Theme
  • Ocean WP

ここら辺は、Elementorと相性が良いですし、無料で使うことができます。

そして、Elementorのプラグインをインストールすることもやっておいてください。無料で配布されていますし、WordPressのダッシュボードの「プラグイン」にある「新規追加」から検索をかけてもヒットします。[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”3.25″][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text _builder_version=”4.0.6″ header_font=”||||||||” header_2_font=”||||||||” header_3_font=”||||||||” header_4_font=”||||||||” header_5_font=”||||||||” header_6_font=”||||||||” header_2_font_size_tablet=”” header_2_font_size_phone=”25px” header_2_font_size_last_edited=”on|phone” header_3_font_size_tablet=”” header_3_font_size_phone=”20px” header_3_font_size_last_edited=”on|desktop” header_4_font_size_tablet=”” header_4_font_size_phone=”17px” header_4_font_size_last_edited=”on|desktop”]

Elementorでお問い合わせページを作成する方法

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=”1_2,1_2″ module_class=”custom_row” _builder_version=”4.0.6″][et_pb_column type=”1_2″ module_class=”second-on-mobile” _builder_version=”4.0.6″][et_pb_text _builder_version=”4.0.6″]

実は、Elementor単体ではフォームを作成することができないので、一般的なお問い合わせページを作成することはできません。じゃあ、どうやって作成するのかというと、コンタクトフォーム7という無料のプラグインと組み合わせます。コンタクトフォーム7は、その名前の通りお問い合わせフォームを作成することができるプラグインで、ショートコードを生成してくれます。それを、Elementorで作成したページに埋め込むことによってお問い合わせページが作成できます。

[/et_pb_text][et_pb_button button_url=”https://kohsukenemoto.com/elementor/how-to-create-contact-page/” button_text=”お問い合わせページの作り方をチェックする！” button_alignment=”center” _builder_version=”4.0.7″][/et_pb_button][/et_pb_column][et_pb_column type=”1_2″ module_class=”first-on-mobile” _builder_version=”4.0.6″][et_pb_image src=”https://kohsukenemoto.com/wp-content/uploads/2019/11/Elementorでお問い合わせページを作成する方法.jpg” _builder_version=”4.0.6″][/et_pb_image][et_pb_text _builder_version=”4.0.6″]

（↑Pinterestでシェアお願いします！）

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”3.25″][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text _builder_version=”4.0.6″ header_font=”||||||||” header_2_font=”||||||||” header_3_font=”||||||||” header_4_font=”||||||||” header_5_font=”||||||||” header_6_font=”||||||||” header_2_font_size_tablet=”” header_2_font_size_phone=”25px” header_2_font_size_last_edited=”on|phone” header_3_font_size_tablet=”” header_3_font_size_phone=”20px” header_3_font_size_last_edited=”on|desktop” header_4_font_size_tablet=”” header_4_font_size_phone=”17px” header_4_font_size_last_edited=”on|desktop”]

Elementorでオプトインページを作成する方法

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=”1_2,1_2″ module_class=”custom_row” _builder_version=”4.0.6″][et_pb_column type=”1_2″ module_class=”second-on-mobile” _builder_version=”4.0.6″][et_pb_text _builder_version=”4.0.6″]

Elementorでオプトインページを作成するには、別途Eメール配信サービスを契約する必要があります。日本のサービスでもオプトインフォームを作成して、それをページに埋め込むことはできますが、海外のものの方がマーケティングオートメーションを実装することが容易なので、海外のEメールサービスがおすすめです。

僕は、ConvertKitをメインのビジネスで使用しているのでオプトインページを作成する際もConvertKitを使って作成していきます。また、契約済みであることを前提とさせていただきます。

[/et_pb_text][et_pb_button button_url=”https://kohsukenemoto.com/elementor/landing-page-with-elementor/” button_text=”オプトインページの作り方をチェックする！” button_alignment=”center” _builder_version=”4.0.7″][/et_pb_button][/et_pb_column][et_pb_column type=”1_2″ module_class=”first-on-mobile” _builder_version=”4.0.6″][et_pb_image src=”https://kohsukenemoto.com/wp-content/uploads/2019/11/Elementorでオプトインページを作成する方法.jpg” _builder_version=”4.0.6″][/et_pb_image][et_pb_text _builder_version=”4.0.6″]

（↑Pinterestでシェアお願いします！）

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”3.25″][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text _builder_version=”4.0.6″ header_font=”||||||||” header_2_font=”||||||||” header_3_font=”||||||||” header_4_font=”||||||||” header_5_font=”||||||||” header_6_font=”||||||||” header_2_font_size_tablet=”” header_2_font_size_phone=”25px” header_2_font_size_last_edited=”on|phone” header_3_font_size_tablet=”” header_3_font_size_phone=”20px” header_3_font_size_last_edited=”on|desktop” header_4_font_size_tablet=”” header_4_font_size_phone=”17px” header_4_font_size_last_edited=”on|desktop”]

Elementorでセールスページを作成する方法

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=”1_2,1_2″ module_class=”custom_row” _builder_version=”4.0.6″][et_pb_column type=”1_2″ module_class=”second-on-mobile” _builder_version=”4.0.6″][et_pb_text _builder_version=”4.0.7″]

Elementorには無料のテンプレートも用意されています。実は、僕はこれまでに一度もテンプレートを使用したことがありません。確かにデザイン性は高いですが、ビジネスや販売する商品などによって、文章の量や構成が大きく異なってくるからです。もし、あなたも一からセールスページを作成する必要があるというのであれば、ぜひ、この記事を参考にしてみてください。

[/et_pb_text][et_pb_button button_url=”https://kohsukenemoto.com/elementor/how-to-create-sales-page-using-elementor/” button_text=”セールスページの作り方をチェックする！” button_alignment=”center” _builder_version=”4.0.7″][/et_pb_button][/et_pb_column][et_pb_column type=”1_2″ module_class=”first-on-mobile” _builder_version=”4.0.6″][et_pb_image src=”https://kohsukenemoto.com/wp-content/uploads/2019/11/Elementorでセールスページを作成する方法.jpg” _builder_version=”4.0.6″][/et_pb_image][et_pb_text _builder_version=”4.0.6″]

（↑Pinterestでシェアお願いします！）

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です