『Elementor』自由にページを作れるWordPressプラグイン

elementorとは

こんにちは、ナオミです!

『WordPressでもっと自由にページを作りたい
『カッコいいLPを作りたいけどHTMLもCSSもわからない

こんな風に思ったことありませんか?
WordPressって意外と自由度が低く、HTMLやCSSを理解してないと使えない時がありますよね。
ここで普段ならDiviというWordPressテーマを勧めるところですが、テーマを変えたくない時もあります。
なので今日は『Elementor』というプラグインを紹介したいと思います。

>>Elementorの公式サイトはこちら
>>Elementor Proの購入完全ガイド

Elementorを使うとWordPress内でも自由にレイアウトを作ることができます。

この記事を読むと

  • Elementorの基本を理解できる
  • Elementorで実際にページを作れるようになる

Elementorは基本無料

ElementorはProバージョンもありますが、基本的に無料です。

Proバージョンの値段

Elementorの値段

これは1年間の値段です。
それぞれの違いは使えるサイトの数の違いです。

  • 1サイトで49ドル。
  • 3サイトで99ドル。
  • 1000サイトで179ドル(いつもは199ドル)

Diviのような生涯ライセンスはありません。

Elementorとテーマの相性

Elementorはプラグインなので、どのテーマにもインストールできます。
ですがたまにElementorが使えないテーマがあります。
激しくカスタマイズされたテーマでは使えないようです。

残念ですが、特に日本のテーマで有名なものでは、使えないものが多いようです。

Elementorが使えない日本のテーマ

  • Luxeritas
  • Cocoon
  • Lion Blog

Elementorが使える日本のテーマ

Elementorと一緒に使うために作られたテーマ

海外のテーマではElementorと一緒に使うために作られたテーマもあるんです。

他にも沢山あります。
この記事をみてください。
https://docs.elementor.com/article/78-themes

Elementorのインストール

まずはElementorをインストールします。
物凄く簡単です。

Elementorのインストール

Elementorは検索で見つかる

このようにElementorはWordPressのプラグインセクションから見つけることが出来るので、『Elementor』で検索しインストール → 有効化しましょう。

Elementor操作方法

それではElementorで実際にページを作りながら説明していきます。

Elementorでページ作成

早速新しいページを作ってみましょう。
この例では、Astraというテーマを使っています。

ページ編集画面に行くと、この『Elementorで編集』というボタンが現れるので、タイトルを入れた後にクリックします。
ここでエラーが出たり何かおかしくなったら、テーマとElementorの相性が悪いということなので、違うテーマで試してみてください。

テーマによっては、サイドバーがあったりと少し違うかもしれませんが、似たような画面が出てきます。
左側のリストはウィジェットのリストです。

基本はドラッグ&ドロップ

このように、使いたいウィジェットを掴んでドロップすることで、ページにそのウィジェットをロードすることができます。

編集画面

Elementorでテキストがドロップされた

左側に出てきたのが、このウィジェットの編集画面です。右側にも同じようにテキストが出ていますよね。
これはテキストエディターウィジェットです。
このウィジェットは名前の通りテキストを表示させるものです。
テキストを変えてみましょう。

スタイルタブ

編集画面の上にスタイルと書いてるタブがあります。
これを押してみてください。

このような画面が表示されます。
この部分はウィジェットによって変わります。
テキストエディターなので、文字色や書体などのテキストに関する設定を変えることができるわけです。

文字色を変えてみましょう。
右側のテキストの色も変わります。

詳細タブ

今度はスタイルタブの右側にある詳細タブをクリックします。

Elementorの詳細タブ

ここでは更に細かくウィジェットカスタマイズできます。
マージンはこのウィジェットの外側のスペースで、パディングは内側のスペースを表します。
何か値を入れてみましょう。

元のウィジェットリストに戻りたい時

またウィジェットのリストに戻りたい時は、編集画面の右上のアイコンをクリックします。

Elementor前に戻るボタン

これでどうやってウィジェットをページに追加して、カスタマイズするかわかったと思います。
でももっと複雑にウィジェットを追加したいですよね。
例えば、画面を三等分に分けて三つ画像を表示するとか。
次はその方法を紹介します。

カラムを分割する

この赤いプラスボタンを押します。

するとこの画面が表示されます。
これはどのようにセクションを分割するかを選択する画面です。
どれか選んでみましょう。

セクションの設定が出てきます。そして実際のセクションが二分割されてるのがわかると思います。
ここではセクションの設定を詳しくは説明しませんので、ウィジェットリストに戻ります。

分割されたカラムにウィジェットを挿入

それでは左のウェジェットリストから、好きなウィジェットを分割されたカラムに挿入してみましょう。

左側にテキストウィジェット、右側に画像ウィジェットを入れてみました。
『セクションを分割してそこにウィジェットを挿入する。』
Elementorを使ってレイアウトを作る際の基本的な操作はこれだけです。

Elementorで作ったページの保存とプレビュー

次にどうやってElementorで作ったページを保存して、プレビューし、この画面から抜け出す方法を紹介します。
最初は自分もどうやって元のページに戻るのかわかりませんでした。
ちょっとだけわかりづらいです。

ページ保存方法

このように、ウィジェットリストの下にある公開ボタンの横の矢印を押すと下書き保存が出てきます。
これを押せば保存されます。

公開を押すと即公開されますので気をつけてください。

ページのプレビューとダッシュボードに戻る方法

まずは一番左上のメニューボタンを押します。

Elementorプレビューでダッシュボードに戻るボタン

View Pageがプレビューです。
その下のボタンのラベルの通り、ダッシュボードに戻るには、下の青いボタンをクリックしてください。


いかがだったでしょうか?
Elementorはインストールも簡単ですし、本当始めやすいですね。
操作もシンプルだと思います。

Elementor Proになると更に色々できるのですが、それはまた別な記事で。
もし購入を考えてる方はここからどうぞ。
>>Elementor Proの購入完全ガイド

動画で見たい方はこちらです。この記事に書いてない情報もあります。

そしてこのようなページビルダーをお探しなら、是非Diviも試してください。
Diviは世界一使われているWordPressのテーマです。
Elementorに負けないぐらい凄いツールですよ
ここから試せます。https://demodivi.com

「『Elementor』自由にページを作れるWordPressプラグイン」に1件のコメントがあります

  1. ピンバック: 『Divi』vs『Elementor』徹底比較!

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です