Divi 5のネストされた列と専門セクション（そしてなぜ私たちがそれらを非難しているのか）

Diviは長い間、美しいウェブサイトを構築するための大国でした。専門セクションは、通常のセクションが処理できない複雑でネストされた柱構造を可能にすることにより、Diviのレイアウト機能を長年にわたって拡張しました。しかし、このアプローチには、Diviの古いショートコードフレームワークに深く結び付けられた複雑さと制限がありました。

現在、Divi 5にはネストされた行が付属しています。これは、通常のセクション内に列の内側に行を配置できるネイティブ機能です。この機能は、以前の制約を削除し、単一の柔軟なセクションタイプの下でレイアウト構築を統合します。ネストされた列を使用すると、専門セクションが許可する同じ複合体の非対称レイアウトを構築できますが、より直感的に構築できます。

この投稿では、専門セクションからの移動と、ネストされた行とDivi 5の再設計されたレイアウトシステムが、複雑なレイアウトを作成するためのより良い方法をどのように提供するかについて説明します。 Diviの未来はここにあり、よりシンプルで柔軟で、無制限の創造性のために構築されています。

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

Divi 5は、今日新しいWebサイトで使用する準備ができています。

専門セクションの回顧展

特殊セクションは、通常のセクションの制限に対処するためにDIVI（2014）に導入されました。彼らは、通常のセクションでは不可能だったサイドバーや非対称レイアウトなど、より複雑な列構造を可能にしました。

Diviのショートコードベースのフレームワークは、ネストの深さを制限し、パフォーマンスボトルネックを導入することにより、レイアウトの複雑さを根本的に制限しました。複雑なネストされたレイアウトは、構築が困難であり、問​​題をレンダリングする傾向があったため、専門セクションまで不可能でした。

ただし、特殊セクションは独自のものであるため、追加の複雑さを導入しました（これらのセクションの追加の列の合格とCSSオプションに注意してください）。これらは悪くはありませんでしたが、通常のセクション、行、列とは間違いなく異なって振る舞いました。

専門セクションでは、追加のパディングとCSSクラス/IDフィールドが追加されましたが、これは必要でしたが、残りのビルダーオプションとは不適切です。

スペシャリティセクションは、ショートコードルールを曲げて、通常のセクションで不可能なことを作成することにより、擬似ネストの列構造を有効にしました。

通常のセクションがあなたがそれらに必要なことをするほど強力であれば、それはいいことではないでしょうか？

ネストされた列とページを構築するためのより良い方法

Divi 5を使用すると、ネストされた行が正式に他の行および列に行（およびその列）を配置することができます。これは、無制限の列と行の内側に列を備えた深くネストされたレイアウトを作成できることを意味します。特殊セクションの必要性を排除します。

この新機能も列にサイジングオプションを追加しました。つまり、すべてのコンテナ要素をサイズとスタイリングする一貫した方法があります。

ネストされた列で専門セクションを簡単に再現する方法

スクーターレンタルレイアウトパック（特にホームページのヒーローセクション）は、専門セクションを使用して重要な要素を配置します。ただし、一意の設定で専門セクションを使用する代わりに、ネストされた行を使用して同様の効果を達成します。

注：Divi 5には現在専門セクションがありますが、最終的には非推奨になります（ただし、現在は機能し、現在存在するページで重複します）。

ページに標準セクションを追加して、背景色を黒に設定します（ページにレイアウトをインポートした場合、トップセンターの位置と実際のサイズの背景画像として使用するドットサークル画像があります）。

セクションの幅と最大幅を100％に設定します。

セクション内の行に2列構造と3/5 + 2/5の分割があることを確認します。また、行の幅と最大幅を100％に設定します。

他の新機能を使用する場合は、2つのモジュールグループが内部にある1つの列のみを追加します。 DIVIのデフォルトの列構造に依存する代わりに、グループにサイジングオプションを使用します。

左の列には、より複雑な側面（モジュールの観点から）があり、右の列には大きな注目画像があります。

すべてのモジュールを追加して、レイアウトの感覚を取得します。最初に見出しまたはテキストモジュール、次にネストされた行（幅の等しい2列）、左列の画像モジュール、右列のテキストモジュールとボタンモジュールが含まれます。右の列に親の行に戻り、1つの画像モジュールを追加します。

デスクトップ上の間隔/サイジングを複製して、ネストされた行を使用して専門セクションを再現する方法を示します。先に進み、コンテンツと画像を追加します（再度、レイアウトをサイトのページにインポートするときに画像を使用できます）。また、フィット感として一致するようにテキストとカラースタイルを変更することもできます。右の列のメイン画像は、背景画像として適用し、後でアクセント画像を備えた画像モジュールを適用する必要があります。

セクションの直下に行の左の列について、左側のパディングを追加して左側からスペースをかけます（この方法で行うことで、各ブレークポイントのものをサイズ変更する必要があります）。

次に、親行のすぐ下に右の列の設定を開きます。列の背景画像を使用します。

この列内の画像モジュールには、フィルター> blend>オーバーレイが設定されている必要があります。 Advanced> Positionでは、画像は絶対に配置され、左下に固定されています。

そして、それは特殊セクションのレクリエーション（デスクトップ上）のためのほぼそれです。プリセット列構造（3/5 + 2/5列）を使用したため、Diviには、対処する必要があるさまざまなブレークポイントでのデフォルトのサイジングとポジショニングがあります。これは、単一の親列を使用して、モジュールグループを使用して、このセクションの左右のコンテンツを保持することで回避できます。

しかし、少なくともこの時点では、列をネストして専門セクションを再現することが可能であることを知っています。

新しい未来に足を踏み入れる

Divi 5はベータリリースに近いですが、Diviの設計システムのオーバーホールにはすでに多大な努力をしています。

• FlexBoxレイアウト（近日公開） ：行内のスペースのアライメントと分布をより強化します。
• ネストされた列：列と列構造の無限のネストは、ネイティブのフロートベースの行システムとかなり複雑になります。
• 高度な列のサイジング：列の幅と高さの欠落サイジングコントロールが追加されました。
• モジュールグループ：管理とスタイリングを容易にするためのモジュールのグループ化を有効にします。
• 設計変数：すべての要素とフィールドにわたってグローバル変数（色、フォント、間隔、画像、テキスト）を定義および再利用します。
• HSLの相対色（近日公開） ：色相、飽和、軽さに基づくダイナミック、ブランド一貫性のある色制御。

これらの機能はすべてDiviの再発明の一部であり、カムバックに極めて重要です。私たちは、過去2年間に構築した基盤が価値があることを証明しています。 D4では不可能な機能を構築でき、数週間でそれぞれを作成しています。

Divi 5は、今日新しいWebサイトで使用する準備ができています。

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