【WordPress】GutenbergエディタでElementorのテンプレートを使う方法

ヨッチヨッチ

こんにちは!サイト運用メンターのヨッチです。

Elementor(エレメンター)は、WordPressで使えるページビルダーです。
投稿や固定ページで使えるので、すごく便利ですよね。

実はこのプラグイン、Gutenbergエディタにもブロックを組み込めるって知ってましたか?
Gutenbergエディタで使うことによって、デザインの幅がさらに広がっていきます。

というわけで、どうやってGutenbergでエレメンターを使うのか?
そして、どのようにデザインの幅が広がっていくのか?

この記事でくわしく解説していきます!

記事の内容を動画でまとめました!

ヨッチヨッチ

記事について、動画ですべてお話ししています。
補足も交えて解説しているので、気になる方はこちらもどうぞ。

GutenbergエディタでElementorのテンプレートを使う方法

まずは、Gutenbergエディタでエレメンターのテンプレートを使うための準備をしていきましょう。

といっても、たった3ステップなので簡単にセットアップできますよ。

  1. Elementor Blocks for Gutenbergをインストールする
  2. GutenbergエディタでElementorブロックを挿入する
  3. Elementorのテンプレートを選択する

プラグインをインストールして、Gutenbergのブロックからテンプレートを選択するだけです。

では、手順を1つずつ説明しますね。

【1】Elementor Blocks for Gutenbergをインストールする

最初に、「Elementor Blocks for Gutenberg」というプラグインをインストールします。
Elementorの公式プラグインなので、安心して使うことができます。

「プラグイン」→「新規追加」→「Elementor Blocks for Gutenberg」で検索すると出てきます。

Elementor Blocks for Gutenberg

アイコンを確認して、インストール・有効化しましょう。

【2】GutenbergエディタでElementorブロックを挿入する

次に、GutenbergエディタでElementorブロックを挿入します。
投稿・固定ページのどちらでもいいので、記事を新規作成しましょう。

Gutenbergのブロックで、「elementor」と入力すると出てきます。

「Elementor Library」

「Elementor Library」というブロックですね。
選択すると、テンプレートを選べるブロックが挿入されます。

テンプレートを選べるブロックが挿入される

テンプレートがある場合は、セレクトボックスから選択できます。
テンプレートがなければ、「create a new one」から新規作成しましょう。

セレクトボックスか「create a new one」を選ぶ

テンプレートの新規作成について

ここでは、テンプレートを新規作成する流れで進めていきます。

テンプレート用のセクション

テンプレート用のセクションが作成されました。
この画面で、自由にテンプレート用のブロックを編集できます。

ここでは、デフォルトで用意されているブロックを追加します。

デフォルトで用意されているブロックを追加

ブロックの中から、好みのテンプレートを選んで挿入します。

好みのテンプレートを選んで挿入

これで1つのセクションが完成しました。
公開をクリックして、テンプレートを保存しましょう。

公開をクリック

【3】Elementorのテンプレートを選択する

Elementorのテンプレートが用意できたら、もう一度Gutenbergエディタを開きます。
テンプレートを新しく作成した場合は、下書きを保存してからページを更新しておきましょう。

GutenbergエディタのElementor Libraryブロックで、用意したテンプレートを選択します。

用意したテンプレートを選択

Gutenbergエディタ内で、Elementorのテンプレートが表示されました!

Elementorのテンプレートが表示された

Gutenbergのブロックとして扱われるので、ほかのブロックを挿入することもできます。

たとえば、Elementorブロックの前に、段落ブロックを挿入してみました。

ほかのブロックを挿入することもできる

記事をプレビューすると、「段落ブロック→Elementorブロック」のように構成されています。

記事をプレビュー

GutenbergとElementorを併用できるので、デザインの幅がさらに広がります。

では、どうやって2つのエディタを活用していけばいいのか?
ここから詳しく説明しますね。

なぜブロックエディタでElementorを使うのか?

ブロックエディタ(Gutenberg)でElementorを使うことで、どんなメリットがあるでしょうか?

その答えは、ブログ記事のクオリティアップです。
ブログ記事を書くには、どちらかといえばブロックエディタの方が向いています。

Elementorはページビルダーなので、以下のようなコンテンツ作成に向いています。

  • サイト全体のデザイン作成
  • ブロック単位のパーツ作成
  • デザイン性の高い固定ページ

たとえば、こんなコンテンツですね。

Elementorなら、Gutenbergにはないアニメーションを付けることができます。
つまり、「ブログ記事にデザイン性の高いパーツを組み込むことができる」ということです。

エレメンターで作成したブロックをGutenbergで使うことで、2つの良さを引き出すことができます。

記事内の共通コンテンツとして使うこともできる

また、共通コンテンツとしてElementorブロックを活用することもできます。

変更を加えたくなったときは、Elementorテンプレートを編集するだけでOKです。
テンプレートが変更されれば、組み込まれたすべてのブロックに適用されます。

たとえば、テンプレートとしてCTA(Call To Action)を用意するとします。
複数の記事にElementorブロックで挿入すれば、一括で管理することも可能です。

【まとめ】GutenbergとElementorはどちらにも価値がある

ここまで、GutenbergエディタでElementorのテンプレートを使う方法を解説してきました。

どちらも直感的に使えるエディタなので、片方だけ使うことを考えてしまうかもしれません。
しかし実のところ、それぞれの役割はまったく異なっています。

2つの役割をまとめると、こんな感じです。

Gutenbergエディタ
ブログ記事に向いている
直感的にわかりやすい記事を書ける
Elementor
コンテンツ制作に向いている
コーディングなしでハイクオリティなコンテンツを作れる

2つのエディタの良いところを組み合わせたのが、今回お伝えした内容です。
つまり、「直感的にブログ記事を書いて、ハイクオリティなコンテンツを組み込む」ということですね。

GutenbergとElementorはどちらにも価値があるので、2つとも活用してみませんか?

ヨッチヨッチ

最後まで読んでいただき、ありがとうございます!
こうしてブログでお会いできたご縁に感謝しています。

ワードプレスの構築や運用、気になることがあれば、お気軽にご相談くださいね。
ウェブサイトを活用した集客・販売や、WEBマーケティングのコンサルも行っています。

サイト構築・運用について相談する