Elementorのレスポンシブ機能で自在にデザインを適用させる方法

どうも、こんにちは。
YUTAROU(@yutarou_sakai)です。

スマホ時代の現代において、ホームページでのレスポンシブ対応は必須になっています。

CSSなどを使ってのレスポンシブ対応は非常に面倒ですが、Elementorなら直感かつ自由にレスポンシブ対応を行うことができます。

しかも、非常にシンプルですので、本記事でElementorのレスポンシブ機能を習得しましょう。

動画もご用意していますので、お好きな方でご覧ください。

Elementorのレスポンシブ機能の使い方

さっそく、Elementorでの基本的なレスポンシブ機能の使い方を見ていきます。

レスポンシブ機能を見るために、２つのカラムを用意し、「見出し」と「画像」を横並びに配置しました。

次に、左メニュー下の「レスポンシブモード」をクリック。

これで「レスポンシブモード」が発動しました。

画面上に、新しいメニューバーが増えているのが分かると思います。

それぞれ「デスクトップ・タブレット・モバイル」の表示を簡単に行うことができます。

このように各デバイスの表示を切り替えながら、直感的にデザインをしていくことが可能です。

画面サイズに応じてElementorでデザインを編集する方法

次に、各デバイスサイズに応じて、デザインをレスポンシブに変更する方法を見ていきましょう。

先ほど、気づいたかも知れませんが、モバイルのみ「見出し」と「画像」の配置が「縦並び」になっています。

ここで、「タブレット」でも「見出し」と「画像」の配置を「縦並び」にしたいと仮定して、画面サイズに応じたデザインの変更方法を解説します。

変更ポイントとしては、「見出しと画像が入っているカラムの横幅が50%だから横並びになっている」という点です。

そのため、タブレットサイズのときに「カラムの横幅を100%」にすれば解決します。

さっそく、タブレット表示で「見出し」が入っているカラムの「カラム幅」を「100%」にしてみましょう。

すると、見出しが入ったカラムが横幅いっぱいに広がり、見出しと画像が縦並びになりました。

しかし、このままでは画像のカラム幅が50%のままですので、こちらも合わせて100%にしましょう。

画像が入ったカラム幅も100%にすることで、見事縦並びに成功しました。

もちろん、デスクトップ表示では横並びのままですので、タブレット表示でのみデザインを適用できたことが分かります。

このようにElementorでは、簡単に画面サイズに応じたレスポンシブ対応をすることができます。

その他のElementorの使い方はこちらの記事にまとめていますので、ぜひご覧ください。