水上アキラです。ランディングページ（LP）は少し前までは有料ツールばかりだとか、製作代行が必要だったりと少々敷居が高いものだったんですけど、今はWordPressなら無料で優秀なプラグインも作られています。
HTMLやCSSに詳しくなくてもマウスで動かすだけで
視覚的に簡単に使えるので初心者でも1時間で完成できてしまいますよ。
その無料プラグインは、Elementor Page Builderです。
これをインストールしておくと
- ランディングページが無料で作れる
- トップページをいつも同じ固定ページで作れる
- 元々のテーマとは異なるデザインの独立したページを作れる
- ソースコードを触る必要もない
- レスポンシブ対応
機能をさらに追加したいときは有料版もありますけど、無料版で十分使えます。
では、使い方を見ていきましょう。
Elementor Page Builderのインストール
いつものようにWordPressの左サイドバーから
『プラグイン』⇒『新規追加』で『Elementor Page Builder』を検索すると
こんなプラグインが出てきます。
インストール数も100万以上となっていて、更新頻度も良い感じなので
信頼できるプラグインと判断して良いでしょう。
『今すぐインストール』⇒『有効化』とすればインストール完了です。
左サイドバーに直接『Elementor』という項目が追加されましたね。
（『設定』などの直下あたりにあるかと）
Elementorの設定はデフォルトのまま何もいじらなくてもOKです。
Elementor Page Builderの使い方
早速ランディングページを作ってみましょう。
『固定ページ』⇒『新規追加』をします。
右サイドバーにある『固定ページの属性』のテンプレートを押すと、
ElementorキャンバスとElementor全幅があるので好きな方を選びます。
そして、タイトル、パーマリンクを設定しましょう。
この３つの設定が終わったら下書きとして保存を押します。
下書きとして保存をしないと、反映されないことがあったので注意です。
下書きとして保存をしたら、いよいよ『Elementorで編集』からスタートです。
Elementorで編集する
ロードされるとこんな画面になりましたね。
ここで編集した内容を下段の保存ボタンを押せば反映します。
画像やテキストを入れていけば完成するので無理に選ばなくても良いですが
もともと用意されているテンプレートは無料と有料のがあります。
テンプレートのデザインは、サイト全体ではなくその１ページだけが範囲です。
こんな風に好きな画像やテキストを順番に入れていくだけで完成します。
保存をしてURLを開いてチェックしながら編集しましょう。
画像の切り抜き
ちなみにですが、画像のサイズを横長にしたいときは
画像の切り抜きサイトが便利です。
私がよく使うのは、こちら。
まず、『画像を選択する』をして、『画像を加工する』と進みます。
画像が読み込まれたら、すぐ下にサイズ変更するための数値入力欄があります。
『サイズを変更する』を押して自分の気に入ったサイズに切り抜きましょう。
Elementorでよく使う項目
私が最初によく戸惑った部分や項目をまとめていきます。
最初のメニュー画面に移行
右で各項目の編集をしていると
最初のメニュー画面が分からなくなりますが
下図のポイントをクリックすれば戻ります。
画像
スタイルを押すと、幅の変更、透明度、角の丸みなども自由に変えられます。
テキスト
普通のWordPressで記事を投稿するときと同じ感覚で書けます。
左のボックス内で書いたほうが書きやすいかもしれません。
左右の境目にマウスを持っていくとカーソルが矢印になって幅も買えられます。
ボタン
クリックしてもらうためのボタンも自由に作れます。
『タイプ』で色を変更。
『テキスト』で文言を入れる。
『リンク』にURLを入力する。
『配置』で左中右の場所を変える。
『サイズ』でボタンの大きさを変える。
『アイコン』でテキスト横に付けるアイコンを変える。
さらに左上の『スタイル』や『詳細』タブで細かい変更も可能です。
画像ボックス
画像にリンクを付けることができます。
左下にいくと『リンク先』の項目があるのでURLを入力します。
見出しからはリンクが貼れないみたいです。
レスポンシブ対応
スマホやタブレットでも見られるようにサイズ調整をします。
自前で実機を用意しなくてもシミュレーションでどのように見えるのか分かります。
テキストや画像を入れたら、左下のパソコンマークみたいのをクリックすると
『デスクトップ』『タブレット』『モバイル』とプレビューの選択ができます。
『モバイル』を選択すると右の画面がスマホ用のサイズになりました。
テキストが詰まりすぎて見にくいと思ったら改行したり、サイズ変更をしていきます。
また、詳細タブを開いてマージンやパディングを変更できます。
マージンやパディングとは、HTMLでいう『余白』を意味します。
３つのマークがあってパソコン用とかスマホ用で見え方を変えることができます。
デフォルトでは上下左右がリンクされてるので、左だけスペースが欲しいときはリンクを外して数値を入れるなど色々工夫してみましょう。
Elementorのページをトップページに
WordPressの左サイドバーにある『設定』⇒『表示設定』を押すと
トップページがデフォルトなら『最新の投稿』なので変更して保存します。
Elementorまとめ
他の項目も基本的な使い方は同じようなものです。
Elementorは日本語対応もしてて視覚的に使えるので、とても分かりやすいプラグインです。
色々さがしたことがありますが、無料でここまで機能が揃うのはなかなか無いです。
ガンガン使って綺麗な固定ページを作りましょう。
コメント