デフォルト自動プロパティ
デフォルトの
auto
プロパティを使用して、選択された要素のサイズと位置を定義できます。この場合、ブラウザは使用しているデバイスに応じて要素のサイズと位置を計算します。
モードの切り替え
アプリケーションの要素を編集するために、モバイルまたはタブレットモードに切り替えることもできます。これにより、異なるプラットフォームでウェブサイトがよりレスポンシブでダイナミックになります。
-
この
インタラクトモード
を使用すると、ページをブロックするポップアップを閉じ、ビジュアルエディタを使用してウェブページに加えられたすべての変更を表示できます。
設定
エディター設定
このエディタ設定により、ウェブページの表示方法を構成できます。
レスポンシブデザイン:
このオプションでは、すべてのデバイスまたは現在のデバイスのみで、変更を保持するか、現在のバリエーションに対してパーソナライズされたエクスペリエンスを保持するかを選択できます。
要素セレクタ：
このオプションを使用すると、HTML ID および CSS セレクターを使用してウェブページ上の要素を特定できます。
要素のHTML IDを使用する
HTML要素のIDは、ウェブサイトのコードで特定のセクションや要素にラベルを付けるために使用される一意の識別子です。ウェブページの特定の部分を特定し、作業するのに役立ちます。
選択した要素のHTML IDを表示するには、要素のHTML IDを使用します。以下に示すように。
要素のCSSセクターを使用する
CSSセレクタを使用することは、HTMLドキュメント内の特定の要素を識別して選択し、それにスタイルを適用する方法です。このパスには、要素、ID、クラス、およびその他の属性が含まれ、スタイルを適用したい正確な要素または要素のグループを特定します。これは、ターゲット要素に到達するためにHTMLドキュメント構造内でたどる要素のチェーンを定義します。
要素のCSSを使用すると、選択した要素のCSSが以下のように表示されます。
デフォルトでは、MoEngage Personalize エディターは ID を使用して要素を識別するように構成されています。ID が存在しないか指定されていない場合、MoEngage は要素の HTML セレクターパスを使用します。
動的 ID を持つ要素を含むウェブページ
- ウェブページには動的IDを持つ要素が含まれる場合があります。ダイナミックIDは、ページが読み込まれるたびに、またはユーザーの操作やページ上でスクリプトが実行される結果として変わるIDです。
- CSSスタイリングとJavaScript操作のために、動的IDは一貫性がないため扱いが難しいことがあります。
そのような場合は、MoEngageエディタでElement IDセレクタを無効にし、要素のHTMLセレクタパスを使用することをお勧めします。
リセット
この
リセット
オプションを使用すると、すべてのデバイスまたは特定のデバイスで現在のバリエーションに加えられたすべての変更を削除できます。
-
「
リセット
」は、バリエーションに対して行ったすべての変更を一度に削除することを可能にしますが、「
変更
」は、そのバリエーション内の各要素に対して行った個別の修正を削除または編集することを可能にします。
選択したバリエーション内の各要素に対して行われたすべての変更は、 変更 ドロップダウンに記録されます。 「 変更 」ドロップダウンをクリックして、アイコンを削除して、その要素に関連する修正を元に戻すことができます。以下のGIFは、以前に削除された 今すぐ購入 ボタンをリセットする例を示しています。変更をリセットすると、ボタンは元の位置に再び表示されます。