【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」で検索すると出てきます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Gutenbergエディタ内で、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つとも活用してみませんか？