無料プラグインElementorの使い方。コード不要でワードプレスのトップページを超簡単にカスタマイズする方法

WordPressの固定ページやランディングページのカスタマイズをドラッグ＆ドロップでできる無料プラグインElementorの使い方を紹介します。

「ブログの過去記事がどんどん埋もれてしまうので、トップページからブログ全体が分かるようにしたい。」

「ミニサイトを作るといってもトップページから全体にアクセスしやすくカスタマイズしたい。」

「Wordpressでランディングページを作りたい」

でも、いったいどうやってやればいいの？？

私のようにHTMLやCSSのコードはほとんどコピペしている人は、カスタマイズをしたくても思ったようにできなくてイライラ、結局あきらめたこともあると思います。

そんな人におすすめなのが無料のワードプレスのページビルダープラグインElementor。

このプラグインを使うと、なんとドラッグ＆ドロップでWordpressのトップページや固定ページの編集とカスタマイズが簡単にできてしまいます。

（記事中のリンクにはアフィリエイトリンクが含まれています。詳しくはサイトポリシーをお読みください。）

コード不要でWordpressの固定ページをカスタマイズできるプラグインElementor！

Elementorはオープンソースでつくられたワードプレスのページビルダー系のプラグインの一つです。

しかもほとんどの機能が無料！！

Elementorの使い方はいたって簡単。

すべてがドラッグ＆ドロップで画像やテキストを好きな場所に入れることができます。

カラムの幅もドラッグして好きな幅に調整するだけ。

用意されたテンプレートを使うと自分で全体をデザインしなくてもサクサクとプロのようなページが出来上がります。

とまあ、なんとも便利なプラグイン。

もちろんレスポンシブ対応！しかもスマホ、タブレット、PCに出しわけもできるというから、至れり尽くせり。

そのうえ、基本的にはどのテーマを使っていてもOKというからびっくりです。

これでもうトップページのカスタマイズができなくて、泣く泣くあきらめることはないでしょう。

ブログのトップページ、ミニサイトのトップページ、ランディングページなどなど、どんどんカスタマイズしてみてください。

ちなみに有料版のElementor Proには、ネットショップで使う機能とか、メーリングリストへの登録など、タイマー、価格表などネットで稼ぐための機能がついています。

アフィリエイト用のサイトをつくりたい方は要チェックです。

Elementorで作ったランディングページと固定ページの例

Elementorでつくったランディングページはこちらです。私の人生初のランディングページでちょい恥ずかしい、、、。

• 日記ブログ卒業メール講座（無料）のランディングページ
• 『1万PVで10万円を達成した成功を運に頼らないブログの作り方』

怪しさがただよってますが、そこはご愛嬌で！個別ページのデザインはElementorのテンプレートを使いました。

このページでは有料版のElementor Proの価格表を使っています。

私が買ったのはPersonalです。有料版は1回払えばずっと使えます。ただしサポート＆アップデートは1年間です。

カテゴリーのトップページもElementorで作りました。WordPressの固定ページのカスタマイズもプラグインを使えばこんなに簡単にできるとは感動です。

• 初心者のブログの始め方（海外編）
• 日記ブログを卒業してお仕事ブログを作る方法

WordPressページビルダープラグイン「Elementor」の基本的な使い方

ステップ１：Elementorをインストールする

プラグインの新規追加からElementorを検索します。

似たような名前のプラグインがありますが、“Elementor Page Builder”を選んでインストール、アクティベイトしてください。

ステップ２：Elementorの基本設定をする

Elementorの基本設定を確認します。

私は基本設定はデフォルトのまま何も変えていません。

参考までにこんな感じです。おそらくコンテンツ幅は使っているテーマや設定によって違うと思います。フルスクリーンをサポートしているテーマなら、フルスクリーンの固定ページが作れます。

ステップ３：Elementorつくるページを用意する

さっそくブログのトップページをつくりましょう。

まずは固定ページから新規追加を選びます。

最初に３つの設定をします。

• 記事のタイトル
• パーマリンク
• テンプレート

タイトル、パーマリンク、テンプレートを決めたら、ここで「下書きとして保存」します。

固定ページの属性から、使うテンプレートを決めます。Wordpressのテーマによりサポートされるテンプレートが違うので、確認してくださいね。

よく使うテンプレートは３種類です。目的にあわせて、サイドバー有無、ヘッダー、フッター有無を選びます。

• デフォルトテンプレート（サイドバー有り、タイトル表示有り、ヘッダー有り、フッター有りの普通の固定ページ）
• Elementor Canvas　（サイドバー無し、タイトル表示無し、ヘッダー無し、フッター無し。ランディングページ向き）
• Elementor Full Width（サイドバー無し、タイトル表示有り、ヘッダー有り、フッター有り。サイドバー無しの固定ページ）

下書きで保存しないと、テンプレートの変更が反映されません。下書きで保存してからElementorで編集をクリックしてください。

ステップ４：Elementorを使ってページを編集する

ドロップ＆ドラッグで固定ページを編集できます。

すごくわかりやすいので、使える人はここからはご自分でガシガシと使ってみてください。

ちょっと不安という方は、後で基本的な操作を説明しているので参考にしてくださいね。

簡単に説明すると

１．「新しいセクションの追加」からそのセクションのカラム数を決める
２．左のエレメントアイコンから使うエレメントをドラッグして編集

この２つの繰り返しです。

テンプレートを使いたい方は、ここでテンプレートを入れてください。

ちなみにおしゃれな感じのテンプレートがそろっています。テンプレートは個別ページ、記事ページ用なので、ブログ全体のテーマが変わるわけではありません。念のため。

左下にある緑色のボタンの▲をクリックしてSave Draftで下書き保存できます。こまめに保存してくださいね。

Elementorで作ったページを公開する

要素ボックスの下のいちばん左側の×をクリックしてElementorを終了します。普通の編集画面から公開をクリックします。

Elementorで作ったページをトップページに設定する

あとはつくったページをトップページに設定したら終了です。設定＞表示設定からフロントページの表示を変更します。作ったページをフロントページに選択します。

注意）使っているテーマによってはフロントページの設定ができない場合があります。

Elementorの基本的な使い方

ものすごくわかりやすいプラグインなので使ってみるのが一番ですが、ここでは基本的な使い方を紹介しますね。

Elementorの基本その１：新しいセクションを追加する

新しいセクションの追加をクリックしてカラム数を選んでからエレメントを追加します。直接エレメントを使うこともできますが、セクションを選んだ方が細かい調整ができます。

このカラムの幅も数もあとからでも変更できます。

Elementorの基本その２：テキストを入力

テキストボックスでは、ほぼブログ記事と同じようにテキストを編集できます。左のボックスの中で編集をします。リンクを入れたり、文字をハイライトしたり色を変えたりも簡単。

 

Elementorの基本その３：画像を入れてリンクをつける

画像ボックスを入れるとアップロードしている画像をいれることができます。画像にリンクをつける場合は、リンク先からCustom URLを選びリンク先のURLを入力してください。

スタイルや詳細からさらに画像サイズの変更やパディングの調整ができるので、よいようにアレンジしてくださいね。

 

Elementorの基本その４：スペーサーやカラム間の空白を調整する

スペーサーを入れると、要素間に空白をいれることができます。セクションの上や下にスペーサーを入れて、見やすいように調整してください。

カラム間のすき間はセクションから変更します。PCではよくてもスマホでみると画像間が詰まっていたり、タイトルのすぐ下に画像がきたりしたので、画像の下にスペーサーを入れて調整しました。

Elementorの基本その５：ソーシャルメディアアイコンを入れる

ソーシャルメディアのアイコン（Social Icons）も簡単に挿入できます。スタイルから、色や形を変えることができます。

リンク先を自分のメディアのページに設定してくださいね。

Elementorの基本その６：カラムとセクションについて

セクションはその横につながっている構成です。

下の図では4つのカラムが一つのセクションになっています。セクションを削除すると4つのカラムごと削除されます。

カラムは、一つ一つのボックスです。

カラムをコピーすると、同じセクション内、つまりその横にカラムがコピーされます。セクションをコピーすると、その下にセクションがコピーされます。

カラム間のすき間も簡単に変えられます。カラムやセクションの背景はスタイルから設定できます。

Elementorの基本その７：セクションとセクションの間に新しいセクションを挿入する

これはやり方がよくわかりませんでした。セクションはドラッグできないようです。

セクションを挿入したいすぐ上のセクションを選択し、コピーマーク（上の図の赤で囲ってあるところの左から2番目のアイコン）をクリックしてコピーを作った後に、そのセクションの構成要素を消しました。

いい方法があれば、コメントかTwitterで教えていただけると嬉しいです！

Elementorの基本その８：最新の投稿を表示する

左の要素ボックスを下までスクロールするとウィジットが表示されます。ここから最新の投稿をドラッグして好きなところに入れてください。ここでは、テキストだけが表示されます。

この新着ポストやそのほかのポストをイメージ付きで表示するのは、有料版のElementor Proの仕様です。イメージのサイズとか簡単に変えられるので、こだわりたい人にはおススメ。

有料版のElementor Proには、ネットショップで使う機能とか、メーリングリストへの登録など、タイマー、価格表などネットで稼ぐための機能がついています。

Elementorの基本その９：Shortcodeを利用する

うれしいことに要素のひとつにShotcodeがあります。使っているテーマのShortcodeやプラグインでShortcodeを入れていれば、ショートコードが使えます。

ハバグッデイ！の新着表示はショートコード（WP Canvas Shortcodes）を使っています。他のテーマでも使えるかどうか確認していないので、詳しくは次回に書きます。

別ブログハバグッデイ！のトップページでしていることの詳しい解説はこちらの記事です。>>無料プラグインElementorでトップページを楽々カスタマイズ。ハバグッデイ！のトップページの作り方

他のショートコード系のプラグインだとShortcodes Ultimate、Simple Shortcodesあたりが機能が豊富で無料使えます。

注意！ハミングバードなどでショートコードがすでにテーマに入っていると、ショートコードが競合する場合もあるのでご注意ください。

無料プラグインElementorの使い方まとめ

WordPressのページビルダー系のプラグインの中ではElementorはかなり使えるプラグインです。自分の好きなテーマをコード不要でここまでカスタマイズできるとはもはや感動的です。

しかも無料！！

使い方もお値段もやさしいこんなプラグインは見たことありません。これでもうトップページのカスタマイズも怖くない！

私も全部の機能を把握しているわけではないので、ぜひみなさん色々とつかって素敵なトップページを作ってくださいね。こんな便利な機能があるとか発見した方はコメントもらえると嬉しいです。

次回はハバグッデイのトップページのカスタマイズを少し詳しく紹介しますね。