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

Kameleoon Widget Studioを使用して、訪問者のデバイスに適応するウィジェットを作成できます。ウィジェットは自動的にレスポンシブですが、ユーザーエクスペリエンスを最適化するために変更を加えることができます。 デフォルトでは、より柔軟なレイアウトのために、要素はピクセル（px）ではなくパーセンテージを使用します。パーセンテージサイジングでは小数値がサポートされ、デフォルトテンプレートでは要素サイズに自動的にパーセンテージが適用されます。さらに、ポップアップとバナー要素は、真のレスポンシブのためにビューポート幅（vw）とビューポート高さ（vw）の単位をサポートしています。

​

デバイスを切り替える

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

​

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

ウィジェットの要素を表示されるデバイスに基づいてカスタマイズできます。デバイスごとにウィジェットをカスタマイズして、訪問者の閲覧体験を最適化しましょう。

​

デスクトップ優先

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

​

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

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

​

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

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

1. 非表示にする要素を選択します。
2. 三点リーダーメニューをクリックします。
3. デバイスアイコンをクリックして要素を非表示にします。

​

デバイス同期

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

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

​

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

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

1. + Add event > Device をクリックします。
2. 条件を選択します。
3. Add action > Elements をクリックします。

特定の要素を表示するか非表示にするかを選択できます。 以前に特定のデバイスで要素を非表示にした場合（三点リーダーメニューで）、ポップインにアイコンで示されます。