divi5にflexboxを使用して等しい列の高さを作成する方法

クリーンでプロフェッショナルなレイアウトを作成することは、効果的なWebデザインの基礎であり、等しい列の高さがバランスの取れたレイアウトに貢献します。製品、サービス、またはポートフォリオアイテムを表示しているかどうかにかかわらず、ユーザーエクスペリエンスを完全に高める列。 Divi 4では、等しい列が可能でしたが、Divi 5はテーブルにもっと多くをもたらします。

DIVI 5では、FlexBoxレイアウトシステムの統合によりプロセスが改善され、等しい列の高さを作成するためのよりシンプルで柔軟な方法が提供されます。この投稿では、クリーンでバランスの取れたレイアウトを作成することをお勧めします。飛び込みましょう！

Divi 4の列の高さの等しい

DIVI 4では、高さと同じ高さの柱を達成することは簡単でしたが、限られていました。トグルにより、行内のすべての列が最も高い列の高さに一致するようになりました。この機能は、視覚的な一貫性を維持するための命の恩人でしたが、多くの場合、回避策を必要とする制限がありました。

Divi 4の等高な効果は、列容器に適用されました。つまり、背景の色、画像、または境界線を列レベルで設定する必要がありました。このアプローチは、列内のモジュールに拡張されていなかったため、厄介なギャップにつながる可能性があります。たとえば、1つの列の短いテキストモジュールの下にあるボタンがその下に厄介なスペースを残し、別の列の長いテキストモジュールの下のボタンが満たされ、不均衡な外観が作成されます。

設計者がモジュールコンテンツを垂直に調整したり、間隔を調整したりするなど、より多くの制御を望んでいたとき、カスタムCSSがしばしば必要でした。これは、特に初心者にとって、DiviのカスタムCSSフィールドに飛び込み、洗練された結果を達成しなければならなかったため、課題を引き起こしました。たとえば、Divi 4の列の下部にボタンを合わせたい場合は、CSSを使用してそれを達成する必要があります。

Divi 5のFlexBoxが列に等しい方法

FlexBoxはDivi 5にシームレスに統合されているため、等しい列の高さを実現しやすくなります。 Divi 4のトグルベースのオプションとは異なり、Divi 5はFlexBoxをレバレッジして、Webページの設計を容易にする組み込みコントロールを提供します。

FlexBoxを使用すると、列とそのコンテンツの両方に正確なアライメントオプションを提供しながら、最も背の高いものと一致する列を自動的に伸ばすことができます。これにより、カスタムCSSの必要性がなくなり、すべてのDIVIユーザー、初心者も専門家も高度なレイアウトを可能にします。 Divi 5のFlexboxレイアウトシステムにより、設計者は一貫したプロフェッショナルなデザインを簡単に作成できます。

Divi 5で等しい列の高さを作成する方法

Divi 5で等しい高さの列を作成することは、FlexBoxの統合のおかげで簡単です。以下の手順では、物事をセットアップする方法を示し、すべてが完全に並んでいることを確認します。

ステップ1：デザインを作成します

新しいページまたは既存のページでビジュアルビルダーを開きます。ブラック +アイコンをクリックして、新しい行を追加します。

[新しいセクション]ダイアログボックスが表示されたら、等しい列の下の3列のレイアウトを選択します。

最初の列にグループモジュールを追加します。

次に、最初の列のグループモジュールにアイコンモジュールを追加します。

[コンテンツ]タブでチェックアイコンを選択します。

[デザイン]タブで、アイコンの色を＃2EA3F2に設定します 36pxまでのアイコンサイズ。

次に、アイコンモジュールの下に見出しモジュールを追加します。灰色のアイコンの代わりにブラック +アイコンをクリックして、グループモジュールに見出しを追加してください。

[コンテンツ]タブのタイトルとしてWebデザインを入力します。

[デザイン]タブで、 H5を見出しレベルとして選択し、ヘディングフォントとしてInter 、およびミディアムを見出しフォント重量として選択します。見出しフォントスタイルを大文字に設定し、見出しテキストアライメントを左に、見出しのテキストの色を＃000000に設定し、見出しテキストサイズをデフォルトのサイズの16pxに保ちます。

次に、グループモジュール内の見出しの下にテキストモジュールを追加します。設定をそのまま残すことができます。

列の最終モジュールのボタンモジュールを追加します。ただし、グループモジュールに追加する代わりに、その下に追加します。これにより、列の高さを等しく作成できますが、ボタンを下部に合わせて、デザインをよりまとまります。

[デザイン]タブをクリックし、目的のスタイル設定をボタンモジュールに割り当てます。ボタンをチェックして、左側のメニューのレイヤービューを確認して、グループモジュールの外側にあることを確認してください。完了すると、ボタンは下のスクリーンショットのように見えます。青い背景と白いテキストで左側に整列しています。

ステップ2：列の複製

最初の列がコンテンツで満たされたら、最初の列からコンテンツを2番目と3番目の列にコピーして、いくつかの変更を加えます。 2番目と3番目の列を削除して、最初の列を複製するか、グループモジュールとボタンを2番目と3番目の列にコピーして貼り付けることができます。

次に、2番目の列の見出しタイトルをコーディングに変更し、3番目の列の見出しタイトルをマーケティングに変更します。また、2番目の列のテキストモジュールのコンテンツの一部を削除して、Divi 5がさまざまなコンテンツの長さでFlexBoxを処理する方法を示すことができます。ご覧のとおり、列は不均一です。

次のステップに進む前に、最初の列をクリックして、列のすべての側面に25px間隔を追加します。

また、 ＃666666を色として15pxの境界半径と1pxの境界幅を追加します。

行を設計する最後のステップは、デザイン属性を最初の列からコピーして、残りの列に貼り付けることです。最初の列を右クリックして、アイテムスタイルのコピーを選択します。次に、2番目の列を右クリックして、貼り付けアイテムスタイルを選択します。 3列目にもこのアクションを繰り返します。

ステップ3：等しい高さにFlexBox設定を構成します

次に、行のフレックスボックス設定を構成する必要があります。 Divi 5は、Flexboxコントロールをレイアウトシステムに統合し、Divi 4の等しい列の高さを切り替えます。行のデザインタブに移動し、レイアウトの下でフレックスが選択されていることを確認します。

次に、行がレイアウト方向の下で選択されていることを確認し、 Justifyコンテンツの下で開始し、 Alignアイテムの下でストレッチが選択されます。これにより、Divi 5に列構造を維持し、列内のすべてのアイテムを左に並べ、親コンテナ内の使用可能なスペースを埋めるように指示します。

次に、最初の列の設定をクリックします。 [レイアウト]ドロップダウンメニューをクリックして、[デザイン]タブで設定を表示します。デフォルトでは、 Flexはレイアウトの下で選択されます。レイアウト方向フィールドで、列を選択します。 Justify Contentの下で、その間のスペースを選択します。すべてのアイテムを開始（左）に合わせて、レイアウトラップをラップなしに残します。

2番目と3番目の列の上記の手順を繰り返します。また、コピー/貼り付けまたは拡張機能を使用して、行の残りの列に同じ設定を適用することもできます。

グループ内のすべてのモジュールが伸びて利用可能なスペースを埋め、グループの外側のボタンが下部に整列されます。

ステップ4：応答性をテストします

Divi 5のカスタマイズ可能なレスポンシブブレークポイントにより、すべてのデバイスで均等な列の高さが見栄えを良くすることができます。レスポンシブビューの切り替えを使用して、ビジュアルビルダーのレイアウトをプレビューします。デフォルトでは、3つのブレークポイントがあります。ただし、Divi 5には7があります。これは、Visual Builderの上部にあるツールバーのEllipsisメニューをクリックすることで簡単に有効にできます。必要なブレークポイントを有効にし、 [保存]をクリックして適用します。

クリックして、タブレットビューでレイアウトをプレビューします。ご覧のとおり、FlexBoxは列を並べてスタックしたままにします。

列構造を変更して、小さなデバイスで列を垂直に積み重ねることができます。タブレットのブレークポイントで、行のコンテンツタブをクリックします。列構造の変更をクリックします。

ダイアログボックスが表示されたら、クリックして等しい列の下の単一行を有効にします。これにより、3列の行がタブレットとモバイルデバイス上の単一の列に変更され、デスクトップ上の3列構造を保存します。

すべてのブレークポイントで変更をプレビューすると、Diviが小さな画面のレイアウトをどのように遷移するかがわかります。

高さのアライメントを自動化することにより、設計者は技術的な修正ではなく創造性に焦点を当てることができ、一部の時間でプロのサイトを簡単に構築することができます。 Divi 5のFlexboxレイアウトシステムは、モジュールグループを介してより良いコンテンツ組織をサポートし、カスタムCSSなしでモジュールをこれまで以上に容易にします。

一般的なユースケース

Divi 5のFlexboxシステムにより、列の高さが汎用性が高く、さまざまなユースケースに効果的になります。以下は、Divi 5のFlexboxシステムが輝く一般的な方法です。

1。製品リスト

eコマースレイアウトでは、製品カードは、タイトルや説明によりコンテンツの長さが異なることがよくあります。 Divi 5のFlexBoxを使用すると、各列が等しい高さを維持する製品カードのグリッドを作成し、清潔でプロフェッショナルな外観を確保できます。たとえば、簡単な説明のある製品は、より長い説明を特徴とするものと完全に一致しています。 Divi 5のFlexboxシステムを使用すると、厄介なギャップを回避し、ユーザーの信頼とエンゲージメントを促進するまとまりのある体験を作成できます。

2。注目セクション

サービスまたは機能セクションは、DiviのFlexboxシステムに適しています。 Divi 5のFlexBoxは、連続内のすべてのモジュールが列の高さと等しいことを保証し、バランスのとれた洗練された外観を作成します。チームBIOS、サービス、機能のハイライトを表示するかどうかにかかわらず、イコライズされた列により、Webページが簡単にスキャンできるようになり、ユーザーエクスペリエンスが向上します。

3。ポートフォリオグリッド

ポートフォリオグリッドは、FlexBox、特にフリーランサーが作業を表示するのに最適なユースケースです。 FlexBoxは、異なるアスペクト比があっても、画像のようなギャラリーアイテムが均一に整列することを保証します。グループモジュールを使用して、背景画像を割り当てて、それに応じて間隔を調整できます。これにより、潜在的なクライアントを感動させることを目的とした写真家、デザイナー、または代理店に最適になった整頓されたプロフェッショナルなグリッドが作成されます。

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

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

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

ダウンロード

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

今日、Divi 5のFlexbox機能に精通してください

Divi 5のFlexboxレイアウトシステムは、Divi 4の列の高さを均等化する方法から大きな飛躍を示し、Diviユーザーが等しい列を作成する方法を変換します。 Divi 4は、洗練にカスタムCSSを必要とする剛性のあるバックグラウンド依存の方法に依存していた場合、Divi 5は直感的なコントロールとシームレスな応答性を提供するためにFlexboxをハーネスします。その結果、カスタムCSSの回避策の必要性を削除し、Diviユーザーが洗練されたプロのレイアウトを簡単に構築できるようにする、より効率的なシステムができます。

Divi Webサイトを上げる準備はできていますか？ Divi 5のフレックスボックス設定に飛び込み、ロックを解除する創造的な可能性を実験します。以下のコメントを共有するか、ソーシャルメディアチャネルに接続して、新しいFlexBox機能についての考えを共有してください。