WordPressテーマ「Divi」では、編集方法として「ビジュアルビルダー」と「Diviビルダー」が用意されています。
「ビジュアルビルダー」は、完成形を見ながら編集できるので便利ですが、操作性にやや難があったりします。
「Diviビルダー」は、ブロックを積み重ねて構造を作っていくスタイルなので、とても分かりやすいです。ただし完成形を見るにはプレビューが必要です。
このページでは、「Diviビルダー」の使い方をまとめていきます。
Contents
使い方
投稿などの新規投稿画面で「Diviビルダーを使う」をクリックします。
すると、デフォルトのセクションを組んだ状態が表示されます。
Post-itのように左端の色が変わっているボックスの一つ一つが、セクションです。
ヘッダー部分
ライブラリに保存：ページ丸ごとを、テンプレートとしてライブラリに保存します。
レイアウトをロード：ライブラリのページのテンプレートを読み出します。
レイアウトをクリア：レイアウトを完全に削除します。
（右上のアイコン部分）
↑↓：インポート・エクスポートです。作成したテンプレートを、ファイルとして保存します。また読み込みします。
エクスポート：Diviビルダーレイアウトをエクスポートすることで別のウェブサイトにインポート可能なJSONファイルが作成されます。
インポート：以前エクスポートしたDiviビルダーレイアウトファイルをインポートすると、このページの現在のコンテンツすべてが上書きされます。
三本線（いわゆるハンバーガー）：設定
V：Diviビルダーの表示／非表示
履歴を表示します。過去の作業状態に戻すことが可能です。
取り消し、やり直しです。
Diviページ設定
ページレイアウト:サイドバーの有無などを選択
ドットナビ:ページの表示位置をナビゲートするドットが表示されます。長い投稿の場合は役立ちそうですね。
スクロール前にナビを非表示:スクロールするまではナビが非表示になります
投稿タイトル:投稿タイトルの表示／非表示
（公開）
「変更をプレビュー」を押すと、現状のページがプレビューできます。
セクションについて
セクションの種類（色）
標準セクション（青）
全幅セクション（紫）
特別セクション（赤）
（緑）の部分は「行 コラム」です。
「行 コラム」の中にあるグレーは「モジュール」です。
（黄緑）の部分は「グローバル設定」です。
モジュール設定で「グローバルとして保存：これをグローバルアイテムにする」をチェックすると、グローバル設定となります。
サイト全体の共通設定で、どこかのページのグローバルアイテムを変更すると、その変更はサイト全体に反映されます。
セクション／コラム／モジュールの追加
正方形の中の［+］を押すことで、それぞれ追加できます。
セクションを移動
色がついた部分をドラッグすると、セクションを移動することができます。
アイコンの説明
三本線（いわゆるハンバーガー）：Diviビルダーの設定です。背景色やテキスト色など、一括変更が可能です。
矩形が二つ重なっているもの：セクションをコピー
×：セクションを削除
もしも間違って「×」を押し、セクションを削除してしまった場合は、「コマンド+z」の取り消しショートカットで取り消すことができます。（Macの場合）
セクション／コラム／モジュール等の設定
三本線（いわゆるハンバーガー）の設定に関してです。設定する種別／種類により、設定項目は変わります。
一番下の列の、ボタンに関して。
ライブラリに保存して追加：テンプレート保存する際に使用
目のアイコン：プレビューします。戻りたいときは、同じ場所の「×」を押します。
保存して終了：そのままです。保存して終了します。
モジュール
モジュール項目は、非常にたくさんありますので、別ページにまとめてます。
https://lecture.blackdesign.jp/wordpress/848
コメント