WordPresss

【WordPress Elementor】デザイン知識0が作成したランディングページ

・WordPressでLP(ランディングページ)を簡単に作る方法
・Elementorプラグインの導入方法と使い方の紹介

はじめに

ランディングページを試しに作ろうと思い、色々準備(過去記事参照)してきましたが、そもそものデザインの知識が無いためHTMLやCSSを理解したところで車輪の再発明になる恐れがあります。

使えるものはとりあえず使ってみようの精神で簡単かつ綺麗に出来るかに焦点を合わせた結果、Elementorというプラグインに出会いました。
今回はそのElementorというプラグインで、どういったランディングページが出来るのか紹介できればと思います。

Elementorプラグインの導入方法

何はともあれ、まずはWordPressにElementorを導入します。

管理画面から、「プラグイン>新規追加」を選択します。

キーワードに「Elementor」を入力して、「Elementor Website Builder」の「今すぐインストール」を選択します。
インストール完了後、有効化する必要があるため「Activate」を選択します。

インストールと有効化したあとは管理画面に「Elementor」が追加されていることを確認します。

以上で導入は終わりです。
Elementorにはプロ版が存在しますが、今回は無料版を使っています。

LP(ランディングページ)の作成

本題である、Elementorを用いてLPを作ります。
今回は固定ページに対してLPを作ります。

管理画面から「固定ページ>新規追加」を選択します。

新規追加画面のテンプレートを「Elementor キャンバス」を選択します。
「Elementor 全幅」を選択するとヘッダーとフッターが表示されます。
私のイメージですが、LPにそういったヘッダーとフッターは無い印象なので今回は「Elementor キャンバス」を選択します。

「Elementor キャンバス」に設定後、上部にある「Elementor で編集」ボタンを押します。

ボタンを押すとElementorの編集画面が表示されます。
私のような何をして良いのか分からない人は画面中央にあるフォルダアイコン(テンプレート)を押します。

フォルダアイコンを押すとテンプレートが表示されますので、「PROが付いていない」テンプレートを選択して、「挿入」部分を押します。

アカウント作成が求められますので、問題無い人はアカウントを作成します。

ログイン画面の「Create an Account」を選択してEメールアドレスとパスワードを入力して「Create Account」ボタンを押します。
パスワードは8文字以上で、大文字1文字、数字1文字、特殊文字1文字を含める必要があります。

作成後、WordPressとの接続を求められますので「Connect」ボタンを押してください。
少しだけ待つと、選択したテンプレートが編集画面に反映されます。

あとは見出しやテキストを良いように変えればLPの完成です。

完成したLP

テンプレートに沿って、今ある知識や未来へ向けた風のLPに変更しました。

最後に

初めてLPを作りましたが30分ほどである程度の物が出来て驚きました。

ちゃんとした物を作る場合は、テーマや経緯などの要望を聞いた上で作成するので30分では厳しいと思いますが、叩き台やイメージの共有レベルでしたらすぐに出来ると思いますので、参考になればと思います。