Divi 入門講座の第２回目として、 今回は Divi を使った固定ページの作成方法について、できるだけ図を用いて解説しようと思います。ワードプレスを使ったサイトの作成で固定ページだけでサイトを作成するという方も多いと思います。Divi では、豊富なレイアウトテンプレートを利用して簡単にサイトを作成できます。
ワードプレス Diviの使い方２
固定ページの作成チュートリアルツアー
今回は Divi をインストールし、ページの新規追加を行った際に見ることができるツアー（チュートリアル）について図解説します。
１．固定ページの新規追加
 | ワードプレスのダッシュボードの「固定ページ」＞「新規追加」をクリックします。 |
 | 「タイトルを追加」にページのタイトルを入力します。 Divi をインストールしていると、ページの編集時に Divi Builder を使うかときかれるので「Use Divi Builder」をクリックします。 |
２．Divi Builder のツアーを利用する
１）ツアー（説明チュートリアル）を開始する
 | Divi を使いだしたところでは左記のように表示され、説明チュートリアルを受けることができます。（一部英語ですが・・・） 今回は「ツアーを開始する」をクリックして、説明チュートリアルを受けながら、作成を進めてみることにしましょう。 Divi Builder では各所に「＋」ボタンが配置されています。そのボタンは追加操作を意味します。青はセクション、緑は行 ( Row ) 、黒はモジュールの追加となっています。 また「歯車⚙」のマークは設定変更を意味します。 |
２）新しいレイアウトを読み込む
 | 新しくページを作成したタイミングで、テンプレートのレイアウトを読み込みましょう。 紫の「＋」をクリックすると下図のように様々なレイアウトのテンプレートが表示されます。 |
ここでは Divi Builder に同梱されているレイアウトのリストを見ることができます。また Divi ライブラリに保存したレイアウトにもここからアクセスすることができます。
３）レイアウトを選択する
 | ツアーでは「Divi Builder Demo」のレイアウトパックを選択します。 クリックすると、下図のように表示され、レイアウトパックの詳細と、それに含まれるレイアウトのリストを確認できます。 |
ページにレイアウトを適用するには、「Use This Layout」をクリックします。
４）レイアウトが読み込まれる
 | レイアウトが読み込まれます。 |
レイアウトのテンプレートによって、もうページができました。後は文字と写真をクリックして変えるだけです。あるいはここからさらにコンテンツ（表示内容：枠）を追加しても良いでしょう。ツアーでは新しいセクションを追加します。
５）新しいセクションを追加する
コンテンツを追加するには、セクションとセクションの間にある「＋（青）」をクリックします。 Divi でのセクションとは、ページの構成要素（枠）におけるもっとも大きなものです。ページの作成は、まずセクションを追加して、その下に行や、モジュールを追加するという手順になります。
６）追加するセクションのタイプを選択する
 | セクションは３種類から選べます。
|
「通常」をクリックすると、下記のようにページに枠（セクション）が追加され拡がります。
７）追加する行のカラムを選択する
 | セクションに追加する行のカラムを選択します。図で表示されるので、どんな行を追加したいのか、わかりやすく選ぶことができます。 ツアーでは「３カラム」のレイアウトを選択します。 |
８）カラムにモジュール（コンテンツの要素）を追加する
 | カラムにモジュール（コンテンツの要素：コンテンツ自身）を挿入します。Divi Builder にはテキストや画像、動画などの40種類を超えるモジュールがあります。 ツアーでは「広告」のモジュールを設置します。 新規モジュールのパネルのずっと下の方の「広告」をクリックします。 |
９）モジュールの設定を行う
 | 各モジュールには様々な設定が可能です。大きく３つのタブで構成されています。
設定を変更したらパネルの最下行の「キャンセル」「戻す」「再実行」「承認」を選ぶことができます。 |
10）モジュールのアクションボタン
 | Divi Builder のセクション、Row (行) またはモジュールをポイントすると、アクションボタンが表示されます。 |
ボタンの機能は左から順に、モジュールを「移動」「設定」「複製」「ライブラリに追加」「削除」となっています。これらのボタンを使用してコンテンツを操作することができます。また、ページ内のアイテムはすべてドラッグ&ドロップで移動することができます。
11）右クリックオプションメニュー
 | セクション、行、またはモジュールを右クリックすることで、それぞれのオプションのメニューを表示できます。 |
12）ページ設定を開く
 | ページ設定にアクセスするには、画面下部の紫色の丸印「・・・」をクリックします。 |
13）モバイルページをプレビューする
 | ページ編集中に、画面左下部の左記赤枠のアイコンをクリックすることで、モバイルページでのプレビューを随時確認できます。 |
14）編集履歴にアクセスする
 | ページ編集中に変更したものは、編集履歴に保存されます。画面下部の時計状のアイコンをクリックすると、 作業中に任意の時点まで時間を前後に移動することができ、変更の取り消しや、再実行をすることができます。 |
15）ページを保存（公開）する
 | ページを保存（公開）するには、画面右下部の「下書きを保存」または「発行」をクリックします。 |
以上でツアー（チュートリアル）は完了です。以上の操作を組み合わせることで、簡単にページを作成できます。
続きは次の「 Divi Builder の使い方３」で解説します。
ワードプレス Divi レッスン Diviの使い方図解
写真サイトを構築する際に、役に立ちそうな設定や情報をまとめています。こちらは、ワードプレステーマ Divi に関連する記事の目次ページとしています。なるべく図を用いて簡単に説明するようにしています。参考にどうぞ。
