Diviで美しいぼやけた背景を作成する方法

グラデーションの背景は、今日、あなたが出くわすほとんどすべての現代のウェブサイトの一部です。 しかし、より複雑なグラデーションを作成したい場合は、おそらく画像編集ソフトウェアに手を伸ばす傾向があります。 Diviには、別の方法があります。 Diviには多くの組み込みオプションがあるため、画像モジュールをぼやけた背景に変えることができます。 色だけが透けてグラデーションになるまで背景をぼかします。 美しい例を最初から再作成し、デザイン例のJSONファイルを無料で共有します！

それを手に入れよう！

プレビュー

チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。

デスクトップ

モバイル

ぼやけた背景のレイアウトを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

アプローチ

• 1つの列に3つの異なるモジュールを追加しています。 2つの画像モジュールと1つのCTAモジュール
• 最初の画像は最初の外観を維持します
• 2番目の画像はぼやけてサイズが大きくなります
• また、画像モジュールに含まれている他のフィルター設定を試して、色を強調します
• CTAモジュールは、ぼやけた画像モジュールと重なり、背景として使用します
• 画像モジュール＃2のぼかしとサイズの増加が列コンテナを超えないようにするために、列のオーバーフローを非表示にします

再作成を始めましょう

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

新しいセクションを追加

作業中のページに新しい通常のセクションを追加することから始めます。

新しい行を追加

カラム構造

次の列構造を使用して、新しい行を追加して続行します。

サイジング

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

• カスタムガター幅を使用：はい
• 側溝幅：2
• 最大幅：100％

列2のオーバーフロー

[詳細設定]タブに移動し、1行のCSSコードを使用して列2のオーバーフローを非表示にします。 これを行うと、列コンテナを超えるものがないことを確認するのに役立ちます。 これは、画像モジュールをぼやけた背景に変換し、そのサイズを大きくすると、特に重要になります。

overflow: hidden;

列3のオーバーフロー

3番目の列についても同じことを行います。

overflow: hidden;

テキストモジュール＃1を列1に追加します

H2コピーを追加

最初の列のテキストモジュールから始めて、モジュールの追加を開始します。 お好みのH2コンテンツを入力してください。

H2テキスト設定

[デザイン]タブに移動し、H2テキスト設定を変更します。

• 見出し2フォント：ポピンズ
• 見出し2のテキストの色：＃232323
• 見出し2テキストサイズ：40px

間隔

カスタムの上部マージンも追加します。

• トップマージン：9vw

Dividerモジュールを列1に追加します

可視性

列2に必要な2番目のモジュールは、ディバイダーモジュールです。 [仕切りを表示]オプションが有効になっていることを確認してください。

• 仕切りを表示：はい

ライン

デザインタブに移動し、線の色を変更します。

• 線の色：＃000000

テキストモジュール＃2を列1に追加します

コンテンツを追加する

選択した段落コンテンツを含む別のテキストモジュールを追加して続行します。

テキスト設定

次にテキスト設定を変更します。

• テキストフォント：ポピンズ
• テキストフォントの太さ：軽い
• テキストサイズ：17px
• テキスト行の高さ：2.1em

ボタンモジュールを列1に追加

コピーを追加

列1で必要な次の最後のモジュールは、ボタンモジュールです。 お好みのコピーを入力してください。

ボタンの設定

[デザイン]タブに移動し、ボタン設定でボタンのスタイルを設定します。

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストサイズ：20px
• ボタンのテキストの色：＃000000
• ボタンの背景色：＃f4f4f4
• ボタンの境界線の幅：0px
• ボタンの境界線半径：0px
• ボタンフォント：ポピン
• ボタンのフォントの太さ：太字
• ボタンのフォントスタイル：大文字

間隔

いくつかのカスタム間隔値も追加します。

• トップマージン：20px
• 下マージン：20px
• トップパディング：20px
• ボトムパディング：20px
• 左パディング：50px
• 右パディング：50px

イメージモジュール＃1を列2に追加します

1：1の画像をアップロード

2列目へ！ ここで、最初に必要なモジュールは画像モジュールです。 1：1の比率で画像をアップロードします。 これは、画像が完全な正方形である必要があることを意味します（幅は高さと等しくなければなりません）。

サイジング

[デザイン]タブに移動し、[全幅を強制]オプションを有効にします。

• 全幅を強制：はい

イメージモジュール＃2を列2に追加します

1：1の画像をアップロード

列2に必要な2番目のモジュールは、別の画像モジュールです。 ここでも、1：1の比率の画像を使用しています。

サイジング

[デザイン]タブに移動し、サイズ設定を変更します。

• 全幅を強制：はい
• 高さ：320px

間隔

負の上部マージンを追加して、このモジュールと前のモジュールの間にオーバーラップを作成します。

• 上マージン：-100px

フィルタ

次に、フィルターの設定を変更します。 これは、画像をぼやけた背景に変える部分です。

• 飽和度：200％
• 明るさ：145％
• コントラスト：117％
• ぼかし：40px

変換スケール

画像が列の幅全体をカバーするように、変換設定でサイズを大きくします。 行設定に追加した非表示の列オーバーフローのおかげで、列コンテナーを超えるものはありません。

• 右：180％
• 下：180％

列2にCTAモジュールを追加します

コンテンツを追加する

2番目の列に必要な次の最後のモジュールはCTAモジュールです。 お好みのコピーを入力してください。

リンクを追加

リンク設定に移動し、ボタンのリンクURLを追加して、ボタンがデザインに表示されるようにします。

背景色を削除する

背景色も削除します。

• 背景色を使用する：いいえ

タイトルテキスト設定

[デザイン]タブに移動し、タイトルテキストの設定を変更して続行します。

• タイトル見出しレベル：H3
• タイトルフォント：ポピンズ
• タイトルテキストサイズ：40px
• タイトル文字の間隔：-1px

本文の設定

本文の設定も変更してください。

• ボディフォント：ポピンズ
• ボディフォントの太さ：軽い
• ボディラインの高さ：2.2em

ボタンの設定

ボタンの設定と一緒に。

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストサイズ：20px
• ボタンのテキストの色：#ffffff
• グラデーションカラー1：rgba（244,244,244,0.4）
• グラデーションカラー2：rgba（255,255,255,0）
• ボタンの境界線の幅：0px
• ボタンの境界線半径：0px
• ボタンフォント：ポピン
• ボタンのフォントの太さ：太字
• ボタンのフォントスタイル：大文字

• トップマージン：50px
• トップパディング：20px
• ボトムパディング：20px
• 左パディング：50px
• 右パディング：50px

間隔

最後になりましたが、負の上部マージンを追加して、このモジュールとぼやけた背景の間にオーバーラップを作成します。 モジュールの左側と右側にも空白を残しています

• 上マージン：-250px
• 左パディング：2vw
• 右パディング：2vw

列2のすべてのモジュールのクローンを作成し、列3に複製を配置します

2番目の列のすべてのモジュールを完了したら、それらのクローンを作成して、複製を3番目の列に配置できます。

複製イメージモジュール＃1を変更する

画像を変更する

イメージモジュール＃1でイメージを変更します。

複製イメージモジュール＃2を変更する

画像を変更する

列の2番目の画像モジュールについても同じようにします。

フィルタ設定の変更

また、2番目の画像モジュールのフィルター設定も変更します。

• 飽和度：180％
• 明るさ：102％
• コントラスト：117％
• ぼかし：35px

重複するCTAモジュールを変更する

コピーの変更

CTAモジュールの内容を変更して続行します。

ボタンのグラデーションの背景を変更する

最初のボタンのグラデーションカラーと一緒に、これで完了です。

• グラデーションカラー1：rgba（244,244,244,0.15）

プレビュー

すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。

デスクトップ

モバイル

最終的な考え

この投稿では、Diviの組み込みオプションのみを使用してぼやけた背景を作成する方法を示しました。 作成するあらゆる種類のWebサイトに使用できる美しい例を最初から再作成しました。 このチュートリアルが、このチュートリアルで共有されたヒントを使用して、独自のカスタマイズされたデザインを作成するきっかけになることを願っています。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！

Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。