Diviの使い方1、ビジュアルビルダーの基本【初心者必見】

こんにちは、ナオミです!
『Diviをインストールしてみたものの、色々なボタンが出てきてよくわからない。』
最初はみんなそうですよね。
ですが基本はとってもシンプルです。

この記事ではDiviのビジュアルビルダーの基本を説明します。

ビジュアルビルダーとはDiviが提供するページエディタなんですが、Diviがどうして世界で一番使われてるのかを実感できる、素晴らしいエディタです。

この記事は、あなたがもうすでにDiviをインストールした状態であると仮定して書いています。

もしまだDiviをインストールしてない方は、この記事からインストールの方法をみてください。

>>Diviの入手からインストールまでの完全ガイド、英語でも怖くない!購入からインストールまで5分かかりません

ただDiviを試してみたい方は、demodivi.comからDiviを試せますよ。

記事の内容

  • Diviでページを作り始める
  • Diviのセクション、行、モジュール
  • Diviのワイヤーフレームモード
  • Diviのビジュアルビルダーをスマホ画面にする
  • Diviのレイアウト

Diviでページを作り始める

まずは、Diviでページを作り始めるところから紹介します。

固定ページを作る

WordPressの通常の固定ページの作成を始めます。

Diviで固定ページを作成

するとこのEdit With The Divi Builderというボタンが出てきます。

Diviの使い方、Diviでページ作成する。テンプレートの設定

このボタンを押す前に、右側のページ属性の設定で、テンプレートをBlank Pageにしましょう。

こうすることによって、ヘッダーもフッターもない完全に何もないページからDiviを始めることができます。

Edit With The Divi Builderを押してください

Diviの『セクション』、『行』、『モジュール』

説明の途中でわからないところがあっても、後に全てわかるように説明していますので、続けて読んでみてください。

一番左の『構築を開始する』を選びます。

この画面が出たらビジュアルビルダーの中に入れたということです。
今この画像では『行』の形の選択を聞いています。
緑の箱を『列』と言います。
どれでもいいので、行の形を一つ選択します。
後からでも変えれますよ。

行の列にモジュールを挿入

Diviの使い方。モジュールの選択

次にこの画面が出てきたと思います。
モジュールの選択画面です。
ここでは『テキスト』を選んでみましょう。

設定画面

Diviの使い方、テキストモジュール

今あなたの一番最初のモジュールが挿入されました。
これが設定画面です。
設定画面のテキストを編集すれば、実際に表示されるテキストも変わります。

設定画面の下のボタンコントロール

この画面は違うモジュールでも、下のボタンは全て同じです。
そして設定画面のこの部分はセクションもモジュールも行も皆同じです。

後から出てくる、レイアウトもこの設定画面を使います。

  • 赤は変換を破棄して設定を閉じる
  • 紫は一アクション前の状態に戻す
  • 青は一アクション先の状態に戻す(紫を押した後でないと使えない)
  • 緑は変換を保存して設定を閉じる

赤か緑を押して、設定画面を閉じましょう。

それぞれのプラスボタンの説明

Diviの使い方。ボタンとアイコンの説明3

画面上をカーソルを移動させるとこのように、グレーと緑と青のボタンが出ます。
それぞれの機能は以下です。

  • 『グレー』は新しい『モジュール』を作る
  • 『緑』は新しい『行』を作る
  • 『青』は新しいセクションを作る

ボタンを押して色々と追加してみてください。
グレーを押せば、先程のモジュール追加画面が出てきます。
緑を押せば行の選択画面が出てきます。
青も押してみましょう。
下に新しいセクションが追加されます。

アイコンボタンの説明

これらのアイコンの意味を説明します。

Diviの使い方、アイコンの具体的説明2
  1. ドラッグ&ドロップ 
  2. 設定画面の表示
  3. 複製
  4. 行の形の変換(このアイコンは行のみに存在)
  5. Diviライブラリに保存
  6. 削除

2と4と6は説明がいらないと思います。

ドラッグ&ドロップ

ここを掴んで、好きな場所に移動することができます。

注意点は、モジュールはモジュールが置けるところにしか移動できません。つまり行の中のみです。そして同じように行はセクションの中のみにしか移動できません。

複製

これもシンプルです。押してみればわかりますが、複製を作ることができます。

Diviライブラリに保存

セクションと行とモジュール、もし後で別のページやサイトで使いたいなと思ったら、保存することができます。

詳しくはこの動画をみてください。

フリーランサー必見! Diviライブラリで レイアウトを再利用そして共有する方法

ボタンが押せない場合

ボタンが他の機能と重なって押せない場合があります。
その場合はワイヤーフレームモードを使います。

Diviのワイヤーフレームモード

Diviの使い方。ワイヤーフレームモード

左下にあるこのアイコンを押してみます。

もしこのアイコンが表示されてないのなら、画面の下の中央にある紫のボタンを押してください。

Diviの使い方、メインボタン
このボタンです
Diviの使い方。ワイヤーフレームモード

この画面が出ると思います。これがワイヤーフレームモードです。
この画面ならどのボタンも重なることがないので、簡単に押せます。

ワイヤーフレームモードはページの構造を表す

先ほどはテキストが画面にただ出てるだけでしたが、それが一番最初に作った『行』の中にあるということがわかります。
さらにそれを囲んでいるが『セクション』です。
これならページの構造が簡単にわかりますよね。

ワイヤーフレームモードとビジュアルビルダーは一心同体

ワイヤーフレームモードについては、この記事では深くは説明しませんが、ビジュアルビルダーもワイヤーフレームモードも一心同体で、片方に変化を及ぼすとそれがもう片方にも反映されます。

Diviのビジュアルビルダーの構造を理解するのに、ワイヤーフレームモードで見る方がわかりやすいですね。

もう一度同じアイコンをクリックすると元のページに戻ります。

Diviのビジュアルビルダーをスマホ画面にする

Diviの使い方、スマホビュー

左下に、この三つのアイコンがあります。
今は一番左のアイコンが選択されてますが、他の二つのアイコンをクリックしてみましょう。

Diviの使い方、スマホの画面

このように画面が小さくなったのではないでしょうか?
こうやってDiviを使えば、スマホやタブレットのサイズでページの編集が出来ます。

Diviのレイアウト

Diviの使い方。レイアウトメニュー

一番下にこんなメニューがありますよね。
これがレイアウトのメニューです。

レイアウトとは?

ページ全体をレイアウトと言い、セクションを囲んでます。
つまり、レイアウト→セクション→行→モジュールという構造なんですね。

レイアウトメニュー

上の画像の番号で説明していきます。

  1. ライブラリから読み込み
  2. Diviライブラリ
  3. 削除
  4. 設定画面
  5. 編集履歴
  6. レイアウトのインポートとエクスポート

2、3はすでにアイコンメニューのところで説明してますので割愛します。

ボタン1、レイアウトをライブラリから読み込み

Diviの使い方、レイアウトをライブラリから読み込み

ボタンを押すとこの画面が出ます。
これは予めElegant Themesが作ったサイトのレイアウトです。
使えるレイアウトがたくさんあります。試してみてください。

ですが選択したレイアウトが、今現在作ってるサイトを上書きします。注意してください。

ボタン4、レイアウトの設定画面

Diviの使い方、レイアウトの設定画面

これは従来のWordPressのページの編集画面の項目と同じです。
タイトル、注目画像、カテゴリーなどがあります。

ボタン5、編集履歴

このように、Diviはページを開いてからのユーザーのアクションを記録しています。
戻りたいアクションのところをクリックすることで、その状態に戻れます。
なので何か間違えて、元に戻したいときは便利です。

ボタン6、レイアウトのインポートとエクスポート

Diviの使い方、レイアウトのインポートとエクスポート

ここではレイアウトをエクスポートしたり、自分や誰かが作ったレイアウトをインポート出来ます。
ファイルはJSONフォーマットで作られます。
使い回せそうなレイアウトが出来たら、エクスポートしてみましょう。

Diviレイアウトの保存の仕方

Diviの使い方、下書きを保存

右下を見るとこれらのボタンがあります。
下書き保存はそのまま、下書きを保存するということです。
発行は、日本語がおかしい気がしますが、『公開』の意味です。
どちらも従来のWordPressのものと変わりません。

まずDiviを使ってみましょう

すごく沢山の情報ですね。
Diviを学ぶのに一番手っ取り早いの、使ってみることです。
実際に何かDiviで作ってみましょう。

「Diviの使い方1、ビジュアルビルダーの基本【初心者必見】」に1件のコメントがあります

  1. ピンバック: Diviの使い方2、モジュール設定の基本【初心者必見】

コメントする

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