divi内部構造

基本構造を覚えて下さい

DIVIは部品利用がとても簡単です。

ページ・ブログ制作画面で、DIVIが用意した部品をワンクリックで読み込む事ができます。

また、自分で作った部品をライブラリーに登録できますので、いつでもそれらを読み込んで利用する事ができます。

管理画面(メンテナンス)

ワードプレス管理画面

ログインすると表示される画面です。

左側のサイドバーにすべての機能が搭載されています。

DIVIの内部構造について

固定ページ一覧

制作済み固定ページ一覧表示です。

DIVIの内部構造について

DIVI機能概要説明

DIVI主要機能ボタン

DIVIの内部構造について

DIVIプログラムエリア(セクション・行・コード エリア)

DIVIの内部構造について

★セクション・行・コード各エリア事に設定できます。

情報の記述を行うのは【コードエリア】だけです。

レイヤー編集モード

レイヤーモードで表示ブロックを一覧表示した状態です。

DIVIの内部構造について

コンテンツの並び順は、左スミの+ボタンを掴んで、上下移動する事ができます。

DIVIの内部構造について

上手に使いこなすコツ。

部品の保存・読み込みの単位は、

 ◉セクション単位 

  ◉行単位 

   ◉モジュール単位

で行えますが、一番大きな部品枠組みの

セクション単位で保存・読み込みを行うようにするといいです。 

部品保存・読み込みのモードについて

通常と共有の二通りです。

 ◉通常

  通常モードで保存と読み込みができます。

 ◉共有

  共有化されますので、一記事修正を行うと、すべての共有部品も同時に修正されるモードです。

部品保存時のライブラリー別け(整理)

【仮置き場】

というライブラリーを用意してあります。

何度も利用する予定がなさそな部品は、仮にそこに保管して、読み込むようにして下さい。

 

何度も利用する可能性がある部品は、

ライブラリー(カテゴリーのようなもの)を作り、そこに保管すると呼び出す時が便利です。

ビューモード(パソコン)

パソコン表示のイメージを見ながら直接編集できます。

DIVIの内部構造について

画面上部のパソコンアイコンマークを押下すると切り替わります。

DIVIの内部構造について

ビューモード(タブレット)

タブレット表示のイメージを見ながら直接編集できます。

DIVIの内部構造について

画面上部のタブレットアイコンマークを押下すると切り替わります。

DIVIの内部構造について

ビューモード(スマホ)

スマホ表示のイメージを見ながら直接編集できます。

DIVIの内部構造について

画面上部のスマホアイコンマークを押下すると切り替わります。

DIVIの内部構造について

ビューモード(グリッド表示)

ビューモード編集でブロックを表示しながらの編集もできます。

※セクション・行・コードエリアの概念を理解しやすい編集モードです。

DIVIの内部構造について

グリッドの表示は、紫色Diviビルダータイトル右の、表ボタンを押下すると表示されます。

DIVIの内部構造について