行と列の背景をDiviの新しいオプションとクリエイティブに組み合わせる方法

このDiviチュートリアルでは、行と列の背景オプションを組み合わせて素晴らしい結果を作成する方法を紹介します。 適切な組み合わせと設定を選択することにより、Webサイトの全体的なルックアンドフィールを向上させるデザインを実現できます。 私たちが話していることを示すために、段階的に構築するのに役立つ例を作成しました。 この結果は、Diviの組み込みオプションのみを使用して作成されているため、CSSを追加する必要はありません。

結果

このチュートリアルをステップバイステップで実行すると、次の結果を得ることができます。

この結果を達成するために3つの異なる行を使用しましたが、それらはすべて全体像の一部であるように見えます。 始めましょう！

VisualBuilderに切り替えます

新しいページを作成し、Divi Builderを有効にして、VisualBuilderに切り替えます。

セクションの作成

最初に行う必要があるのは、新しい標準セクションを作成することです。 作成して相互に組み合わせるすべての行は、このセクションの一部になります。 行にボックスシャドウ効果を作成するために、次のセクショングラデーションの背景を追加します。

• 最初の色：rgba（61,65,86,0.59）
• 2番目の色：＃f7f7f7
• グラデーションタイプ：ラジアル
• 半径方向：下
• 開始位置：31％
• 終了位置：76％

1列の行を追加する

次に行う必要があるのは、セクションに1列の行を追加することです。 この行は、最終結果の次の部分を表します。

行と列の設定

行を全幅にする

先に進み、[デザイン]タブ内で行を全幅にします。

行の背景設定

次に、[コンテンツ]タブに戻り、次のグラデーションの背景を追加できます。

• 最初の色：＃3d4156
• 2番目の色：rgba（114,81,114,0.91）
• グラデーションタイプ：線形
• グラデーション方向：180度
• 開始位置：0％
• 終了位置：65％

背景画像（この場合はパターン）をアップロードし、背景画像のブレンドとして[乗算]を選択します。

列の背景設定

次に、下にスクロールして、次のグラデーションの背景設定を行の列に割り当てます。

• 最初の色：rgba（255,255,255,0.15）
• 2番目の色：rgba（214,44,104,0）
• カラムグラジエントタイプ：線形
• カラムグラジエント方向：161度
• カラム開始位置：43％
• カラムの終了位置：43％

間隔

行に次のパディングを追加して続行します。

• 上：20px
• 右：30px
• 左：30px

また、列へのパディングもいくつかあります。

• 上：200px
• 下：200px

テキストモジュールを追加

次に行うことは、テキストモジュールを行に追加し、そのテキストモジュールのテキストサブカテゴリに次の変更を加えることです。

• テキストフォント：プレイフェアディスプレイ
• テキストフォントサイズ：77px（デスクトップ）、64（タブレット）、51（電話）
• テキストの色：＃f7f7f7
• テキスト行の高さ：1.7（デスクトップ）、1em（タブレットと電話）

仕切りモジュールを追加

作成したテキストモジュールの下にディバイダーモジュールを追加し、[表示]サブカテゴリ内の[ディバイダーを表示]オプションを有効にします。

同じタブを下にスクロールし、背景色として「rgba（114,57,114,0.91）」を使用します。

[デザイン]タブに移動し、仕切りの色として[＃3d4156]を選択します。

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

次に、次の設定をサイズ設定サブカテゴリに割り当てます。

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

最後になりましたが、カスタムパディングオプションに「48％」の左パディングを追加します。

3列の行を追加

セクションに追加する次の行は、別々に作成されていますが、前の行の拡張のように見えます。

行と列の設定

行を全幅にする

もう一度、新しい行を全幅にすることから始めます。

行の背景設定

次に、次のバックグラウンド設定を使用します。

• 最初の色：rgba（114,81,114,0.91）
• 2番目の色：＃f7f7f7
• グラデーションタイプ：線形
• グラデーション方向：180度
• 開始位置：9％
• 終了位置：100％

背景パターンを追加し、背景画像のブレンドとして「乗算」を使用します。

列の背景設定

タブを下にスクロールし、各列の背景色として「＃f7f7f7」を使用します。

間隔

Spacingサブカテゴリ内で、各列の上下左右のパディングに「30px」を割り当てることから始めます。 次に、デスクトップバージョンの行に次のパディングを追加します。

• 上：19px
• 右：200px
• 左：200px

タブレットのパディングは少し異なります：

• 上：0px
• 右：70px
• 下：0px
• 左：70px

そして、携帯電話のパディングは次のとおりです。

• 上：0px
• 右：50px
• 下：30px
• 左：50px

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

行の最初の列にテキストモジュールを追加して続行します。 次に、[デザイン]タブの[テキスト]サブカテゴリに次の設定を使用します。

• テキストフォント：Raleway
• フォントスタイル：太字と大文字
• テキストフォントサイズ：23px
• テキストの色：＃3d4156
• テキスト行の高さ：1.7em
• テキストの向き：中央

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

前のテキストモジュールのすぐ下に別のテキストモジュールを追加し、代わりに次の設定を使用します。

• テキストフォント：Raleway
• テキストフォントサイズ：12px
• テキストの色：＃3d4156
• テキスト行の高さ：1.7em
• テキストの向き：左

テキストモジュールのクローンを作成して他の列に配置する

2つのテキストモジュールを作成したら、それらを複製して、残りの2つの列にも配置します。

1列の行を追加する

追加する最後の列は、前の列と重複する列です。 これを行う理由は、この方法でさまざまなグラデーションの背景を組み合わせることができるためです。 作成している3つの行は別々ですが、1つのように感じられます。 その間、1つだけでなく複数のグラデーション背景を楽しむこともできます。

行と列の設定

行を全幅にする

最後の行については、「この行を全幅にする」も有効にする必要があります。

行の背景設定

次に、グラデーションの背景を行に追加します。

• 最初の色：rgba（61,65,86,0）
• 2番目の色：rgba（114,81,114,0.34）
• グラデーションタイプ：線形
• グラデーション方向：180度
• 開始位置：45％
• 終了位置：91％

列の背景設定

同じタブを下にスクロールし、列に次のグラデーションの背景を使用します。

• 最初の色：rgba（239,239,239,0.15）
• 2番目の色：rgba（214,44,104,0）
• カラムグラジエントタイプ：線形
• カラムグラジエント方向：340度
• カラム開始位置：45％
• カラムの終了位置：45％
  

間隔

最後に行う必要があるのは、パディングとマージンを追加することです。 上マージンに「-100％」を追加することから始め、次のカスタムパディングを使用して続行します。

• 上：14px
• 右：30px
• 左：30px

列にもいくつかのパディングが必要になります。 上部が「200px」、下部が「155px」です。

結果

この投稿で提供したさまざまな手順を実行した場合、次の結果を達成できたはずです。

最終的な考え

新しいDiviオプションを使用すると、多くの新しいことが可能になります。 その1つは、行と列の背景を組み合わせて優れたデザインを実現することです。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！

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

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