デバイス用にレイアウトを調整

Experience Builder では、Web エクスペリエンス用にさまざまなページ レイアウトを構成および作成できるため、ページ レイアウトはすべての画面サイズで正常に機能します。 個々のレイアウトの構成は、大、中、小の画面サイズ用に固有のデザインを作成できるアダプティブ デザインに基づいています。 各レイアウトはエクスペリエンスの転用であり、アプリをさらにカスタマイズし、画面サイズとさまざまなコンテンツを活用するための優れた柔軟性を提供します。

テンプレートは複数の画面サイズで機能するように構築されています。 空の全画面アプリまたは空白のスクロール ページ テンプレートを選択すると、[自動] レイアウトが中画面デバイスと小画面デバイスで有効になります。 これにより、すべてのウィジェットと大画面デバイスのレイアウトに含まれるウィジェットとの同期が維持され、自動的に整列されます。

中画面デバイスまたは小画面デバイス用の個別のレイアウトを作成するには、ページまたはウィンドウのレイアウトの横にある [カスタム] ボタンをクリックします。 これにより、選択した画面デバイス用にウィジェットとウィンドウを手動で整列したり、サイズ変更したりできます。 小型デバイスのレイアウトからウィジェットを削除する必要がある場合は、ウィジェットのツールバーで [保留中のリストに移動] ボタン 保留中のリストに移動 をクリックします。 これにより、現在のデバイスのキャンバスからウィジェットが削除され、レイアウトに戻す必要がある場合に備えて、構成が保存されます。 カスタム レイアウト オプションを有効にすると、他のウィジェットは、他のデバイス モードに追加されていると、現在のデバイスには追加されません。 それらのウィジェットは、[ウィジェットの挿入] パネルの [保留中] タブから手動で追加できます。

ヒント:

さまざまな画面サイズおよびデバイスのレイアウトをテストするには、ビルダー ツールバーの [ライブ ビュー] をクリックします。 ライブ ビューを使用すると、保存して公開する前にコンテンツが正しく適用されていることを確認できます。 また、いくつかの設定を調整して試すことも、対話型の動的ウィジェットを操作してどのように機能するかを確認することもできます。