更新 2023.08.20

固定ページを開きます

固定ページ→開きたいページ をクリック

固定ページを開く

 

プレビュー画面を開く

PCマークをクリック
(バージョンによっては「Divi Builderで編集する」をクリック)
その他にタブレット・スマホビューもあります

デスクトップビューをクリック

 

するとプレビュー画面が開きます
※プレビュー画面は実際の画面と多少ことなりますので、必ず実際の画面を確認しましょう

ページ編集画面

Divi基本構造

下記がDiviテーマを操作する時の基本構造となります
これを理解しておくと操作しやすくなると思います

Divi基本構造

設定スタート

セクション・行・モジュール それぞれの歯車マークから設定ができます

ページ編集画面

 

モジュールの設定を押してみましょう

モジュール設定歯車

 

「アクションの呼び出し設定」という小窓が開きました

「コンテンツ」タブにタイトルやボタンに表示するテキストなどの入力欄があります
ここを編集するとプレビュー画面に反映されます

「緑のチェックマーク」でモジュールの設定を保存します

モジュールコンテンツの設定

 

次に「デザイン」タブを開くと
テキスト・タイトルテキスト・ボタン・サイズ変更・余白 など コンテンツのデザインを変更できます
文字サイズ・文字カラー・文字装飾・枠線・余白など設定項目が色々あるのでさわってみましょう
最後に保存しなければ上書きされないので大丈夫です!

最初のうちはどこを編集すればいいのか分からないかもしれません
そんな時はカーソルをコンテンツ上に移動させると「筆マーク」が出てくるのでそれをクリックします
するとそのデザイン項目が自動で開きます
(モジュール設定の小窓を開いたままの状態で行います)

「緑のチェックマーク」でモジュールの設定を保存します

モジュールデザイン設定

 

同様に各セクション・行も設定できます
最後にページ保存ボタンを押します。
(バージョンが違う場合は下の方にある三つの点マーク「・・・」を押すと保存ボタンが表示されます。
(各セクション・行・モジュールの設定を保存しても、最後にこのページ保存をしないと設定が反映されません)

ページ保存

 

以上で、簡単な微調整ができると思います
お疲れさまでした!

 

編集例

それでは実際に編集してみましょう。

モジュール設定を開き、タイトルテキストカラーなどを変更してみます。

編集例①

タイトルテキストカラー▶赤
タイトル文字サイズ▶50px
に変更してみました。
プレビュー画面に反映されているのが確認できます。

編集例②

 

 

各デバイス毎の編集

次にパソコン・タブレット・スマホなど各デバイス毎に設定する方法をご紹介します。
デバイスマークをクリックします。

各デバイス事の編集①

すると各デバイス毎のタブが展開されます。
左からパソコン/タブレット/スマホと並んでいます。
今はパソコンタブになっています。

各デバイスタブが展開されていると、各デバイス毎に設定がされていることになります。
展開されていなければ全デバイス共通の設定になります。

各デバイス毎の編集②

タブレットタブをクリックすると、プレビュー画面がタブレット表示に切り替わります。
タイトル文字サイズを変更してみましょう。

各デバイス毎の編集③

タイトル文字サイズ▶22px
に変更しました。

各デバイス毎の編集④

同様にスマホタブに切り替えて、スマホのタイトル文字サイズを編集します。
タイトル文字サイズ▶20px

モジュール保存
ページ保存
をして終了です。
プレビュー画面だけではなく、実際のデバイスでの表示も確認してみてください。
お疲れさまでした!

各デバイス毎の編集⑤

 

レイヤー

レイヤーについてご紹介します。

セクション、行、モジュールの設定を開こうとしても、うまく歯車マークが表示できない時があります。
そんな時にレイヤーボタンを使います。

画面右下のレイヤーが重なっているマークをクリック、するとレイヤーの小窓が開きます。
この小窓の中から該当するコンテンツの歯車マークをクリックすると、いつもの設定小窓が表示されます。

レイヤー