今回は 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-lesson7-logo

ワードプレス Diviの使い方7 写真を文字の形に切り抜く方法

Webサイトで写真を文字の形に切り抜いて表示させたい場合、通常は Photoshop...
divi-lesson5-3-youtube-logo01

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

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

ワードプレス Diviの使い方 7-2 イラストの形にグラデーション画像を表示する

前回は文字の形に画像を切り抜いて表示させましたが、今回はイラストの形にグラデーション画像を切り抜いてみましょう。Divi Builder...

Divi モジュールの使い方4 スライダーと投稿スライダー

今回は Divi の各種モジュールのうちから、スライダーモジュールと投稿スライダーモジュール(スライダーを投稿する)について図解したいと思います。Diviの使い方10 モジュールの使い方4...
divi-lesson3-2-logo

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

今回は Divi を使ったサイト( Webページ )作成練習の続きとして、サイトに写真ギャラリーと、自己紹介と、連絡先情報のページを追加で作成します。ワードプレス Divi の使い方3...
divi-lesson3-1-logo

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

今回は一連の流れで、実際のサイト( Webページ )の作成を行ってみましょう。作るサイトは写真家のサイトということにしましょう。 Divi...

Pin It on Pinterest