この記事には広告を含む場合があります。
記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。
今回は、Elementorで作成したページでスマホ表示を２カラムに設定する方法を解説していきます。
2カラムのコンテンツを作成した場合、
PC表示は2カラムになりますが、スマホ表示ではある設定をしないとワンカラムになってしまいます。
コンテンツ数が多いとワンカラムだと縦に長く表示されますが、2カラムだと一つひとつを小さく表示できスッキリさせることができます。
まず2カラムのコンテンツを作成する
まずはPC表示で横並びの2カラムのコンテンツを作成していきます。
Elementorの編集画面に行き、新規作成の「+」ボタンを押します。
ワンカラム、2カラムなど構造を選択できるので、2カラムを選択します。
以下の画像のように横並びに2つコンテンツボックスが作成されました。
今回はアイコンボックスでコンテンツを作成してみます。
左のメニューからドラッグ＆ドロップします。
左側に編集画面が出てくるので、ひとつずつ編集していきましょう。
ひとまずこのように2カラムで2列のコンテンツを作成してみました。
(こちらはまだPC表示です)
レスポンシブモードで編集画面をスマホ表示にする
次にスマホビューで編集していきます。
左下のメニューに①レスポンシブモードがありますのでクリックしましょう。
②モバイルを選択します。
このようにスマホ表示の編集画面になります。
現在はワンカラムになっていますね。
カラム幅を50％に設定すると2カラムになる
では、ここからスマホ表示を2カラムに変更していきます。
下の画像の左上部分にマウスを置くと、赤枠の表示が現れますのでクリックしましょう。
次に左側の編集画面よりスマホ表示のカラム幅を50％に設定します。
そうするとスマホ表示で選択したコンテンツが50％幅になりました。
同じように他のコンテンツボックスも50％に変更していきます。
モバイル表示でのフォントサイズなど微調整を加えれば完成です！
まとめ
2カラムのコンテンツを作成するところから説明しましたが、スマホ表示のカラムを50％に設定するだけなので、ものすごく簡単です。
スマホ表示での2カラムはコンテンツをスッキリまとめたい場合や、スクロールしなくても同時にコンテンツを確認してもらいたい場合などに効果的です。
この方法はランディングページやホームページを作成する際には、使用する頻度が高いので覚えておいて損はないですね。
