フリーフォームランディングページのモバイル表示をカスタマイズする

必要条件

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

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

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

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

モバイル表示とデスクトップ表示+

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

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

メモ

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

重要事項：

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

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

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

モバイル表示から要素を非表示にする

ヒント

携帯電話では少ないほうが効果的です。単語を減らせば、顧客はより幸せになります。

  1. 要素を非表示にするには、モバイル列の下にある、対応するチェックボックスをクリックします。

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

モバイル表示に要素を追加する

ヒント

モバイル表示用に限った特別な（短い）コンテンツを作成します。

  1. 要素を追加するには、フリーフォームランディングページに要素をドラッグ&ドロップします。

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

ヒント

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

モバイル表示をプレビュー

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

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

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

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

    メモ

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

お楽しみください。

関連記事

このページ