Diviで行ボックスシャドウをクリエイティブに使用する方法

最新のDiviアップデートの1つが待望されていました。 ボックスシャドウのセクション、行、およびモジュールへの統合。 この投稿では、行ボックスの影がWebサイトの全体的なルックアンドフィールをどのように改善できるかに焦点を当てます。

シャドウがWebサイトにもたらす可能性のある深度ボックスを説明するために、ステップバイステップで再作成する方法を示す例を作成しました。

結果

デスクトップ

再作成する方法を示すレイアウトは、デスクトップで次のようになります。

モバイル

そして、モバイルでこのように：

Diviで行ボックスシャドウをクリエイティブに使用する方法

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

ヘッダー形式

最初に行う必要があるのは、適切なヘッダー形式を選択することです。 WordPressダッシュボード>カスタマイズ>ヘッダーとナビゲーション>ヘッダー形式>に移動し、ヘッダースタイルとして[中央揃え]を選択します。

プライマリメニューバー

[ヘッダーとナビゲーション]> [プライマリメニューバー]に戻り、次の調整を行います。

• ロゴ画像を非表示：有効にする
• メニューの高さ：211
• ロゴの最大高さ：30
• テキストサイズ：16
• 文字間隔：2
• フォント：Lato Light
• フォントスタイル：大文字
• テキストの色：#FFFFFF
• アクティブリンクの色：#FFFFFF
• 背景色：rgba（255,255,255,0）
• ドロップダウンメニューの背景色：rgba（255,255,255,0）

最初のセクション

テーマカスタマイザー内で変更を加えたら、レイアウトを開始します。 新しいページを作成し、Divi Builderを有効にして、VisualBuilderに切り替えます。 次に、最初の標準セクションをページに追加します。

セクション勾配の背景

このセクションには、次のグラデーションの背景が必要です。

• 最初の色：＃ea2e7d
• 2番目の色：＃edd900
• グラデーションタイプ：線形
• グラデーション方向：110度
• 開始位置：0％
• 終了位置：100％

間隔

[デザイン]タブに移動します。 Spacingサブカテゴリ内で、上部のパディングに「100px」を使用し、下部のパディングに「200px」を使用します。

1列の行

行のグラデーションの背景

セクションに1列の行を追加して続行し、次のグラデーションの背景を利用します。

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

カラムグラジエントの背景

下にスクロールして、その行の列に次のグラデーションの背景を使用します。

• 最初の色：rgba（237,217,0,0.77）
• 2番目の色：rgba（255,255,255,0）
• カラムグラジエントタイプ：線形
• カラムグラジエント方向：180度
• 列の開始位置：0
• 列の終了位置：100

サイジング

[デザイン]タブに移動し、次の変更を[サイズ設定]サブカテゴリに適用します。

• カスタム幅を使用：はい
• カスタム幅：27％

間隔

次に、行の上下左右のカスタムパディングに「20px」を使用します。

テキストモジュール

行の設定が完了したら、テキストモジュールを追加し、テキストサブカテゴリに次の設定を使用します。

• テキストフォント：Arvo
• テキストフォントサイズ：98px
• テキストの色：#FFFFFF
• テキスト文字の間隔：32px
• テキスト行の高さ：1.4em
• テキストの向き：中央

2番目のセクション

最初のセクションのすぐ下に別のセクションを追加します。 このセクションには、レイアウトに存在する他のすべての行が含まれます。

セクション勾配の背景

まず、このセクションでは次のグラデーションの背景を使用します。

• 最初の色：rgba（255,255,255,0）
• セカンドカラー：＃592851
• グラデーションタイプ：線形
• グラデーション方向：180度
• 開始位置：80％
• 終了位置：80％

間隔

次に、[デザイン]タブに移動し、下部のパディングに「100px」を追加します。

最初の2列の行

行の背景色

この新しいセクションに最初の2列の行を追加し、背景色として「#dddddd」を使用します。

列1のグラジエントバックグラウンド

最初の列には、次のグラデーションの背景が必要です。

• ファーストカラー：＃6ac922
• 2番目の色：＃b6c1b2
• 列1の勾配タイプ：線形
• 列1の勾配方向：136度
• 列1の開始位置：23％
• 列1の終了位置：100％

列2の背景色

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

サイジング

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

• カスタム幅を使用：有効
• カスタムガター幅を使用：はい
• 側溝幅：1

間隔

Spacingサブカテゴリには、次のパディングとマージンが必要です。

• 上、右、下、左のパディング：0px
• 上マージン：-150px
• 列1の上部パディング：235px（デスクトップ）、0px（タブレットと電話）
• 列1の下部パディング：235px（デスクトップ）、0px（タブレットと電話）
• 列2の上部パディング：150px
• 列2の下部パディング：150px

ボックスシャドウ

Box Shadowサブカテゴリを開き、次の設定を使用します。

• ボックスシャドウの水平位置：-3px
• ボックスシャドウの垂直位置：-18px
• ボックスシャドウブラー強度：77px
• ボックスシャドウスプレッド強度：23px
• 影の色：rgba（0,0,0,0.3）

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

次に、最初のテキストモジュールを2番目の列に追加し、テキストサブカテゴリに次の設定を使用します。

• テキストフォント：Arvo
• テキストフォントサイズ：34px
• テキストの色：＃7a7a7a
• テキストの向き：中央

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

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

• テキストフォント：Lato Light
• テキストの向き：中央

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

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

2番目の2列の行

行の背景色

セクションに別の2列の行を追加し、背景色として「＃b99bc1」を選択します。

列1の背景色

下にスクロールして、列1の背景色として「#dddddd」を選択します。

サイジング

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

• カスタムガター幅を使用：はい
• 側溝幅：1

間隔

次に、次のパディングを使用します。

• 上、右、下、左のパディング：0px
• 列1の上部パディング：150px（デスクトップ）、0px（タブレットと電話）
• 列1の下部パディング：50px（デスクトップ）、0px（タブレットと電話）
• 列2の上部パディング：150px
• 列2の下部パディング：150px

ボックスシャドウ

Box Shadowサブカテゴリを開き、次の設定を使用します。

• ボックスシャドウの水平位置：-4px
• ボックスシャドウの垂直位置：24px
• ボックスシャドウブラー強度：77px
• ボックスシャドウスプレッド強度：23px
• 影の色：rgba（0,0,0,0.3）
• ボックスシャドウの位置：外側のシャドウ

最初の列の最初の画像モジュール

最初の列にイメージモジュールを追加して続行します。 画像をアップロードした後、次の設定を[間隔]サブカテゴリに適用します。

• 画像の下にスペースを表示：はい
• 上マージン：-500px（デスクトップ）、0px（タブレットと電話）
• 右マージン：-50px（デスクトップ）、0px（タブレットと電話）
• 左マージン：200px（デスクトップ）、0px（タブレットと電話）

ボックスシャドウサブカテゴリを開き、次のボックスシャドウを使用します。

• ボックスシャドウの水平位置：2px
• ボックスシャドウの垂直位置：2px
• ボックスシャドウブラー強度：0px
• ボックスシャドウスプレッド強度：30px
• 影の色：rgba（255,255,255,0.68）
• ボックスシャドウの位置：外側のシャドウ

最初の列の2番目の画像列

同じ列に別の画像モジュールを追加し、次のマージンを使用します。

• 上マージン：-50px（デスクトップ）、0px（タブレットと電話）
• 右マージン：100px（デスクトップ）、0px（タブレットと電話）
• 下マージン：30px
• 左マージン：100px（デスクトップ）、0px（タブレットと電話）

次に、下にスクロールして、次のボックスシャドウを利用します。

• ボックスシャドウの水平位置：2px
• ボックスシャドウの垂直位置：2px
• ボックスシャドウブラー強度：0px
• ボックスシャドウスプレッド強度：30px
• 影の色：rgba（255,255,255,0.68）
• ボックスシャドウの位置：外側のシャドウ

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

最後に、前の行の2つのテキストモジュールのクローンを作成し、この行の2番目の列に配置します。 変更する必要があるのは1つだけです。 テキストの色。 各テキストモジュールの設定を開き、テキストの色を「#FFFFFF」に変更します。

結果

デスクトップ

この投稿内のすべての手順により、デスクトップで次の結果が得られます。

モバイル

そして、モバイルでの次の結果：

最終的な考え

この投稿では、行にボックスシャドウをクリエイティブに使用する方法を紹介しました。 深さボックスの影がレイアウトに与えることをはっきりと確認できるカラフルな例を作成しました。 質問や提案がある場合; 下のコメントセクションにコメントを残してください！

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

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