Elementorでのレスポンシブ設定は、コードを書く必要がなく直感的にわかりやすいです。
今回はデスクトップ表示とスマホとでレイアウトを変更する方法をご紹介します。
レスポンシブ：カラムレイアウト
文字サイズの変更以外に多いのがカラム表示の変更です。レスポンシブで特に気を付けなければいけないことは文字サイズですが、文章を表示する範囲が小さいとどうしても読みにくくなってしまいます。
例として、PC表示で「事業内容」や「サービスの特徴」など、カード状のカラムを3つなど複数表示していた場合、スマホの時にそのまま3つ横並びになってしまうとカードがとても細くなってしまいます。そんなときにはスマホではカードを一つずつ縦に並べることができます。
スマホではカラム幅（Custom Column Width）が33.3%のままだととても細いカードになってしまいます。
スマホの時の設定は100%にしてあげると一つずつ縦に並べることができます。
カラムの順番
デザインによっては横並びの時は良くても縦にすると意図しない順番になることもあります。そんなときにはColumn Orderに数字を入力することで、スマホの時はこの順番で、と指定することができます。これは3つ以上カラム数がある場合に有効です。ただ、該当の全てのカラムオーダーに数値を入力する必要があります。
他にも、2つのカラムの場合にスマホでの順番を入れ替えたい時にはさらに手軽な方法があります。
それは、カラムが入っているセクション、または内部セクションを選び、高度な設定からレスポンシブ、カラムを逆にするを「はい」にします。
これだけで上下のカラムを入れ替える設定ができます。
このようにカラムのレイアウトを調整することもレスポンシブ設定で基本であり、大事なポイントです。文字や画像のサイズ、カラム幅や順番の設定のほかに、余白の調整ができれば完了です。
また、エレメンターでは注意書きなどが英語で書かれていることが多いですが、無視せずに翻訳してみると結構役立つ知識が得られることがあります。
