Diviの新しいデザインオプションを使用してセクションチャプターを作成する方法

今日のDiviチュートリアルでは、Webサイトのすばらしいセクションの章を作成する方法を紹介します。 これらの章は、訪問者のガイドラインとして機能します。 ページの別のセクションに入るときに表示されます。 通常、チャプターは、すべてのセクションで1つの特定の背景色と組み合わせて使用​​されます。

あなたがあなたのウェブサイトでセクションの章を使うことを考えているならば、この投稿はいくつかのインスピレーションを得るための良い場所かもしれません。 この投稿に従って簡単に再現できる4つのスタイルのセクションチャプターを紹介します。

結果

4つのセクションのチャプタースタイルの実用的な側面に入る前に、最終結果から何が期待できるかを見てみましょう。

セクションチャプタースタイル＃1

セクションチャプタースタイル＃2

セクションチャプタースタイル＃3

セクションチャプタースタイル＃4

Diviの新しいデザインオプションを使用してセクションチャプターを作成する方法

私たちのYoutubeチャンネルを購読する

セクションチャプタースタイル＃1

行オプション

作業中のページに2列の行を追加し、[デザイン]タブ内の左側の[行の配置]を選択することから始めます。

同じタブを下にスクロールし、上、右、下、左のパディングに「0px」を選択していることを確認します。 これを行う理由は、行をできるだけ小さくして、セクション内で多くの場所を占めないようにするためです。

仕切りモジュール

すべての例で、2つの列のうちの1つのみを使用します（行の配置によって異なります）。 ページの左側にチャプターを配置する場合は、左側の列を選択します。 次に、ディバイダーモジュールを追加し、[コンテンツ]タブで[ディバイダーを表示]オプションを有効にします。

[デザイン]タブに移動し、仕切りの色として「＃000000」を使用します。

次に、[スタイル]サブカテゴリを開き、[ディバイダースタイル]として[点線]を選択し、[ディバイダー位置]として[上]を選択します。

次に、次の設定がサイズ設定サブカテゴリに適用されることを確認します。

• 仕切りの重量：3px
• 高さ：23px
• 幅：62％
• モジュールの配置：左

最初のテキストモジュール

Divider Moduleを追加したら、そのすぐ下に最初のTextModuleを追加します。 章番号を選択した後、次のグラデーションの背景を使用します。

• 最初の色：rgba（96,150,193,0.16）
• 2番目の色：rgba（255,255,255,0）
• グラデーションタイプ：ラジアル
• 半径方向：中心
• 開始位置：51％
• 終了位置：51％

次に、[デザイン]タブに移動し、[テキスト]サブカテゴリに次の変更を加えます。

• テキストフォント：ハッピーモンキー
• テキストフォントサイズ：53（デスクトップとタブレット）、25（電話）
• テキストの色：＃000000
• テキスト行の高さ：1em
• テキストの向き：中央

Sizingサブカテゴリを開き、「40％」の幅を選択して、中央のModuleAlignmentを選択します。

このテキストモジュールに最後に必要なのは、次のカスタムマージンとパディングです。

• トップマージン：-40px
• トップパディング：40px
• 右パディング：50px
• ボトムパディング：40px
• 左パディング：50px

2番目のテキストモジュール

次のテキストサブカテゴリ設定で別のテキストモジュールを追加します。

• テキストフォント：Arimo
• テキストフォントサイズ：19px
• テキストの色：＃000000
• テキスト行の高さ：1em
• テキストの向き：中央

同じタブを下にスクロールし、「97％」の幅を使用して、中央のモジュール配置オプションを有効にします。

最後に、「-15px」の上マージンも追加します。

3番目のテキストモジュール

セクションの章の最後のテキストモジュールには、次のテキストサブカテゴリ設定があります。

• テキストフォント：Arimo
• テキストフォントスタイル：太字
• テキストフォントサイズ：19px
• テキストの色：＃000000
• テキスト行の高さ：1em
• テキストの向き：中央

サイジングサブカテゴリ内で、「99％」の幅を使用し、中央のモジュール配置を選択します。

このセクションの章で最後に行う必要があるのは、「-20px」の上マージンを追加することです。

セクションチャプタースタイル＃2

行オプション

2番目の例は、画面の右側にあります。 もう一度、2列の行を追加しますが、代わりに適切な行の配置を選択します。

Spacingサブカテゴリを開き、上、右、下、左のパディングに「0px」を割り当てます。

仕切りモジュール

右側の列にディバイダーモジュールを追加し、[ディバイダーを表示]オプションを有効にします。

仕切りには次のグラデーションの背景を使用します。

• 最初の色：rgba（132,132,132,0.61）
• 2番目の色：rgba（224,43,32,0.86）
• グラデーションタイプ：線形
• グラデーション方向：180度
• 開始位置：43％
• 終了位置：100％

[デザイン]タブに移動し、仕切りの色として[rgba（0,0,0,0.26）]を選択します。

次に、「ソリッド」をディバイダースタイルとして使用し、「トップ」をディバイダー位置として使用します。

次に、[サイズ設定]サブカテゴリを開き、次の設定を適用します。

• 仕切りの重量：3px
• 高さ：11px
• 幅：68％
• モジュールの配置：右

最初のテキストモジュール

最初のテキストモジュールには、次のテキストサブカテゴリ設定があります。

• テキストフォント：Cantata One
• テキストフォントサイズ：100px
• テキストの色：＃000000
• テキスト行の高さ：1.7em
• テキストの向き：右

[間隔]サブカテゴリを開き、次のカスタムマージンとパディングを使用します。

• 上マージン：-95px
• トップパディング：40px
• 右パディング：50px
• ボトムパディング：40px
• 左パディング：50px

2番目のテキストモジュール

別のテキストモジュールを追加し、代わりに次のテキストサブカテゴリ設定を使用します。

• テキストフォント：Arimo
• テキストフォントサイズ：20px
• テキストの色：＃000000
• テキスト行の高さ：1em
• テキストの向き：中央

次に、「-50px」の上マージンを追加します。

3番目のテキストモジュール

この例の3番目で最後のテキストモジュールには、次のテキストサブカテゴリ設定があります。

• テキストフォント：ロブスター2
• テキストフォントサイズ：43px
• テキストの色：＃000000
• テキスト行の高さ：1em
• テキストの向き：中央

最後に、「-30px」の上マージンを追加します。

セクションチャプタースタイル＃3

行オプション

3番目の例では、次の列1のグラデーションの背景を持つ2列の行を使用します。

• ファーストカラー：＃edf000
• 2番目の色：rgba（255,255,255,0）
• 列1の勾配タイプ：線形
• 列1の勾配方向：139度
• 列1の開始位置：11％
• 列1の終了位置：36％

[デザイン]タブに移動し、左側の行の配置を選択します。

ここでも、上、右、下、左の余白に「0px」を使用します。

仕切りモジュール

次に、左側の列にディバイダーモジュールを追加し、[ディバイダーを表示]オプションを有効にします。

背景サブカテゴリを開き、次のグラデーション背景を使用します。

• ファーストカラー：＃4b61af
• 2番目の色：rgba（255,255,255,0）
• グラデーションタイプ：線形
• 勾配方向：161度
• 開始位置：18％
• 終了位置：38％

[デザイン]タブを開き、仕切りの色として「＃000000」を選択します。

スタイルサブカテゴリ内で、「ソリッド」をディバイダースタイルとして使用し、「トップ」をディバイダー位置として使用します。

次に、次の設定がサイズ設定サブカテゴリに適用されることを確認します。

• 仕切りの重量：6px
• 高さ：100px
• 幅：70％
• モジュールの配置：左

最初のテキストモジュール

Divider Moduleのすぐ下に最初のテキストモジュールを追加し、次のグラデーションの背景を選択して続行します。

• 最初の色：rgba（131,0,233,0.58）
• 2番目の色：rgba（255,255,255,0）
• グラデーションタイプ：線形
• 勾配方向：151度
• 開始位置：20％
• 終了位置：40％

[デザイン]タブに移動し、次のテキストサブカテゴリ設定を使用します。

• テキストフォント：Poiret One
• テキストフォントスタイル：太字
• テキストフォントサイズ：69px
• テキストの色：＃000000
• テキスト行の高さ：1.7em
• テキストの向き：中央

サイジングサブカテゴリを開き、「70％」の幅を使用して、左側のモジュール配置を選択します。

最後に、次のカスタムマージンとパディングを使用します。

• トップマージン：124px
• トップパディング：60px
• ボトムパディング：150px
• 左パディング：50px

2番目のテキストモジュール

先に進み、次のテキストサブカテゴリ設定で別のテキストモジュールを追加します。

• テキストフォント：Arimo
• テキストフォントサイズ：20px
• テキストの色：＃000000
• テキスト行の高さ：1em
• テキストの向き：中央

Sizingサブカテゴリを開き、「80％」の幅を選択して、左側のModuleAlignmentを選択します。

最後に、「-150px」の上マージンを追加します。

3番目のテキストモジュール

最後のテキストモジュールを最初の列に追加し、次のテキストサブカテゴリ設定が適用されることを確認します。

• テキストフォント：Arimo
• テキストフォントスタイル：太字
• テキストフォントサイズ：20px
• テキストの色：＃000000
• テキスト行の高さ：1em
• テキストの向き：中央

サイジングサブカテゴリを開き、「80％」の幅を使用して、左側のモジュール配置を選択します。

最後に、「-20px」の上マージンと「50px」の下パディングを選択します。

セクションチャプタースタイル＃4

行オプション

最後の例では、正しい行の配置を再度使用します。

次に、Spacingサブカテゴリを開き、上、右、下、左のパディングに「0px」を割り当てます。

最初のテキストモジュール

この最後の例にはディバイダーモジュールが含まれていないため、左側の列にテキストモジュールを追加してください。 それが済んだら、次のグラデーションの背景を選択します。

• 最初の色：rgba（255,255,255,0）
• 2番目の色：＃92d84b
• グラデーションタイプ：線形
• グラデーション方向：55度
• 開始位置：25％
• 終了位置：100％

次に、[デザイン]タブに移動し、次のテキストサブカテゴリ設定が適用されることを確認します。

• テキストフォント：Cantata One
• テキストフォントサイズ：220（デスクトップとタブレット）、100px（電話）
• テキストの色：＃f2f2f2（セクションの背景色と一致）
• テキスト行の高さ：1.7em
• テキストの向き：右

サイジングサブカテゴリを開き、「82％」の幅を使用して、適切なモジュール配置を選択します。

最後に、次のカスタムパディングを使用します。

• 上：60px
• 右：50px
• 下：60px
• 左：50px

2番目のテキストモジュール

別のテキストモジュールを追加し、テキストサブカテゴリ内で次の設定を使用します。

• テキストフォント：Arimo
• テキストフォントサイズ：20px
• テキストの色：＃000000
• テキスト行の高さ：1em
• テキストの向き：右

Sizingサブカテゴリを開き、「39％」の幅を選択して、中央のModuleAlignmentを選択します。

最後に、上余白に「-130px」を追加します。

3番目のテキストモジュール

この章の例の最後のテキストモジュールには、次のテキストサブカテゴリ設定があります。

• テキストフォント：ダンススクリプト
• テキストフォントサイズ：45px
• テキストの色：＃000000
• テキスト行の高さ：1em
• テキストの向き：右

Sizingサブカテゴリを開き、「50％」の幅を選択して、中央のModuleAlignmentを選択します。

最後になりましたが、「-30px」の上部パディングを選択すれば完了です。

最終的な考え

この投稿では、Webサイトでセクションチャプターをクリエイティブに作成してスタイルを設定する方法を紹介しました。 これらのチャプターセクションでは、セクションごとに同じ背景色を使用しながら、セクション間の分割を作成できます。 質問や提案がある場合; 下のコメントセクションにコメントを残してください！

大きなお知らせ、役立つヒント、Diviの景品を見逃さないように、必ずメールマガジンとYouTubeチャンネルを購読してください。

Kwok Design /shutterstock.comによる注目の画像