①Elementor(WordPressで自由にページをレイアウトするプラグイン)の使い方ー初めて編ー

はじめまして、WordPressコーチの木村なつきです。
久しぶりにHOW TO記事書きました。
何度もElementorってうってたのですが、この単語打ちにくい。。。泣けました。。。
どこかに誤字がある気がしてなりません(笑)
見つけたら教えて下さい~

Elementor(エレメンター)とは

Elementorって?
WordPressで使えるプラグイン。
トップページやランディングページなどの固定ページ、ブログの記事(投稿)をより自由にレイアウトできます。
例えばスライド画像やボタン、アイコンなどを自由にページの中に入れることができます♪
このサイトのトップページはElementorを使って作られています。
Elementorを使う時にはお金は一切かかりませんか?
WordPressの管理画面からダウンロードできるのは無料版です。
使ってみて有料版が欲しい場合には、プロ版を別途購入する必要があります。
因みに無料版でもかなり高機能なプラグインで、色々なことができます。

では思い立ったら、早速インストールしましょう~

Elementorの始め方-初めて編-

Elementorをインストールする

管理画面左側のメニューより

プラグイン > 新規追加 > 検索ボックスにElementorをコピペ
> 今すぐインストールボタンをクリック
> 有効化ボタンをクリック

これでもう使えます!

固定ページ(投稿)を新規作成する

Elementorを使いたいページまたは投稿を新規作成します。
よく分からない方は、とりあえず練習するためのテストページを作ってみて下さい。

管理画面左のメニューより

固定ページ(投稿) > 新規追加 > タイトルを入力します。

Elementorテンプレートを選択

これ大事なところ。
投稿画面の右側にある「投稿の属性」で Elementor全幅を選びます。
選んだら、右側の青い公開ボタンをクリック。

テンプレートの種類

デフォルト
サイトのヘッダー(上部分)、フッター(下部分)、サイドバー(左右部分)が入ったページ(投稿)を作る。
Elementor全幅
サイトのヘッダー、フッターが入ったページ(投稿)を作る。
Elementorキャンバス
ヘッダー、フッターを入れない真っ白なページから作っていく。主にランディングページ作成用。

※その他テーマによって、様々な種類のテンプレートがあります。

ここから実際のページを作ります。
説明しなくても分かると思いますが、投稿画面の中のでっかいElementorで編集ボタンをクリックして、いざElementorの世界へ~

Elementorのはじめ方-まとめ-

、新しい固定ページ(記事)を作成
テンプレートを選択
Elementorで編集ボタンをクリック

Elementorの使い方の流れ

セクションを入れる

開くとこんな感じの画面が出てきます。

ひとまず、中身を入れるときは水色で囲まれたをクリックしてみて下さい。
構造を選択っていうのが出てきます。
見てなんとなく分かりますよね。

行(横幅)をいくつに分割するのかってことです。
どれを選んでももちろんOKですが、ここでは2分割を選んでみますね。

セクションとは


2分割を選ぶとこんな画面になりました。
このセクションについて説明するだけでも、すごいボリュームになってしまいそうなので、詳細は後日細かく分けて書くとして…

ざっくり言うと、セクションはひとかたまりの枠ってことです(笑)
Elementorの編集画面の中では、水色の枠になります。
1つのかたまりにまとめたい物をこの中にポンポン入れていきます。

因みに、セクションの水色の枠の上に、●6つ×がぴょこって出てます。
ここからセクションを追加したり、編集したり、削除したりできます。

ちょっと先に知っておいて欲しいのが、コンテンツの幅ボックス全幅があるということ。
全幅を選ぶと、画面いっぱいにずどーんと中身を入れられます(笑)
ボックスを選ぶと、(幅は設定で変更できるのですが)両端に空白が作られます。

イメージで言うと、背景画像は画面幅いっぱいに表示するとちょっとかっこいいですが、
文章を画面いっぱいに表示させると、横に長くて読みづらくなってしまいます。
ここでは練習のために全幅を選んでみます。

セクションについて詳しくはコチラ

セクションの背景に色をつけてみる

ちょっと分かりやすいように、セクションの背景に色をつけてみましょう。
スタイル > 背景 > 普通
> 背景タイプ > クラシック
> 色 > 適当な色を選んでみる。
因みにここで色ではなく、画像を入れると、背景に画像が表示されます。

最後に更新ボタンを忘れずに。

中身(エレメント)を入れる

では中身を入れていってみましょう。
エレメンターですので、エレメントを入れてみます。

エレメントを入れる時には、メニュー右上の●9つボタンをクリックします。

そうすると、左側にずらっと入れられるエレメントが出てきます。
もちろんどれを選んでもOKですが、アイコンボックスを入れてみました。

なんとなく色々触って、色を変えたりアイコンのサイズを変えたり。。。
因みにコンテンツスタイル詳細というタブがあります。
また詳しくは書きますが、色んな設定ができてしまいます。


終わったら、右側には画像カルーセルを入れてみました。
さっきと一緒で、メニュー右上の●9つボタンをクリックしてからの
画像カルーセルをドラッグ&ドロップ。

ちょっと触ってこんな感じにしてみました。

実際のページはコチラになります。


それぞれの設定のスクリーンショットはコチラ。


そして最後は更新ボタン。

お疲れ様です!
こんな感じでどんどんセクションを追加して、中にエレメントを放り込んでいくことでページを作っていきます。

だいたいのイメージを掴んでいただけたら嬉しいです~

大事なポイント

大事なことを言います!
2018年11月18日(日)に、Elementorで自由にページを作る1日セミナーを開催します~(笑)開催しました!
感想はコチラ
マンガはコチラ

①Elementor(WordPressで自由にページをレイアウトするプラグイン)の使い方ー初めて編ー” に対して1件のコメントがあります。

  1. のりこ より:

    お使いのブラウザーには互換性がありません。 お使いのブラウザーはElementorのすべての編集機能とは互換性がありません。ChromeやFirefoxなど、別のブラウザーに切り替えることを、おすすめします。と、出てしまいます。どうしたら、良いですか?

    1. 木村なつき より:

      コメントありがとうございます。
      ChromeやFirefoxなどをダウンロードしてお使いいただけたらと思います。
      https://www.google.com/intl/ja_jp/chrome/

コメントを残す

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

CAPTCHA