Divi5のさまざまなブレークポイントで要素を並べ替える方法

レスポンシブデザインには、レイアウトのスケーリング以上のものが必要であり、デバイス全体のコンテンツスタックを制御する必要もあります。デスクトップで構成されていると感じるデザインは、サイドバーやセカンダリ要素がキーコンテンツを視界から追い出しているため、モバイルで混乱する順序になります。 Divi 5は、これに新しいFlexBoxシステムを使用して対処し、事前に構築されたレスポンシブカラム構造と正確な順序制御を導入します。

この投稿では、要素の並べ替えが重要な理由、Divi 5のFlexboxツールがどのようにシンプルになるかを確認し、さまざまなブレークポイントでレイアウトを再構築するための手順を順を追って説明します。

要素を並べ替えたい理由

レイアウトがデスクトップからモバイルに移行する場合、スタッキング順序は常に意図したエクスペリエンスを反映するとは限りません。バランスの取れた3列のデスクトップデザインは、左の列が常に最初に来る垂直スタックに崩壊し、ページのはるかに下にあるアクション、サインアップフォーム、または連絡先情報をプッシュします。

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

Divi 5のFlexboxシステムは、各ブレークポイントで視覚的に要素を並べ替えることにより、これを修正します。 CTAをモバイルの見出しの下に直接移動したり、価格設定テーブルの上にある証言をもたらすか、コンテンツの前に連絡先情報を強調することができます。ブラウザのデフォルトのスタッキングロジックに固執する代わりに、階層を決定します。これにより、最も重要なコンテンツが常に最も重要な場所に表示されます。

Divi 5のFlexBoxが並べ替えを簡単にする方法

DIVI 5は、要素がブレークポイント全体にどのように積み重なるかを直接制御できます。事前に構築されたフレックスカラム構造を使用して、自然に適応するレイアウトをセットアップし、各画面サイズで列構造と列の順序を微調整できます。

フレックスボックスは、スペースに基づいて調整される華麗なコンテナのように機能します。コンテンツをランダムに積み重ねる代わりに、各デバイスの順序を制御できます。

Divi 5は、ネストされた複雑なレイアウトもうまく処理します。コンテンツやコーディングをコピーせずに、各ブレークポイントで行構造、列サイズ、およびモジュールの順序を変更できます。

また、垂直方向のアライメントとポジショニングを自動的に管理するため、コンテンツは目的があり、完全に応答性が高く、ランダムに配置されていません。

Divi 5でのレスポンシブな並べ替えに関する段階的なガイド

新しいFlexBoxシステムを使用して、Divi 5の要素をどのように並べ替えることができるかを見てみましょう。以下の手順では、列構造のセットアップとさまざまなブレークポイントで順序を調整して、レイアウトがすべてのデバイスで明確かつ一貫していることを歩きます。

1. 7つのカスタムブレークポイントを設定します

Divi 5は、3つではなく7つのブレークポイントを提供します。各ピクセル値を変更して、サイトを任意のデバイスで正しく見えるようにすることができます。

タスクバーのEllipsisメニューをクリックして、ブレークポイントのトグルスイッチを見つけます。それぞれにデフォルトの範囲がありますが、これらの数字を変更して視聴者に適合させることができます。

電話（767px未満）、電話幅（860px未満）、タブレット（980px未満）、タブレット幅（1024px未満）、デスクトップ（981pxを超える）、ワイドスクリーン（1280pxを超える）、ウルトラ幅（1440pxを超える）が表示されます。

それらをオンにすると、タスクバーに小さなアイコンが表示されます。アイコンをクリックして、サイトの画面サイズをすぐに確認する方法を確認します。

すべてのアイコンをクリックしてテストで制限される代わりに、キャンバスの端をつかんで左または右にドラッグすることができます。あなたのデザインは、引っ張ると縮小または拡大し、レイアウトが異なる幅でどのように変化するかを示します。

キャンバスを300pxにドラッグし、3列のデスクトップレイアウトが単一のモバイルスタックに変わるのを見ます。 1200pxに戻し、コンテンツが再び広がるのを確認してください。プレビューモードを切り替えたり、ブラウザウィンドウのサイズを変更する必要はありません。

2。フレックスコントロールにアクセスします

任意の行の設定アイコンをクリックして、右側の設定パネルを開きます。このパネルの上部にある[デザイン]タブに移動します。レイアウトメニューには、Divi 5のFlexboxコントロールがすべて見つかります。デフォルトでは、Flexはレイアウトスタイルの下で選択されます。

既存のレイアウトに適用されていない場合は、クリックしてフレックスに変更できます。

下にスクロールして、レイアウト方向フィールドを見つけます。これにより、列が表示される順序と方法が決定されます（並んで並んで、互いに並んでいます）。

以下は、アライメントと分布を制御するためのJustifyコンテンツオプションです。一方、Alignアイテムオプションは、ポジショニングオプションのすぐ下に表示されます。

3.各画面サイズのレイアウト構造を微調整します

FlexBoxコントロールがアクティブになりましたが、デスクトップレイアウトは、小さな画面に構造的な調整が必要になる場合があります。 3列のレイアウトはデスクトップ上で美しく機能する可能性がありますが、タブレットでは圧倒されて混雑し、代わりに2×2グリッドを必要とします。これは、1つのグリッド用のスペースしかないモバイルデバイスでさらに必要です。

幸いなことに、コントロールの右上にあるデバイスアイコンを使用すると、さまざまな画面でレイアウトをプレビューし、各ブレークポイントのFlexBox設定を微調整できます。これにより、デザインを調整できるように、見栄えが良く、すべてのデバイスでうまく機能します。

タブレットブレークポイントに切り替えて、[列構造の変更]ボタンをクリックします。現在のセットアップの代わりに、2×2の対称レイアウトを選択します。これにより、各行のカードが少ないことを示すことで、即座にビューが圧倒されなくなります。バランスの取れた外観のために必要に応じて、垂直と水平のギャップを調整します。次に、CTA列を選択し、列クラスをサイジング設定の下でフル幅に設定し、「充填するために成長」を選択します。

タブレットバージョンは、2枚のカードを同時に表示し、その均一な外観を保持します。アクションへの呼び出しボタンは、下部の列にうまく座り、デスクトップレイアウトと同様に目立つようになります。このアップデートは、一緒に混雑しているオプションが多すぎるという雑然とした感触を回避する、よりクリーンで魅力的なエクスペリエンスを作成するのに役立ちます。

モバイルには、Change Column Structureオプションを使用して、単一列構造に切り替えます。 FlexBoxコントロールで、レイアウト方向を列の逆に設定します。コンテンツに最適なものへのギャップを調整します。

4。ブレークポイント全体の列を並べ替えます

注文値を使用することは、さまざまな画面サイズにわたってフレックスコンテナの子要素（多くの場合列）の順序を手動で決定するのに最適な方法です。行の設定の[注文]タブは、各列にブラウザに「この列を位置1に表示し、位置2に表示する」などの数値を提供します。より低い数値が最初に表示され、より高い数値が最後に表示されます。そのように簡単です。

「-1」のような「0」または負の数値を使用して、他の値に関係なく、特定のコンテンツに最初に表示されるように強制することもできます。

各ブレークポイントは独自の注文システムをサポートしているため、デバイス全体の要素の位置決めを完全に制御できます。

実用的な例を見てみましょう。デスクトップで列1を選択し、その順序を1に設定します。列2を選択し、順序を「2」に設定し、列の残りの部分で同じことを行います。デスクトップレイアウトは、左から右に自然に流れ、行動を促すことで終わります。

タブレットと携帯電話での注文のカスタマイズ

次に、デバイストグルを使用してタブレットブレークポイントに切り替えます。列の注文を変更します。

列6（アクションコール）を「3」に設定して、中央の列に表示されます。列1と2は、列3、列3を4、残りを必要とします。タブレットユーザーは、価値提案の直後に行動を促す声を上げ、その後にサポートの詳細を確認します。

次に、デバイスのトグルを使用してモバイルに切り替えます。 CTA列の順序を「3」に変更し、最初の2列の順序をそのまま残します。列の残りの順序をタブレットの配置に似ています。

コンテンツの基礎となるソース順序は同じままですが、CTAはデスクトップレイアウトに影響を与えることなく、最後の位置から3番目の位置に移動します。これにより、コンテンツを複製または再構築することなく、さまざまなブレークポイントでセクションがどのように表示されるかを制御できます。

すべてがDivi 5でどのように積み重なるかを制御します

Divi 5の新しいFlexBoxシステムは、デバイス全体のコンテンツスタックを正確に制御できます。 7つのカスタマイズ可能なブレークポイントとライブキャンバススケーリングを使用すると、任意の画面サイズでレイアウトをリアルタイムでプレビューおよび調整できます。

ブラウザのデフォルトのスタッキング順序に依存する代わりに、サイドバー、CTA、およびキーコンテンツがどこに表示されるかを正確に決定します。 FlexBoxを使用すると、追加の回避策やコードなしで、すべてのデバイスで階層と明確さを維持できます。