Divi 5でページを効率的に構築する方法

ゼロから再構築されたDivi 5は、ライトニングファーストパフォーマンスを誇り、サイト全体のスタイリング用のデザイン変数、無限のレイアウト深度のためのネストされた列、ワークフローを高めるためのプリセットベースのデザインなどの新しい機能を紹介します。モダンで改良された視覚ビルダーを使用すると、Divi 5を使用すると、ゼロから始めたり、数千の事前に構築されたレイアウトを活用したりすることで、ほとんど努力してプロのWebサイトを作成できます。

この投稿では、Divi 5のユニークな機能とUIの機能強化と、ページをより効率的に構築するのに役立つ方法を強調します。レスポンシブレイアウトのセットアップから、モジュールグループやDivi AIなどの革新的な機能の活用まで、Divi 5がWebデザインをより速く、よりスマートで、より創造的な体験にどのように変換するかがわかります。

潜る前の1つのメモ：Divi 5は新しいWebサイトで使用する準備ができていますが、既存のサイトをDivi 5に変換することはまだお勧めしません。

そうは言っても、飛び込みましょう。

Divi 5の現代UIを理解しています

Divi 5のインターフェイスは、スピード、柔軟性、直感的なノーコード設計のために設計された前任者の完全なオーバーホールです。 Visual Builderは、セクション、行、列、モジュールグループのシームレスなナビゲーション用のクリーナー設定パネル、レスポンシブデザインの切り替え、ネストレイヤーインターフェイスを備えたリアルタイムのフロントエンド編集を提供します。

より高速な基礎によって強化されたDivi 5は、無限のレイアウト深度のためのネストされた行、合理化されたモジュール管理のためのモジュールグループ、一貫したスタイリングの設計変数などのユニークな機能を導入します。これらの進歩により、Divi 5は初心者がアクセスし、専門家にとって強力にアクセスでき、Webサイトの構築方法をWordPressに変えます。

ビジュアルビルダーの進化

Divi 5のVisual Builderは、強力でユーザーフレンドリーな合理化された体験を持つ再設計されたインターフェースを誇っています。 Divi 4と比較して、Divi 5は、クラッターを減らし、論理的にオプションを整理するクリーンでより直感的な設定パネルを導入し、調整をより速くします。

新しいレスポンシブデザインのトグルでは、いくつかのデスクトップ、タブレット、モバイルビューを切り替えて、すべてのデバイスでデザインが完璧に見えるようにします。これらのUI強化により、Divi 5は初心者がアクセスしやすくなり、精密な専門家の需要を提供します。

直感的なナビゲーション

複雑なレイアウトのナビゲーションは、Divi 5のレイヤーインターフェイスでは簡単です。このインターフェイスは、セクション、行、列、モジュール、および新しいモジュールグループを、明確で階層構造に整理します。単一のモジュールを調整するか、セクション全体を再構築するかにかかわらず、デザインの要素に簡単にドリルダウンすることができます。

ドラッグアンドドロップインターフェイスは物事を簡素化しますが、ワイヤーフレームモードはページの構造の鳥の目のビューを提供します。これらのツールを組み合わせることにより、Divi 5は、複雑なレイアウトを直感的に構築および編集し、時間を節約し、フラストレーションを減らすことができます。

レスポンシブデザインコントロール

DIVI 5は、デザインがデバイス全体でどのように適応するかを正確に制御するためのカスタマイズ可能なブレークポイントを導入します。 7つの事前定義されたブレークポイントから選択するか、特定のデバイス解像度に合わせてカスタム値を設定できます。これにより、手動CSSの調整なしでピクセルに最適なレイアウトが保証されます。

この粒状制御は、流体スケーリング用のClamp（）などの高度なユニットと組み合わせて、すべての画面サイズにわたってデザインが一貫性があり、視覚的に魅力的なままでいることを保証します。

Divi 5のユニークな機能でページを構築します

DIVI 5は、DIVIの使用方法を再定義する革新的なツールを紹介します。ネストされた行により、複雑なレイアウトに無限の列のネストが可能になり、モジュールグループはスタイリングを単純化し、複数のモジュールを単一のユニットとして管理します。設計変数により、色、フォントなど、および高度なユニットのサイト全体の一貫性が可能になり、レスポンシブデザインのClamp（）やCalc（）などの動的なCSS関数をサポートします。オプショングループプリセットを使用したプリセットベースの設計は、要素全体のスタイリングを合理化し、Divi AIはコンテンツの作成を加速します。これらの機能は、ユーザーがプロフェッショナルで応答性の高いWebサイトを効率的に作成できるようにします。

以下に、これらのツールを使用してWebページを構築する方法について詳しく説明します。

1。効率的なスタイリングの設計変数

設計変数は、サイト全体で適用できる色、フォント、数字、画像、テキスト、リンクに使用できるグローバル設定です。 Visual Builderのグローバル変数アイコンをクリックして、変数を定義できます。

設計変数を使用する利点は、それらを1回更新してその変数のすべてのインスタンスを更新し、一貫性と時間を節約できることです。たとえば、Clamp（）計算を見出しに割り当てるために数値値を確立する場合、Webサイト全体でテキストのグローバル階層を確立します。迅速な変更を行う必要がある場合、それらの変数を適用した見出しまたはテキストモジュールはサイト全体に更新され、すべてのインスタンス全体に登録された迅速なデザイン変更を行うことができます。

設計変数の使用方法

設計変数の可能性を最大化するには、設計プロセスの早い段階でそれらを組み込みます。開始時に変数を確立すると、一貫したフレームワークが作成され、繰り返しタスクではなく創造性に焦点を合わせるようになります。 Visual BuilderのVariable Managerアイコンをクリックすることから始めます。

ダイアログボックスが表示されたら、変数を追加してデザインの基礎を作成できます。たとえば、数値変数を使用して、応答性のあるタイポグラフィを確立できます。

数値変数は間隔にも使用できます。たとえば、Webサイト全体ですべての列と行の標準間隔を確立できます。 Calc（80％-60px）などのCalc（）式を使用すると、設計要素の幅がコンテナの80％として確立され、両側に30pxのパディングを追加します。ドロップダウンメニューから[計算]を選択して、式を適用します。

calc（）式を値フィールドに入力します。 [変数の保存]ボタンをクリックして、変数マネージャーに追加します。

変数が保存されると、Diviはデザイン全体に簡単に適用できます。間隔を使用するには、行、列、またはモジュールをクリックして、[デザイン]タブに移動し、幅フィールドを探します。

最後に、 [動的なコンテンツ]アイコンを挿入して、グローバル間隔変数を選択します。

前述のように、設計変数を適用すると、サイト全体で一貫性が保証されます。変数マネージャーのプロパティを更新すると、すべてのインスタンスが即座に同期され、手動調整時間の時間を節約できます。

設計変数を使用するためのヒント

• 変数を思慮深く整理します。名前を記述して、複雑なプロジェクトで簡単に識別できるようにします。
• プリセットを活用する：デザイン変数をDIVIのグローバルプリセットと組み合わせて、モジュールの再利用可能なスタイルテンプレートを作成し、新しいページのセットアップ時間を短縮します。
• テスト応答性：視覚ビルダーのデバイス全体で可変駆動型設計をプレビューして、すべての変数が予想どおりに機能するようにします。

2。オプショングループプリセットを備えたプリセットベースの設計

Divi 5のプリセットベースの設計システムは、要素プリセットとオプショングループプリセットの2つの強力なツールでスタイリングに革命をもたらします。これらの機能により、構成を保存および再利用でき、一貫性を確保し、プロジェクトワークフローを合理化できます。

Divi 5要素プリセット

要素プリセットを使用すると、テキスト、色、タイポグラフィ、間隔、ホバーエフェクトなどのモジュールの構成を保存して、ウェブサイト全体で再利用できます。たとえば、特定のフォント、グラデーションの背景、ホバーアニメーションを備えた完全なスタイルのボタンモジュールを作成できます。要素プリセットとして保存したら、一度クリックしてサイトの任意のボタンに適用して、同じスタイリングを維持できます。プリセットを更新すると、背景をソリッドカラーに変更するなど、そのボタンのすべてのインスタンスが自動的に更新され、繰り返し編集が排除され、統一された外観が確保されます。

Divi 5オプショングループプリセット

対照的に、オプショングループプリセットは、タイポグラフィ、境界、影などの再利用可能なスタイルグループに焦点を当てており、まとまりのあるデザインのために異なる要素に適用できます。たとえば、半径5pxの1pxブラックボーダーのオプショングループプリセットを作成し、ボタン、画像、行で使用する場合があります。

後でプリセットを2pxのボーダーに調整すると、すべてのリンクされた要素が即座に更新され、時間を節約し、一貫性を維持します。このモジュール式アプローチを使用すると、要素全体のスタイルグループを組み合わせて一致させることができ、コントロールを犠牲にすることなく柔軟性を提供します。

プリセットを効果的に使用する方法

スターターサイトまたは事前のレイアウトから始めるとき、要素プリセットはすでに存在しています。ただし、Webサイトをゼロから作成するときは、最初に作成する必要があります。これらのプリセットを作成すると、Webサイト全体で同様のモジュールを即座にスタイリングすることにより、設計プロセスをスピードアップできます。

要素プリセットの作成

要素プリセットを作成するには、目的の設定を備えたモジュールをスタイルします。次に、モジュールの設定の右上隅にあるプリセットメニューをクリックします。

現在のスタイルから新しいプリセットをクリックして、新しいプリセットを作成します。

プリセットに名前を付け、デフォルトとして割り当てるかどうかを選択し、保存します。デフォルトのプリセットとしてそれを選択すると、サイトに追加するすべてのアコーディオンは同じようにスタイリングされ、Webページをより速く、より効率的に構築しやすくなります。

オプショングループプリセットを作成します

オプショングループプリセットを作成するプロセスはわずかに異なります。プリセットをモジュールに適用するのではなく、他のタイプのモジュール、列、行、またはセクションに持ち越すことができるモジュールの側面にプリセットを割り当てることができます。オプショングループプリセットは、境界線のスタイリングに最適で、変換コントロール、フィルター、ボックスシャドウなどを追加して、より小さな要素を一貫性に保つことができます。

たとえば、画像や列のボーダースタイルを作成する必要があります。画像モジュールを選択し、[デザイン]タブに移動し、 [グループプリセット]アイコンの選択が表示されるまで、境界設定の上にホバリングします。

次に、 [新しいプリセットの追加]をクリックします。

ボーダーをスタイルし、名前を付けて、プリセットを保存します。

Divi 5の設計ベースのプリセットを使用するためのヒント

要素プリセットとオプショングループプリセットを組み合わせると、スケーラブルな設計システムを構築できます。 Divi 5を使用してWebページを作成するために効果的に使用するためのヒントを次に示します。

• 効率のためにそれらを使用します。特に大規模なWebサイトでは、要素プリセットまたはオプショングループプリセットを作成して、ページビルディングをスピードアップします。この方法により、モジュール、行、またはセクションを繰り返しスタイリングすることから救われます。前もってスタイルを作成し、必要な場所に適用します。
• 設計の一貫性を確立する：プリセットは、要素全体の均一なスタイリングを確保し、ブランドアイデンティティとプロのポーランド語を強化します。
• プリセットの編集サイトでは設計の変更が必要な場合：プリセットを使用すると、個々の要素を手動で編集せずにグローバルスタイルを更新することができ、デザインの反復やクライアントの改訂に最適です。
• スケーラビリティに使用する：プリセットを設計変数と組み合わせて、多くの場合更新が必要なサイトの堅牢なフレームワークを作成できます。路面下にページを追加する必要がありますか？プリセットを使用すると、これをより速く、より効率的に行うことができます。

3。柔軟なレイアウト用のネストされた行

Divi 5のネストされた列は、Divi 4の専門セクションを、より柔軟で無限にネスト可能なシステムに置き換えます。従来の行とは異なり、ネストされた行を列内に配置して、実質的にすべての構成で行、モジュール、または追加のネストされた行を積み重ねることができます。

ネストされた行を作成するには、列に1つを列に追加するか、列内のモジュールの下に視覚ビルダーを介して追加して、モジュールまたはネストされた行をモジュールまたはさらにネストします。

この機能により、複雑で階層化されたレイアウトを構築できます。たとえば、セクションでは、テキストモジュールの下に3列のネストされた行を配置して、ユーザーをさまざまなページにガイドするボタンを追加する場合があります。

DIVI 5の今後のFlexBoxコントロールは、ポジショニングオプションを強化し、価格設定テーブル、ポートフォリオ、マルチ層コンテンツセクションなどの複雑なデザインの正確なアラインメントと間隔を提供します。

ネストされた行の使用方法

ネストされた列の力を利用するには、視覚ビルダーのこれらの手順に従ってください。

ページレイアウトに標準行を挿入することから始めます。これは基礎として機能します。次に、[新しい行]タブをクリックして、新しいネストされた行の列オプションを表示します。

次に、最初の列のモジュールを選択します。この例では、画像。

2番目の列に、別の画像を追加します。境界、ボックスシャドウのオプショングループプリセットを作成し、そこから効果を変換できます。

ネストされた行を他の列に、または最初の列の下に追加できます。可能性は無限です。

複数のレベルの深さの高度なレイアウトを作成できます。たとえば、ネストされた列を備えた価格設定テーブルを作成して、2つのボタンを並べて備えています。これは、以前のバージョンのDIVIにない機能です。ネストされた行を使用する方法はいくつかあり、DIVIでWebページを構築するときに汎用性の高い機能になります。ヒーローセクション、チームページ、ヘッダー、フッターなどを構築するのに最適です。

ネストされた行を使用するためのヒント

• 最初にレイアウトを計画する：ネストされた行を追加する前に、ページ構造のアウトラインをスケッチして、マルチレイヤーのヒーローセクション、価格設定テーブル、チームグリッドなどの価値が提供される場所を決定します。
• モジュラーデザインの使用：再利用可能なコンポーネント用のネストされた行を作成します。これは、声の画像とテキストを備えた行など、ウェブサイト全体で一貫したスタイリングのためにそれらを重複または保存します。
• モジュールグループと組み合わせる：ネストされた行とモジュールグループをペアにして、複雑なレイアウトを整理します。
• Diviのレスポンシブブレークポイントを活用： Divi 5の7つのブレークポイントにネストされた行をテストし、レスポンシブトグルを使用して、すべてのデバイスにネストされた要素が適切に整列するようにします。

4。編成されたコンテンツのモジュールグループ

モジュールグループは、列内に複数のモジュールをグループ化できるDivi 5のコンテナとして機能します。それらを単一のユニットとしてスタイリング、移動、または複製することができます。特に複雑なデザインのワークフローを簡素化し、今後のFlexBoxサポートの段階を設定して、さらに正確なポジショニングオプションを解き放つことができます。

そこから、デザインモジュールとネストされた行を追加したり、オプショングループプリセットをグループに適用して、DiviライブラリまたはDiviクラウドに簡単に複製したり保存したりできるスタイルのレイアウトを作成できます。

モジュールグループの使用方法

モジュールグループを作成するには、新しい行を追加し、列構造を選択します。 Divi 5の使用可能なオプションからグループモジュールを選択します。

モジュールグループ内では、テキスト、画像、ボタン、ネストされた行などのモジュールを追加できます。たとえば、見出し、テキスト、画像、およびアクション対策セクションのボタンを含むグループを作成する場合があります。

スタイルを整えたら、グループの右上隅にあるEllipsisメニューをクリックして、モジュールグループを保存または複製できます。

モジュールグループは、チームメンバーセクション、アクションへの呼びかけセクション、インテリアページヘッダーなどを作成できます。しかし、さらに重要なことは、FlexBoxやLoop Builderなどの機能がリリースされると、モジュールグループが非常に役立つようになることです。

モジュールグループを使用するためのヒント

• モジュールグループを戦略的に計画する： CTA、証言、チームメンバー、製品カードなどの再利用可能なコンポーネントにモジュールグループを使用します。それらは、構築プロセスを合理化し、組織を維持するのに役立ちます。
• モジュールグループとプリセットを組み合わせます。オプショングループプリセットをモジュールグループに適用して、複数のグループにわたって均一な影や境界などの一貫したスタイリングを行います。
• Divi Cloudを使用：頻繁に使用されるモジュールグループを保存してDivi Cloudを保存して、特に同様の設計ニーズを持つクライアント向けに、プロジェクト間で迅速にアクセスします。

モジュールグループを使用して、管理と拡張が簡単なモジュール式の整理されたデザインを作成し、シンプルまたはより複雑なWebページを構築するのに最適です。

5。動的設計用の高度なユニット

Divi 5のAdvanced Units Featureは、より広い範囲のCSSユニット（PX、VW、REM、％など）と、単一の入力フィールド内のCalc（）、Clamp（）、Min（）、Max（）などの関数をサポートし、動的およびレスポンシブデザインを有効にします。たとえば、セクションの幅を、ビューポートサイズに基づいてスケーリングする液体タイポグラフィのために、計算（100％ - 40px）またはクランプ（20px、3vw、40px）に設定できます。

高度なユニットを設計変数として使用して、グローバルルールを設定し、サイト全体でデザインを一貫性に保つこともできます。

高度なユニットの使用方法

高度なユニットを使用するにはいくつかの方法がありますが、最も効果的な方法は、それらを設計変数と設計の一貫性を組み合わせることです。ただし、モジュールレベルで割り当てるインスタンスがある場合があります。

良い例はテキストを使用することです。もちろん、サイト全体のサイズを制御するように変数マネージャーにClamp（）式を設定できますが、スペースを追加して際立って際立っていることで、より影響力のあるものをよりインパクトのあるものにしたい場合はどうでしょうか。それが高度なユニットが登場するところです。

実証するには、[クリック]をクリックして、Webページに見出しモジュールを追加します。 [デザイン]タブで、サイジングフィールドに移動します。

幅フィールドの隣に、 [アイコン]をクリックして、高度なユニットオプションを表示します。

ドロップダウンメニューから、 VW （ビューポート幅）を選択し、 50を入力します。これにより、見出しには、Viewportの幅の50％を占めることがわかります。ビューポートは、Webブラウザウィンドウの可視領域です。したがって、ブラウザウィンドウの幅に関係なく、常にブラウザウィンドウの幅の半分になります。

見出しが他の画面サイズでどのように見えるかをプレビューすると、見出しが同じ幅を維持していることがわかります。

高度なユニットを使用するためのヒント

• Simpleを開始： Starnforward DesignsのPXや％などの基本ユニットから始めてから、Clamp（）、Calc（）、VH、またはVWで応答効果を実験します。
• タイポグラフィにクランプを使用してください： Clamp（）をフォントサイズまたは間隔に適用して、手動のブレークポイントなしで画面サイズに適応する流動的でアクセス可能なデザインを作成します。
• 設計変数と組み合わせる：頻繁に使用されるユニットを見出しやボディテキストにデザイン変数として保存して、一貫性を維持し、更新を簡素化します。

高度なユニットは、DIVIのノーコードインターフェイス内でカスタムCSSの精度を提供するため、あらゆるデバイスにシームレスに適応する動的でプロフェッショナルなWebページを簡単に構築できます。

6. Divi AI統合

Divi AIは、自然言語のプロンプトに基づいてテキスト、画像、コード、またはセクション全体とレイアウトを生成することにより、設計プロセスを強化します。 Divi 5のVisual Builder内で動作するため、必要に応じて少しデザインやコピーライティングが簡単に役立ちます。

たとえば、「見出し、ボタン、背景画像を備えたモダンなヒーローセクションを作成する」などのプロンプトを使用できます。 Divi AIは、完全にスタイルのレイアウトを作成します。これは、ビジョンに合わせて手動で洗練することができます。

Divi AIを使用すると、設計プロセスをスピードアップしたり、作家のブロックを克服したり、必要に応じて少し創造的なプッシュを取得したりできます。

Divi AIの使用方法

Divi 5でWebページを構築するときにDivi AIを最大限に活用するには、ブランドのコピーを作成したり、画像を作成したり、既存のモジュールにCSSを追加したり、セクションを生成したりするのに役立ちます。 Divi AIは、訪問者に共鳴する美しいWebページを作成するのに役立ちます。

既存のテキストモジュールでDivi AIを使用するには、テキスト領域の上にホバリングし、[コンテンツ]タブのDivi AIアイコンをクリックします。

複数のオプションを備えたダイアログボックスが表示されます。既存のコンテンツを書き込んで交換したり、伸びたり、短縮したり、簡素化したり、スペルとグラマーを修正したり、翻訳したり、トーンを変更したりできます。

オプションを選択すると、Divi AIは既存のコンテンツに基づいてコピーを変更します。終了したら、テキストを使用したり、再試行したり、AIで改善したり、いくつかのガイド単語で結果を改良したりできます。

Divi AIを使用するためのヒント

• プロンプトを使用して具体的に考えてください。DiviAIを使用して画像またはセクションを作成する際に、トーン、色、レイアウトの好みなどの詳細を含めます。テキストとコードについても同じことが言えます。具体的には、出力が優れています。
• 必要に応じて反復：初期出力が理想的でない場合は、プロンプトを改善するか、複数のバリエーションを生成して最適なフィット感を見つけます。
• インスピレーションのために使用する： Divi AIを使用する最良の方法の1つは、Webページを大幅にカスタマイズする予定であっても、レイアウトの概念やタグラインの生成など、アイデアをブレインストーミングすることです。

Divi 5を使用してWebページを構築するためのベストプラクティス

Divi 5の機能に戦略的アプローチを採用することは、その可能性を最大化するために不可欠です。設計システムを事前に計画することから始めます。一次色と二次色、関連するリンク、タイポグラフィ設定、フォントなどのコア設計変数を定義します。

ページを構築するときは、ボタンホバーエフェクト、シャドウ、タイポグラフィなどの再利用可能なスタイルのオプショングループプリセットを確立し、ワークフローをスピードアップし、サイト全体にまとまりのある美学を維持します。

肯定的な結果にも重要なことが重要です。 Divi 5のレスポンシブブレークポイントを使用して、高度なユニットをプレビューして、すべてのデバイスで見栄えを良くします。 Divi 5のレスポンシブトグルは、探索する7つのブレークポイントを提供し、さまざまなサイズの画面にデザインがどのように表示されるかについてのより良いアイデアを提供します。

要素プリセットをオプショングループプリセットと組み合わせて、柔軟性と一貫性のバランスを取ります。スタイルのCTAモジュールなど、特定のモジュールに要素プリセットを使用します。対照的に、均一性を維持するには、ボーダースタイルや影などの共有プロパティにオプショングループプリセットを適用します。更新が必要な場合は、個々の要素を手動で編集するのではなく、これらのプリセットグループをグローバルな変更に合わせて調整できます。

最後に、パフォーマンスと使いやすさを維持するためのデザインを簡単に保ちます。必要に応じて、必要でない限り、オーバーネストの行を避けたり、複雑なcalc（）式に依存したりしないでください。これらは編集を複雑にする可能性があるためです。同様に、ウェブサイト全体で再利用する予定の必須デザインのモジュールグループを作成します。

Divi 5でよりスマートなWebページを構築します

Divi 5は、WordPress Webデザインを再定義し、見事なレスポンシブなWebページを簡単に構築できます。その最新の視覚ビルダー、直感的なコントロール、革新的な機能、およびDIVI AIはプロセスを合理化し、最小限の労力で専門的な結果を確保します。スキルレベルに関係なく、これらのツールは、構築を効果的でダイナミックなWebサイトをより速く、より賢く、より創造的にします。

Divi 5の可能性を探索する準備はできましたか？ Divi 5 Alphaリリースを今すぐダウンロードして、最新の機能を試して、ビジョンを実現します。 Divi 5は新しいサイトに適していますが、既存のサイトを変換することはまだお勧めしません。

私たちはあなたの考えを聞きたいです！以下にコメントしてフィードバックを共有してください。さらに良いことに、ソーシャルメディアでDivi 5の経験について投稿して、言葉を広めてください。