Divi 5の20 Flexboxヘッダー（無料ダウンロード！）

FlexBoxは、クリーンに見えるヘッダーをこれまで以上に簡単に作成し、さまざまな画面サイズに美しく適応し、Divi 5でカスタマイズするのが簡単です。このフリーパックでは、それぞれが正確なアライメントとレスポンシブコントロールのためにDivi 5のフレックスレイアウトシステムで構築された20のユニークなFlexboxヘッダーデザインを見つけることができます。サイトの既存のグローバルスタイルを使用する場合でも、既製のデザインから始めたい場合でも、両方のオプションがここにあります。

プレビューとライブデモ

このパックの20のフレックスボックスヘッダーすべてを見てみましょう。このパックは、投稿をさらにダウンロードするための無料です。

YouTubeチャンネルを購読してください

ライブデモを表示します

Divi 5の20のFlexboxヘッダーをダウンロードします

デフォルトバージョンとPrestyledバージョンの両方を含む、20のFlexBoxヘッダーすべてを無料で入手してください。各ヘッダーは、Diviライブラリにインポートし、テーマビルダーで使用する準備ができています。ダウンロードして構築を開始するだけです。

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

無料でダウンロードしてください

Divi Newsletterに参加してください。究極のDiviランディングページレイアウトパックのコピーに加えて、他の驚くべき無料のDiviリソース、ヒント、トリックを大量にメールで送信します。フォローすると、すぐにDiviマスターになります。既にサブスクライブされている場合は、以下のメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

ダウンロード

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

含まれるもの（42の輸出）

フォルダをダウンロードして解凍すると、42のレイアウトエクスポートはすべて、デフォルトのバージョンとPrestyledバージョンに、個々のヘッダーと完全な「すべてのヘッダー」パックとしてきちんと整理されています。

デフォルト - 個々のヘッダー（20）→グローバルスタイルを使用します。
デフォルト - すべてのヘッダー（1）→グローバルスタイルを使用したフルパック。

Prestyled - 個別のヘッダー（20）→即座の既製の外観のインラインスタイリングが含まれています。
Prestyled - すべてのヘッダー（1）→インラインスタイリングが適用されたフルパック。

レイアウトのインストール方法

ダウンロードフォルダーを近くに保ち、Divi Webサイトにインポートします。

1.レイアウトをDIVIライブラリにインポートします

Divi→Diviライブラリに移動します。

そこに着いたら、[インポートとエクスポート]ボタンをクリックしてファイルをインストールします。

FlexBoxヘッダーレイアウト（ALL）ファイルを探し、クリックしてインポートします。

2。新しいヘッダーテンプレートを作成します

Divi→テーマビルダーに移動します。

新しいヘッダーテンプレートを作成するか、既存のテンプレートを開きます。

3.ヘッダーレイアウトをアップロードします

ヘッダーエリア内に入ったら、DIVIライブラリを使用して、選択したヘッダーレイアウトを選択できます。テーマビルダーの左上隅にある[レイアウトの追加]ボタンをクリックします。

保存されたレイアウトを選択します。

テーマビルダーに追加するヘッダーレイアウトをクリックします。

[このレイアウト]ボタンをクリックして、ヘッダーをロードします。

新しいヘッダーとテーマのビルダーの変更を必ず保存してください。

デフォルト対プルティル：どちらを選ぶべきですか？

ダウンロードフォルダーを開くと、すべてのヘッダーの2つのバージョンが表示されます。それらはまったく同じように構築されています。違いは、スタイリングの処理方法にあります。

デフォルトのヘッダーは、グローバルスタイルから外観を継承します。ブランドの色、フォント、ボタンスタイルは自動的に適用されます。すでにグローバルスタイルを設定している場合、デフォルトはこれらのヘッダーをサイトに追加し、デザインに即座に一致させる最も迅速な方法です。

Prestyledヘッダーには、色、フォント、ボタンのデザインがインラインになっているすべてのスタイルが付属しています。それらは、すぐにプレビューのように見えます。これは、クイックデモ、テストのアイデアを構築したり、変数に触れずにスクリーンショットに表示されている正確なデザインをつかみたい場合に最適です。

要するに、ヘッダーが既存のサイトスタイルとシームレスにブレンドしたい場合は、デフォルトを使用してください。プレビューに表示されている既製の外観が必要な場合は、Prestyledを選択してください。

ヘッダーのカスタマイズ

Divi 5のFlexboxレイアウトシステムは、レイアウトを微調整しながら、すべてを応答し続ける強力なツールを提供します。これらのヘッダーをカスタマイズしてサイトのスタイルに合わせてカスタマイズする方法は次のとおりです。

1.フレックス設定を調整します

ヘッダー要素を含む行を選択します。 [デザイン]タブで、レイアウトドロップダウンメニューを見つけます。展開して、FlexBoxの設定を明らかにします。

ここでは、レイアウト方向を行から行の逆、列、または列の逆に変更できます。この機能により、レイアウトの方向を変更できます。

Justifyコンテンツ設定を使用すると、メイン軸に沿ってフレックスアイテムの分布方法を制御できます。これは、レイアウト方向で定義されるフレックスコンテナの主要方向です。レイアウト方向に応じて、水平方向または垂直方向にアイテムの間隔とアライメントを決定します。

アイテムの整列により、列、行、またはセクション内のフレックスアイテムがどのように並べられるかを制御できます。コンテナ内のクロス軸に沿って、フレックスアイテムが互いにどのように配置されるかを決定します。開始、中央、終了、およびストレッチを選択できます。

最後に、レイアウトラッピングは、フレックスコンテナ内のアイテムが単一の線に強制されるか、コンテナの幅（またはレイアウト方向が列に設定されている場合は高さ）を超えると複数の線にラップすることができるかどうかを制御します。

2.さまざまなブレークポイントで要素を表示/非表示にします

DIVI 5を使用すると、特定のブレークポイントでセクション、行、列、または個々のモジュールの可視性を切り替えることができます。これは、セカンダリCTAボタンを隠したり、フルメニューをモバイルのメニューに置き換えるなど、小さな画面でレイアウトを簡素化するのに役立ちます。

たとえば、ソーシャルメディアのアイコンをヘッダーに隠して、モバイル画面にスペースを節約することをお勧めします。デスクトップブレークポイントにいる間、[詳細]タブに移動します。可視性ドロップダウンメニューを展開します。次に、電話とタブレットのブレークポイントをクリックして要素を非表示にします。

Divi 5のレスポンシブプレビューを使用して、ヘッダーを表示します。電話ブレークポイントでレイアウトを表示すると、隠された要素が表示されますが、グレイアウトし、フロントエンドに隠されることを示しています。

3.必要に応じてリンクを追加します

すべてのヘッダーレイアウトは箱から出る準備ができていますが、リンクを追加する必要があります。この例では、ソーシャルメディアにリンクをフォローモジュールに追加します。クリックしてモジュールの設定を展開します。 [コンテンツ]タブで、最初のソーシャルメディアアイコンをクリックして設定を表示します。

リンクのドロップダウンを展開し、アカウントリンクURLフィールドのソーシャルメディアアカウントにリンクを追加します。

テーマビルダーを出る前に、必ずヘッダーを保存してください。

まだ行っていない場合は、Webサイトのメニューを作成する必要があります。ビジュアルビルダーを出て、外観→メニューに移動します。メニュー名フィールドに名前を追加します。

[プライマリメニュー]チェックボックスをクリックし、 [作成]メニューをクリックします。

メニューにページを追加するには、 [すべて]タブをクリックして、メニューに表示するページを選択します。 [メニューに追加]をクリックして割り当てます。

テーマビルダーに戻って、必要に応じて追加の変更を加えます。たとえば、ヘッダーがループビルダーを使用する場合、リンクの順序を調整する必要がある場合があります。

Divi 5を使用して、今日ヘッダーを構築してください

これらの20のフレックスボックスヘッダーは、確立されたグローバルスタイルで作業しているか、事前に設計された外観から始めても、Divi 5ビルドをスピードアップする簡単な方法です。それらをダウンロードして、テーマビルダーにドロップし、自分で作ってください。 FlexBoxは、設計に集中できるようにアラインメントを処理します。