【Elementor】無料でランディングページ作成できるプラグイン

WordPress

水上アキトです。ランディングページ(LP)は少し前までは有料ツールばかりだとか、製作代行が必要だったりと少々敷居が高いものだったんですけど、今はWordPressなら無料で優秀なプラグインも作られています。

HTMLやCSSに詳しくなくてもマウスで動かすだけで
視覚的に簡単に使えるので初心者でも1時間で完成できてしまいますよ。

 

その無料プラグインは、Elementor Page Builderです。

これをインストールしておくと

  • ランディングページが無料で作れる
  • トップページをいつも同じ固定ページで作れる
  • 元々のテーマとは異なるデザインの独立したページを作れる
  • ソースコードを触る必要もない
  • レスポンシブ対応

機能をさらに追加したいときは有料版もありますけど、無料版で十分使えます。

では、使い方を見ていきましょう。

 

Elementor Page Builderのインストール

いつものようにWordPressの左サイドバーから
『プラグイン』⇒『新規追加』で『Elementor Page Builder』を検索すると
こんなプラグインが出てきます。

インストール数も100万以上となっていて、更新頻度も良い感じなので
信頼できるプラグインと判断して良いでしょう。

 

『今すぐインストール』⇒『有効化』とすればインストール完了です。

左サイドバーに直接『Elementor』という項目が追加されましたね。

(『設定』などの直下あたりにあるかと)

 

Elementorの設定はデフォルトのまま何もいじらなくてもOKです。

Elementor Page Builderの使い方

早速ランディングページを作ってみましょう。

『固定ページ』⇒『新規追加』をします。

右サイドバーにある『固定ページの属性』のテンプレートを押すと、
ElementorキャンバスとElementor全幅があるので好きな方を選びます。

 

そして、タイトルパーマリンクを設定しましょう。

この3つの設定が終わったら下書きとして保存を押します。

下書きとして保存をしないと、反映されないことがあったので注意です。

 

下書きとして保存をしたら、いよいよ『Elementorで編集』からスタートです。

 

Elementorで編集する

ロードされるとこんな画面になりましたね。

ここで編集した内容を下段の保存ボタンを押せば反映します。

 

画像やテキストを入れていけば完成するので無理に選ばなくても良いですが
もともと用意されているテンプレートは無料と有料のがあります。

テンプレートのデザインは、サイト全体ではなくその1ページだけが範囲です。

 

 

 

こんな風に好きな画像やテキストを順番に入れていくだけで完成します。

保存をしてURLを開いてチェックしながら編集しましょう。

 

画像の切り抜き

ちなみにですが、画像のサイズを横長にしたいときは
画像の切り抜きサイトが便利です。

私がよく使うのは、こちら。

画像加工編集サイト - 無料で画像を加工、編集するならバナー工房
登録・インストール不要の無料WEBアプリです。2006年にサービスを開始した国内最大級の画像加工編集サイトです。誰でも簡単にオンラインで写真と画像を加工、編集できます。

 

 

まず、『画像を選択する』をして、『画像を加工する』と進みます。

 

 

画像が読み込まれたら、すぐ下にサイズ変更するための数値入力欄があります。

『サイズを変更する』を押して自分の気に入ったサイズに切り抜きましょう。

 

Elementorでよく使う項目

私が最初によく戸惑った部分や項目をまとめていきます。

最初のメニュー画面に移行

右で各項目の編集をしていると
最初のメニュー画面が分からなくなりますが
下図のポイントをクリックすれば戻ります。

 

画像

スタイルを押すと、幅の変更、透明度、角の丸みなども自由に変えられます。

 

テキスト

普通のWordPressで記事を投稿するときと同じ感覚で書けます。

左のボックス内で書いたほうが書きやすいかもしれません。

左右の境目にマウスを持っていくとカーソルが矢印になって幅も買えられます。

 

ボタン

クリックしてもらうためのボタンも自由に作れます。

『タイプ』で色を変更。

『テキスト』で文言を入れる。

『リンク』にURLを入力する。

『配置』で左中右の場所を変える。

『サイズ』でボタンの大きさを変える。

『アイコン』でテキスト横に付けるアイコンを変える。

 

 

さらに左上の『スタイル』や『詳細』タブで細かい変更も可能です。

 

画像ボックス

画像にリンクを付けることができます。

左下にいくと『リンク先』の項目があるのでURLを入力します。

見出しからはリンクが貼れないみたいです。

 

 

 

レスポンシブ対応

スマホやタブレットでも見られるようにサイズ調整をします。

自前で実機を用意しなくてもシミュレーションでどのように見えるのか分かります。

 

 

テキストや画像を入れたら、左下のパソコンマークみたいのをクリックすると
『デスクトップ』『タブレット』『モバイル』とプレビューの選択ができます。

 

 

『モバイル』を選択すると右の画面がスマホ用のサイズになりました。

テキストが詰まりすぎて見にくいと思ったら改行したり、サイズ変更をしていきます。

 

 

また、詳細タブを開いてマージンやパディングを変更できます。

マージンやパディングとは、HTMLでいう『余白』を意味します。

 

3つのマークがあってパソコン用とかスマホ用で見え方を変えることができます。

デフォルトでは上下左右がリンクされてるので、左だけスペースが欲しいときはリンクを外して数値を入れるなど色々工夫してみましょう。

 

Elementorのページをトップページに

WordPressの左サイドバーにある『設定』⇒『表示設定』を押すと
トップページがデフォルトなら『最新の投稿』なので変更して保存します。

 

Elementorまとめ

他の項目も基本的な使い方は同じようなものです。

Elementorは日本語対応もしてて視覚的に使えるので、とても分かりやすいプラグインです。

色々さがしたことがありますが、無料でここまで機能が揃うのはなかなか無いです。

ガンガン使って綺麗な固定ページを作りましょう。

今の人生、今の職場は充実してますか?


人生を心から楽しむには、生活の80%の時間を費やしている仕事が充実できてないと困難ですよね。 給料を上げる、残業が無い職場、ホワイト企業、を望む方は最新の求人情報をチェックするのをオススメしています。 (ご利用は全て無料です。)




レバテックキャリア(高年収&安定にこだわるなら)

運営会社 レバレジーズ株式会社
種類 若者向け就職エージェント
年齢 20~39歳 男女
職歴 IT経験者
対象地域 関東地方、関西地方
費用 無料
特徴 条件の交渉代行、経歴書の添削、模擬面談、社風や採用ポイントなど、
さらに高みを目指したい人のためのフルサポート体制が整っている。

レバテックキャリアは、ITエンジニアやクリエイターとして若いうちから稼いでいきたい人に選ばれている人気エージェントです。
紹介先はYahoo、DMM、バンダイ、ガンホーなど国内の大手IT企業も多数!
これまで10万人以上を内定に繋げてきた実績とノウハウは使ってみた人にしか分かりませんよ。

↓ ↓ ↓
IT/Webエンジニアの転職
【レバテックキャリア】はこちら





東京しごとセンター(30代から正社員を目指すなら)

運営会社 東京都営
種類 ミドルコーナー
年齢 30~44歳 男女
職歴 正社員未経験でもOK
対象地域 東京、神奈川、千葉、埼玉、茨城、栃木、山梨
費用 無料
特徴 自分に合った仕事を見つけたい、面接が苦手、未経験が不安、
など20代で大きな自信を持てなかった人でも
安定企業での正社員雇用を希望している方のための無料サービス。

東京しごとセンターは東京都が運営している職業紹介所です。
スタッフが求人企業に足を運んで実際に見て判断されていますし、
集団で合同説明会や専用ブースでの企業面接もあるので、書類選考なしで進むことも可能です。

また、1日5000円がもらえる就活支援金制度も多くの人が利用しています。

↓ ↓ ↓
30代からの正社員就職応援プロジェクト
【東京しごとセンター】はこちらから





マイナビエージェント(信頼性の高い求人ブランド)

運営会社 株式会社マイナビ
種類 若者向け就職エージェント
年齢 20~39歳 男女
職歴 正社員の転職向け
対象地域 東京、神奈川、千葉、埼玉、大阪、京都、兵庫
費用 無料
特徴 IT業界、金融業界、不動産業界、製造メーカーなど
これまでの経験を活かしたキャリアアップに適している。
大手企業の求人が多く目立つのはマイナビブランドによるものか。

マイナビエージェントは、専門のアドバイザーが全面サポートしてくれます。
各々が大企業にもパイプを持つため採用者の傾向を熟知し、
非公開求人が基本スタイルなのでライバルと競わずに内定まで進みやすいのです。

また、求人応募や面接スケジュールなど全て代行してもらえるので忙しい人でも使いやすいと評判です。

↓ ↓ ↓
関東関西・首都圏の求人多数。
マイナビの人材紹介サービス
【マイナビエージェント】はこちら





Tech Boost(最新のITスキルを学べる)

運営会社 株式会社 Branding Engineer
種類 プログラミングスクール
年齢 18~39歳 男女
職歴 ほとんどが未経験
対象地域 東京、神奈川、千葉、埼玉
費用 カウンセリングは無料
特徴 AIやIoT、ブロックチェーンなど
これからのIT業界で必須となる最先端技術を学べる。
卒業後に勤める会社まで紹介を受けられる。

Tech Boostは、全くの未経験からでも即戦力になれるITスキルを学べるスクールです。
普通はIT企業に就職しても開発経験が無ければお荷物になりがちですが、3か月の集中講座で
Ruby、Ruby on Rails、PHP/Laravel、データベースなどトレンドのIT技術を習得できます。

また、学習だけして終わりではなく、就職先の紹介まで受けられるのは大きな特徴です。

↓ ↓ ↓
AIやIoT、ブロックチェーンなどを学べる
【Tech Boost】はこちら





TokyoDive(上京したい人に仕事と部屋を同時提供)

運営会社 株式会社ダイブ
種類 上京支援サービス
年齢 18歳以上 男女
職歴 不問
対象地域 全国から東京へ
費用 案件による
特徴 地方から東京生活を始めるために必要になる
仕事と部屋探しを代行してくれる。
3ヵ月だけの体験上京もあり。
仕事は未経験歓迎な職種も多数。

TokyoDiveは、地方から東京に出ていきたい人のために仕事と部屋をセットで提供してくれるサービスです。
通常は、地方在住だと東京で仕事を探すにしても面接にも交通費が掛かり、
部屋を探すだけでも多すぎて迷い、それらを自力で同時に行うのはかなりの労力です。


しかし、TokyoDiveなら先に部屋が決まるので仕事先の面接にも簡単に行けます。

スキル無しでも未経験で気軽に始められる職種も多く、
部屋はワンルームから無料で住めるシェアハウスもあり、
そのままずっと何年も東京で暮らしている人もたくさんいます。

↓ ↓ ↓
田舎にいながら東京の仕事と部屋が見つかる
【TokyoDive(トーキョーダイブ)】はこちら





コメント