WordPressのテーマビルダープラグイン「Elementor」のファンブログ

Elementorでレスポンシブ対応

Share on facebook
Share on twitter
Share on pocket
Share on pinterest
responsive_thumbnail

Elementorでレスポンシブ対応 するには、コツさえ掴めば簡単です!でもデスクトップビューに夢中で忘れがちなスマホビュー。プレビューで切り替えた途端に全然違うレイアウトに・・・結構焦りますよね。スマホビューは編集のコツがありますので、機能の紹介と合わせてご紹介します!

プレビュー画面を切り替えよう

Elementorにはデスクトップの他にタブレット、スマートフォン向けのデザイン を簡単に作成出来る様に、ライブプレビュー画面の切り替え機能があります!

responsive

画面左下のツールバー部分のモニターのアイコン(レスポンシブモード)をクリックすると、それぞれ(デスクトップ・タブレット・モバイル)のビューの編集画面に切り替える事が出来ます。

responsive_sp
スマートフォンの編集画面

responsive_tablet
タブレットの編集画面(タブレットは縦表示)

切り替わるのは編集画面だけじゃない!

レスポンシブモードで切り替えると、各設定項目もスマホ用、タブレット用に切り替わります。

responsive_set

レスポンシブモードでスマートフォンに切り替え、一番の上のロゴ(Your Logo)の画像ウィジェットを見てみます。すると、上の画像の左下の様に、小さなアイコンが表示され、該当のデバイスが水色になります。このアイコンが並んでいる項目はデスクトップ・スマホ・タブレットそれぞれ個別の設定が可能な項目という事になります。

これはウィジェットによっても、個別に設定出来る項目が変わってきます。どの項目が個別設定可能かしっかりと確認してから編集しないと・・・デスクトップのビューに戻った時にデザインが壊れてる!という事もしばしば(実体験)

おじさん
おじさん
実体験ほど役立つな(ぼそっ)

デザインに夢中で項目の設定をバシバシやってると・・・使い慣れていてもたまにやってしまいます(汗)ので、注意しましょう。

カラムの仕組みを理解するのが近道

デスクトップで下の画像の様なページを作りました。この時点ではスマートフォンビューは全く意識していません。

sample_pc

上の画像の構成を図解したのが下の画像になります。

sample_kousei

レスポンシブモードでスマホビューに切り替えてみます。 

sample_sp

すると、なんか崩れているというか、何か変ですよね。何がおきているのか図解してみましょう。

sample_sp2

まず、大きな違いはインナーセクションの左右のカラムが、上下に配置されます。違う言い方をすると、1カラム100%の幅で扱わられる事になります。どうしてもスマートフォンビューでも、カラムを横並びにしたい場合はどうしたら良いでしょうか。

おじさん
おじさん