Divi 5のカスタマイズ可能なブレークポイントについて知る必要があるすべて

ウェブサイトの構築方法を大幅に改善する準備をしてください。 Divi 5には、エキサイティングな新機能、カスタマイズ可能なブレークポイントがあります。これにより、サイトの応答性を信じられないほど制御できます。 Divi 5の新しいカスタマイズ可能なブレークポイントを使用すると、すべてのデバイスでシームレスなエクスペリエンスを作成できます。巨大なデスクトップディスプレイまたは最小のモバイル画面で設計するかどうかにかかわらず、Divi 5は、毎回WebサイトのPixel-Perfectに見えるようにするのに役立ちます。

この投稿では、この新しい機能について知っておくべきすべてのものをカバーし、それを使用する方法を示します！

次のビデオをチェックして、新しい機能を参照してください。

カスタマイズ可能なブレークポイントを使用してDivi 5をダウンロードします

カスタマイズ可能なブレークポイントを使用すると、さまざまな画面サイズに適合してウェブサイトの応答性を微調整できるようになりました。超幅のデスクトップや幅広いモバイル画面を設計するかどうかにかかわらず、Divi 5は手にコントロールします。

すでにウェブサイトでDivi 5を使用できますか？

WebサイトでDivi 5を使用できますが、その可用性は特定のユースケースに依存します。 DIVI 5は現在、公共のアルファフェーズにあります。つまり、まだ積極的に開発され、洗練されています。すべての生産環境にはまだ推奨されていませんが、問題なく使用を開始できる特定のシナリオがあります。

ローカルおよびステージングサイトでDIVI 5を使用します

DIVI 5は現在、ローカルおよびステージング環境で利用可能であるため、ユーザーはライブWebサイトに影響を与えることなく新しい機能を安全にテストできます。 Divi 5はまだ公共のアルファフェーズにあるため、このアプローチにより、ユーザーはDivi 5の改善を実験し、バグを報告し、生産サイトの安定性を維持しながらフィードバックを提供できます。

新しいプロダクションWebサイトでDivi 5を安全に使用できます

Divi 5は安定しており、最新のWebサイトを立ち上げる準備ができています。ゼロから始めている場合は、後方の互換性の問題を心配することなく、その高速パフォーマンス、モジュラーフレームワーク、将来のプロフなテクノロジーを完全に活用できます。ただし、移行する前に広範なサードパーティの統合に依存している既存のサイトには、徹底的なテスト段階が不可欠です。この時点で、既存のWebサイトをDIVI 5に変換することはまだお勧めしません。

Diviのカスタマイズ可能なブレークポイントを理解する

ブレークポイントは、レスポンシブデザインの基本的な側面です。それらは、誰かがスマートフォン、タブレット、デスクトップで閲覧しているかどうかにかかわらず、サイトのコンテンツが再編成され、最適なユーザーエクスペリエンスを確保するためのしきい値として機能します。

Divi 5のブレークポイントは大幅に改善されており、DIVIの以前のバージョンよりも柔軟性と制御が多く提供されています。最大7つのブレークポイントをカスタマイズすると、サイトの応答性を微調整して、より広い範囲のデバイスと画面サイズに対応できます。

ブレークポイントとは何ですか？

ブレークポイントとは、ウェブサイトのデザインがさまざまなデバイスで最適な視聴エクスペリエンスを提供するために適応する特定の画面幅です。ブレークポイントは、画面のサイズに関係なく、コンテンツが読みやすく、視覚的に魅力的で、ナビゲートしやすいことを保証するのに役立ちます。

レスポンシブWebサイトは、CSSメディアクエリを使用して設計されています。これにより、画面が特定の幅に達すると、さまざまなスタイルを適用できます。訪問者の画面サイズが定義されたブレークポイントを横切ると、ウェブサイトはレイアウト、フォント、間隔、またはその他のデザイン要素を自動的に調整して、使いやすさを維持します。

DIVI 5にブレークポイントが増えると、CSSメディアクエリが他のデバイスのブレークポイントを定義する必要性を制限できます。

いくつのブレークポイントを使用する必要がありますか？

ブレークポイントの数は、視聴者のデバイスの使用によって異なります。ユーザーは、小さなスマートフォンから超幅のデスクトップ画面まで、さまざまな画面サイズのWebサイトにアクセスします。従来、Webデザイナーはデスクトップ、タブレット、モバイルの3つの標準ブレークポイントを使用してきましたが、Divi 5はこの機能を拡張して、最大7つのカスタマイズ可能なブレークポイントを柔軟に増やすことができます。

より多くのブレークポイントを有効にすると、私のサイトが遅くなりますか？

いいえ、Divi 5でより多くのブレークポイントを有効にすることで、Webサイトが遅くなりません。レスポンシブデザインの処理方法とは異なり、Divi 5の新しいフレームワークはパフォーマンスに最適化されており、追加のブレークポイントがサイトに不必要な負荷を追加しないようにします。

BreakPointはWebサイトまたはページレベルで有効になっていますか？

DIVI 5のブレークポイントは、ページごとではなく、Webサイトレベルで有効になり、適用されます。ブレークポイントを有効にしてカスタマイズすると、それらはWebサイト全体に影響を与え、すべてのページで一貫したレスポンシブデザインを確保します。ブレークポイントに変更すると、個々のページに制限されるのではなく、サイトがさまざまな画面サイズにどのように応答するかを普遍的に調整します。

Diviでカスタマイズ可能なブレークポイントがどのように機能するか

Divi 5の非常に柔軟で直感的なシステムは、ブレークポイントの管理に最適であり、Webサイトのレスポンシブデザインをより強く制御できます。以前のバージョンとは異なり、Divi 5を使用すると、最大7つのブレークポイントをカスタマイズでき、すべてのデバイスでサイトに最適に見えるようにします。このシステムは、それらを必要とする人に高度なオプションを提供しながら、ユーザーフレンドリーになるように設計されています。

ブレークポイントを見つける場所

DIVI 5では、ブレークポイントがページ設定に統合されているため、見つけやすくカスタマイズできます。視覚ビルダー内に直接アクセスして、合理化されたワークフローを確保できます。

ブレークポイントを有効にする方法

編集するページを開き、 diviで編集をクリックしてビジュアルビルダーをアクティブにします。

Visual BuilderのメインタスクバーにあるEllipsisメニュー（3つのドット）をクリックします。

設定内には、必要に応じてブレークポイントを有効または無効にできる一連のトグルスイッチがあります。

アクティブ化されると、各ブレークポイントがタスクバーに表示され、個々の行またはモジュールの応答性のあるコントロールをクリックして設定を調整することなく、設計全体に変更を加えることができます。

標準のブレークポイントまたは独自のものを使用する必要がありますか？

Divi 5の標準ブレークポイントは、携帯電話、タブレット、デスクトップなど、最も一般的な画面サイズをカバーするように設計されています。これらの事前定義されたブレークポイントは、多くのデザイナーにとって、ほとんどのユーザーやデバイスに対応するため、多くのデザイナーにとって十分です。

ただし、カスタムブレークポイントを作成することが有益なシナリオがあります。たとえば、ウルトラ全体のモニター、折り畳み式スマートフォン、または小さなタブレットに対応したい場合、カスタムブレークポイントは、これらのユースケースのデザインを変更するのに役立ちます。

Divi 5でカスタムブレークポイントを使用します

レスポンシブブレークポイントのカスタマイズは、あまり一般的ではないデバイスや画面解像度でデザインの癖やコンテンツ表示の問題に対処するのに役立ちます。また、特定の画面サイズに必要なスタイルのみを読み込み、ページの読み込み時間を短縮することにより、ウェブサイトのパフォーマンスを改善するのにも役立ちます。

ありがたいことに、Divi 5は、数回クリックしてこれらのレスポンシブブレークポイントをカスタマイズすることを非常に簡単にします。

レスポンシブデバイスの設定を開いた状態で、電話ブレークポイントを目的の幅に設定し、他のデバイスの手順を繰り返します。小型のデバイスでサイトにアクセスできるようにするため、電話の数字を360pxに設定します。目的のピクセルを追加したら、 [保存]ボタンをクリックして続行します。

Divi 5は、あなたがあなたのウェブサイトのブレークポイントを調整しようとしていることをあなたに知らせます。 [更新]ボタンをクリックして、変更を確認します。

残りの画面サイズに次のブレークポイントを追加します。

これらのブレークポイントは、さまざまなデバイスをカバーして、Webサイトがほとんどの画面サイズとユースケースをカバーするようにします。

• 電話： 767pxは、iPhone 8やSamsung G7などの古いモデルを含む、ほとんどのスマートフォン画面サイズをカバーしています。
• 電話全体： 860pxは、iPhone 14 Pro（および上）や最新のAndroidデバイスなど、ランドスケープモードのほとんどの電話画面をカバーしています。
• タブレット： 980pxは、すべてのiPadを含むポートレートモードのほとんどのタブレットスクリーンに適しています。
• 幅のタブレット： 1024pxは、ほとんどのiPadとSamsungタブレットの景観ビューの標準です。
• ワイドスクリーン： 1280pxは、MacBook Air、MacBook Pro 13インチ、同等のWindowsデバイスなど、ほとんどの小さなラップトップ（窓またはMacO）にとって適切な幅です。
• Ultrawide： 2560pxは、MacBook Pro 15インチや16インチのラップトップ、iMac、標準の高解像度モニターなど、より大きなデスクトップ画面をカバーしています。

プリセット内のレスポンシブデザインのカスタマイズ

Divi 5の最も強力な側面の1つは、カスタマイズ可能なブレークポイントがプリセットとシームレスに統合する方法です。これにより、最小限の労力でウェブサイト全体で真にレスポンシブなデザインを作成できます。完璧な例は、スターターサイトのH1プリセットを変更して、すべてのH1がすべての画面サイズで完璧に見えるようにすることです。

HEROセクションのH1内の任意の場所をクリックすると、設定が表示されます。

次に、モジュールのヘッダーの見出しプリセットフィールドをクリックします。

プリセットリストが表示されます。その横に青いチェックマークがあるプリセットを見つけます。

アクティブなプリセットの上にホバリングして、設定を明らかにします。 [設定]アイコンをクリックして編集します。

[デザイン]タブをクリックして、見出しのテキストサイズを目的のサイズに調整します。

プリセット設定を開いたままにして、Divi 5タスクバーの次の画面サイズをクリックして、見出しのサイズを調整します。

上記の手順を繰り返して、残りの画面サイズの見出しプリセットを調整します。これを完了したら、 [プリセットの保存]ボタンをクリックします。

ブレークポイントを交換すると、サイズの変更は見出しプリセットに反映されます。

Divi 4 vs Divi 5でのレスポンシブ編集5

Diviは常にレスポンシブデザインのリーダーでしたが、Divi 5はまったく新しいレベルに引き上げられます。 Divi 4はレスポンシブWebサイトを作成するための強固な基盤を提供しましたが、Divi 5は、これまで以上に直感的で柔軟で強力なレスポンシブな編集を実現する機能をもたらします。 Divi 5がDivi 4の機能をどのように改善するかを詳しく説明します。

ブレークポイント間の楽な移行

DIVI 4では、ブレークポイント間の切り替えは非常に簡単ですが、より多くの時間を伴い、DIVI 5で見つけることができる遷移ほどスムーズではありません。

Divi 5は、よりスムーズでより直感的なインターフェイスでこのワークフローを改善します。これで、ブレークポイント間を即座に移行でき、ラグなしで調整するとデザインをプレビューできます。この新しいバージョンのDIVIを使用すると、どのブレークポイントを表示しているかに基づいて、その場でデザイン変更を行うことができます。モードや一定の切り替えの間の切り替えはもうありません。このシームレスなエクスペリエンスは時間を節約し、あらゆるブレークポイントでよりまとまりのあるデザインを保証します。

3〜7のブレークポイント

DIVI 4は3つの異なるブレークポイントをサポートしています。これらはDivi 5にもあります。

• デスクトップ： 981px以上
• タブレット： <980px
• モバイル： <767px

これらのブレークポイントは基本をカバーしていますが、現代の視聴者が使用するさまざまなデバイスや画面サイズに対応するときに不足することがあります。デザイナーは、特に超幅のモニターまたはより小さなモバイルデバイスの場合、さまざまな画面サイズをターゲットにするためにCSSメディアクエリを必要とする場合があります。

Divi 5は、ブレークポイントの数を7つのカスタマイズ可能なオプションに拡大することにより、この制限に対処し、より多くのデバイスをターゲットにしやすくします。

• 電話： <767px
• 電話全体：< 860px
• タブレット： <980px
• タブレット幅：< 1024px
• デスクトップ： > 981px
• ワイドスクリーン： > 1280px
• ウルトラ幅： > 1440px

この柔軟性が向上すると、デザインをより幅広いデバイス用に微調整できるようになり、コンパクトなスマートフォンから大規模で高解像度のモニターまで、サイトがすべてに最適に見えるようになります。たとえば、ランドスケープモードで専用のタブレットブレークポイントを作成したり、プロの設定で使用されている超幅の画面のサイトを最適化できます。

完全な制御のためにキャンバススケーリング

Divi 5の最もエキサイティングな新機能の1つはCanvas Scalingです。これにより、デザイナーは、さまざまな解像度でWebサイトがどのように表示されるかを前例のない制御できます。

これは、divi 4のキャンバススケーリングのように見えるものです。

Divi 5のCanvas Reculing機能により、エクスペリエンス全体がさらに直感的になります。わずか数回クリックするだけで、特定の画面解像度に合わせて設計キャンバスをスケーリングして、さまざまなデバイスでサイトがどのように表示されるかを正確に示すことができます。この機能は、小さなモバイル画面や超幅のデスクトップモニターのテストに役立ち、デザインが完璧であることを確認します。

Divi 5はDivi生涯会員に永遠に含まれています

Divi 5のカスタマイズ可能なブレークポイントは、デザイナーがより正確にレスポンシブWebサイトを作成できるようにします。既存のレイアウトを改良したり、サイトをゼロから構築したりする場合でも、これらの新しいツールは、すべての画面サイズでピクセルに最適なエクスペリエンスを作成する柔軟性を提供します。

Divi 5の最良の部分の1つは、Diviメンバーシップに永遠に含まれることです（追加費用なしで）。今日Divi Lifetimeメンバーシップにアップグレードすると、1回限りの料金でDivi 5へのアクセス（および更新）を取得し、今後数年間この進化する製品の恩恵を受けることができます。