Elementorビルダーは、タブレットと携帯電話用に別々のレスポンシブデバッグを可能にし、異なるデバイスのユーザーの体験をより良く満たします。

ページに移動し、Elementorで視覚的に編集する

1. Elementorフロントエンドのビジュアル編集へのアクセス上部の黒いナビゲーションバーにある "Elementorで編集 "ボタンをクリックすると、現在のページのビジュアル編集モードに素早く入ることができます。

2. レスポンシブ・モードへ左下のアイコンをクリックすると、レスポンシブモードに切り替わります。

3. タブレットとモバイルのブラウジングモードの切り替え

モバイルブラウジングに切り替えた後、対応するモジュールをクリックして、モジュール内のテキストフォーマットのサイズや余白のサイズなどを変更する。

1.携帯電話の文字サイズ変更

テキストサイズの変更は、モジュールのスタイル列のタイポグラフィ（フォント）の下にあり、サイズの値を変更すると、テキストサイズを変更することができます。

2.携帯電話のカラム幅を変更する

左上のアイコン（下図）をクリックし、レイアウト欄の下にあるカラムギャップを変更し、カラムの幅やサイズ、比率などを変更する。

3.携帯電話の内外間隔を変更する

下図に示すように、Marginは外側の余白、Paddingは内側の余白で、通常携帯電話ではPaddingの値を変更する必要があります。

4.製品カラム手法の変更

ここでは商品呼び出しモジュール(woo-Productsモジュール)を編集しています。内容の下にある。コラムこれは商品表示の列数で、モバイルでは2列に変更するのが適切です。

モバイルページの商品タイトルのサイズを変更する：打込むスタイル コンテンツの下にカラム、タイポグラフィの下にタイトルを見つけると、タイトルのサイズを変更することができます。

5.モバイルページの表示を隠す

モジュールの編集]の[詳細]セクションの[レスポンシブ]で、[モバイルで非表示]をクリックすると、モジュールがモバイルで表示されなくなります。

6.修正の保存

の左下隅をクリックしてください。出版変更を保存することができます。

7.フロントとバックオフィスに素早く戻る

以下のアイコンをクリックすると、すぐに戻ることができます。

概要

Elementorのフロントエンドのビジュアル編集モードにアクセスすることで、レスポンシブモードに切り替え、タブレット用とモバイル用にそれぞれテキストサイズ、カラム幅、内側と外側の間隔、商品カラム数を調整することができます。さらに、必要に応じて特定のモジュールを非表示にすることで、さまざまなデバイスのユーザーに最高の体験を提供することができます。この記事では、ページ内最適化を簡単に実現するための具体的な手順とハウツーを紹介しています。