Divi 5用の20 Flexboxフッター(無料ダウンロード!)

公開: 2025-09-09

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

目次
  • 1プレビュー
  • 2 Divi 5のFlexboxフッター20をダウンロードします
  • 3無料でダウンロードします
  • 4含まれているもの(42の輸出)
  • 5レイアウトのインストール方法
    • 5.1 1.レイアウトをDIVIライブラリにインポートします
    • 5.2 2。新しいフッターテンプレートを作成します
    • 5.3 3。フッターレイアウトをアップロードします
  • 6デフォルトとプルティルズ:どちらを選ぶべきですか?
  • 7フッターのカスタマイズ
    • 7.1 1.カスタマイズ用のモジュールを選択します
    • 7.2 2。レイアウト制御のためにFlexBox設定を調整します
    • 7.3 3。必要に応じてリンクを追加します
  • 8今日のフッターを構築するためにDivi 5を使用してください

プレビュー

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

https://youtu.be/xutcua0rccs

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

Divi 5用のFlexBoxフッター

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

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

ファイルをダウンロードします
無料でダウンロードしてください

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

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

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

含まれるもの(42の輸出)

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

デフォルト - 個別のフッター(20)→グローバルスタイルを使用します。
デフォルト - すべてのフッター(1)→グローバルスタイルを使用したフルパック。

Prestyled - 個別のフッター(20)→インラインスタイリングを即座に既製の外観にします。
Prestyled - すべてのフッター(1)→インラインスタイリングが適用されたフルパック。

Divi 5用のFlexBoxフッター

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

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

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

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

Divi 5用のFlexBoxフッター

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

Divi 5用のFlexBoxフッター

FlexBoxフッターレイアウト(ALL)ファイルを探して、クリックしてインポートします。

Divi 5用のFlexBoxフッター

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

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

Divi 5用のFlexBoxフッター

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

Divi 5用のFlexBoxフッター

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

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

Divi 5用のFlexBoxフッター

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

Divi 5用のFlexBoxフッター

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

Divi 5用のFlexBoxフッター

このレイアウトボタンを使用して、フッターをロードします。

Divi 5用のFlexBoxフッター

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

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

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

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

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

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

フッターのカスタマイズ

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

1.カスタマイズ用のモジュールを選択します

テーマビルダーでは、レイアウトの上にホバリングし、テキストモジュール、ソーシャルメディアのフォローモジュール、またはボタンなど、編集するモジュールをクリックします。モジュールの設定パネルが開き、コンテンツ、設計、または高度なオプションを変更できます。

たとえば、テキストモジュールをクリックしてモジュールのコンテンツを変更するか、Divi AIを使用して、訪問者の注意を引くコンテンツを作成するのに役立ちます。

Divi 5用のFlexBoxフッター

[モジュールの設計]タブでは、ブランドに合わせてフォント、色、その他の設定を調整できます。

Divi 5用のFlexBoxフッター

各フレックスボックスフッターは、画像、背景色、フォントなどを含む完全にカスタマイズ可能であるため、ビジョンに合わせてデザインを微調整できます。

2。レイアウト制御のためにFlexBox設定を調整します

各フッターは、Divi 5のFlexboxレイアウトシステムを使用して設計されています。つまり、レイアウトの方向を変更したり、アイテムをアラインしたり、広範なFlexBoxコントロールを使用してラップしたりできます。テーマビルダーで、カスタマイズするセクションまたは行をクリックします。たとえば、デザイン要素間のスペースを調整する場合は、行内の列を選択し、[デザイン]タブに移動し、[レイアウト]ドロップダウンメニューを選択します。

Divi 5用のFlexBoxフッター

垂直ギャップフィールドの値を調整して、間隔を制御できます。

レイアウト方向オプションを使用すると、レイアウトの方向を変更できます。たとえば、連続した設定では、すべてのデザイン要素を連続(水平)、行の逆、列(垂直)、または列の逆に表示できます。

メイン軸に沿ってフレックスアイテム(列、行、またはセクション)のアライメントを制御するには、 Justifyコンテンツ設定を調整できます。利用可能なオプションには、スタート、センター、エンド、スペース、スペースの周り、または均等にアイテムを調整することが含まれます。これらの設定は、コンテナのフレックス方向によって決定されます。たとえば、 flex方向が列に設定されている場合は水平、列に設定されている場合は垂直になります。

Divi 5用のFlexBoxフッター

Alignアイテムフィールドでは、コンテナ内の設計要素を開始、中央、端、またはストレッチに合わせることができます。

フレックスラップ設定は、容器内のフレックスアイテムが単一のラインにとどまるか、メイン軸に沿ってそれらをすべて取り付けるのに十分なスペースがない場合に複数のラインにラップするかどうかを制御します。ラップを選択すると、すべてのフレックスアイテムがコンテナにオーバーフローしている場合でも、すべてのフレックスアイテムが単一のラインにとどまることを余儀なくされます。

Lapは、Flexアイテムがフィットできないときに追加のラインに自動的にラップすることを保証し、リバースラップコンテンツを逆順にラップします。

Divi 5用のFlexBoxフッター

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

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

Divi 5用のFlexBoxフッター

リンクのドロップダウンを展開し、アカウントリンクURLフィールドのアカウントまたはページにリンクを追加します。

Divi 5用のFlexBoxフッター

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

Divi 5用のFlexBoxフッター

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

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

Divi 5の詳細については、Divi 5をダウンロードしてください