今回は Divi のレイアウトライブラリを使ったサイト( Webページ )作成練習の3回目として、作成したページの公開と、トップページの設定、リンクの作成を行い、サイトの作成を完成させたいと思います。

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

6.作成したページを公開する

1)固定ページのリストからまとめてページを公開する

ページをまとめて公開に設定するには、先ほどまでで作成し下書きを保存したページを表示します。

「固定ページ一覧」をクリックします。

作成した固定ページのリストが表示されます。

公開したいページにチェックを入れて、「一括操作」となっている部分をクリックして「編集」に変え、「適用」をクリックします。

下記のように一括操作を行う場所を指定するパネルが表示されるので、

「ステータス」を「公開済み」に変更し、「更新」をクリックします。

4件のページが公開されました。

2)Divi Builder の編集画面から公開する方法

各ページの下にマウスをもっていくとメニューが表示されるので「編集」をクリックします。

下記のように表示されます。 Divi Builder で編集をする場合は「 Edit Width The Divi Builder 」をクリックします。

あるいはリスト表示の画面で「 Edit Width Divi 」をクリックしても、Divi Builder で編集画面にできます。

Divi Builder の編集画面では、ページの最下部に下記のように紫丸「・・・」が表示されているので、それをクリックします。

ページを公開するには「発行」をクリックします。

一度「発行」していると、次からは「保存」と表示が変わります。クリックすると上書き保存されます。

3)公開したページを下書きに戻す方法

一度公開したページを下書きに戻すには、固定ページのリスト画面で、各ページの「編集」をクリックし、

下記のように表示されたページの、右上方にある「下書きへ切り替え」をクリックします。

あるいは、一括編集でステータスを「下書き」にして「更新」をクリックします。

7.ページリンクを設定する

1)編集するページを開く

今度はトップページにする予定の Landing のページに、各ページへのリンクを設定します。Divi Builder で Landing のページを開きます。固定ページ一覧から、Landing の 「 Edit Width Divi 」をクリックします。

Landing のページには、2つ「VIEW MORE」のボタンを設置しておきました。それらに各ページへのリンクを設定しましょう。

About セクションの VIEW MORE ボタンには、About ページへのリンクを、Gallery セクションの VIEW MORE ボタンには、Photo Gallery ページへのリンクを設定します。

2)ボタンモジュールにリンクを設定する

リンクを設定するには、VIEW MORE ボタンモジュールの灰色「⚙(歯車)」をクリックします。

ボタン設定パネルのコンテンツの「リンク」をクリックします。
リンクの設定のパネルが表示されるので「 Button Link URL 」にリンクを入力します。
リンクのURLをコピーして貼り付けると良いでしょう。
「✔(チェックマーク)」をクリックして設定の変更を承認(保存)します。

3)ページのURLの確認方法

各ページのURLは、ページの編集画面の「パーマリンク」で確認できます。

あるいは、固定ページ一覧から各ページを表示させてアドレスをコピーしても良いでしょう。

4)リンクを開くターゲットを変更できる

リンク設定のパネルで「 Button Link Target 」を「新しいタブ」に変更できます。

もうひとつの Photo Gallery のページについても、Landing ページの Gallery セクションの VIEW MORE ボタンからのリンクを同様に設定しましょう。

8.トップページ(ホームページ)を設定する

作成した固定ページ「 Landing 」をサイトのトップページ(ホームページ)に設定しましょう。

1)ホームページの表示を変更する

ワードプレスダッシュボードの、

「設定」>「表示設定」をクリックします。

ホームページの表示設定が表示されるので、ラジオボタンを「固定ページ」に変更します。

「ホームページ」を作成した固定ページ「Landing」に変更します。

変更すると、サイトのトップページが Landing のページに変更されます。

2)ホームページの表示を変更する他の方法

「外観」>「カスタマイズ」をクリックします。
「ホームページ設定」をクリックします。
「✔(チェックマーク)」をクリックして承認します。
ホームページの表示を「固定ページ」として、ホームページで「Landing」を選択します。

以上で、無事に Web ページが作成できました。Divi では豊富なレイアウトライブラリを使うことで、独自のページがあっという間に完成できます。これからも楽しんで色々操作をしてみましょう。

Divi レッスン( Divi の使い方 )

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

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

divi-lesson1-logo

ワードプレステーマ Diviの使い方1 Diviとは?~インストールまで

WordPress(ワードプレス)のテーマは数多くあるのですが、世界で一番多くインストールされ利用されているテーマはこの「 Divi 」になるのではないかと思います。入門講座として、...
divi-reference2-logo

ワードプレス Divi リファレンス2 テーマのオプションの設定方法

Divi では専用のオプションメニューを利用して様々な設定を行えるようになっています。今回はその「テーマのオプション」の設定方法について図解します。Diviの使い方9...

Divi用の子テーマ作成プラグインを利用する Diviの使い方8-1-3

今回はDivi で子テーマを作成する方法の3つ目としてプラグインを利用する方法を図解します。複数のプラグインがありますが、その中から今回は「Divi...

Divi モジュールの使い方7 投稿タイトルと投稿ナビゲーション

今回は Diviの各種モジュールのうちから「投稿タイトル」と「投稿ナビゲーション」のモジュールの使い方について、Divi初心者向けに図解したいと思います。Divi モジュールの使い方7...
divi-lesson2-logo

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

Divi 入門講座の第2回目として、 今回は Divi...

Pin It on Pinterest