ブロックエディタ-でDiviを使う

WordPressの標準ブロックエディター『Gutenberg』内でDiviモジュールを使う方法

こんにちはナオミです。

Diviビルダーでブログを書くのは少し難しいですよね。
やはりブログを書くならWordPressの標準エディタ『Gutenberg』を使いたいものです。
でもGutenbergの自由度はDiviに比べるとかなり少ないです。
もしこの二つを同時に使えたら、可能性が膨らみますね。

実はこれがDivi4.1から可能になったんです。
DiviのモジュールをGutenbergのブロックエディタの中で使えるようになりました!

『WordPressの標準ブロックエディター『Gutenberg』内でDiviモジュールを使う方法』を動画でご覧になりたい方はこちらからどうぞ!

Gutenbergとは

GutenbergとはWordPress5.0から導入されたブロックでコンテンツを構築できるWordPressの標準エディタです。
ブロックエディターとも呼ばれます。ブログを書くには最適のエディターです。

DiviとGutenberg、二つのエディタの融合

Diviのレイアウトブロック

Gutenberg内でDiviブロックが使えるようになりました。
ブロックのリストの中にDiviレイアウトブロックが登場し、それを選択することによりDiviモジュールをGutenberg内に挿入することができます。

実際にDiviレイアウトブロックを使ってみる

Diviではなくデフォルトエディターを選択

まず投稿やページを作る時に、Divi Builderではなくデフォルトのエディターを選択します。
これでGutenbergのブロックエディターが起動します。

日本語がおかしいですが『分割レイアウト』を挿入

Diviレイアウト挿入
また日本語がおかしい

なぜかDiviレイアウトではなく、『分割レイアウト』と訳されています。
なので『分割』と検索するとDiviのロゴのブロックが出てきます。

これを選択します。

Build new layoutを選択
Build new layoutを選択

この画面が出ましたら、『Build New Layout』を選択します。

Diviビルダー

Diviビルダーが起動

Diviビルダーが起動しますので、何か作ってみましょう。

Diviのギャラリーモジュール
このようにギャラリーを作ってみました。

右下の『保存して終了』を押します。

保存して終了
ギャラリーがGutenbergにロード

このようにDiviで作ったギャラリーがGutenbergにロードされます。
是非いろいろ試してみてください。

Diviのことをもっと深く知りたい方は、Diviの使い方完全ガイドをご覧ください。

コードを書かないウェブ制作を目指すコミュニティ『TOFUラボ』

Diviの最新情報を知りたいなら、ノーコードでWEBサイト制作を支援するサロン『TOFUラボ』に参加しませんか?
私が運営してるノーコードでWEBサイト制作を支援するのコミュニティです。

最新情報だけではなく技術的な質問も飛び交っています。

また、デザインやSEOなどWEBサイト制作に関する様々な勉強会も開催されています。

『TOFUラボ』の紹介はこちらです

興味があれば、是非参加してくださいね。
入会してから7日間は無料で合わないなと思えばいつでもキャンセル可能です。

Naomi Suzuki

このサイトを運営してるナオミです。エンジニア歴13年、海外在住歴20年。
WordPressの情報やハッキングを防ぐ脆弱性の情報と自分の海外での生活の一部を無料のメルマガで配信しています。

目次

コメントする

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

WordPressの最新情報が
毎週届く無料メールマガジン

DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。 

管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通