組み込み設定を使用して実現できる5つのクリエイティブDiviヘッダーモジュールスタイル
公開: 2019-01-06箱から出して、Diviヘッダーモジュールは、わずかな調整で印象的なヘッダーデザインを作成できます。 これにより、DiviでWebサイトのヘッダーをデザインするときに非常に人気のあるモジュールになります。 そして、少し独創的な考え方で、組み込みの設定のみを使用して（カスタムCSSなしで）いくつかの本当にユニークなデザインを作成できます。 それで、いくつかの新しいヘッダーデザインを探求したい人のために、私はあなたにインスピレーションを与えるかもしれない5つのDiviヘッダーモジュールスタイルをあなたに紹介するつもりです。
楽しみ！
5つのDiviヘッダーモジュールスタイルのスニークピーク
スタイル＃1：抽象的なグラデーション
スタイル＃1のデザインを開始
スタイル＃2：三重の脅威
スタイル＃2のデザインを開始
スタイル＃3：丸みを帯びたフレーム
スタイル＃3のデザインを開始
スタイル＃4：ブレンドレフティ
スタイル＃4のデザインを開始
スタイル＃5：ラージスケーリングタイプ
スタイル＃5のデザインを開始
始めるために必要なもの
開始するには、Diviテーマが必要です。 DiviBuilderを使用してフロントエンドでデザインを作成します。 チュートリアルを完了するには、いくつかの画像も必要になります。 事前に作成されたレイアウトの画像はいつでもインポートできることを忘れないでください。 実際、このチュートリアルでは、Cleaning Company Layout Pack、Business Coach Layout Pack、およびWeb Freelancer LayoutPackの画像を使用します。
始めましょう！
私たちのYoutubeチャンネルを購読する
スタイル＃1：抽象的なGadient
この最初のDiviヘッダーモジュールデザインは、グラデーションの背景をクリエイティブな方法で使用するシンプルな多目的デザインです。
開始するには、全幅ヘッダーモジュールを使用して新しい全幅セクションを追加します。
ヘッダー設定の内容を新しいタイトルとヘッダー画像で更新します。
次に、次のように設計設定を更新します。
タイトルフォント：ラト
タイトルテキストサイズ：6vw
ボタン1の背景色：＃0c71c3
ボタン1つの境界線の幅：0px
カスタムパディング：8vw上部、8vw下部
セクションの背景を追加する前に、まずヘッダーモジュールの背景を透明にし、カスタムグラデーションを付けて、右下隅に円の形を作成する必要があります。 [コンテンツ]タブに戻り、次のように背景を更新します。
背景色：rgba（255,255,255,0）
背景グラデーションの左の色：＃0096eb
背景グラデーションの右の色：rgba（255,255,255,0）
グラデーションタイプ：ラジアル
半径方向：右下
開始位置：25％
終了位置：0％
設定を保存する
次に、ヘッダーモジュールの後ろにあるセクションに背景デザインを追加する必要があります。 これを行うには、セクション設定を開き、以下を更新します。
背景グラデーションの左の色：＃0096eb
背景グラデーションの正しい色：＃007ea1
グラデーションタイプ：ラジアル
半径方向：左上
開始位置：43％
終了位置：0％
デザインのヒント：独自のヘッダーグラデーションを試すためにいくつかの色を探している場合は、使用している可能性のあるヘッダー画像/グラフィックで使用されている色を取得することをお勧めします。
抽象的な背景に別の微妙なデザイン要素を追加するために、上部と下部のセクション仕切りを追加できます。 これを行うには、[デザイン]タブに移動し、次の仕切りを追加します。
トップディバイダースタイル：スクリーンショットを参照
トップディバイダーカラー：rgba（150,210,210,0.2）
トップディバイダーの高さ：8vw
トップディバイダー水平リピート：0.7x
トップディバイダーフリップ：垂直
ボトムディバイダースタイル：スクリーンショットを参照
ボトムディバイダーカラー：rgba（150,210,210,0.2）
ボトムディバイダーの高さ：10vw
ボトムディバイダー水平リピート：0.5x
ボトムディバイダーフリップ：垂直
それでおしまい！ 最終的なデザインをチェックしてください。
スタイル＃2：三重の脅威
この次のdiviヘッダーモジュールスタイルには、2つのボタンと下にスクロールアイコンを含む3つのアクション呼び出しが含まれています。 ボタンアイコンをスクロールアイコンと一致させると、デザインの対称的な側面に役立ちます。 また、セクションの仕切りは、ユーザーをページの下に導く素敵な抽象的な三角形のデザインを作成します。
全幅ヘッダーを使用して新しい全幅セクションを作成します。
次に、タイトル、ボタン＃1リンクテキスト、およびボタン＃2リンクテキストのテキストを更新します。
次に、残りのデザインを次のように更新します。
背景色：＃1a1844
テキストとロゴの向き：センター
アイコン：スクリーンショットを参照
下にスクロールアイコンサイズ：20px
タイトルフォント：ラト
タイトルフォントの太さ：重い
タイトルテキストサイズ：5vw（デスクトップ）、40px（タブレット）、30px（スマートフォン）
タイトルラインの高さ：1.3em
ボタン2の背景色：＃fe4943
ボタン2の境界線の幅：0px
ボタン2アイコン：右矢印（スクリーンショットを参照）
ボタン1の背景色：＃fe4943
ボタン1つの境界線の幅：0px
ボタン1アイコン：左矢印（スクリーンショットを参照）
ボタン1のアイコンの配置：左
カスタムパディング：上10vw、左10vw
これで、セクションの仕切りを追加して、三角形の背景デザインを作成するだけです。 セクション設定を開き、次の設計設定を更新します。
トップディバイダースタイル：スクリーンショットを参照
トップディバイダーカラー：rgba（255,255,255,0.3）
トップディバイダーの高さ：45vw
トップディバイダースタイル：スクリーンショットを参照
トップディバイダーカラー：rgba（255,255,255,0.1）
トップディバイダーの高さ：45vw
それでは、最終的なデザインを確認しましょう。
ボーナスデザインのヒント：ボタンのモバイル調整
カスタムCSSはないと言ったのは知っていますが、これは本質的ではない余分な繁栄です。 2つのボタンがあるヘッダーの場合、2番目のボタンに左マージンがあり、スマートフォンのデザインが崩れていることに気付くかもしれません。 スマートフォンのデザインをすっきりさせるために、カスタムCSSのスニペットをページ設定に追加して、ボタンを同じ幅にし、2番目のボタンの余白をなくすことができます。
Divi Builderでページ設定を開き、次のCSSを追加します
@media (max-width: 550px){
.et_pb_fullwidth_header .et_pb_fullwidth_header_container .et_pb_button {
display: block;
width: 100%;
margin-left: 0px;
}
}
次に、モバイルでのデザインを見てください。
スタイル＃3：丸みを帯びたフレーム
この丸みを帯びたdiviヘッダーモジュールのデザインは、背景画像とヘッダーコンテンツをフレームに収めて、行動を促すフレーズにさらに焦点を当てるのに最適な方法です。 必要なのは、ヘッダーの境界線の半径、ボックスの影、およびカスタムの間隔を調整することだけです。
まず、全幅ヘッダーを使用して新しい全幅セクションを作成します。
まず、タイトル、ボタン＃1リンクテキスト、およびロゴ画像を追加して、ヘッダーのコンテンツ要素を更新しましょう。
次に、ヘッダーの高さと幅にまたがるのに十分な大きさの背景画像を追加します。 これは丸みを帯びたヘッダーになるため、同じ高さと幅（1000px x 1000pxなど）の画像を使用してみてください。
次に、残りのデザイン設定を次のように更新します。
設定を保存する。
次に、セクション設定を開いて、次のように背景色と間隔を追加します。
背景色：＃000000
カスタムパディング：5vw上部、5vw下部
次に、最終的なデザインを確認します。
ブレンドレフティ
このヘッダーデザインには、いくつかの独自のデザイン機能があります。 ヘッダーモジュールは、実際にはサイズが変更され、左揃えになって、セクションの背景画像の右半分が表示されます。 また、ヘッダーモジュールのコンテンツには、コンテンツを通じて背景画像を公開するブレンド効果があります。 これを実現するには、セクションに適切な種類の背景画像が必要です。 一般に、ブレンドされたコンテンツがより見やすくなるように、画像の要素を暗くする必要があります。
始めましょう。
まず、全幅ヘッダーを使用して新しい全幅セクションを作成します。
ヘッダースタイルの更新を開始する前に、まずセクション設定にジャンプして、次の背景を追加します。
画像の焦点が右側にある背景画像を追加します。
背景グラデーションの左の色：rgba（0,0,0,0.54）
背景グラデーションの右の色：rgba（255,255,255,0）
グラデーション方向：90度
半径方向：右下
開始位置：50％
終了位置：0％
背景画像の上にグラデーションを配置：はい
グラデーションの目的は、画像の左側を暗くして、ヘッダーモジュールのコンテンツをブレンドしたときに読みやすくすることです。 また、デフォルトのヘッダーの背景色がまだアクティブであるため、現在セクションの背景を表示することはできません。 次にそれを変更します。
ヘッダー設定を開き、タイトル、ボタン＃1リンクテキスト、および暗いロゴでコンテンツを更新します。
次に、背景色を白に変更します。
次に、以下を更新します。
タイトルフォントの太さ：超太字
タイトルテキストの色：＃000000
タイトルテキストサイズ：8vw
タイトルラインの高さ：1.1em
ボタンONeテキストサイズ：2.7vw
ボタン1のテキストの色：＃000000
ボタン1ボーダー幅：0.2em
ボタンワンボーダーカラー：＃edf000
フォントの太さ：超太字
幅：50％（デスクトップ、タブレット、スマートフォン）
ブレンドモード：画面
これが最終的なデザインです。
スタイル＃5：ラージスケーリングタイプ
このDiviヘッダーモジュールのデザインは、デザインを損なうことなく、ブラウザウィンドウに合わせて拡大縮小する大きなテキストを作成するためのシンプルで効果的な方法を紹介します。 全幅ヘッダーモジュールを使用しているため、コンテンツ領域を少し拡張する必要があります。 次に、vwの長さの単位を使用してテキストのサイズを設定する必要があります。 このデザインはセクションヘッダーに最適です。
まず、全幅ヘッダーを使用して新しい全幅セクションを作成します。
全幅ヘッダー設定で、以下を更新します。
タイトル：相談
小見出しテキスト：サービス
ボタン＃1リンクテキスト：今すぐ開始
コンテンツボックスのデフォルトのテキストを削除します。
次に、明るいロゴ画像を追加します。
次に、ヘッダーの水平方向のスペースを増やすために、ヘッダーコンテナのデフォルトの最大幅を増やします。 これを行うには、[詳細設定]タブに移動し、[ヘッダーコンテナ]の下に次のCSSを追加します。
width: 100% ; max-width: 100% ;
次に、残りのデザイン設定を次のように更新します。
背景画像を追加します。
テキストとロゴの向き：センター
タイトルフォント：Cuprum
タイトルフォントの太さ：太字
タイトルフォントスタイル：TT
タイトルテキストの色：#bfbfbf
タイトルテキストサイズ：10vw
タイトル文字の間隔：0.1em
小見出しフォント：Cuprum
小見出しテキストの配置：右（これは、テキストを文字間隔で中央揃えするのに役立ちます）
小見出しテキストサイズ：3vw
小見出し文字の間隔：7.8vw
ボタン1つの境界線の幅：0px
ボタン1フォント：Cuprum
ボタン1アイコン：スクリーンショットを参照
秘訣は、テキストにvwの長さの単位を使用することです。 次に、小見出しの文字間隔を調整して、タイトルテキストとできるだけ一致するようにします。
水平方向の間隔を最大化するには、次のようにヘッダーコンテンツにカスタム幅を追加する必要があります。
コンテンツの幅：80％;
これはデフォルトの100％未満ですが、設定を変更するとデフォルトが上書きされ、前に追加したカスタムcssで調整されます。
最後に、ボックスシャドウを追加して、デザインを完成させます。
ボックスシャドウ：スクリーンショットを参照
ボックスシャドウブラー強度：0px
ボックスシャドウスプレッド強度：60px
次に、最終結果を確認します。
それらをフルスクリーンヘッダーに変えてください！
上記のデザインは、ボタンをクリックするだけで簡単にフルスクリーンにすることができます。 これは、全幅ヘッダーモジュールの強力な機能です。 ヘッダーのデザイン設定に移動し、[フルスクリーンにする]オプションを選択するだけです。
また、ヘッダーがブラウザウィンドウ内に完全に収まるようにするには、これらのデザインのカスタムパディングを削除する必要があります。
最終的な考え
これらは、Diviヘッダーモジュールで利用できるヘッダーデザインの可能性のほんの一部です。 そして、すべてのデザイン設定を試すことはとても楽しいことがあります。 どちらかといえば、これらの例があなたの次のプロジェクトの少しのインスピレーションとして役立つことを願っています。
以下のコメントであなたからの連絡を楽しみにしています。
乾杯！