Divi 5の根本からの再設計により、比類のないスピード、パフォーマンス、使いやすさが実現しました。簡素化されたビジュアル ビルダーと完全に再構築されたバックエンドにより、Divi 5 を使用した Web サイトの構築は、これまで以上に高速かつ簡単になりました。Divi 5 を使用すると、経験レベルに関係なく、時間や創造性を犠牲にすることなく、記録的な速さで素晴らしいサイトを開発できます。
このパブリック アルファ期間中に、新しい Divi 5 UI をチェックしてください。このイテレーションはまだ開発中であることに注意してください。特定の欠陥が見つかるかもしれませんが、以下のアドバイスにより、Divi 5 でテストおよび開発する際に生産性を最大限に高めることができます。
Divi 5 でより高速なウェブサイトを作成する 10 のベストな方法
Divi 5 Public Alpha のリリース以降、多くの調整と機能強化が実装されました。
1. ワンクリックで編集を活用する
Divi 4 では、セクション、行、モジュールを変更するには設定アイコンをクリックする必要がありました。Divi 5 では、ワンクリック編集によりそのすべてがなくなりました。モジュール内の任意の場所をクリックして編集できるため、設計プロセスのスピードが上がり、ストレスが軽減されます。
素晴らしいウェブサイトを作成します
最高の無料ページビルダーElementor を使用
今すぐ始めるたとえば、テキスト モジュールを変更するには、モジュール内の任意の場所をクリックするだけで、その設定にすぐにアクセスできます。
2. クイックアクションを実行するには、右クリックします
Divi 5 の右クリック コンテキスト メニューは、デザイン プロセスに役立つ新しいショートカットを提供します。任意のモジュール、セクション、または行を右クリックすると、よく使用されるいくつかのアクティビティを含むクイック アクション メニューを作成できます。このツールを使用すると、モジュール スタイルをコピーしたり、設定を複製したり、削除したりする場合でも、複数のパネルを開いたり、オプションを調べたりすることなく、操作をすばやく完了できます。
たとえば、独自のスタイルを持つボタンを作成したとします。クイック アクション オプションを使用すると、右クリックしてボタンのスタイルをコピーし、同じスタイルを適用したいすべてのボタン モジュールに適用できます。
3. さまざまなタスク用に複数のタブ付きパネルをドッキングする
複数のパネルを同時に開いて制御できるマルチパネル ドッキングは、Divi 5 のもう 1 つの素晴らしい新機能です。以前のバージョンでは、多くのパネル (レイヤー + モジュール設定など) を表示できましたが、キャンバス上でパネルを移動できるのは、表示を妨げないようにすることだけでした。キャンバスを整理するために、Divi 5 ではパネルをタブ化できます。
複数のパネルを並べてドキュメント化できると、デザインの複数の側面を一度に簡単に変更できます。Divi 5 のインターフェイスを使用すると、キャンバス上のパネルを好きなように配置して、要件に最適なワークスペースを作成できます。たとえば、すべてのパネルをキャンバスの左側に配置したいとします。自分に合ったワークスペースを作成するには、パネルを切り離して左に移動し、他のパネルをタブで移動します。
4. レスポンシブデザインでキャンバスのスケーリングを活用する
Divi 5 は、レスポンシブ Web ページ作成にまったく新しいアプローチを提供します。キャンバスのスケーリングにより、ワークスペースをすばやくスケーリングし、Visual Builder を離れることなく、さまざまな画面で Web サイトがどのように表示されるかを確認できます。また、デザイン キャンバスのサイズをすばやく変更して、レイアウト、パディング、余白を変更することもできます。
次のシナリオを考えてみましょう。モバイル レイアウトで作業していて、パーツ間の距離を変更したいとします。キャンバスのスケーリングを調整するには、キャンバスの端をクリックして目的のサイズまでドラッグします。そこから、マージンとパディングをすばやく調整して、小さなディスプレイでもデザインが鮮明に表示されるようにすることができます。
5. ホバー効果とスティッキー効果をすぐに適用する
Divi 5 では、デザインにホバー効果やスティッキー効果を追加するのがこれまで以上に簡単になりました。以前のバージョンの Divi では、ユーザーはモジュールのデザイン タブに移動して設定を入力する必要がありました。しかし、Divi 5 では、設定メニューからこれらの効果を直接適用できます。この革新的な方法により、ワークフローを妨げることなく、ダイナミックで魅力的なデザインを作成することがこれまで以上に簡単になりました。
Divi 5 を使用すると、ボタンにホバー効果を簡単にすばやく適用し、ユーザーがナビゲートしている間、ヘッダーを画面上部に維持できます。たとえば、CTA を作成するときに、ホバー時に別の色を追加したいとします。数秒で変更を適用するには、設定のドロップダウン メニューからホバー状態を選択します。
6. より効果的なナビゲーションのためにパンくずリストを使用する
Divi 5 の新しいパンくず機能により、ユーザーはモジュールや設定に簡単かつ迅速にアクセスできるようになりました。パンくずを使用すると、迷うことなくレイアウト間を移動できます。パンくずは、設定内の正確な位置を示す視覚的なガイドとして機能します。
セクション内で作業しているとき、メニューから戻ったり、場所を失ったりする必要はありません。デザイン プロセスを迅速化するために、各パンくずリストにはクリック可能なリンクが用意されており、これをクリックすると前のプリセットにすばやく戻ることができます。
7. モジュール間でスタイルをコピーして貼り付けて時間を節約する
Divi 5 では、さまざまなパーツ間でのモジュール スタイルのコピーと貼り付けが簡単になります。これにより、さまざまなモジュールに同じデザイン設定をすばやく適用できるため、時間が節約され、サイト全体の一貫性が確保されます。Divi 5 は、任意のモジュール、行、またはセクションのスタイルを簡素化し、デザイン全体で使用します。
たとえば、Web ページ上のすべてのボタンを同じデザインにしたいとします。スタイルを適用するには、右クリックしてクイック アクション メニューを開き、スタイルをコピーして、右クリックしてページ上のすべてのボタンに貼り付けます。
8. 複雑なレイアウトを作成する場合は、ワイヤーフレームビューを使用します。
Divi 5 のワイヤーフレーム ビューでは、ページの視覚的なデザイン コンポーネントが排除され、明確でシンプルなレイアウト ブループリントが表示されます。このビューでは、色やフォントなどの視覚的な要素に邪魔されることなく、構造に完全に集中できます。複雑なレイアウトで構造をすばやく調整する必要がある場合に役立ちます。
この簡易バージョンでは、セクション、行、モジュールの配置に集中できます。ワイヤーフレーム ビューを使用すると、見た目を気にすることなく、複雑なプロジェクトの構造を管理できます。
9. レイヤービューで長文コンテンツを使用する
レイヤー ビューでは、ページのセクション、行、モジュールが示されます。これにより、レイアウトの全体構造をすばやく簡単に表示できます。ビジュアル ビルダーをナビゲートする代わりに、レイヤー パネルで特定の部分またはモジュールを簡単に見つけることができます。
レイアウト内の任意の要素は、ビルダーでクリックしなくても、レイヤー ビューですぐに選択して編集できます。これは、セクションの複数のレイヤー内の行など、他のモジュールの奥深くにネストされている部分や非表示になっている部分に特に便利です。
10. 新しいことを学ぶことにオープンになる
Divi 5 は、ビジュアル ビルダーの使用方法にまったく異なるアプローチを提供します。これらの重要なアップグレードには、すべて学習曲線が伴います。特に以前のバージョンの Divi に慣れている場合は、最初は少し圧倒されるのが普通です。幸いなことに、ビルダーに加えた変更はすべて簡単に使用できるため、UI に慣れると、Divi で Web サイトをより迅速かつ効果的に作成できるようになります。
まとめ
Divi 5のインターフェースは生産性を向上させるように設計されていますが、ユーザーは複数のパネルをドッキングしたり、右クリックのショートカットを使用したり、既存のデザインを再検討したりして試してみる必要があります。
Divi 5 Migrator は、デザインの微調整に役立ちます。キャンバスのスケーリングやホバー、スティッキー効果ツールなどのシンプルな機能から始まります。Divi 5 に慣れてくると、自然にデザイン プロセスにさらに多くの機能を組み込むようになります。さまざまな設定を試し、新しいインターフェイスを操作して、テクニックを洗練させ、ワークフローをよりスムーズかつ効率的にします。
