のヒーローセクションにマスクとパターンを使用しますか? Divi ?
Divi の新しいマスクと背景パターン これまでで最もクールな新しいデザイン機能の XNUMX つです。 マスクとパターンのそれぞれを他の背景要素 (色、画像、グラデーションなど) と組み合わせて、数回クリックするだけで無数のユニークな組み合わせを作成できます。
今日は使い方をご紹介します Divi ヒーローセクションをデザインするための新しいマスクと背景パターン。
このチュートリアルでは、マスクと背景パターンを作成するために必要な重要な手順について説明します。
マスクのデザインに合わせて背景画像を配置する方法も紹介します。 これにより、 ツール サイトに最適なヒーロー セクションを数分で作成する必要があります。
概要
このチュートリアルで作成するデザインを簡単に見てみましょう。
白いマスクとパターンを持つヒーローのサンプル セクション。
これは、同じヒーロー セクションの暗いバージョンで、黒いマスクとパターンがあります。
このデザインを使用すると、数回クリックするだけでマスクとマスクの位置を簡単に変更できます。
Divi Builder で新しいページを作成する
WordPress ダッシュボードから、 ページ>新規追加 新しいページを作成します。
わかりやすいタイトルをつけてクリック Divi ビルダー
その後、クリック 構築を開始 (ゼロから構築)
その後、デザインを開始するための空白のキャンバスが作成されます。 Divi.
ヒーローセクションでDiviのマスクと背景パターンを使用する方法
1. レイアウト構造を作成する
このヒーロー セクションでは、左側にタイトルと行動を促すフレーズ、右側に画像 (またはビジュアル デザイン) を配置した従来のレイアウト構造を使用します。
この例では、Divi の背景オプションを使用してビジュアル デザインを作成します。 しかし、本題に入る前に、セクションの背景マスクとパターン デザインを紹介するページの右側のスペースを節約するために、XNUMX 列の行を作成する必要があります。
2. タイトルと行動を促すフレーズを追加する
左の列 (列 1) に、メイン タイトル用の Text モジュール、サブタイトル テキスト用の Text モジュール、およびボタン用の Button モジュールを追加します。
3.セクションに垂直方向の間隔を追加します
背景デザインを高く美しく見せるには、セクションに垂直方向の高さを追加する必要があります。 これを行う簡単な方法は、セクションの上部と下部にパディングを追加することです。 列が垂直に積み上げられたら、タブレットと電話の画面のパディングを調整して、背景デザイン用のスペースを確保する必要があることに注意してください。
セクション設定を開きます。 [デザイン] タブで、パディングを次のように更新します。
- パディング:
- デスクトップ: 上位 20vw、下位 20vw
- タブレット: 上 8vw、下 48vw
- 電話: 上 8vw、下 70vw
4.背景画像とグラデーションを追加
次に、背景画像とグラデーションをセクションに追加できます。 背景画像の主な焦点はセクションの右側に表示されることに注意してください。そのため、見たいものが右側にある画像を使用してください。
この例では、都市のスカイラインの画像を使用しています。 画像の右側には建物が近くて見栄えが良いので、非常にうまく機能します。
タブの下 背景画像、セクションの背景に画像をアップロードします。
Divi では、背景画像に色のグラデーションを簡単に追加できます。 タブの下 背景グラデーションで、セクションの背景に次のグラデーションを追加します。
- 勾配停止:
- 0%: #3e22ff
- 100%: クリア
- 背景画像の上の正方形のグラデーション：はい
5. セクションの背景パターンを作成する
背景画像とグラデーションの準備ができたので、背景パターンを追加してデザインを完成させます。
この例では、よりユニークな外観にするために少しテクスチャを追加するだけの微妙なパターンを使用します。
タブの下 背景パターン、次を更新します。
- 背景パターン:房状
ASTUCE： 背景パターンでは、通常は控えめにするのが最善です。 小さいデザインにはカスタム サイズを使用してみてから、色の不透明度を下げてください。
6.セクションの背景マスクを作成します
背景パターンが配置されたので、最終的にデザインの新しい背景マスクをテストする準備が整いました。 たくさんのオプションとバリエーションから選択できます。 この例では、ハニカム マスクを使用します。
タブの下 背景マスク、次を更新します。
- マスク：ハニカム
- マスクカラー：#ffffff
- サイズ: カバー
7. 背景画像の位置を調整する
背景マスクを使用しているため、背景画像の一部がマスクされます (または「マスク」されます)。
この例では、画像の右下が最も見えるようにし、少し右に移動してより多くの建物を表示します。
[イメージ] タブで、次を更新します。
- 背景画像の位置：右下
- 背景画像の水平オフセット: -4vw
8.ブレンドモードを使用する
これらすべての背景要素でクリエイティブになる XNUMX つの方法は、ブレンド モードを追加することです。 混合モードはどの背景オプションにも追加でき、複数の背景レイヤー (画像、グラデーション、マスクなど) をクリエイティブな方法で混合するために使用できます。
この例では、背景画像をグラデーション カラーとブレンドします。 これを行うには、タブをクリックします 背景画像 次のように、グラデーションカラーを背景画像とブレンドするブレンドモードを追加します。
- 背景画像のブレンド: 乗算
9. モバイルの背景マスクを調整する
背景マスクのデザインがモバイル デバイスでも見栄えがするようにすることが重要です。 幸いなことに、組み込みのオプションを使用すると、このプロセスが簡単になります。
背景デザインのためのスペースを確保するために、タブレットと電話に追加のパディングを既に追加していることを思い出してください。
あとは、背景の変換と縦横比のオプションを使用して、モバイル用にマスクを調整するだけです。
タブの下 背景マスク、レスポンシブ オプションを有効にして、以下を更新します。
タブレット版
- マスク変換: 上下反転、左右反転、回転
- マスクの縦横比: 正方形
電話版
- マスク変換: 上下反転、左右反転、回転
- マスクの縦横比: 縦
結果
これまでに作成したデザインをご覧ください。
デスクトップコンピューター
タブレット版
電話版
10.ダークバージョンを作成する
このデザインの暗いバージョンが必要な場合は、背景マスクの色を暗い色 (黒など) に変更してください。
次に、パターンの色を黒に変更します。
次に、タイトルとサブタイトルのテキストを白に変更します。 また、ボタンの色も更新したい場合があります。
ダークバージョンはこんな感じ。
最終結果
最終結果をもう一度見てみましょう。
今すぐDIVIをダウンロード!!!
まとめ
あなたのヒーローセクションをデザインする サイトのWeb とても楽しいです マスクと背景パターン ディビによる。 背景オプションは、完璧なデザインを得るために簡単に変更できます。 また、さらにユニークな背景を作成するために使用できるその他のオプション (描画モードなど) がたくさんあります。
さらに、セクションだけでなく、任意の Divi 要素にマスクとパターンを追加できます。 それでは、実験をお楽しみください！
このチュートリアルがあなたの次のDiviプロジェクトに刺激を与えることを願っています。 懸念や提案がある場合は、 コメントセクション それを議論する。
相談することもできます 私たちのリソース、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合は、 WordPressブログ作成 または Divi：史上最高のWordPressテーマ.
しかし、その間に、 さまざまなソーシャルネットワークでこの記事を共有する.
...
