チラシを撒いたりWEB広告を実施したりする際によく作成する「QRコードなどからすぐに飛べるページ」、いわゆるランディングページというものがあります。多くの場合は広告の延長線上のようなページで、最初にキャッチ画像があった後はユーザーボイスや商品の特徴を詳細に説明する文章やコンテンツが続きます。このLPを作成するためのソフトとして「ペライチ」や「賢者」といったツールが有効に活用されてきました。
しかし、近年Wordpress本家のプラグインとして開発されてきた「Elementor」というプラグインを使うことで、そんなランディングページを簡単に作成することができるようになりました。
そこで今回は実際に弊社サービス「Kvitanco(https://kvitanco.biz)」を題材に、Elementorを使用した簡単なランディングページ作成を行なっていきたいと思います。
※Wordpressのインストールが済んでいる前提でお話しいたします。
目次
まずはElementorのプラグインをダウンロード!
まずは、Elementorのプラグインをダウンロードします。有料版と無料版がありますが、高度なCSSでのカスタマイズが必要となるまでは無料版で大丈夫です。
無料版でも見出しタグ(H1〜H6)の後ろに動画を流したり…といった加工は可能です。まずは無料版を入れて、もう少しカスタマイズしたい…と感じてから有料版のライセンスを購入する、という流れでも問題ないです。
nlink URL=”https://elementor.com/pricing/”
まずは、ご自身のWordpressを最新版にあげてみましょう。執筆現在(2020年7月25日)現在のWordpressの最新バージョンは5.4.2です。
続いて、プラグインリストをみてみてください。WordpressにElementorはバンドルされているので、この段階でElementorがインストールされているはずです。
インストールされているのを確認したら「有効化」を押して準備完了です。
※万が一インストールされていなかった場合も「プラグイン>新規追加」から「Elementor」で検索するとプラグインがダウンロードできます。
※WordPressが5.8以上の場合、設定画面から新エディターを有効にすることで使用できるようです。
設定箇所は「設定⇨投稿設定⇨Block Editor」からonにします。
実際にやってみよう
固定ページ/投稿を作成し、上にある「Elementorで編集」を押します。
押すと、左側にパーツが出てきますので、右のエリアにドラッグ&ドロップします。
ポイントとしては、先にWEBサイトページ側にある+をクリックしてレイアウトを先に作ります。
構造を作成すると、それぞれの中に+をクリックする場所が表示されます。
そこを押すと、左側に「段落」や「ボタン」などのパーツが表示されるので、追加したいものを選択し、右側の本文パネルにドラッグ&ドロップします。
左側に設定が出てくるので、色や内部のテキストを選択します。
※こうして下記のようなWEBサイトは作成できます。
ぜひトライしてみてください。
nlink url=”https://kvitanco.biz/service/kvitanco-invoice/”
ここまで完了したら、実際にページを作成してみましょう!
今回は「投稿」ページで作成を試してみます。
通常通り「投稿」から「新規作成」を:押して記事の作成を開始すると…