Diviの6つの無料リピート背景パターンをダウンロード

あなたのウェブサイトに細部への特別な注意を払うことはあなたが思っている以上にあなたの全体的なウェブデザインスタイルに影響を与えることができます。 これは通常、テンプレートの種類のWebサイトとカスタマイズされたWebサイトを区別するのに役立つ小さな詳細です。

高架設計を実現するためにアプローチできる方法はいくつかあります。 できることの1つは、ページ上の任意のデザイン要素に微妙な背景の繰り返しパターンを使用することです。 これは、背景画像のサイズを小さくするのに役立つだけでなく、空白の背景を圧倒することなく埋めるのにも役立ちます。

この投稿では、Diviを使用してあらゆる種類のWebサイトを構築するときに使用できる、6つの基本的でありながら用途の広い背景パターンをダウンロードできます。 これらのパターンは、Webデザインにスパイスを加える必要があるときに、ポケットの後ろに置いておくのに最適です。

プレビュー

これらの背景パターンを使用して、Webサイトで達成できる結果の種類を見てみましょう。

背景パターンを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

アプローチ

• フォルダをダウンロードして解凍すると、5つの異なるフォルダが見つかります
• これらのフォルダはそれぞれ、1000×1000、500×500、100×100、50×50、25×25の異なるディメンションセットを表します。
• これらは技術的には同じパターンですが、使用するディメンションセットによって、Webサイトの最終結果は異なって見えます。
• これらのパターンをDiviの背景オプションと組み合わせて、背景リピート効果を作成しています
• これにより、背景画像の一貫性が保たれるだけでなく、高解像度の背景画像の必要性も減少します。

使い方

ページのセクションを選択してください

これらの背景パターンは、ページ上の任意のデザイン要素に適用できます。 セクションの背景として追加することで、それを示します。 ただし、これらの同じパターンを、行、列、モジュールなどの他のデザイン要素に自由に追加してください。 デザイン要素が小さければ小さいほど、ルックアンドフィールをどのように仕上げたいかに応じて、パターンの寸法に合わせる必要があります。

お好みの寸法を選択してください

パターン1：1000×1000

背景設定

上記で共有した結果を得るには、先に進んで、ダウンロードの1000×1000フォルダーでパターン＃1を見つけます。 次に、それをセクションの背景設定にアップロードし、次の設定を一緒に使用します。

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

グラデーションオーバーレイ付き

グラデーションの背景を使用してパターンをブレンドしたいですか？ あなたもそれを行うことができます。 以下の例では、背景画像の上にグラデーションを配置してブレンド効果を作成することと組み合わせて、1つの単色と1つの半透明を使用しました。

• 色1：＃E2E2E2
• 色2：rgba（255,255,255,0.37）
• グラデーションタイプ：線形
• 勾配方向：181度
• 開始位置：7％
• 終了位置：35％

パターン＃1 ：500×500

背景設定

Diviの組み込みの背景オプションを使用して、パターンを水平または垂直にのみ表示することもできます。 上記の例では、500×500の寸法のパターン＃1画像ファイルを使用しました。 アップロード後、次の背景設定と組み合わせます。

• 背景画像サイズ：実際のサイズ
• 背景画像の位置：上部中央
• 背景画像の繰り返し：繰り返しX（水平）

パターン＃2 ：500×500

背景設定

500×500フォルダの2番目のパターンを使用して同じことを行いました。

• 背景画像サイズ：実際のサイズ
• 背景画像の位置：上部中央
• 背景画像の繰り返し：繰り返しX（水平）

パターン＃3 ：100×100

背景設定

次の例では、100×100の寸法フォルダでパターン＃3を見つけ、それを次の背景オプションと組み合わせて、パターンがセクション全体を占めるようにします。

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

パターン＃4 ：50×50

背景設定

寸法が小さいほど、パターンの頻度が高くなります。 50×50ディメンションフォルダで背景＃4を見つけ、次の背景設定と組み合わせます。

• 背景画像サイズ：実際のサイズ
• 背景画像の位置：上部中央
• 背景画像の繰り返し：繰り返し

パターン＃5 ：100×100

背景設定

5番目のパターンは、次の背景設定で100×100の寸法セットを使用すると、見事で繊細なデザインになります。

• 背景画像サイズ：実際のサイズ
• 背景画像の位置：上部中央
• 背景画像の繰り返し：繰り返し

パターン＃6 ：25×25

背景設定

最後になりましたが、25×25の寸法フォルダでパターン＃6を見つけ、次の背景設定とともにセクションの背景にアップロードします。

• 背景画像サイズ：実際のサイズ
• 背景画像の位置：上部中央
• 背景画像の繰り返し：繰り返し

行、列、モジュールの背景にもパターンを使用する

上で扱った例は、あなたが持っているオプションのほんの一部です。 含まれているさまざまな寸法を試してみると、パターンごとに異なる結果が得られます。 さらに、Diviのバックグラウンドオプションを使用して、さまざまな結果を作成することもできます。 これらの背景パターンをセクションにのみ使用することに限定されません。 これらは、DiviのVisualBuilderのすべてのデザイン要素に使用できます。 パターンのサイズは、要素のサイズと一致する必要があります。 行、列、モジュールの背景のパターンを使用して、パーソナライズされたユニークなデザインを作成します。

プレビュー

バックグラウンドパターンで取得できるいくつかの異なる最終結果を処理したので、最終結果を見てみましょう。

最終的な考え

ウェブデザインでは、細部に注意を払うことが重要です。 これを行うには多くの方法がありますが、この投稿では、Diviを使用してデザイン要素の微妙な背景を取得するために、背景パターンの使用を具体的に扱いました。 無料でダウンロードして使用できる6つの異なるパターンを提供しています。 パターンごとに、ページで使用したときに異なる結果につながるさまざまなディメンションも提供しています。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！