レイアウトとタイポグラフィのカスタマイズを開始するには サイトのWeb、まずリンクをクリックしてテーマカスタマイザーにアクセスする必要があります Divi>テーマカスタマイザー WordPressダッシュボードで。 これにより、カスタマイザーが起動します。 次に、[一般設定]パネルを見つけます。 パネルをクリックして適切な設定を開き、カスタマイズを開始します。 「一般設定」パネルには、レイアウト設定、タイポグラフィ、背景のXNUMXつのセクションがあります。
レイアウト設定
レイアウト パネルでは、さまざまなサイズと間隔のオプションを調整できます。 サイトのWeb. ここで、列、行、およびセクション間の間隔を増減したり、サイドバーのサイズを調整したりできます。 このパネルから Boxed Layout モードを有効にすることもできます。
ネストレイアウトを有効にする
ここで、サイトを編集して、サイトのコンテンツをフレーム化し、カスタマイズ可能な背景を公開するボックス形式にできます。
ウェブサイトのコンテンツの幅
ここで、コンテンツセクションの最大幅を設定できます。 コンテンツはレスポンシブレイアウト上にあるため、小さいサイズに調整されますが、ここで設定された最大幅を超えて伸びることはありません。
デフォルトは1080pxです。 これは、ほとんどの標準的なラップトップおよびデスクトップに適した幅です。
ウェブサイトの列間隔
ガターの幅は、各行の列間の水平方向のスペース（マージン）の量です。
ガター幅のオプション値は、1と4の間です。
1は、列間のゼロマージンを表します。
2は、列間の3％のマージンを表します。
3は、列間の5,5％のマージンを表します。
4は、列間の8％のマージンを表します。
カスタムのサイドバー幅を使用
これにより、テーマのデフォルトのサイドバー幅が設定されます。 これは、サイドバーがあり、DiviBuilderで作成されていないテーマ内のすべてのページに適用されます。
セクションとラインの高さ
これらのオプションは、各セクションと行の垂直方向の間隔（上部と下部のパディング）の量を調整します。
テーマアクセントカラー
他の要素の色を変更する前に、まずそれを変更する必要があります。 変更したら、設定を保存して公開し、ページを更新します。 これで、更新されたアクセントカラーテーマに他の要素が自動入力されるはずです。
タイポグラフィ
タイポグラフィパネルでは、テキスト全体のデフォルトの外観を調整できます。 サイトのWeb。 フォントとヘッダーのサイズを調整すると、サイトのすべての領域に比例して反映されます。 色だけでなく、行の高さ、文字間隔、フォント スタイルも調整できます。 最後に、数十のフォントから選択してそれぞれに適用することもできます。
本文テキストサイズ
これにより、テーマのデフォルトの本文テキストが変更されます。 デフォルトのサイズは14pxです。
ボディラインの高さ
テキストの各行の行の高さ。
ヘッダーテキストサイズ
Diviでは、ここでヘッダーのデフォルトのテキストサイズを設定できます。 これは、全幅ヘッダーモジュールのタイトルなどのDivi要素に影響します。
ヘッダー文字スペース
文字間隔は、文字間の水平方向の間隔を調整します。 ヘッダー文字の間隔の値は、すべてのヘッダーレベル（h1、h2、h3、h4、h5、h6）、引用符、およびスライドのタイトルに影響します。
ヘッダー行の高さ
文字間隔の値と同様に、ヘッダー行の高さの値は、すべてのヘッダーレベル（h1、h2、h3、h4、h5、h6）、引用符、およびタイトルに影響します。スライドの。
警察様式
これらのオプションを使用して、ヘッダーのフォントスタイルを変更します。
本文とヘッダーのフォント
DiviのデフォルトのフォントはOpenSansですが、DiviにはほぼXNUMXのフォントから選択できます。 これらの組み込みフォントを利用して、テーマに最適なフォントをテストしてください。
ボディリンクの色
ボディリンクの色は、テーマのアクセントカラーから継承されます。 ただし、ここではいつでも変更できます。
本文テキストの色
本文テキストの色を変更することができます。
ヘッダーテキストの色
ここで、ヘッダーの色を変更できます。
背景
背景パネルでは、テーマの背景色を調整したり、カスタムの背景画像をアップロードしてページ上の位置を調整したりできます。 背景の画像と色は、前述の[レイアウト]パネルの[ボックス形式]設定と組み合わせるとうまく機能します。
このチュートリアルは以上です。 Diviテーマ.
[vc_row center_row=”yes”][vc_column width=”1/2”][vcex_button target=”空白” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700” style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DIVI テーマをダウンロード [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”空白” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700” style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DOWNLOAD THE TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]
他のDiviチュートリアル
- レストランの利用ディビテーマの5のウェブサイト
- Divi WooCommerce製品にテキストを追加する方法
- Diviページ間のメニューカラーを変更する方法
- Diviでブログのグリッドをパーソナライズする方法
- ワードプレスの役割ディビエディタを使用する方法
- 全画面のDiviスライダーを作成する方法
- Diviページ間のメニューの色を変更する方法
- Diviについておそらく知らない機能
- WordPressでDivi Builderを使用する方法
- Diviビデオスクロールモジュールの使用方法
- Divi Builder Flipモジュールの使い方
- Divi Builderに推薦モジュールを追加する方法
- Diviテキストモジュールの使い方
- Diviでスライダーを作成する方法
- Diviユーザーロールを編集する方法
- Divi Social Mediaモジュールの使用方法
- テーマWordPress Diviでショップモジュールを使用する方法
- Diviサイドバーモジュールの使用方法
- Divi Price Table Moduleの使い方
- Diviの出版物のタイトルモジュールの使用方法
- Diviのビデオモジュールを追加する方法
- 記事ナビゲーションモジュールの使用方法
- Divi検索モジュールの使い方
- Diviウォレットモジュールの使用方法
- Divi Builderでpersonモジュールを使用する方法
- Diviフィルターでウォレットモジュールを使用する方法
- 全幅スライダモジュールの使用方法
- Divi Builderイメージモジュールの使用方法
- Divi Builderの全幅ナビゲーションモジュールの使用方法
- 画像ギャラリーモジュールの使用方法
- Divi Builderフル幅カードモジュールの使用方法
- Divi Full Width Portfolioモジュールの使用方法
- Divi全角ヘッダーモジュールの使用方法
- Divi Counter Moduleの使い方
- Divi Builderの記事スライダーの使用方法
- Divi Email Optinモジュールの使用方法
