Diviの10の無料流体セクション背景画像をダウンロード

セクションのルックアンドフィールを一新したい場合は、これが理想的な投稿になる可能性があります。 10種類の流体セクションの背景画像を作成しました。これらは無料でダウンロードして、構築している任意のWebサイトで使用できます。 さらに、これらの流動セクションの背景画像をDiviの組み込みオプションと組み合わせる方法も示します。 流動的な背景画像に任意のグラデーションの背景を割り当て、それを行のグラデーションの背景と組み合わせて、コンテンツも読みやすい状態に保つことができます。

それを手に入れよう！

プレビュー

まず、投稿のさらに下にダウンロードできる10種類の流体セクションの背景画像を見てみましょう。 画像とグラデーションの背景を組み合わせて、独自の結果を作成しました。 この投稿でもグラデーションの組み合わせを1つずつ共有しますが、さまざまな色を自由に試して、目的の最終結果を得ることができます。

流体セクションの背景画像を無料でダウンロード

無料の流体セクションの背景画像に手を置くには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

ダウンロード

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

セクションを再作成

新しい通常のセクションを追加する

間隔

すべての画像ファイルをダウンロードしたら、WordPress Webサイトにアクセスして、新規または既存のページを開きます。 次に、DiviのVisual Builderを使用して、新しい通常のセクションを追加します。 その設定を開き、間隔の値を変更します。

• トップパディング：0px
• ボトムパディング：0px

新しい行を追加

カラム構造

次の列構造を使用して、セクションに新しい行を追加して続行します。

サイジング

モジュールをまだ追加せずに、行設定を開き、サイズ設定を変更します。

• この行を全幅にする：はい
• カスタムガター幅を使用：はい
• 側溝幅：1

間隔

間隔設定にもいくつかのパディング値を追加します。

• トップパディング：312px
• ボトムパディング：312px
• 列左パディング：50px
• 列右パディング：50px

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

コンテンツを追加する

モジュールの追加を開始する時が来ました！ 最初に必要なモジュールはテキストモジュールです。 先に進み、コンテンツボックスにコンテンツ、できればH2タイトルと段落を追加します。

H2テキスト設定

次にH2テキスト設定に移動し、次の変更を適用します。

• 見出し2フォント：Montserrat
• 見出し2フォントの太さ：超太字
• 見出し2のテキストの色：#FFFFFF
• 見出し2テキストサイズ：82px（デスクトップ）、60px（タブレット）、40px（電話）
• 見出し2行の高さ：1.4em

テキスト設定

全体的なテキスト設定も変更します。

• テキストの色：#FFFFFF
• テキストサイズ：16px
• テキスト行の高さ：1.9em
• テキストの向き：中央

サイジング

デスクトップでこのモジュールの幅を狭くして続行します。

• 幅：58％（デスクトップ）、100％（タブレットと電話）
• モジュールの配置：中央

ボタンモジュールの追加

コピーを追加

必要な2番目で最後のモジュールはボタンモジュールです。 テキストモジュールの下にモジュールを追加した後、コピーを追加します。

ボタンの配置

次に、ボタンの配置を変更します。

• ボタンの配置：中央

ボタンの設定

次に、ボタンの設定に移動して、いくつかの変更を加えます。

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストサイズ：18px
• ボタンのテキストの色：＃000000
• ボタンの背景色：#FFFFFF
• ボタンの境界線の幅：0px
• ボタンの境界線半径：0px
• ボタンの文字間隔：-1px
• ボタンフォント：Montserrat
• フォントの太さ：超太字
• フォントスタイル：大文字

間隔

大事なことを言い忘れましたが、上マージンを追加して、前のモジュールとこのモジュールの間にスペースを追加します。

• トップマージン：25px

流体セクションの背景＃1

セクション勾配の背景

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

• 色1：＃000000
• 色2：＃2d5b9b
• グラデーションタイプ：線形
• 勾配方向：137度
• 開始位置：48％

セクションの背景画像

ダウンロードフォルダにある「 fluid-style-1.png 」ファイルをアップロードし、次の背景設定と組み合わせます。

• 背景画像サイズ：実際のサイズ
• 背景画像の位置：中央

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

それを締めくくるには、セクションの背景の上に行のグラデーションを追加します。 これにより、テキストが読みやすくなります。 また、ページに奥行きを加えるのにも役立ちます。

• 色1：rgba（0,0,0,0.67）
• 色2：rgba（255,255,255,0）
• グラデーションタイプ：ラジアル
• 半径方向：中心

流体セクションの背景＃2＆＃3

セクション勾配の背景

2番目と3番目の流体セクションの背景画像は、次のセクショングラデーションの背景を使用します。

• 色1：＃4f009e
• 色2：＃fa00ff
• グラデーションタイプ：線形
• 勾配方向：137度
• 開始位置：48％

セクションの背景画像

ダウンロードフォルダにある「 fluid-style-2.png 」または「 fluid-style-3.png 」ファイルをアップロードし、次の背景設定と組み合わせます。

• 背景画像サイズ：実際のサイズ
• 背景画像の位置：中央

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

微妙な行グラデーションの背景も追加します。

• 色1：rgba（255,48,75,0.13）
• 色2：rgba（255,255,255,0）
• グラデーションタイプ：ラジアル
• 半径方向：中心

流体セクションの背景＃4

セクション勾配の背景

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

• 色1：＃00245e
• 色2：＃ffee00
• グラデーションタイプ：線形
• 勾配方向：137度
• 開始位置：48％

セクションの背景画像

ダウンロードフォルダにある「 fluid-style-4.png 」ファイルをアップロードし、次の背景設定と組み合わせます。

• 背景画像サイズ：実際のサイズ
• 背景画像の位置：中央

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

最後に、次の設定を使用して行グラデーションの背景を追加します。

• 色1：rgba（0,0,0,0.37）
• 色2：rgba（255,255,255,0）
• グラデーションタイプ：ラジアル
• 半径方向：中心

流体セクションの背景＃5

セクション勾配の背景

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

• 色1：＃04000f
• 色2：＃00436d
• グラデーションタイプ：線形
• 勾配方向：137度
• 開始位置：48％

セクションの背景画像

次に、ダウンロードフォルダにある「 fluid-style-5.png 」ファイルをアップロードし、次の背景設定と組み合わせます。

• 背景画像サイズ：実際のサイズ
• 背景画像の位置：中央

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

次の行グラデーションの背景を使用してデザインを完成させます。

• 色1：rgba（0,0,0,0.58）
• 色2：rgba（255,255,255,0）
• グラデーションタイプ：ラジアル
• 半径方向：中心

流体セクションの背景＃6

セクション勾配の背景

次の見事なセクショングラデーションの背景の組み合わせを使用します。

• カラー1：＃4800ff
• 色2：＃c854ff
• グラデーションタイプ：線形
• 勾配方向：137度
• 開始位置：48％

セクションの背景画像

ダウンロードフォルダにある「 fluid-style-6.png 」ファイルをアップロードし、次の背景設定と組み合わせます。

• 背景画像サイズ：実際のサイズ
• 背景画像の位置：中央

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

最後になりましたが、行グラデーションの背景オーバーレイを追加します。

• 色1：rgba（0,0,0,0.51）
• 色2：rgba（255,255,255,0）
• グラデーションタイプ：ラジアル
• 半径方向：中心

流体セクションの背景＃7

セクション勾配の背景

次のグラデーションの背景設定をセクションに適用します。

• 色1：＃ff8300
• 色2：＃52006b
• グラデーションタイプ：線形
• 勾配方向：137度
• 開始位置：48％

セクションの背景画像

ダウンロードフォルダにある「 fluid-style-7.png 」ファイルをアップロードし、次の背景設定と組み合わせます。

• 背景画像サイズ：実際のサイズ
• 背景画像の位置：右上

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

最後に、セクションの上に行グラデーションの背景を追加します。

• 色1：rgba（106,0,198,0.34）
• 色2：rgba（255,255,255,0）
• グラデーションタイプ：ラジアル
• 半径方向：中心

流体セクションの背景＃8

セクション勾配の背景

次の青いグラデーションの背景をセクションに適用します。

• 色1：＃0b43dd
• カラー2：＃09f9ed
• グラデーションタイプ：線形
• 勾配方向：137度
• 開始位置：48％

セクションの背景画像

ダウンロードフォルダにある「 fluid-style-8.png 」ファイルをアップロードし、次の背景設定と組み合わせます。

• 背景画像サイズ：実際のサイズ
• 背景画像の位置：左上

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

行のグラデーションの背景を適用して、デザインを完成させます。

• 色1：rgba（0,7,119,0.57）
• 色2：rgba（255,255,255,0）
• グラデーションタイプ：線形
• 半径方向：中心

流体セクションの背景＃9

セクション勾配の背景

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

• 色1：＃051f89
• 色2：＃6d0272
• グラデーションタイプ：線形
• 勾配方向：137度
• 開始位置：48％

セクションの背景画像

ダウンロードフォルダにある「 fluid-style-9.png 」ファイルをアップロードし、次の背景設定と組み合わせます。

• 背景画像サイズ：カバー
• 背景画像の位置：中央

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

大事なことを言い忘れましたが、行グラデーションの背景を使用してコンテンツの読みやすさを向上させます。

• 色1：rgba（0,0,0,0.59）
• 色2：rgba（255,255,255,0）
• グラデーションタイプ：ラジアル
• 半径方向：中心

流体セクションの背景＃10

セクション勾配の背景

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

• 色1：＃051f89
• 色2：＃6d0272
• グラデーションタイプ：線形
• 勾配方向：137度
• 開始位置：48％

セクションの背景画像

ダウンロードフォルダにある「 fluid-style-10a.png 」ファイルをアップロードし、次の背景設定と組み合わせます。

• 背景画像サイズ：実際のサイズ
• 背景画像の位置：左上

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

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

• 色1：rgba（0,0,0,0.59）
• 色2：rgba（255,255,255,0）
• グラデーションタイプ：ラジアル
• 半径方向：中心

行の背景画像

行にも背景画像を追加します。 ダウンロードフォルダで「 fluid-style-10b.png 」を見つけてアップロードし、次の背景設定と組み合わせます。

• 背景画像サイズ：実際のサイズ
• 背景画像の位置：右下

プレビュー

すべての手順を完了したので、最終結果を見てみましょう。

最終的な考え

この投稿では、制限なしで自分のWebサイトで使用できる10種類のユニークな流体セクションの背景画像を共有しました。 さらに、Diviの組み込みオプションのみを使用して、流動的な背景画像と組み合わせることができる見事なグラデーション背景も提供しています。 ご質問やご提案がございましたら、下のコメントセクションにコメントを残して、流動的なセクションの背景画像のどれが一番好きかをお知らせください。