Divi 入門講座の第2回目として、 今回は Divi を使った固定ページの作成方法について、できるだけ図を用いて解説しようと思います。ワードプレスを使ったサイトの作成で固定ページだけでサイトを作成するという方も多いと思います。Divi では、豊富なレイアウトテンプレートを利用して簡単にサイトを作成できます。

ワードプレス Diviの使い方2
固定ページの作成チュートリアルツアー

今回は Divi をインストールし、ページの新規追加を行った際に見ることができるツアー(チュートリアル)について図解説します。

1.固定ページの新規追加

ワードプレスのダッシュボードの「固定ページ」>「新規追加」をクリックします。

「タイトルを追加」にページのタイトルを入力します。

Divi をインストールしていると、ページの編集時に Divi Builder を使うかときかれるので「Use Divi Builder」をクリックします。

2.Divi Builder のツアーを利用する

1)ツアー(説明チュートリアル)を開始する

Divi を使いだしたところでは左記のように表示され、説明チュートリアルを受けることができます。(一部英語ですが・・・)

今回は「ツアーを開始する」をクリックして、説明チュートリアルを受けながら、作成を進めてみることにしましょう。

Divi Builder では各所に「+」ボタンが配置されています。そのボタンは追加操作を意味します。青はセクション、緑は行 ( Row ) 、黒はモジュールの追加となっています。

また「歯車⚙」のマークは設定変更を意味します。

2)新しいレイアウトを読み込む

新しくページを作成したタイミングで、テンプレートのレイアウトを読み込みましょう。

紫の「+」をクリックすると下図のように様々なレイアウトのテンプレートが表示されます。

ここでは Divi Builder に同梱されているレイアウトのリストを見ることができます。また Divi ライブラリに保存したレイアウトにもここからアクセスすることができます。

3)レイアウトを選択する

ツアーでは「Divi Builder Demo」のレイアウトパックを選択します。

クリックすると、下図のように表示され、レイアウトパックの詳細と、それに含まれるレイアウトのリストを確認できます。

ページにレイアウトを適用するには、「Use This Layout」をクリックします。

4)レイアウトが読み込まれる

レイアウトが読み込まれます。

レイアウトのテンプレートによって、もうページができました。後は文字と写真をクリックして変えるだけです。あるいはここからさらにコンテンツ(表示内容:枠)を追加しても良いでしょう。ツアーでは新しいセクションを追加します。

5)新しいセクションを追加する

コンテンツを追加するには、セクションとセクションの間にある「+(青)」をクリックします。 Divi でのセクションとは、ページの構成要素(枠)におけるもっとも大きなものです。ページの作成は、まずセクションを追加して、その下に行や、モジュールを追加するという手順になります。

6)追加するセクションのタイプを選択する

セクションは3種類から選べます。

  • 通常:通常ページ幅レイアウ
  • 専門:特別なサイドバーレイアウト用
  • フルワイド:ページの全幅を拡大し横いっぱい表示

「通常」をクリックすると、下記のようにページに枠(セクション)が追加され拡がります。

7)追加する行のカラムを選択する

セクションに追加する行のカラムを選択します。図で表示されるので、どんな行を追加したいのか、わかりやすく選ぶことができます。

ツアーでは「3カラム」のレイアウトを選択します。

8)カラムにモジュール(コンテンツの要素)を追加する

カラムにモジュール(コンテンツの要素:コンテンツ自身)を挿入します。Divi Builder にはテキストや画像、動画などの40種類を超えるモジュールがあります。

ツアーでは「広告」のモジュールを設置します。

新規モジュールのパネルのずっと下の方の「広告」をクリックします。

 

9)モジュールの設定を行う

各モジュールには様々な設定が可能です。大きく3つのタブで構成されています。

  • コンテンツ:テキストや画像など構成要素を編集できる
  • デザイン:モジュールの外観を変更できる
  • 詳細:カスタムCSSやHTML属性などの詳細編集ができる

設定を変更したらパネルの最下行の「キャンセル」「戻す」「再実行」「承認」を選ぶことができます。

10)モジュールのアクションボタン

Divi Builder のセクション、Row (行) またはモジュールをポイントすると、アクションボタンが表示されます。

ボタンの機能は左から順に、モジュールを「移動」「設定」「複製」「ライブラリに追加」「削除」となっています。これらのボタンを使用してコンテンツを操作することができます。また、ページ内のアイテムはすべてドラッグ&ドロップで移動することができます。

11)右クリックオプションメニュー

セクション、行、またはモジュールを右クリックすることで、それぞれのオプションのメニューを表示できます。

12)ページ設定を開く

ページ設定にアクセスするには、画面下部の紫色の丸印「・・・」をクリックします。

13)モバイルページをプレビューする

ページ編集中に、画面左下部の左記赤枠のアイコンをクリックすることで、モバイルページでのプレビューを随時確認できます。

14)編集履歴にアクセスする

ページ編集中に変更したものは、編集履歴に保存されます。画面下部の時計状のアイコンをクリックすると、 作業中に任意の時点まで時間を前後に移動することができ、変更の取り消しや、再実行をすることができます。

15)ページを保存(公開)する

ページを保存(公開)するには、画面右下部の「下書きを保存」または「発行」をクリックします。

以上でツアー(チュートリアル)は完了です。以上の操作を組み合わせることで、簡単にページを作成できます。
続きは次の「 Divi Builder の使い方3」で解説します。

ワードプレステーマ Diviの使い方3 レイアウトを使ったWebページ作成1

ワードプレス Divi レッスン Diviの使い方図解

写真サイトを構築する際に、役に立ちそうな設定や情報をまとめています。こちらは、ワードプレステーマ Divi に関連する記事の目次ページとしています。なるべく図を用いて簡単に説明するようにしています。参考にどうぞ。

Diviモジュールの設定方法8 トグルとアコーディオン

今回は Diviの各種モジュールのうちから「トグル」と「アコーディオン」のモジュールの使い方について、Divi初心者向けに図解したいと思います。...
divi-lesson5-3-youtube-logo01

DiviでYouTubeを表示する Diviの使い方5の3

Divi は YouTube 動画も簡単にサイトに設置できるように作られています。今回はその設置方法を図解したいと思います。Diviの使い方5の3 Divi で YouTube...
divi-tips-asy-table-of-contents-logo

Divi サイトに目次機能を追加 Easy Table of Contents の設定

Divi で作成している Web サイトに目次機能を追加するのに、便利なプラグインとして「 Easy Table of...

Pin It on Pinterest