この記事の目次

1. エレメンターとは？
2. Elementerの導入方法と簡単な使い方
3. 標準のブロックエディターじゃだめなの？
4. プラグイン「Elementer Blocks for Gutenberg」でテンプレートを使いまわす
5. エレメンターで自分の思い通りのページとブロックを作ろう！

ワードプレスでページやブログ記事を作っている時に、

・デザインにこだわったページを作りたい！

・この表はもう少し見栄え良くしたいなぁ・・・

と思ったことはありませんか？

ワードプレスのブログ記事やページの作成方法が、公開する状態に近い形で編集できるブロックエディターになっても、この悩みはなくならないと思います。

ブロックエディター自体は使いやすくなってきたと思うんですけど、デザインで考えると自由度が低いかなぁ・・・という印象を自分は持っています。

今回は、この悩みを解決できるプラグイン「Elementor」（エレメンター）をご紹介します。

なお、この先は「Elementor」を「エレメンター」とカタカナ表記させて頂きますのでご了承ください・・・

エレメンターとは、HTMLやCSSといったプログラミング言語の知識を必要とせずに、デザイン性の高いページを作ることができるページビルダープラグインの一つです。

ワードプレスの元々の設定で編集できる範囲（こだわれる範囲）は限られているので、「書く内容を考えて、ちょっと変わったデザインにしたい！」と考えても思い通りにいきません。

その編集できる範囲を拡げてくれるのが、このエレメンターです。しかも、プラグインのインストールだけで。

「ページビルダープラグイン」というだけあって、一つのページをゼロから作り上げることができるプラグインとなっています。

ゼロから作り上げるというと、「難しそう・・・」というイメージを持たれてしまいそうですが、そんな事はありません。

デザインに関わるほとんどの操作がマウスのみで、ブログ記事を書いてきた時にやっている操作（リンクを張る、文字を入力する）といった基本的な操作ができれば作れます。

以前に当社の工事部が展示会用にエレメンターで作成したページが残ってましたので、「こんなページが作れますよ」という参考としておいておきます。

実際のページはこちらです。普段当社の工事部のHPとして運用しているのはこちらです。

このように、普段使っているものとデザインを変えたページを用意したい時に便利なプラグインです。

「ランディングページをサクッと作りたい！」という時にも重宝します。

使用しているワードプレスの管理画面のプラグインぺージから導入できます。

検索フォームに「Elementor」と入力すれば出てくるので、「インストール」して「有効化」しましょう。

エレメンタープラグインダウンロードはこちらからどうぞ

あとは固定ページの編集画面に行き、

①タイトルの入力

②「ページ属性」の「テンプレート」を「Elementerキャンバス」に設定

③「Elementerで編集」をクリック

という操作をすれば、編集ができるようになります。

あとはブロックエディターのように、配置したいものを決めてページのデザインをしていきます。

詳しい使用方法については詳しく書いてくれてる方がすでにいらっしゃいますので、ご覧になってみて下さい。

自分はたまに使う程度でなので、ブロックの機能を良く忘れます・・・

そのような時に、ご紹介したようながっつり使用してる方の記事を参考にさせて頂いてます。

「そこまで高いデザイン性のものを求めているわけじゃないし、標準のブロックエディターで良いんじゃないか？」と考える方もいると思います。

もちろん、ブログを書くということで言えば標準のブロックエディターの方が使いやすいです。

全てのブログ記事やページをエレメンターを使って作成する必要もありません。

しかし自分が使ってて思うのは、

「この表はこんなデザインにしたい！」とか

「こういう方が読みやすいんじゃないかな？」という時にブロックエディターだと足りないんですよね・・・

元々用意されているデザインを使うしかなかったりと妥協することが多いです。

どうしても妥協したくない時は、HTMLブロックを選んで直接記述で作成したり。

ブロックエディターを使用するメリットである、公開状態に近い編集ができるという事を自分から無しにしてしまいます。

・・・まぁ、公開前にプレビューの確認は必ずしますけど、微妙ですよね。

それを解消する一つの方法が、エレメンターに用意されている機能の一つである「テンプレート」です。

ブロックエディターの機能で言えば「再利用ブロック」のようなものですね。

デザイン性の高いエレメンターで作成したテンプレートを、ブロック単位で保存することができます。

通常であれば保存したテンプレートはElementerで編集している時にしか使えないのですが、それを通常のブロックエディター編集時に使えるようにできるプラグインがあります。

エレメンターで作成したデザイン性の高い表やブロックを、通常のブロックエディターで使用できるようにしてくれるプラグインが、「Elementor Blocks for Gutenberg」です。

Elementor Blocks for Gutenbergプラグインダウンロードはこちらから。

これを使用すると、ブロックの選択画面に「Elementor Library」というものが追加されます。

なので、投稿で作成する通常のブログ記事内でも、エレメンターで作成したデザイン性の高いコンテンツを使えるようになります。

ブロックエディターが得意な文章の編集と、エレメンターが得意なデザインの編集の両方を良いとこ取りをできるプラグインですね。

特にCTA（コール・トゥ・アクション）と呼ばれる記事を読んだ後の問い合わせフォームへの誘導やメールアドレスの登録、電話をかけてもらうなど読者にしてほしい行動を促すためのコンテンツは見栄え良く作りたいですからね。

エレメンターのデザイン性を通常のブログ記事にも反映させることのできる、便利なプラグインです。

ワードプレスで簡単にデザイン性の高いページを作ることができるエレメンター。

このプラグインを使う事で、HTMLやCSSといったプログラミング言語を知らなくてもデザイン性の高いページを作ることができます。

一度気に入ったページやブロックを作れば、他のブログ記事やページで使えるというのも大きいですね。

有料のPROバージョンにすれば、ほぼページ全体のテンプレートもエレメンターの編集方法で作成することができるので、ページ単位ではなくサイトごと作りたいという方は、こちらも考えてみて下さい。

---