PCファーストで作ったレイアウトが、スマホ表示のレスポンシブでサイズやカラムレイアウトの変更がうまくいかない時があります。あまり機会は多くありませんが、筆者が直面するのは特にファーストビューのデザインにこだわる時や、横に長さのある表を作る場合です。
そんな時には、PC表示用のセクションと、スマホ表示用のセクションをふたつ用意し、それぞれで不要な方のセクションを非表示にすることで対応できます。
表示・非表示の切り替え手順
⚫︎ステップ1：準備
まずは前述の通り、セクションをふたつ用意します。
一つはPC用、もう一つはスマホ用です。（タブレット用を作る場合も同様にもう一つ制作します。）
PC用のセクションを初めに完成させ、そのセクションをまるまる複製（コピー&ペースト）します。追加した方のセクションをスマホ用にするとして、開発画面をスマホ幅に切り替え、希望のレイアウトに作り替えます。セクション内であれば完全に表示と非表示を切り替えるので、普段のレスポンシブ設定のウィジェット毎のサイズ調整以外に新たなウィジェットの追加や削除、順番の変更も問題ありません。
⚫︎ステップ2：PC用セクションの設定
まず先に作っていたPC用セクションの方の設定です。
セクションを選択して高度な設定から、レスポンシブを開き、「表示状態」で【モバイル縦向きで隠す】をチェックしてピンクへ。
⚫︎ステップ3：スマホ用セクションの設定
次にスマホ用セクションの方の設定です。
セクションを選択して高度な設定から、レスポンシブを開き、「表示状態」で【デスクトップで隠す】【Tablet Portraitで隠す】をチェックしてピンクへ。
これで、PC表示ではPC用のセクションのみ表示、スマホの時にはスマホ用のセクションのみ表示に設定できました。
この設定はセクション以外にもウィジェットでも設定できるので、レイアウト上、スマホの時には不要なウィジェットが発生した場合には該当箇所のみ非表示にすることもでき便利です。
しかし、ページ内に非表示が多いと、評価としては良くないようなので、必要に迫られた場合のみの対応が良さそうです。
レスポンシブまとめ
Elementorでのレスポンシブ設定はコードを書くことなく行えます。ユーザーの多くがスマホでサイト閲覧をすることを考え、必ず設定するようにしましょう。
