Diviテーマとは、世界で今最も人気のあるWordpressの人気テーマです。人気の理由の一つに、初心者でも扱いやすい操作方法と、そのコミュニティーの広さがあります。Diviテーマのだけに開発された豊富なテンプレートやプラグインや、本家Elegant Themesを始めとした、たくさんのYoutuberやブロガーの方達が、Diviテーマの使い方を初心者レベルから開発者レベルまで紹介しています。

もし何かウェブサイトを作成する上で、分からないことや困ったことがあっても、豊富なリソースによって、すぐに問題解決できるのも嬉しいところ。一度テーマを購入すると、Elegant Themesが開発した他のテーマやプラグイン、またフルサポートを受けることもできます。

このブログのStep By Stepチュートリアルシリーズでは、DIviビジュアルビルダーの使い方をでご紹介してきましたが、今回はDiviビルダーの使い方についてご紹介したいと思います。

Diviビルダーとは？

Diviビジュアルビルダーでは、その名の通りドラッグ&ドロップなどのビジュアル操作で、セクションやコラムを追加することができます。

Diviビルダーとは、バックエンドでWebをカスタマイズするためのビルダーです。　いまいちピンと来ない方は、こちらの画像をご覧ください。

Diviビルダーを立ち上げると、このような画面が表示されます。追加したい項目をクリックことによって、セクションの追加やモジュールの追加をすることができます。

基本的な各エレメント毎の設定は、ビジュアルビルダーと全く同じです。

ビジュアルビルダーとの大きな違いは、レイアウトがビジュアルで見れない代わりに、ページがどのように構成されているのかが一目でわかることです。

例えばサイト構成が以下の画像のようになっている場合、このセクションは通常セクションが使われていて、２コラム構成になっていることがわかります。左のコラムには画像モジュール、右のコラムには上からテキストモジュール、ディバイダー、テキストモジュールが挿入されています。

Diviのプラグインの中には、Diviビルダーでしかカスタマイズができないものも数多く存在します。そんなに難しい操作ではないので、ビジュアルビルダーとDIviビルダーの両方を使えるようになった方がベター。

操作に慣れてくると、シチュエーション毎に使い分けながら、ウェブサイトが作れるようになります。

もしかしたら、Diviビルダーの方が使いやすいという方も中にはいらっしゃるかもしれません^^;

では下でもっと詳しくDiviビルダーの基本操作について１つずつご紹介していきます。

Diviビルダーの基本操作

Diviビルダーは、一番トップに表示されている固定ページの編集をクリックするか、

もしくはダッシュボードの固定ページ>>固定ページもしくは新規追加をクリックして、ページ編集画面にあるDiviビルダーボタンをクリックすることによって立ち上げることができます。

セクションの追加と削除

ではまずセクションの追加と削除についてご紹介します。

画像赤枠で囲んである標準セクション、全幅セクション、特別セクション、もしくはDiviライブラリーの中から好きなタイプのセクションを追加することができます。

Diviでは、各セクションを色で識別してあります。

青：　標準セクション。標準セクションを追加すると、コラムの数を自由に選択することができます。

紫：　全幅セクション。全幅セクションを追加すると、そのセクションは１コラムのみの構成になります。またスライダーなどの、フルワイド専用のモジュールを追加することができます。

オレンジ：特別セクション。特別セクションでは、サイドバーと２コラムの構成など、最バリエーションに富んだ構成を選択することができます。

ライブラリから追加した場合、もしセクションが画像のように、黄緑になっていたら、そのテンプレートはグローバル設定になっているという意味です。グローバルとは共通設定になっているエレメントのことで、何か設定を変更したとしたら、そのグローバルエレメントが使われている全てのページが一括して変更になります。

左のカラーになっている部分のアイコンは、上から設定、エレメントの複製、セクションの削除を表します。

モジュールの設定

モジュールの詳しい設定については、ビジュアルビルダーと全く同じなので、詳細は省かせていただきます。

モジュールの追加は、モジュールの挿入ボタンをクリックするだけです。

ここで特筆すべきは、Diviビルダーはビジュアルビルダーと違って、プレビューを見ながら設定変更ができないところです。ではどうやって、設定変更を確認するかというと、各エレメントの設定内にある目のアイコンマークをクリックすることで、変更プレビューをみることができます。

アイコンをクリックすると、PC、タブレット、モバイル毎に設定変更のプレビューを確認することができます。

しかしながらサードパーティによるモジュールや、JSコードがテキスト内に埋め込まれている場合、アイコンをクリックしても、プレビューが表示されない場合があります。

その場合は、変更をプレビューをクリックすると、全体のプレビューが確認できます。

ライブラリーの保存と読み込み

ライブラリに保存をクリックすると、作成したページをライブラリーにテンプレートとして保存することができます。

またライブラリから読み込みをクリックすると、保存したテンプレートページを呼び出すことができます。

モジュールやセクションをライブラリに保存する場合は、各設定画面の目のアイコンマークの左側にあるライブラリに保存をクリックして、保存してください。
最後に公開をクリックして、変更を保存するのを忘れないでくださいね。
 

まとめ

ビジュアルビルダーを使っていると、たまにイライラさせられることがあります笑

例えば、１コラムに複数のモジュールを使っていて、モジュール間の余白がない場合や、ディバイダーなどの小さなモジュールを使用している場合、設定画面を開きたいモジュールをうまく選択できない場合などです。

またビジュアルビルダーは使いやすい反面、Diviビルダーに比べると動作が重たいので、ネット環境が悪かったりすると、たまにクラッシュしたりします。

Diviビルダーはいちいちプレビューで変更を確認しないといけないのが面倒ですが、デザインの構成が一目でわかるところが便利ですね。DIviビルダーで見てみると実は余計な空白のセクションが追加されていたりなど、ページの構成確認にも役立ちます。

少し前までは、ビジュアルビルダーは存在しておらず、このDiviビルダーのみしか搭載してなかったみたいです。

現在の主流はビジュアルビルダーになってきていて、人気のテーマにはだいたいビジュアルビルダーが搭載してあります。

基本的な設定方法は、ビジュアルビルダーと全く同じなので、状況に応じて、うまく使い分けてみてください^^

今回のチュートリアルで分からなかったことや質問等ございましたら、お気軽にコメント欄やSNS、またはメッセージにてお問い合わせください。またテーマやプラグインのリクエストも大歓迎です。

では次回のチュートリアルでまた会いましょう！ See you later<3