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

Elementorでホームページを作っているけど、レスポンシブ機能の使い方がわからない…

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

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

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

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

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

クリックできる目次

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

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

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

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

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

Elementorのレスポンシブ機能の使い方:レスポンシブモード

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

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

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

デスクトップ

タブレット

モバイル

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

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

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

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

デスクトップ

タブレット

モバイル

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

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

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

画面サイズに応じてElementorでデザインを編集する方法:カラム幅を調整

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

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

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

画面サイズに応じてElementorでデザインを編集する方法:カラムを縦並びにする

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

デスクトップ

タブレット

モバイル

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

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

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

あわせて読みたい
【保存版】Elementorの使い方をステップ・バイ・ステップで徹底解説 WordPressプラグインのElementorを使ってみたいけど使い方がわからない...。とりあえず基本的な使い方を網羅的に学びたいなぁ。 そんな疑問にお答えします。 僕はElemen...

さいごまでご覧いただきありがとうございます!
定期的にブログの新着記事情報を受け取りませんか?

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

YUTAROUのアバター YUTAROU 副業マーケター

分析と自動化と筋トレが好き|CAグループ会社でマーケター|副業でゆるりとビジネスコミュニティを運営中(https://yb-online.teachable.com/p/circle)

クリックできる目次