プロのように Divi 5 インターフェイスを操作するための 5 つのヒント

Divi 5 のパブリック アルファのリリースにより、ユーザーはエレガント テーマの舞台裏で進行中の強力な機能強化を探索できるようになりました。 Divi 5 はメジャー アップデートであり、速度、安定性、スケーラビリティを向上させるために刷新された基盤を提供します。あなたが経験豊富なプロであっても、Divi を使い始めたばかりであっても、この新しいビジュアル ビルダーを使用すると、より少ないステップとより速い読み込み時間で、より効率的に Web サイトを構築できるようになります。 Elegant Themes のこの新しいアップデートを利用して、プロのように操作してください。

Divi 5 パブリック アルファとそのダウンロード方法の詳細をご覧ください。

Divi 5 パブリック アルファをダウンロード

Divi 5 インターフェースをマスターするための 5 つのヒント

Divi 5 インターフェイスの操作は、新規ユーザーと経験豊富なユーザーにとって刺激的なものになる可能性があります。更新されたインターフェースは、最新のデザインと改善された機能を備えた Web サイト構築への新しいアプローチを提供します。インターフェイスに慣れるために役立つヒントをいくつか紹介します。

1. レイヤービューから要素に素早くアクセスする

レイヤーパネルは Divi 5 に新しいものではありません。Divi 4 にはレイヤービューがあります。ただし、UI が改良され、左側のサイドバーから簡単にアクセスできるようになりました。これは、ビルド中に表示しておきたい重要なドッキング可能なパネルの 1 つでもあります。これは、特に要素が重なったり、選択が難しくなったりする場合に、複雑なレイアウトを管理するための革新的なツールです。また、探しているさまざまな要素で検索/フィルタリングして、大きなページ上の複数の要素をすばやく見つけることもできます。

画面の左側にあるレイヤーパネルを開くと、キャンバス上の位置や表示に関係なく、レイアウト内のすべての要素が表示されます。別のモジュールやセクションの後ろに隠れている場合でも、そこから任意のレイヤーを直接選択できます。

プロのヒント

常にレイヤー ビューをドッキングされたパネルの 1 つとして表示しておいてください。これは無視するにはあまりにも便利で便利です。

実践例

ページ上のすべての CTA ボタンを新しいコンテンツで更新するとします。 Divi 5では、レイヤーパネルを使用して目的の要素（ボタン）を検索し、それらをすべて表示できます。次に、各ボタンを 1 回クリックするだけで、すぐにポップアップ表示される設定パネルの設定を更新できます。このシームレスなワークフローは、複雑でコンテンツの多いデザインを処理する上での変革をもたらします。

2. ドッキング可能なパネルとワンクリックで編集をスピードアップ

Divi 5 のドッキング可能なパネルとワンクリック編集機能を使用すると、複数の設定パネルを開いたままにして、ワンクリックで素早い変更を行うことができます。これにより、パネルを繰り返し開閉することなく、迅速な調整とスムーズなモジュールナビゲーションが可能になります。

プロのヒント

特に複数のセクションまたはモジュールを同時に作業する場合は、すばやくアクセスできるように、関連するパネルを画面の横にドッキングしておきます。これにより、必要なクリック数が減り、ワークフローが高速化されます。

実践例

最初のヒントの例を続けると、すべてのモジュールのボタン テキストを調整する必要があります。両方のレイヤーとボタンのパネルを同じ側にドッキングすると、簡単に切り替えてワンクリックで素早い編集ができるため、調整が必要になるたびにパネルを再度開いたり、あるパネルからカーソルを移動したりする手間が省けます。画面の端からもう一方へ。この設定は、更新が必要な複数のセクションを作業する場合に最適です。

3. 設定パネルのブレッドクラムを使用してナビゲーションを効率化する

設定パネルのブレッドクラムは、Divi 5 の独自の機能です。ブレッドクラムを使用すると、ユーザーは設定パネルから Divi の子要素の親要素のいずれかに直接移動できます。親要素は基本的に子要素のコンテナです。以下は、Divi 要素の親子構造の簡単な図です。

モジュールにも子要素 (アコーディオンや問い合わせフォームなど) があり、セクションには親として「ページ」があるため、パンくずリストがさらに便利になります。以前の Divi 4 では、レイヤービューに依存するか、ビルダー内をクリックして親要素を見つけようとする必要がありました。

Divi 5 で任意のモジュールの設定を開くと、設定パネルの上部にパンくずリストが表示されます。この軌跡には現在の位置が表示され、ワンクリックで親要素に戻ることができます。以下は、アコーディオン項目が選択されている場合のパンくずリストの例です。 「アコーディオン」は、選択したアコーディオン項目の直接の親であるため、パンくずリストのリンクの 1 つとして表示されます。

ブレッドクラムは、複数の親要素を使用して 1 つのデザインを作成する問い合わせフォームや CTA をデザインする場合に特に便利です。モジュールを設計したら、列要素または行要素に簡単にジャンプして、それに応じて設計を調整できます。

実践例

お問い合わせフォームをデザインしていて、デザインに行とセクションを組み込みたいとします。パネルを閉じることなく、変更を加えたり、パンくずリストを使用して必要な親要素にアクセスしたりできます。

4. キャンバスのスケーリングによる簡単なレスポンシブ デザイン

Divi 5 では、キャンバスをリアルタイムで拡大縮小して、モバイル、タブレット、デスクトップ デバイス上でデザインがどのように見えるかをシミュレートできます。このツールを使用すると、ビルダーを終了せずにキャンバスのサイズを視覚的に変更できるため、プレビュー モードに切り替えたり、ブラウザ ウィンドウのサイズを手動で変更したりする必要がなくなりました。 Divi 5 のビルダーは、キャンバスを拡大縮小すると、その特定のデバイス サイズの変更を表示するように自動的に適応するため、レスポンシブ デザインの微調整が容易になります。

プロのヒント

キャンバス スケーリングを使用して、モバイル デザインを完璧に見せることができます。モバイル表示中にパディング、フォント、配置を調整して、小さな画面でもレイアウトがシームレスに機能するようにします。

実践例

テキストを調整したら、デザインがモバイルで適切に見えることを確認する必要があります。 Canvas Scaling を使用すると、異なるデバイスや画面を切り替えることなく、モバイル ビューやタブレット ビューのレイアウトを簡単に調整できます。

詳細については、Divi 5 でレスポンシブ編集をマスターする方法をご覧ください。

5. 異なるビューモードでの異なるインタラクションレイヤーの合理化

Divi 5 は、ホバー効果、スティッキー要素、レスポンシブデザインの管理を合理化します。 Divi 4 では、各要素のこれらの設定を手動で有効にする必要があり、異なるパネル間で頻繁に切り替える必要があったため、エフェクトの適用とプレビューに時間がかかりました。 Divi 5 では、同じ設定パネル内でインタラクション レイヤーを直接利用できるようにすることでこのプロセスを簡素化し、デザインの微調整に必要なステップとクリックの数を減らします。

仕組み

Divi 5 では、ホバー、スティッキー、および応答状態のデザイン オプションが各モジュールの設定パネルに直接組み込まれています。モジュールの設定内のタブをクリックすると、デフォルト、ホバー、およびスティッキー状態をすばやく切り替えることができます。この直感的なインターフェイスを使用すると、さまざまなメニューを移動したり手動でコーディングしたりすることなく、ホバー アニメーションやスティッキー動作などのデザイン効果を適用できます。

プロのヒント

ホバー モードとスティッキー モードを切り替えて、デザイン要素がデバイス間およびインタラクション中にどのように動作するかをプレビューします。 Divi 5 を使用すると、エフェクトをリアルタイムで確認し、すばやく調整することが簡単になります。以前の Divi 4 では、それぞれの機能ごとに変更を適用する必要があり、時間がかかりました。

実践例

ホームページに相談ボタンを設置しました。 Divi 5 の合理化されたインタラクション レイヤーを使用すると、同じ設定パネルでレスポンシブ設定、ホバー、スティッキー状態を直接切り替えることができ、各要素がデバイス間で完全に動作することが保証されます。まず、ホームページボタンの背景色を変更し、レスポンシブ設定での動作を確認します。

続いて、ホバー モードに移行し、ボタンの背景色を変更し、変更後にデスクトップ モードに戻します。これにより、デスクトップ バージョンのボタンは、カーソルを移動する前の元の (黒色) 色になることがわかります。

最後に、スティッキー モードでのボタンの動作を確認する前に、スティッキー モードをアクティブにします。これにより、ビルダーを終了したり別の設定を有効にしたりすることなく、さまざまなビューをスクロールしながら効果をすばやく適用してプレビューできます。

Divi 5 がどのようにデザインプロセスを簡素化するかについて詳しくは、こちらをご覧ください。

プロのように Divi 5 を操作する

Divi 5 インターフェイスのこれらの重要な機能をマスターすることで、デザインをより効率的にナビゲートし、ワークフローの速度を低下させる可能性のある一般的なフラストレーションを回避することができます。レイヤーパネルを使用して重複する要素を管理する場合でも、ワンクリック編集やキャンバススケーリングを利用してレスポンシブデザインを行う場合でも、これらのヒントは Divi 5 を最大限に活用するのに役立ちます。

Divi 5 パブリック アルファでこれらのツールの実験を開始し、デザインを次のレベルに引き上げてください。 Divi 5 を使い始めるためのその他のヒントやリソースについては、インターフェースの概要やその他のブログ投稿をご覧ください。

Divi 5 パブリック アルファをダウンロード