フリーフォームランディングページのモバイル表示をカスタマイズする customize-mobile-view-for-your-free-form-landing-page

フリーフォームランディングページのモバイル表示は、ほとんど自動ですが、カスタマイズできます。手順は以下のとおりです。

  1. フリーフォームランディングページを選択します。

  2. ドラフトの編集 ​をクリックします。

  3. モバイル」タブをクリックします。

モバイル表示とデスクトップ表示+ mobile-vs-desktop-view

ページ要素の下に、 (デスクトップ)アイコンと (モバイル)アイコンがあります。これにより、様々な要素の表示/非表示を動的に切り替えることができます。

デフォルトでは、デスクトップ表示のすべての項目がモバイル表示に表示されます。

NOTE
長方形は、モバイルビューには表示されません。

重要事項: important-things-to-know

  • 画像はモバイルデバイスの幅に合わせて拡大されます。画像を小さくしたい場合は、リッチテキスト要素を取り込み、そこから画像を追加します。

  • Forms 2.0 フォームのみを使用してください。これらはレスポンシブで、自動的に調整されます。

  • 編集可能なテンプレート要素は 1 つだけです(BODY#bodyid (Mobile))。これを使用して、背景色を変更できます。

モバイル表示から要素を非表示にする hide-an-element-from-the-mobile-view

TIP
携帯電話では少ないほうが効果的です。単語を減らせば、顧客はより幸せになります。
  1. 要素を非表示にするには、モバイル列の下にある、対応するチェックボックスをクリックします。

  2. 完璧です。その要素は、モバイル表示には表示されなくなります。

モバイル表示に要素を追加する add-an-element-to-the-mobile-view

TIP
モバイル表示用に限った特別な(短い)コンテンツを作成します。
  1. 要素を追加するには、フリーフォームランディングページに要素をドラッグ&ドロップします。

    要素がモバイル表示でのみ表示されるように設定されていることを確認します。

TIP
モバイル表示でページ要素の配置を変更することもできます。フリーフォームランディングページ上で移動するか、ドラッグ&ドロップを使用して​ ページ要素 ​に表示されているオブジェクトを並べ替えます。

モバイル表示をプレビュー preview-mobile-view

  1. 下書きをプレビュー」をクリックします。

  2. 何か良いものを見たいですか?「並べて表示」を選択してください。

  3. これで、ランディングページのデスクトップバージョンとモバイルバージョンを同時に表示できるようになります。

  4. 気に入ったら、「承認して閉じる」をクリックします。

    note note
    NOTE
    プレビューはインタラクティブではありません。スマートフォンの表示は、それぞれ少し異なります。ランディングページがどのように動作するかを正確に確認するには、いくつかのデバイスでランディングページをプレビューすることをお勧めします。

お楽しみください。

recommendation-more-help
94ec3174-1d6c-4f51-822d-5424bedeecac