無料のElementorだけで作ったヨガのコミュニティのLPのテンプレート

Elementorの新しい
無料テンプレートサイトが追加されました!

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

Elementorを使ってランディングページ(LP)を最短で作る方法

  • Elementorを使ってランディングページを作ることはできるのかな?
  • サイトデザインやコーディングもできないけどランディングページを作ることってできるかな?

本記事ではサイト作成をしているかたのこのような悩みにお答えします。

Elementorで作成できるランディングページ
Elementorで作成できるランディングページ

ランディングページとは上記のような商品の注文や問い合わせなどサイトに訪れたユーザーにアクションを起こしてもらうためのページです。

ユーザーが最初に訪れたページという意味でもあるのですが本記事では上記の意味合いとします。

自社の新商品などを紹介し、購入につなげるためにもランディングページはとても重要な役割となります。

しかし、サイトデザインやコーディングなどができないとランディングページを作ることは難しいです。

ウェブ制作会社などに高額の作成費を支払って、ランディングページを作成しないといけません。

もちろんプロにお願いすればとてもきれいな、売れるページを作ってもらえる可能性はとても高いです。

でも、いきなり高額な料金でプロにお願いするのではなく、いったん試しに作ってユーザーの反応を見てみたいと思うこともあると思います。

そんなときに、デザインやコーティングができなくても簡単にランディングページを作成できてしまうのがElementorです。

WordPressのプラグイン「Elementor」を使えば自分でオリジナルのランディングページを作成できるうえに、すぐに作りたい方のために多くのテンプレートも用意されています。

本文ではElementorでランディングページを作成する方法を詳しく解説していくのでぜひ読み進めてみてください。

Elementorで作れるランディングページとは?

Elementorはウェブページを自由自在に作れるwordpressプラグインです。

そしてElementorには最大の特徴ともいえるテンプレートライブラリという機能があり、この機能を使ってランディングページを短時間で作成することができます。

テンプレートライブラリはElementorが用意している高品質なウェブページのデザイン集です。

これをそのまま、自分の用意したページに挿入すればあっというまにプロのウェブデザイナーが作ったようなウェブページを作ることができます。

あとはそこに自分の考えたテキストを挿入したり、一部を自分の好みのデザインに変更したりするだけです。

ランディングページを1から自分でデザインして作成していくのはとても大変ですが、元から完成したデザインを自分で工夫して変えていけば、時間短縮にもなるしデザイン性もとても良いのでおすすめです。

次項ではランディングページを作るためにElementorを準備する方法を解説していきます。

Elementorでランディングページを作るための準備

こちらのページをご覧になっている方であればすでにwordpressにElementorをインストールしている方も多いとは思いますが簡単に説明してきます。

Elementorはwordpressのページビルダープラグインですので、まずはwordpressにElementorをインストールしておきましょう。

Elementorプラグインをインストールする
Elementorプラグインをインストールする

Elementorの詳しいインストール方法は「Elementorの使い方【完全ガイド】」で解説しています。

wordpressにElementorをインストールできましたら、ランディングページを作成していきましょう。次項よりランディングページの作り方を解説していきます。

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

今回は最速でランディングページを作れるようにElementorのテンプレートライブラリを利用して作る方法を解説していきます。

まずは新規で固定ページを作成する

固定ページを新規追加する
固定ページを新規追加する

メニュー→固定ページ→新規追加で固定ページを作成しましょう。

Elementorで編集をクリック
Elementorで編集をクリック

タイトルは分かりやすいもので良いです。今回はLPとしました。

タイトルを入力したら「Elementorで編集」をクリックしてください。

Elementorの編集画面
Elementorの編集画面

Elementorでの編集画面が表示されます。この時点ではサイトタイトルや固定ページタイトルが表示されてしまって邪魔ですね。

このサイトタイトルや固定ページタイトルを消す方法を次項で説明していきます。

固定ページが作成できたらページのレイアウトを指定する

真っ白な状態のページ
真っ白な状態のページ

左下の歯車アイコンをクリックし固定ページ設定メニューを開きます。

そしてタイトルを隠すを「はい」にして、固定ページのレイアウトを「Elementorキャンパス」にしてください。

これで、真っ白なページが完成しました。

テンプレートライブラリから好きなデザインを選ぶ

続いてはランディングページのデザインを選んでいきます。

ファイルボタンをクリック
ファイルボタンをクリック

フォルダアイコンをクリックして下さい。

landing pageと検索する
landing pageと検索する

ライブラリが開いたら検索にlanding pageと入力して絞り込んでください。

テンプレートを選んでクリックします
テンプレートを選んでクリックします

今回はこのテンプレートを使用してみます。

テンプレートにマウスオンすると+が表示されるのでクリックしてプレビューを表示します。

挿入をクリックします
挿入をクリックします

プレビュー画面で右上の挿入ボタンをクリックすると先ほど作った固定ページに反映されます。

テキストを変更したりデザインを調整する

テキストを変更したりデザインを調整したりする
テキストを変更したりデザインを調整したりする

あとは挿入されたテンプレートのテキストを任意のものに変更したり、画像を差し替えたりといった作業をすれば、簡単にランディングページを作ることができます。

とても簡単でクウォリティーの高いランディングページを作ることができますね。

Elementorならどんなウェブページも自由自在に作れる

あっというまにランディングページを作ることができたと思います。

慣れればテンプレートを使って1時間もかからずランディングページを作ることができると思います。

Elementorを使ってランディングページを作る方法をまとめると

  1. wordpressにElementorをインストールする
  2. 固定ページを作成してレイアウトを変更する
  3. テンプレートライブラリから好きなデザインを選択する
  4. テキストやデザインを調整する

通常のウェブ制作であれば、デザインを考えてそこからコードを入力してランディングページを作るといった工程になりますが、Elementorを使えばデザインしながらページが完成していくので誰でもランディングページを作ることが簡単にできます。

これなら、お金も最小限にランディングページを作ることができ、自社の新商品や新サービスを手軽に展開することができますね。

ぜひ、Elementorを使って高品質なウェブサイトを作成していきましょう。

ちなみに、さきほど解説したテンプレートライブラリですが、Elementorの無料版か有料版のElementor PROかで使えるテンプレートの数が変わってきます。

無料版でも十分利用できるElementorですが、痒い所にも手が届くようになるElementor PROはとてもおすすめです。

もし、Elementorでさらに高いクウォリティーのサイトを作りたいと思っている方はぜひ、Elementor PROの購入を検討してみてください。

「ElementorとElementor Proの11個の違いを徹底解説!」で詳しく解説しているのでチェックしてみてください。

Naomi Suzuki

このサイトを運営してるナオミです。エンジニア歴13年、海外在住歴20年。
WordPressの情報やハッキングを防ぐ脆弱性の情報と自分の海外での生活の一部を無料のメルマガで配信しています。

目次

コメントする

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

Elementorの無料テンプレートサイト
新規追加されました。

WordPressの最新情報が
毎週届く無料メールマガジン

DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。 

管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通