レスポンシブウィジェット

ウィジェットは、デフォルトで訪問者のデバイスに適応します。ただし、デバイスごとに要素を変更して、訪問者の画面に合ったレイアウトを表示できます。 デフォルトでは、より柔軟なレイアウトのために、要素はピクセル（px）ではなくパーセンテージを使用します。パーセンテージサイジングでは小数値がサポートされ、デフォルトテンプレートでは要素サイズに自動的にパーセンテージが適用されます。さらに、ポップインとバナー要素は、ビューポート幅（vw）とビューポート高さ（vh）の単位をサポートしています。

​

デバイスを切り替える

Widget Studioの上部で、ウィジェットがさまざまなデバイス（モバイル、タブレット、デスクトップ）で正しく表示されていることを確認するためにプレビューできます。 これらのビューはいずれも変更できます。

​

デバイス上のビューを編集する

要素はデバイスごとにカスタマイズできます。訪問者には、そのデバイス用に設定されたレイアウトが表示されます。

​

デスクトップ優先

すべての要素を、デフォルト設定である Desktop ビューに追加します。 必要に応じて、デザインを別のデバイス（モバイル/タブレット）に適応させることができます。別のデバイスで行った変更は、そのデバイス固有のままで、他のデバイスには影響しません。

​

特定のデバイスで要素を編集する

特定のデバイスで要素を編集するには、ページ上部のデバイスアイコンの1つをクリックし、要素を編集します。

​

特定のデバイスで要素を非表示にする

特定のデバイスで要素を非表示にするには:

1. 非表示にする要素を選択します。
2. three-dots menuをクリックします。
3. デバイスアイコンをクリックして要素を非表示にします。

​

Devices synchronization

デバイス同期では、各要素の leader device を指定し、要素の設定をリーダーデバイスと他のデバイス間でどのように同期するかを決定できます。各 follower device に対して同期ルールを選択できます。 各要素の General タブには、Devices synchronization というセクションがあります。 このセクションを開くと、Leader device ラベルと、モバイル、タブレット、デスクトップの3つのクリック可能なアイコンが表示されます。デフォルトでは、リーダーデバイスはデスクトップですが、別のデバイスを選択できます。リーダーデバイスに適用された設定は、それと完全にまたは部分的に同期されているすべての他のデバイスに複製されます。 ドロップダウンメニューを使用して同期オプションを選択できます。デフォルトでは、各デバイスに適用する同期ルールは Partially synchronized です。 各デバイスでは、次のいずれかの同期オプションを使用します。

• Fully synchronized: 要素のプロパティ、位置、サイズ、状態がリーダーデバイスと同期されます。
• Partially synchronized: デバイスでいずれかのスタイルが変更されるまで、すべてのスタイルがリーダーデバイスから継承されます。
• No synchronization: 要素の設定はリーダーデバイスと同期されません。
• Hide: 要素はデバイス上で表示されません。

​

“Device” タイプのイベントを設定する

デバイスに応じてウィジェット要素の表示をカスタマイズするためのイベントを設定することもできます。Deviceタイプのイベントを追加するには:

1. + Add event > Device をクリックし、Next をクリックします。

2. 条件を選択します。
3. Add action をクリックします。

特定の要素を表示するか非表示にするかを選択できます。