多くの編集可能な機能には、モバイル、タブレット、デスクトップの設定があります。 最も一般的な使用法は以下の通りです。テキストサイズ、マージン、要素のパディングなど。
モバイル、タブレット、デスクトップの設定を調整する方法
- コントロールしたい個々の要素の横にある
ビューポートアイコンを探します。 - 設定を編集したい特定のデバイスのアイコンをクリックします。
レスポンシブ背景画像とボーダーの制御
Elementorの背景画像は自動的にデバイスに対応していますが、デバイスごとにより多くのオプションをコントロールすることもできます。
- 背景画像：必要に応じて、デバイスごとに異なる背景画像を選択することができます。
- 背景画像表示オプション：デバイスごとに異なる画像の位置、添付ファイル、繰り返し、サイズを選択することができます。このようにして、異なるデバイスサイズで画像のどの領域が表示されるかをよりコントロールすることができます。
可視性
デバイスに応じてセクションの表示/非表示を選択することができます。
- セクション設定 > 詳細設定 > レスポンシブ
- デスクトップで非表示、タブレットで非表示、またはモバイルで非表示のいずれかを選択して、表示設定を行います。
要素を非表示にして、非表示にしているビューに切り替えると、この要素が “ミュート “されていることがわかります。これにより、この要素がライブサイト上で非表示になることを明確に示すことができますが、必要に応じて編集することができます。
非表示になっていないレスポンシブモードでは、その特定の領域を編集することができます。例えば、要素がモバイルでは表示されているが、デスクトップやタブレットでは非表示になっている場合、モバイルビューで要素を編集することができます。
モバイルとタブレットのブレイクポイントを変える
モバイルとタブレットのブレークポイントの値を設定できます。
- Elementor > 設定 > スタイルタブに移動し、モバイルとタブレットのブレークポイントの値を設定します。
- 変更内容を保存します。
- Elementor > Tools > Generalタブ > CSSの再生成に移動し、Regenerate Filesをクリックします。
カラムの順序
この機能は、カラムの順序を反転させます。
カラムの順序を使用するには、セクション設定 > 詳細設定 > レスポンシブ > カラムの順序を反転させて、Yesに設定します。
デバイスプレビュー
パネルの下部にある対応するアイコンをクリックして、デスクトップ、モバイル、タブレットの表示を切り替えます。
ヘルプ! モバイルプレビュー中に何かを変更したら、デスクトップでも変更されてしまいました。なぜでしょうか？
- あるモード（例えば、モバイル）のプレビュー中に要素（ウィジェット、列、またはセクション）を削除して、そのタイプのデバイスからのみ削除されることを期待することはできません。要素を削除すると、すべてのデバイスで要素が削除されます。ただし、要素の [詳細設定] > [レスポンシブ] タブで、その表示オプションのいずれかを有効にすることで、要素のレスポンシブ表示機能を使用することができます（デスクトップで非表示、タブレットで非表示、またはモバイルで非表示）。これらのデバイスでは要素は削除されませんが、非表示になります。
- あるモードのプレビュー中に要素を移動させたり、そのタイプのデバイスでのみ要素を移動させることはできません。どのプレビューモードでも要素を移動させると、すべてのデバイスに渡って要素が移動します。例外として、セクション > 詳細設定 > レスポンシブ > カラムを逆位置に移動させる機能があります。
- 要素の横にビューポートアイコンがない場合、あるプレビューモードでその要素を変更すると、すべてのデバイスで変更されます。