からのマスクと背景パターンを使用して、ユニークで見事な背景を作成しますか? Divi ?
の新しい背景マスクとパターン機能 Divi ページのセクションに最もよく使用されます。 しかし、それらをヘッダーに追加することもできます!
このチュートリアルでは、ヘッダー テンプレートにマスクと背景パターンを追加する方法を説明します。 Divi コンストラクターを使用する テーマ.
完全にユニークなヘッダー デザインを作成するのに最適な方法です。 サイトのWeb.
のは、始めましょう。
概要
このチュートリアルで作成するデザインを簡単に見てみましょう。
Divi のテーマ ビルダーに移動し、グローバル ヘッダーの作成を開始します
WordPress ダッシュボードから、 ディビ > テーマビルダー
上をクリックします 「グローバルヘッダーを追加」
選択 「グローバルヘッダーを構築」.
その後、Divi Builder を使用して新しいヘッダーのデザインを開始できます。
背景マスクとパターンを Divi ヘッダーに追加する方法
背景色とパターンでセクション背景を作成する
また読みます： Divi: グリッドの形式でお客様の声セクションを作成する方法
開始するには、既存のセクションの設定を開きます。
タブの下 コンテンツで、背景オプションを次の設定で更新します。
背景色:
- 背景: #262d3f
背景パターン:
- モデル: 丸薬
- パターンカラー: rgba(255,255,255,0.1)
- パターンサイズ: カスタムサイズ。
- パターン幅: 1px
パディング
タブの下 設計、セクションのパディングを次のように更新します。
- パディング (上下): 0px
これにより、ヘッダーの垂直方向のスペースが少し減少します。
次の列レイアウトで行を追加します
プレースホルダー ヘッダー コンテンツ (メニューとボタン) を追加
行の左の列に、新しいメニューを追加します。
メニューを選択します。
次に、ロゴを追加し、設定を使用してメニューとロゴを必要に応じてカスタマイズします。
右側の列で、ボタン モジュールを追加し、好みに合わせてカスタマイズします。
グラデーション、マスク、パターンで線の背景を作成する
グラデーション
メニューとボタンを含む行設定を開きます。 次に、次の背景設定で背景オプションを更新します。
背景のグラデーション:
- 勾配停止 1 (50%): クリア
- 勾配停止 2 (75%): #ff4c00
- ステアリング: 90 度
パターン
- モデル: 丸薬
- パターンカラー: rgba(38,45,63,0.48)
- パターン サイズ: 1 ピクセル
- 垂直オフセット: 20px
注: パターンの垂直方向のオフセットは 20px に設定されています。これは、ラインの上のセクションに 20 ピクセルのトップ パディングがあるためです。 これにより、セクション パターンが行パターンと一致するようになります。
背景マスク
- マスク：ヘリンボーン
- マスクカラー：#262d3f
注: ヘッダーの場合、マスクのデザインを損なうことなく水平方向のスペースを覆うように、マスク サイズを [拡張して塗りつぶす] に設定しておくことをお勧めします。
ラインの最終仕上げ
デザインを完成させるために、境界線の半径を追加し、線をさらにいくつか編集します。
半径、境界線、および境界線の間隔
タブの下 設計、次のようにパディングを更新します。
- パディング (上下): 5px
次に、追加のデザイン要素として、列の角を丸くします。
- 角丸：50px
- 左枠の幅: 50px
- 左枠の色: #262d3f
角が丸くなっているにもかかわらず、マスクの四角いエッジが行からはみ出すため、行の左側に境界線を付ける必要があります。
最終結果
最終結果を見てみましょう。
グラデーションは少し微妙なので、これがどのように見えるかを見てみましょう。
そして、これがデスクトップとモバイルのヘッダー デザインです。
今すぐDIVIをダウンロード!!!
まとめ
ヘッダーの背景デザインは氷山の一角です。 ディビで利用可能な背景オプションを使用するには、多くの調査があります.
このチュートリアルが、Divi の背景マスクとパターンを組み合わせてヘッダーのユニークな背景デザインを作成する方法を理解するのに役立つことを願っています.
独自のデザインに合うように、背景デザインの組み合わせを自由に試してみてください。 サイトのWeb またはあなたの今後のプロジェクト。
相談することもできます 私たちのリソース、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合。
また、私たちのガイドを参照することを躊躇しないでください WordPressブログ作成 または Divi：史上最高のWordPressテーマ.
しかし、その間に、 さまざまなソーシャルネットワークでこの記事を共有する.
...
