Diviの5つの無料ボーダー画像をダウンロード

あなた自身またはクライアントのために新しいウェブサイトを構築するときに使用できる追加のリソースがあることは常に素晴らしいことです。 そのため、毎週新しいレイアウトパックを受け取るようにしています。 ただし、「境界線の画像」や、Diviデザイン要素の片側または別の側に沿って使用して文体の繁栄を追加できる画像など、他にも役立つリソースがあります。 これらの境界線画像と一緒にDiviの組み込みオプションを使用すると、驚くべき結果をもたらすことができます。 この投稿では、以下から無料でダウンロードできる5種類の境界線画像を提供しています。 これらの境界線画像を活用して、すばらしい最終結果を作成する方法について説明します。

それを手に入れよう！

プレビュー

この投稿のさらに下にダウンロードできるさまざまな境界線の画像を見てみましょう。 それぞれの形には、上、下、左、右の4つのバージョンがあります。 これらの画像を使用すると、以下の最初の4つの画像に示されているのとまったく同じ結果を得ることができます。

画像ファイルを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

アプローチ

• 5つの境界線の画像すべてを含むフォルダーをダウンロードして解凍すると、上部の境界線、下部の境界線、左側の境界線、右側の境界線の4つのサブフォルダーが見つかります。
• これは、合計20の画像ファイルを使用できることを意味します
• この投稿の後半で、境界の各側面に一致する付随する設定を見つけることができます
• さらに、境界線の画像をグラデーションオーバーレイと組み合わせることができます
• これらのカラーオーバーレイは、画像を必要に応じて鮮やかまたは微妙に表示するのに役立ちます
• これらの境界線の画像は、商業目的であっても、制限なしで自由に使用できます。

全体的なデザインの作成

新しいセクションを追加

間隔

ボーダー画像を紹介するために使用した全体的なデザインを作成することから始めましょう。 新規または既存のページを開き、新しい通常のセクションを追加して、カスタムパディングを追加します。

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

新しい行を追加

カラム構造

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

サイジング

モジュールをまだ追加せずに、行の設定を開き、サイズ設定に移動して、行を全幅にします。

• この行を全幅にする：はい

タイトルテキストモジュールを列1に追加

H2コンテンツボックスを追加

いくつかのモジュールの追加を始めましょう！ 必要な最初のモジュールはテキストモジュールです。 最初の列に1つ追加し、選択したH2コピーをコンテンツボックスに追加します。

見出しテキストの設定

次に、[デザイン]タブのH2テキスト設定にいくつかの変更を加えます。

• 見出し2フォント：Abril Fatface
• 見出し2テキストサイズ：80px（デスクトップ）、70px（タブレット）、50px（電話）

間隔

このテキストモジュールの上部にマージンを追加して続行します。

• トップマージン：150px

リンクテキストモジュールを列1に追加

コンテンツボックスへのリンクを追加

追加したタイトルのテキストモジュールのすぐ下に、先に進んで新しいテキストモジュールを追加します。 このテキストモジュールをボタンとして使用しているので、CTAへのリンクを必ず追加してください。

リンクテキスト設定

次に、[デザイン]タブでリンクテキストの設定を変更します。

• リンクフォントの太さ：超太字
• リンクフォントスタイル：大文字
• リンクテキストの色：＃000000
• リンクテキストサイズ：21px

間隔

このテキストモジュールと前のテキストモジュールの間にスペースを作成するために、上部マージンを追加します。

• トップマージン：100px

国境

最後に、リンクテキストモジュールに微妙な下の境界線を追加します。

• 下の境界線の幅：1px
• 下の境界線の色：＃333333

説明テキストモジュールを列2に追加

テキスト設定

2番目の列には、説明テキストモジュールのみが必要です。 コンテンツボックスにコンテンツを追加した後、次のテキスト設定を適用します。

• テキストサイズ：22px（デスクトップ）、20px（タブレット）、18px（電話）
• テキスト行の高さ：2.6em
• テキストの向き：正当化

サイジング

サイズ設定をさまざまな画面サイズにも一致させます。

• 幅：82％（デスクトップ）、100％（タブレットと電話）

間隔

そして最後に、上下の余白を追加します。

• トップマージン：100px
• 下マージン：100px

境界線の形状の追加

左ボーダーの背景設定

全体的なデザインが完成したので、ボーダー画像の追加を開始できます。 まず、左側の境界側から始めます。 「LeftBorder」フォルダで選択した境界線の画像を見つけて、セクションの背景画像としてアップロードします。 次に、次の背景画像設定を適用します。

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

右ボーダーの背景設定

または、[右の境界線]フォルダーで選択した境界線の画像を見つけ、次の設定を使用してセクションの背景として追加できます。

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

トップボーダーの背景設定

同じことが上部の境界線の画像にも当てはまりますが、代わりに次の背景設定を使用します。

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

下枠の背景設定

または、最後になりましたが、「下の境界線」フォルダで下の境界線の画像を見つけて、次のセクションの背景設定と組み合わせることができます。

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

半透明のオーバーレイを使用して色をブレンドする

含まれている境界線の形状ごとに、カラーオーバーレイを追加することもできます。 このオーバーレイは、境界線の画像をより繊細に見せるために役立ちます。 オーバーレイを追加するには、セクション設定に移動し、境界線の背景画像の上にグラデーションの背景を追加します。

• 色1：#ffffff
• 色2：rgba（255,255,255,0.36）
• グラデーション方向：141度
• 背景画像の上にグラデーションを配置：はい

プレビュー

すべての手順を完了したので、これらの無料の境界線画像を使用して実現できるいくつかの潜在的なデザインを最後に見てみましょう。

最終的な考え

この投稿では、無料でダウンロードできる5つの異なる境界線の画像を共有しました。 これらの境界線の画像は、作業中のWebサイトに制限なく使用できます。 それらすべてを試して、見事なデザインを作成することをお勧めします。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！