Diviの背景設定を使用してグラデーション背景オーバーレイを作成する方法

公開: 2017-06-13

今日のチュートリアルでは、新しいDiviバックグラウンドデザイン機能がWebサイトにもたらす、より具体的には、新しくエレガントな可能性を探ります。グラデーションの背景オーバーレイを使用します。

この新しいバックグラウンドアップデートにより、Diviビルダーに多くの新しいオプションが追加され、独自のWebサイトまたはクライアント用のWebサイトを設計する際のニーズを満たすのに役立ちます。これらの新しいオプションを使用すると、Webサイトの外観と操作方法を試すことができます。

この更新のリリース前は、Diviビルダー内で行うことができるほとんどの変更は、カスタムCSSコードを介して行う必要がありました。背景のデザイン変更がこれまでになく簡単になりました。数回クリックするだけで、Webサイトのさまざまなセクションすべてに美しい背景を作成できます。

グラデーションの背景オーバーレイの例

前後の画像を含む3つのセクションを作成しました。これは、新しいオプションによってWebサイトが反映する全体的な感覚を高め、特定の「je nesaisquoi」要素を与える方法を示します。

ヒーローセクション

これは、背景画像のみを追加した場合のヒーローセクションの外観です。

上の画像で使用されているのと同じ背景画像にグラデーションの背景オーバーレイを追加すると、最終結果は次のようになります。

宣伝文句

単色の背景を使用した場合の宣伝文のセクションは次のようになります。

そして、これは、グラデーションの背景オーバーレイをパターンの背景に追加したときの最終結果のようになります。

価格セクション

これは、1つの色（明るい色と暗い色）を使用した場合の価格設定セクションの外観です。

そして、これは、グラデーションの背景オーバーレイを使用した後の最終結果がどのようになるかです。

それぞれに異なる設定があり、独自のWebサイトで使用できるように、この外観を作成する方法を正確に、そして段階的に説明します。

ステップバイステップ：ヒーローセクション

この投稿の最初のセクションでは、ヒーローセクションを再作成しています。この例は、背景デザイン機能が画像で使用されている色をどのように変更できるかを反映しています。また、グラデーションの背景オーバーレイを使用しましたが、行った変更は非常に微妙です。異なる色の空と組み合わせて、画像に暗いトーンの感覚を追加しました。

作成を開始

WordPressのウェブサイトに新しいページを作成することから始めましょう。次に、全幅の行を含む標準セクションをそのページに追加します。次に、さまざまなモジュールを行に配置します。 2つのテキストモジュールと1つのボタンモジュールを使用しました。

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

最初のテキストモジュールは、ヒーローセクションのタイトルが表示される場所です。[コンテンツ]タブの[テキスト]サブカテゴリ内のコンテンツボックスに表示するテキストを入力し、[デザイン]タブに移動します。

[デザイン]タブで、[テキスト]サブカテゴリに次の変更を加えます。

テキストの向き：中央
テキストフォントサイズ：30
テキストフォントの色：#FFFFFF

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

次に、次のテキストモジュールを開き、コンテンツボックスにもテキストを入力します。次に、[デザイン]タブに移動し、[テキスト]サブカテゴリに次の変更を加えます。

テキストの向き：中央
テキストフォントサイズ：16
テキストフォントの色：#FFFFFF

同じタブを下にスクロールして、[サイズ設定]サブカテゴリの[最大幅]に「500px」を追加し、[間隔]サブカテゴリの[下マージン]に[2％]を追加します。

ボタンの設定

最後になりましたが、ボタンモジュールの設定を開きます。 [コンテンツ]タブの[テキスト]サブカテゴリにボタンにリンクするCTAを入力し、[デザイン]タブに移動します。

[デザイン]タブで、[ボタン]サブカテゴリを次のように調整します。

ボタンにカスタムスタイルを使用する：はい
ボタンのテキストサイズ：20
ボタンのテキストの色：#FFFFFF
ボタンの背景色：rgba（0,0,0,0）
ボタンの境界線の幅：2
ボタンの境界線の色：#FFFFFF
ボタンの境界半径：7

次に、行セクションを開き、デザインモジュールの間隔サブカテゴリで次の調整を行います。

トップマージン：15％
下マージン：10％

グラデーションの背景オーバーレイ設定

ここで、楽しい部分に進みます。背景画像にグラデーション背景オーバーレイを追加します。先に進み、セクションの設定を開きます。次に、背景サブカテゴリに移動し、グラデーションの背景を追加することから始めます。

作成した例では、次の設定を使用しました。

ファーストカラー：＃3730ff
2番目の色：＃e02b20
グラデーションタイプ：線形
勾配方向：272度
開始位置：40％
終了位置：100％

次に、[背景画像]タブに移動して、選択した画像を追加します。作成しようとしている効果を高めるために、意図的に空を含む画像を選択しました。

次に、同じタブを下にスクロールします。背景画像を中央に配置し、[背景画像のブレンド]ドロップダウンメニューの[乗算]オプションをアクティブにします。あなたが望む正確な結果に到達するのを助けることができる他の多くのオプションもあります。

そして、最終結果が得られます。

ステップバイステップ：宣伝文句

作成方法を示す2番目の例は、宣伝文句です。宣伝文の内容に焦点を合わせ続けたいので、忙しい背景ではなくパターンの背景を選択しました。

この例で使用されている背景パターンは、Toptalからのものです。商用のものも含め、あらゆる目的に使用したいパターンをダウンロードできます。彼らのFAQで述べられているようにあなたのウェブサイトのソースでそれらを信用することを忘れないでください。

また、グラデーションの色が透けて見えるように、宣伝文のアイコンをわずかに透明にしました。それぞれの宣伝文は同じ設定ですが、アイコンを通過する色はわずかに異なり、使用したグラデーションの色と一致しています。

作成を開始

新しいページまたは既存のページに標準セクションを追加することから始めます。そのセクション内に、3列の行が必要です。

行の最初の列に宣伝文モジュールを追加して続行します。各列で同じ宣伝文モジュール設定を使用します。そのため、blurbモジュールを1回作成し、他の2つの列に複製するだけで済みます。

宣伝文句の設定

宣伝文モジュールの設定を開き、[コンテンツ]タブの[テキスト]サブカテゴリにタイトルとコンテンツを入力します。 [デザイン]タブに移動し、[画像とアイコン]サブカテゴリを次のように調整します。

アイコンの色：rgba（255,255,255,0.36）
円のアイコン：はい
円の色：rgba（255,255,255,0）
円の境界線を表示：はい
円の境界線の色：rgba（255,255,255,0.36）
画像/アイコンの配置：上
アイコンのフォントサイズを使用：はい
アイコンフォントサイズ：96px

同じタブを下にスクロールして、[テキストの向き]を[テキスト]サブカテゴリの[中央]に配置します。

スクロールを続けて、ヘッダーテキストサブカテゴリを開きます。先に進み、次の設定を使用します。

ヘッダーフォントサイズ：18
ヘッダーテキストの色：#FFFFFF
ヘッダー行の高さ：1em

現在、変更する必要があるのは、本文テキストのサブカテゴリだけです。次の設定が適用されることを確認してください。

ボディフォントサイズ：14
本文の色：#FFFFFF
ボディラインの高さ：1.5em

宣伝文句モジュールのクローンを2回作成し、残りの2つの列に配置して、それに応じてコンテンツを変更することを忘れないでください。

行設定

行設定を開き、[デザイン]タブの[間隔]サブカテゴリに移動します。あなたがしなければならない唯一のことは、上下のマージンを「5％」に変更することです。

グラデーションの背景オーバーレイ設定

最後になりましたが、グラデーションオーバーレイを使用して背景画像を追加します。セクションの設定を開き、[コンテンツ]タブの[背景]サブカテゴリに移動します。

次に、グラデーションオプションに次の変更を加えます。

ファーストカラー：＃52009b
2番目の色：＃0edeed
グラデーションタイプ：ラジアル
半径方向：右
開始位置：28％
終了位置：100％

バックグラウンドオプションに移動し、選択したパターンをアップロードして、次の変更を加えます。

背景画像の位置：中央
背景画像の繰り返し：繰り返し（パターンによって異なります）
背景画像のブレンド：乗算

それでおしまい！これで、次の驚くべき結果が得られるはずです。

ステップバイステップ：価格設定セクション

この投稿の最後の例は価格設定セクションです。このセクションでは、グラデーションの背景をどこでも使用できることを示したいと思いました。セクションだけでなく、列でも使用できるように作られています。 2つの列にグラデーションの背景のみを使用し、2番目の列にグラデーションの背景オーバーレイを実行します。

これを行う理由は、注目の価格設定パッケージを強調するためです。他の2つの列よりも濃い色を使用しており、パターンの背景も追加しています。これら2つのことを組み合わせると、最も宣伝したい注目の価格設定パッケージに人々を引き付ける可能性が高まります。

作成を開始

Webサイトの新規または既存のページに新しい標準セクションを追加することから始めます。このセクションには、3列の行が必要です。使用するモジュールは各列で同じであり、同じ設定が含まれています。そのため、最初の列用に作成し、後で他の2つの列に複製します。

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

新しいテキストモジュールを最初の列に追加し、価格パッケージのタイプを[コンテンツ]タブの[テキスト]サブカテゴリの[コンテンツ]ボックスに追加して、[デザイン]タブに移動します。

[デザイン]タブの[テキスト]サブカテゴリに次の変更を適用します。

テキストの向き：中央
テキストフォントサイズ：24
テキストフォントの色：#FFFFFF
テキスト行の高さ：1.5em

同じタブを下にスクロールして、Spacingサブカテゴリに次の変更を加えます。

トップマージン：50px
下マージン：20px

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

同じ列に別のテキストモジュールを追加します。 [コンテンツ]タブの[テキスト]サブカテゴリ内の[コンテンツ]ボックスにパッケージの価格を書き留めて、[デザイン]タブに移動します。

[デザイン]タブで、次の調整を行います。

テキストの向き：中央
テキストフォントサイズ：82px
テキストフォントの色：#FFFFFF
テキスト行の高さ：1.1em

同じタブを下にスクロールして、下の余白に「10px」を追加します。

3番目のテキストモジュール設定

最後のテキストモジュールでは、[コンテンツ]タブの[テキスト]サブカテゴリのコンテンツボックスにテキストを追加します。次に、[デザイン]タブに移動し、[テキスト]サブカテゴリに次の変更を加えます。

テキストの向き：中央
テキストフォントサイズ：16
テキストフォントの色：#FFFFFF
テキスト行の高さ：1.1em

同じタブを下にスクロールして、[間隔]サブカテゴリの下余白に「33px」を追加します。

ボタンの設定

この列に追加する次のモジュールは、ボタンモジュールです。 [コンテンツ]タブの[テキスト]サブカテゴリ内のコンテンツボックスに表示するCTAを入力し、[デザイン]タブに移動します。

[デザイン]タブ内で、[配置]サブカテゴリの[ボタンの配置]を[中央]に配置し、[ボタン]サブカテゴリに次の変更を加えます。

ボタンにカスタムスタイルを使用する：はい
ボタンのテキストサイズ：13
ボタンのテキストの色：#FFFFFF
ボタンの背景色：rgba（255,255,255,0.11）
ボタンの境界線の幅：2
ボタンの境界線の色：#FFFFFF
ボタンの境界半径：4
ボタンの文字間隔：1

仕切りの設定

最後に、列に仕切りを追加してスペースを作成します。 [コンテンツ]タブで[ディバイダーを表示しない]を選択し、[デザイン]タブに移動して、[高さ]フィールドに「25px」を入力します。

すべてのモジュールを追加したので、必ずそれらのクローンを作成し、他の列にも配置してください。

グラデーションの背景オーバーレイ設定

この例では、異なる列に2つの異なる背景設定を使用します。最初と最後の列は同じになり、2番目の列は少し異なります。

行設定に移動し、[コンテンツ]タブの[背景]サブカテゴリ内の1番目と3番目の列のグラデーションオプションに次の変更を適用します。

最初の色：rgba（10,122,178,0.57）
2番目の色：rgba（142,0,142,0.47）
列1グラデーションタイプ：ラジアル
列1の半径方向：左上
列1の開始位置：0
列1の終了位置：100％

次に、列2に移動し、グラデーションオプションに次の変更を加えます。

最初の色：＃0a7ab2
2番目の色：＃8e008e
列2の勾配タイプ：線形
列2の勾配方向：180度
列2の開始位置：0
列2の終了位置：100

背景画像オプションに移動し、背景画像をアップロードして設定を変更します。

列2の背景画像の位置：左上
列2の背景画像の繰り返し：繰り返し
列2の背景画像のブレンド：乗算

最終的な考え

このブログ投稿で示した例は、新しい背景デザイン機能を使用しているときに得られる結果のほんの一部です。今後の投稿では、作成するWebサイトの優れたデザインを作成するのに役立つ他の例も確実に処理します。質問、コメント、提案がある場合。下のコメント欄にコメントを残してください！

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