Elementorの使い方9- レスポンシブ機能の設定の仕方

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

Elementorでウェブページを作っていて、
『スマホでは少し別なデザインにしたい』
と思ったことはありませんか?

最近ではスマホユーザーがデスクトップを上回ると言われています。

Elementorは最初からレスポンシブがサポートされており、様々な設定ができます。
この記事ではそれを説明していきます。

Elementorの使い方シリーズから他の記事も見つけられますよ。

レスポンシブのブレークポイントとは

Elementorでレスポンシブのブレークポイントの設定

この画像には2つの項目がハイライトされてます。

  • タブレットのブレークポイント
  • モバイルのブレークポイント

この二つの値を変換することで、いつページがタブレットやモバイルの状態に切り替わるのか設定できます。

三つのモード

Elementorでは画面の幅の大きさによって三つの状態があります。

デスクトップ

ページの幅がタブレットのブレークポイントと同じかそれより大きい場合、ページはデスクトップの状態にあると考えます。

タブレット

ページの幅がモバイルのブレークポイントと同じかそれより大きく、タブレットのブレークポイントより小さいとき、ページはタブレットの状態であると考えます。

モバイル

ページの幅がモバイルのブレークポイントより小さいとき、ページはモバイルの状態にあると考えます。

モバイルやタブレットモードでサイトを編集

Elementorでレスポンシブモードを選択
Elementorでレスポンシブモードを選択、ズーム

このようにElementorのエディターで、左下の電話のアイコンをクリックします。
するとモバイルとタブレットとデスクトップから、どのモードにするか選択できます。
そして画像のようにモバイルを選択すると、現在制作してるページもスマホサイズになるんです。

設定からレスポンシブモードを切り替えることも可能

Elementorのレスポンシブをウィジェットの設定から変換

このようにウィジェットなどの設定画面の中に、小さいデスクトップのアイコンがあるです。これをクリックすると、三つのアイコンリストが出てくるので、設定したいモードをクリックします。
そうすると、画面がそのモードに切り替わります。

デスクトップ以外のモードで、スタイルを編集すると、そのモードだけに反映される

このようにモバイルモードでスタイルを変換しても、デスクトップモードには反映されません。
なのでスマホやタブレットだけでスタイルを変えたい時など、とても便利です。

ページの幅によって要素を隠す

Elementorでブレークポイントで要素を隠す

詳細のレスポンシブタブの所に、三つの設定があります。

  • デスクトップで隠す
  • タブレットで隠す
  • モバイルで隠す

これはそのままで、これらにチェックを入れると要素を隠すことができます。
例えばスマホだけに表示したいバナーなど、デスクトップとタブレットでは隠せるわけです。


レスポンシブは今の時代ウェブサイトに欠かせない要素です。
このようにElementorだと簡単に設定可能です。
是非試してみてくださいね。

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Scroll to Top